原生开发(不推荐)
原生开发的一些缺陷:
- 不能直接使用Less/Sass/Stylus等预编译CSS
- ES新标准支持度太低,比如不支持Asncy/Await(ES6/ES7就是那么尴尬,NodeJS对于ES的标准支持甚至还不如小程序)
- 虽然支持Promise,但官方的API返回结果并不是Promise,依然是Callback回调函数
- 没有状态管理,参考Vuex和Redux
- 没有双向数据绑定(严格说这不算是一个缺陷,主要是出于性能的考虑)
- 没有过滤器(LinUI使用wxs实现了一些主流过滤器,但官方的支持显然会更加方便)
- 强制将WXSS、WXML和JS代码分离到3个不同的文件中
这些缺点让习惯了现代化前端开发方式的开发者写起代码来并不是那么舒服。那为什么现在会出现如此多的第三方开发框架呢?除了以上原生小程序语法缺陷外,还有一些其他的原因:
- 小程序已不再特别指代微信小程序,现在还有支付宝/百度/头条小程序。开发者可能有多端开发小程序的需求,希望让一份代码能够在多端运行,这是一个很直接述求
- 一些开发者希望使用Vue和React来开发小程序
uni-app(推荐)
DCloud出品,GitHub Stars:19.8k +
uni-app 是一个使用 Vue.js
开发小程序、H5、App的统一前端框架。
特点:
- 开发者和案例更多:HBuilder装机量470万台,开发者社区月活百万,70多个QQ微信群承载10万人。案例众多,uni统计月活8.4亿(详见)
- 性能更高(见评测)
- 更丰富的周边生态,插件市场数千款插件
- 提供比小程序原生开发更好的开发体验、更高的工程化效率
- 跨端抹平度更完善,且各端特色发挥更灵活,可真正实现一套代码多端覆盖,无需各端多头维护升级
- 权威认可:阿里小程序官方工具内置uni-app(详见)、腾讯课堂官方自制uni-app培训视频(详见)
WePY
官方出品,GitHub Stars:20k +
WePY (发音: /‘wepi/)是一款让小程序支持组件化开发的框架,通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化,Promise,Async Functions 的引入都是为了能让开发小程序项目变得更加简单,高效。
特性:
- 类 Vue 开发风格
- 支持自定义组件开发
- 支持引入 NPM 包
- 支持 Promise
- 支持 ES2015+ 特性,如 Async Functions
- 支持多种编译器,Less/Sass/Stylus/PostCSS、Babel/Typescript、Pug
- 支持多种插件处理,文件压缩,图片压缩,内容替换等
- 支持 Sourcemap,ESLint 等
- 小程序细节优化,如请求列队,事件优化等
Mpvue
美团出品,GitHub Stars:19.6K +
mpvue 是一个使用 Vue.js 开发小程序的前端框架,目前支持 微信小程序
、百度智能小程序
,头条小程序
和 支付宝小程序
。 框架基于 Vue.js
,修改了的运行时框架 runtime 和代码编译器 compiler 实现,使其可运行在小程序环境中,从而为小程序开发引入了 Vue.js
开发体验。
特性:
- 彻底的组件化开发能力:提高代码复用性
- 完整的
Vue.js
开发体验 - 方便的
Vuex
数据管理方案:方便构建复杂应用 - 快捷的
webpack
构建机制:自定义构建策略、开发阶段 hotReload - 支持使用 npm 外部依赖
- 使用
Vue.js
命令行工具 vue-cli 快速初始化项目 - H5 代码转换编译成小程序目标代码的能力
kbone
官方出品,GitHub Stars:2.7K +
kbone 是一个致力于微信小程序和 Web 端同构的解决方案。
特性:
- 大部分流行的前端框架都能够在 kbone 上运行,比如 Vue、React、Preact 等。
- 支持更为完整的前端框架特性,因为 kbone 不会对框架底层进行删改(比如 Vue 中的 v-html 指令、Vue-router 插件)。
- 提供了常用的 dom/bom 接口,让用户代码无需做太大改动便可从 Web 端迁移到小程序端。
- 在小程序端运行时,仍然可以使用小程序本身的特性(比如像 live-player 内置组件、分包功能)。
- 提供了一些 Dom 扩展接口,让一些无法完美兼容到小程序端的接口也有替代使用方案(比如 getComputedStyle 接口)。