本文探索小程序框架和组件库,这里主要指微信小程序,后续不排除可能需要开发支付宝小程序/XX 小程序等等,所以多平台多端的兼容性也是一项考察指标。下文列举较为流行的框架和组件库。
1. 基本需求
- 尽量摆脱“微信语法”-WXML、WXSS、WXS。即使微信语法与 mvvm 框架语法类似,但仍免不了学习成本。
- 支持 vue 语法或 react 语法,可快速上手
2. 进阶需求
- 一套代码生成多平台应用
- 支持 npm
- 更多组件库支持
3. 框架对比
名称 |
github stars |
语法规范 |
多平台支持 |
npm |
备注 |
踩坑记录 |
Tencent / wepy |
18.2k |
类 vue,WXML、WXSS、WXS |
微信、支付宝 |
支持 |
支持 ES2015+特性,支持多种编译器,支持多种插件处理,支持 Sourcemap,ESLint 等小程序细节优化 |
1.新版本 2.0 暂不支持支付宝,还是 alpha 版 2.编辑器对.wepy 文件支持不够 |
Meituan-Dianping / mpvue |
17.9k |
vue |
微信、百度、头条、支付宝 |
支持 |
完整的 Vue.js 开发体验 H5 代码转换编译成小程序目标代码的能力 |
1.文档将近一年没有维护 新版本 2.0 没有新文档 2.头条小程序报错 bug,暂未解决 3.百度真机调试困难 |
NervJS / taro |
20.0k |
react |
微信、百度、支付宝、头条、 移动端(React-Native) |
npm/yarn |
完整的 react 开发体验 |
|
didi / chameleon |
5.4k |
类 vue ,CML + CMSS + JS |
微信、百度、支付宝、移动端(Weex)、快应用 qq(alpha) |
支持 |
丰富的官方 api 库、组件库 |
构建工具安装困难 |
dcloudio / uni-app |
9.3k |
vue |
微信、百度、支付宝、头条、 移动端(Weex) |
支持 |
官方组件库、api 库 有专用定制 ide: HBuilder |
|
4. 组件库