小程序框架情况调研

本文探索小程序框架和组件库,这里主要指微信小程序,后续不排除可能需要开发支付宝小程序/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. 组件库

名称 github stars 备注
Tencent / weui-wxss 10.0k 微信官方组件库 WeUI 的小程序版本
youzan / vant-weapp 9.7k 有赞移动端 Vue 组件库 Vant 的小程序版本
TalkingData / iview-weapp 4.6k iview 小程序版
meili / minui 3.2k 可通过自有构建工具单独安装单个组件
wux-weapp / wux-weapp 3.4k
weilanwl / ColorUI 4.7k css 库