目前有多种开发微信小程序的方式,主要有原生(腾讯),wepy(腾讯),mpvue(美团开发近似vue),Taro(O2实验室推出的遵循React规范),对比分析也主要围绕这4种方式
面对4种开发方式,首先是对各种框架进行对比分析,从开发工程化,开发方式,应用状态管理。
首先都需要微信开发者工具来调式,微信小程序本身对工程化几乎没有任何的支持,要原生框架支持工程化的话,需要自己动手搭建很多工程化上的东西,其余三个框架都有自己相对应的 CLI
需要全新学习小程序的书写格式,目前版本模板中支持slot和npm包。不支持css预处理器,但是 vsCode 中 EasyWXLESS
插件可以将less文件自动转换为wxss文件;
需要熟悉 vue 和 wepy 两种语法,支持slot组件内容分发插槽、npm包,css预处理器和状态管理vuex;
需要熟悉vue,目前版本支持 slot、npm包、css预处理器;
采用React语法标准,支持JSX书写,让代码更具表现性,Taro暂不支持直接渲染children。
对于mpvue和taro开发方式上,对vue和react语法的支持程度和差异,具体可以看相对应的官方文档。
没有提供原生的应用状态管理方式,但是可以将 redux or mobx 引入到项目中。 小程序原生提供了一种声明使用全局变量,具体写法可查看官网文件作用域。
可以将 redux or mobx 引入到项目中。
可以直接使用 vuex 做应用状态管理,在用mpvue初始化项目时可以选择是否需要vuex。
支持redux,对于不那么大的应用也提供了全局变量的解决方式。
类型 | 原生 | wepy | mpvue | taro |
---|---|---|---|---|
语法规范 | 小程序规范 | 类vue规范 | vue规范 | react规范 |
模版系统 | 字符串模版 | 字符串模版 | 字符串模版 | JSX |
类型系统 | 不支持 | 业务代码 | 业务代码 | 业务代码 + JSX模版 |
组件规范 | 小程序组件 | 小程序组件 | html标签 + 小程序组件 | 小程序组件 |
样式规范 | wxss | sass,less,styus | sass,less,postcss | sass,less,postcss |
组件化 | 小程序组件化 | 自定义组件化 | vue组件化规范 | react组件化规范 |
多端复用 | 无 | web/H5端 | 微信/ (2.0+ 百度/支付宝/字节跳动小程序) | 微信/百度/支付宝/字节跳动小程序,H5端,移动端(React Native) |
构建方式 | 无 | 内置构建系统 | webpack构建 | 内置构建系统+webpack构建 |
上手成本 | 全新学习 | 熟悉vue+wepy | 熟悉vue | 熟悉react |
状态管理 | 不支持 | redux | vuex | redux |
翻车几率 | 0 | 高 | / | / |
- 原生 一直在更新
- wepy 最后更新日期:2018-05-08 版本:1.7.2
- mpvue 最后更新日期:2019-02-14 版本:2.4.1
- Taro 最后更新日期:2019-05-28 版本:1.3.0
- 原生:小程序完全用框架是不可能的,所以还是需要看原生的基础知识和基础概念
- wepy:由于现在原生支持es6/7,有时候开发效率不如原生,还有学习框架的成本
- mpvue:如果有vue基础,上手很简单,不过只支持小程序,不支持h5;
- Taro:目前多端开发里,支持类型最多的,不过上手难度较其余三种比较大