文 / 李艺 2020年02月08日 开发微信小程序离不开一个称手的 UI 框架, 有了这个可以事半功倍, 特别对于程序员出身不太会美工的开发者 尤其有用 这些框架,单个组件拿出来展示,可能效果都很好, 色调整体不搭配,或者程序卡顿。 小程序还有内存限制, 用户体验是微信很在意的一件事情。 所以,在 ui 框架的选择上, 第一是性能,第二才是效果。 作者在一篇文章里看到 6 个最优秀的微信小程序 UI 类库 weui、vant、iview、minUi、wux、colorUi 这 6 个类库都在微信上架了示例小程序, 都可以在手机上直接扫码体验。 6、colorui 颜色艳丽,组件丰富,在组件的收纳上可谓不拘一格。 龚自珍有诗云,“不拘一格降人才”, 该框架是“不拘一格纳组件”。 这个也好办,可以只引用那一个组件, 如果内存允许的话,运行效果上还 ok 的话 参考链接 6个最优秀的微信小程序UI组件库 https://www.jianshu.com/p/4182f4a18cb6
框架 小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。 整个小程序框架系统分为两部分:逻辑层(App Service)和 视图层(View)。 逻辑层 App Service 小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。 注意:小程序框架的逻辑层并非运行在浏览器中,因此 JavaScript 在 web 中一些能力都无法使用,如 window,document 等 一、小程序生命周期 每个小程序都需要在 app.js 七、页面路由 在小程序中所有页面的路由全部由框架进行管理。 八、页面栈 框架以栈的形式维护了当前的所有页面。 = 2rpx iPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx 建议: 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
今天我们就来盘点下我们开发小程序的时候经常使用的开发框架。 mpvue 美团技术团队开源的小程序框架,一款基于vue.js开发的框架。它支持H5和小程序代码的共用,基于vuex的状态管理让它非常适合处理一些复杂的业务逻辑。 Taro 它是京东团队基于react框架开发的一款小程序框架。同样地,它也是一份代码多端运行,它可以支持多个平台的小程序,并且因为是基于react开发的,它也支持生成react native本地应用。 因为有着"流应用"的开发经验,所以该团队对于小程序的开发是非常擅长的。 wepy 最早的小程序框架之一,提出的预编译思想被很多框架所借鉴。 引入了es6之后的很多语法,同时它是支持typescript语法的。提供了命令行工具,可以非常方便地搭建初始化项目。 WMPF 微信推出的小程序硬件框架。
| 导语 前端的框架太多让人眼花缭乱,很多相似的地方,优秀的地方大家都会借鉴,同时又会有各自的一些特点。小程序也好,其他框架也好,理解他们的设计缘由、实现原理,还是能学到很多很多东西的。 而这样完整的一套框架,基本上都是通过小程序的基础库来完成的。 小程序的基础库 小程序的基础库是 JavaScript 编写的,它可以被注入到渲染层和逻辑层运行。 Exparser 框架 Exparser 是微信小程序的组件组织框架,内置在小程序基础库中,为小程序的各种组件提供基础的支持。 结束语 这节里大概讲了小程序设计中比较重要的一个模型——双线程,关于双线程的出现、设计、数据通信,到基础库、Exparser 框架,都是一个个相关而又相互影响的选择。 关于小程序的底层框架设计,其实还涉及更多更多我们未能一时半会掌握完的内容,自定义组件、原生组件,还有他们做了很多的性能优化工作,都不是只言片语能讲完的。我们能做的,就是多去思考。
小程序也好,其他框架也好,理解他们的设计缘由、实现原理,还是能学到很多很多东西的。 一切始于双线程 --- 技术选型 上一节《小程序的诞生》中,我们也提到了小程序的双线程设计。 而这样完整的一套框架,基本上都是通过小程序的基础库来完成的。 小程序的基础库 小程序的基础库是 JavaScript 编写的,它可以被注入到渲染层和逻辑层运行。 这样可以: 降低业务小程序的代码包大小 可以单独修复基础库中的 Bug,无需修改到业务小程序的代码包 Exparser 框架 Exparser 是微信小程序的组件组织框架,内置在小程序基础库中,为小程序的各种组件提供基础的支持 关于基础库和 Exparser 框架,更多的也可以参考:《小程序开发指南》 结束语 --- 这节里大概讲了小程序设计中比较重要的一个模型——双线程,关于双线程的出现、设计、数据通信,到基础库、Exparser 关于小程序的底层框架设计,其实还涉及更多更多我们未能一时半会掌握完的内容,自定义组件、原生组件,还有他们做了很多的性能优化工作,都不是只言片语能讲完的。我们能做的,就是多去思考。
由于mpvue框架是完全基于Vue框架的(重写了其runtime和compiler) 运行时框架 runtime 和代码编译器 compiler 实现 mp:mini program 的缩写 mpvue px2rpx-loader 样式转化插件 mpvue-quickstart mpvue-quickstart mpvue-simple 辅助 mpvue 快速开发 Page / Component 级小程序页面的工具 image.png https://wendux.github.io/dist/#/doc/flyio/readme vuex的定义 Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式 集中存储和管理应用的所有组件的状态
Anim小程序开发框架 介绍 Anim 框架是基于原生小程序 Mina 框架开发的,采用 rollup 打包,只需要引入 anim.js 即可快速使用。 特点: 基于小程序 runtime 的增强型开发框架,无需引入各类编译环境,开箱即用。 可兼容原生使用,无需对项目进行大改,按需使用即可。 补充多种原生小程序开发框架缺失功能,提高大型工程化项目的可维护性,让开发更省心。 引入压缩后的文件大小不到 10 kb。 # 使用 # 普通引入 通过 CDN 下载后,放置到小程序项目内部任意地方。 npm 方式引入 正在开发小程序 npm 方式引入。 $route.query) } }) # 突破小程序 10 层限制 通过 Anim 维护的路由栈,还可以突破 10 层限制,超过十层路由时自动通过 Redirect 方法来进行路由跳转。
最近一直在开发微信小程序,经过几个版本的迭代开发,代码终于能够达到框架级别,动态配置。除了界面有些寒酸以外,功能上还是挺完备的。 ? 不仅如此,这套框架还内含近200个API调用。参考下面的API列表页面 ? 打开其中一个,可以看到某个API的具体调用方式,点击“测试”按钮,返回结果如下。 ? ? 最后炫耀下,用这套框架做了下面这些小程序,非常高效。 ? 同时,也不需担心不同文件夹中的文件复制问题。例:联系我们这个模块(4个文件)有改动时,如保同步至其他小程序里? 使用下面这个小助手就可以,完美解决了文件复制问题 ? 这套框架还有另一个特点,就是兼容QQ小程序,代码需要变动的很小。即使有差异的地方,只需按照如下做差异化即可。 ? 以上介绍的是小程序的前端框架,后端提供标准的WebAPI输出,支持所有编程语言调用。 ? 扫描下面小程序,可以看框架效果图 ?
小程序与 Flutter 最密切关联还是在渲染优化上,先来看看整个框架:在这个架构下,我们就将 Layout 层的 LV-CPP 专门的作为小程序的 UI 体系处理器,将 UI 信息布局计算好再提交给抽象的后端去渲染 ,LV-CPP 作为小程序的框架和渲染器的中间层,集中的在 C++ 层去处理与 Web 相关的复杂特性。 通过结合 Flutter 和 LV-CPP,我们把实现代码收敛在 C++ 和 Dart 上,进一步简化了基于小程序技术栈实现跨平台业务开发的框架维护成本。 再来看看各家厂商是如何开展的:京东:把Flutter扩展到微信小程序端的探索京东发起了Flutter_mp的开源项目,此框架主要做到两件事情:1.需要根据Flutter生成相关的小程序wxml模板文件。 构建(XML),兼容互联网主流小程序技术,可采用Vue、react基础上的DSL框架。
——阿基米德 分享一个基于 Vue 3 的小程序框架 https://vuemini.org/ https://github.com/vue-mini/vue-mini Vue Mini 是一个基于 Vue 3 的小程序框架,它能让你用组合式 API 写小程序。 与某些小程序开发方案不同的是 Vue Mini 核心仅仅是一个轻量的运行时库,它既不依赖任何编译步骤,也不涉及任何 Virtual DOM。 并且 Vue Mini 从一开始就被设计为能跟小程序原生语法协同工作,你甚至能在同一个页面或组件内混用原生语法与 Vue Mini,这能让你很轻松的将其整合进既有项目中。 当然,你也能完全使用 Vue Mini 开发一个小程序。 Vue Mini 仅聚焦于小程序逻辑部分,也就是 JS 部分,它并不影响小程序的模版、样式及配置。
此类方案很多,我将这些方案称为“小程序开发框架”。 一、小程序开发框架比对 最近花了点时间调研了一下小程序的各个框架。 框架的问题 了解过小程序的同学应该都知道,小程序本身其实可以看做是特殊的 web 应用。 小程序的开发语言语法其实就可以看做是定制化的 js、css、html。 也就是说,小程序本身就是对 web 应用的二次封装。 而各大框架又是在小程序开发语法的基础上再一次进行封装。 一旦框架没有人维护了,使用这些框架开发小程序应用的开发者和公司就会很尴尬了,小程序的新功能无法使用,框架有 bug 也无人修复。 6.长期应用,可能存在很多很多年。 上面这些因素很多时候往往是重合的,这就需要开发者们自己去权衡利弊了,慎重做出选择。
部门最近有开发小程序的需求,需要做一些小程序的调研。通过研读小程序官网文档和收集流行小程序框架的耗时数据,分析主流小程序框架的性能,我获得了一些收获。 这里跟大家一起探讨下如何分析小程序框架的性能以及如何选择合适自己的小程序框架。收集数据使用的小程序框架不是最新版本,数据仅作为参考。1. 在使用小程序框架的时候,小程序框架会在操作触发更新到setData调用之间,执行小程序框架自己的运行时代码,所以对比小程序框架运行时数据的比较合适的口径是,触发更新时间-setData回调时间。 框架性能数据对比 taro, remax, kbone 是重运行时小程序框架,编译出来的包较大,因为要实现一层兼容web的运行时环境,对比uniapp, chameleon这些重编译时的框架整体的性能损耗比较大 小结 通过收集的性能数据可以知道,重编译时的小程序框架综合性能上远远优于重运行时的框架。 在数据量不大的情况下,重运行时框架的各种耗时都在比较可以接受的范围内。
小程序的 WXML 语言提供各种页面标签。下面,对home.wxml改造一下,加上两个最常用的标签。 如果缺少闭合标记,小程序编译时会报错。 由于我们还没有为页面添加任何样式,所以页面的渲染效果跟上一节是一样的。后面添加样式时,大家就可以看到标签的巨大作用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。 微信小程序配置npm (安装完成NodeJS 重新启动一下小程序开发工具) 1.在小程序的一个根目录文件夹上右击 选择在终端打开 ? 2.输入 cd.. 回退到项目的根目录 ? 6.我以安装 lin-ui为例子 接着键入命令 npm install lin-ui ? 7.最后选择 工具->选中构建npm ? ? 8.安装lin-ui 成功.
这里是「小程序问答」栏目的第 6 期 本周,斗图必备的「鬼畜表情包」小程序获得了知晓程序 · MINA 奖。本周还有什么新上的小程序值得玩?「晓榜」给大家一口气推荐了 10 个。 回到本期的「小程序问答」,我们解答了以下两个重要问题: 1. 我在用小程序的时候,出现了无法载入的情况,页面一片空白,这是怎么回事? 如果你的小程序的网络请求代码是这样的,那么 Android 用户就无法正常使用你的小程序了: 有这几个解决办法: 将判断状态码的符号由 === 改为 ==,即不再判断二者的数据类型。 这样,无论是 Android 还是 iOS,你的小程序都能正常访问网络了。 2. 请问有没类似「汽车之家」那样,介绍汽车的小程序? 当然有。 本文由知晓程序原创出品,关注微信号 zxcx0101,可获得以下内容和服务: 在微信后台回复「问答」,获取小程序问答往期文章。 在微信后台回复任意关键词,还能获得相关小程序推荐,赶紧试试吧!
微信小程序安装 WePY框架 我们在做传统的 Web 开发,会使用到许多框架来提升工作效率,比如:Laravel、Yii等,同样我们开发小程序也应该会使用小程序的一些框架,而 WePY则是专门为小程序而生 ,由腾讯团队研发 让小程序支持组件化开发的框架,一个最受欢迎的小程序框架. 指令自动编译生成,请不要直接修改该目录下的文件) src 目录 代码编写的目录(该目录为使用WePY后的开发目录) 源码文件 src/app.wpy 目录 项目入口文件 src/pages 目录 存放小程序页面 src/components 目录 存放小程序组件 src/mixins 目录 存放 Mixin 文件 node_modules 目录 NPM 依赖模块 src/index.template.html src/components 存放小程序组件 src/mixins 存放 Mixin 文件 node_modules NPM 依赖模块 src/index.template.html
WebStorm具有对JavaScript,HTML, CSS及其现代替代品以及Angular或React等框架的高级支持。 WebStorm集成了各种Web开发工具和版本控制系统。 提供JavaScript,Node.js,ECMAScript 6,TypeScript,CoffeeScript和Dart以及HTML,CSS,Less,Sass和Stylus的编码帮助。 支持现代框架:React,Angular,AngularJS,Vue.js,Express等。 用于客户端代码和Node.js的内置调试器。 颜色方案设置下的“语言默认值”部分 小程序框架wepy 安装 wepy 命令行工具。 npm install wepy-cli -g 在开发目录生成开发DEMO。 5 small 程序入口app.wpy <style type="less"> /** less **/ </style> <script> import wepy from 'wepy'; export
1.首先下载小程序开发工具 2.小程序中的wxml就相当于html , wxss就相当于css 3.布局和html布局几乎一样 4.宽度使用百分比 5.input框里的文字上下居中是用padding撑出来的 6.最下面的文字靠右,view相当于一个块元素,设定宽度后,text-align右对齐 简单的测试界面如图 ?
一、整体认识小程序框架 小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。 整个小程序框架系统分为两部分:逻辑层(App Service)和 视图层(View)。 1.3、基础组件 框架 提供了一套基础的组件,这些组件自带微信风格的样式以及特殊的逻辑,开发者可以通过组合基础组件,创建出强大的微信小程序 。 , 最常见的像素单位是px 在小程序开发中推荐使用 rpx这种响应式的像素单位进行开发 如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px ,增加了开发效率高,但是由于weex坑比较多,建议还是使用局部渲染优化; 4、通用前端技术栈,学习成本更低 5、支持vue语法,微信小程序API 6、内嵌mpvue 7、开发生态,组件更丰富 8、支持通过
标题图 查看官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/ 前言: 学习微信小程序应该不怎么难吧~下面我来记录一下学习笔记 ,在学微信小程序的时候,如果你有html+css+javascript的基础,那么你就很快地上手掌握的。 下面提供微信小程序官方地址:https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html 下面一起学一学,微信小程序的框架吧 正文: 微信小程序的文件结构,有一个描述整体的app和描述多个页面的文件组合在一起的。给大家看一下打开微信小程序一般由什么: ? 示意图 一个文件项目中主体有 app.js 为小程序的逻辑代码 app.json 为小程序的公共设置 app.wxss 为小程序的样式 一个文件中如logs,index等,一般都有 xxx.js 页面逻辑代码如