从 2016 年微信小程序内测到现在，各大公司对小程序的业务开发需求越来越大，但是微信的原生工具在实际使用时很不便捷，尤其是业务比较复杂的项目很难通过其进行管理和迭代。
使用原生开发的问题：
小程序本身不支持常用的 css 预编译器
不支持 ES7 以上的高级语法，如 async await 等特性；
不支持工程化，如环境、变量等管理
缺少统一的 request 拦截请求
缺少统一的本地缓存读取管理
目前市面上开源的框架可以帮助我们解决上述问题，有些框架还有比较便捷的脚手架工具、以及支持多端的能力。本文将从业务功能的满足度、接入成本、项目性能、可维护性等多方面对现有框架进行介绍和对比，为大家在项目中选择开源框架时提供一个参考。
1.框架介绍
1.1 Wepy
WePY (发音: /'wepi/)是一款让小程序支持组件化开发的框架，通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化、Promise、Async Functions 的引入等都是为了能让开发小程序项目变得更加简单，高效。
其特点如下图所示：
1.2 Mpvue
Mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，Mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。
主要特性：
彻底的组件化开发能力：提高代码复用性
完整的 Vue.js 开发体验
方便的 Vuex 数据管理方案：方便构建复杂应用
快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload
支持使用 npm 外部依赖
使用 Vue.js 命令行工具 vue-cli 快速初始化项目
H5 代码转换编译成小程序目标代码的能力
1.3 Taro
Taro 是一套遵循 React 语法规范的多端开发解决方案。
1.4 Uni-app
Uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。
1.5 Chamelon
Chameleon/kəˈmiːlɪən/，简写 CML，中文名卡梅龙；中文意思变色龙，意味着就像变色龙一样能适应不同环境的跨端整体解决方案。
主要特性：
目录结构：提供规范化的项目结构，适合于企业级大型应用的开发。
视图层：视图层由 CML 与 CMSS 编写，核心是一个标准响应式数据驱动视图更新。
逻辑层：逻辑层由 javascript 编写，逻辑层将处理数据后自动更新视图，提供视图层的事件响应方法。
多态协议：提供了跨端时各端底层组件与接口统一的解决方案。
规范校验：为了提高开发的效率与代码的可维护性，提供了全面的代码规范与校验。
2.框架选型
2.1 业务功能的满足度
一般公司开发团队对业务功能的需求，有两种：
小程序原生基本业务功能的开发，包括用户登录、内容展示、页面交互、图片文档查看等等
页面开发一版支持微信小程序、百度小程序、H5 或快应用等多端兼容需求
2.1.1 基本业务功能
Wepy、Mpvue、Taro、Uni-app、Chamelon 几种框架已经支持小程序原生的大部分组件、API，在一般业务功能的开发上没有太大的差异性，在新功能的支持力度上略有差异。
从各框架最新版本的更新内容和时间来看，Taro、Uni-app 和 Chameleon 对新功能的支持力度比较好，尤其 Taro 框架支持了小程序原生的写法，这样即使框架不支持的小程序 API 也可以在不修改项目框架的前提下使用。
2.1.2 多端兼容需求
WepyMpvueTaroUni-appChameleon
微信小程序支持支持支持支持支持
支付宝小程序不支持支持支持支持不支持
百度小程序不支持支持支持支持不支持
头条小程序不支持支持支持支持不支持
H5不支持不支持支持支持支持
React Native不支持不支持支持不支持不支持
快应用不支持不支持支持不支持不支持
QQ小程序不支持不支持支持支持不支持
Android原生不支持不支持不支持支持不支持
iOS原生不支持不支持不支持支持不支持
Chameleon Playground App不支持不支持不支持不支持支持
Weex playground App不支持不支持不支持不支持支持
从框架对各端的兼容性来看，Taro 和 Uni-app 对各端的兼容能力较强。
2.2 接入成本
选择框架并接入到团队内，需要两种成本：
代码成本：新项目建立项目模板成本、老项目代码迁移成本
学习成本：团队内的开发人员从 0 到 1 熟练使用框架的成本
2.2.1 Wepy
接入成本
给新起项目提供了 cli 能力：
$ npm install@wepy/cli -g# 全局安装 WePY CLI 工具$ wepy init standard myproj# 使用 standard 模板初始化项目$ cd myproj# 进入到项目目录$ npm install# 安装项目依赖包$ npm run dev# 监听并且编译项目
复制代码
未给老项目迁移提供能力，只能手动迁移代码。
学习成本
Wepy 有一个比较简单的开源文档，Wepy 的语法糖是类 Vue，基本项目结构和原生小程序类似，对熟悉 Vue 和小程序的同学来说学习成本很低。
一个简单的 Wepy 代码示例：
.container { height: 100%;}importwepyfrom'wepy'exportdefaultclassextendswepy.app{ config = {pages: ['pages/index' ],window: {navigationBarTitleText:'日历' } }}
复制代码
2.2.2 Mpvue
接入成本
给新起项目提供了 cli 能力：
# 1. 全局安装 vue-cli$ npm install --global vue-cli@2.9# 2. 创建一个基于 mpvue-quickstart 模板的新项目$ vue init mpvue/mpvue-quickstart my-project# 3. 安装依赖，走你$ cd my-project$ npm install$ npm run dev
复制代码
未给老项目迁移提供能力，只能手动迁移代码。
学习成本
Mpvue 的文档在 2018.8.10 后再也没有更新过，文档的内容较老也比较简单，其语法糖是 Vue，为开发者提供了整体的 Vue 的开发体验，对熟悉 Vue 的同学接入成本较低。
一个简单的 Mpvue 代码示例：
importcardfrom'@/components/card'exportdefault{ data () {return{motto:'Hello miniprograme',userInfo: {nickName:'mpvue',avatarUrl:'http://mpvue.com/assets/logo.png' } } }}.userinfo { display: flex;}
复制代码
2.2.3 Taro
接入成本
给新起项目提供了 cli 能力：
# 使用 npm 安装 CLI$ npm install -g@tarojs/cli# 使用命令创建模板项目$ taro init myApp
复制代码
给老的原生小程序项目提供了代码一键转换的指令：
$ taroconvert
复制代码
学习成本
Taro 有一个完善的开源文档，详细的描述了 Taro 的组件、API 支持情况和使用、进阶指南，Taro 的语法糖是 React，对熟悉 React 同学来说学习成本很低。
一个简单的 Taro 代码示例：
importTaro, { Component }from"@tarojs/taro";import{ View, Button }from"@tarojs/components";exportdefaultclassIndexextendsComponent{constructor(){super(...arguments);this.state = {title:"首页",list: [1,2,3] }; }componentDidMount(){}add =e=>{// dosth }render(){return({this.state.title} ); }}
复制代码
2.2.4 Uni-app
接入成本
给新起项目提供了两种生产项目模板方式：
通过 HBuilderX 可视化界面，在点击工具栏里的文件 -> 新建 -> 项目
通过 vue-cli 命令行：
# 全局安装vue-cli$ npm install -g@vue/cli# 创建uni-app$ vue create -p dcloudio/uni-preset-vue my-project
复制代码
给小程序原生、Wepy、Mpvue 提供了详细的迁移步骤文档。
学习成本
Uni-app 有一个完善的开源文档，其语法糖是 Vue，对熟悉 Vue 的同学来说学习成本很低，在开发工具上官方对 HBuilderX 更友好，对熟悉 HBuilderX 使用的入手成本较低。
一个简单的 Uni-app 代码示例：
{{title}}exportdefault{data(){return{title:'Hello' } } } .content { text-align: center; height: 400upx; }
复制代码
2.2.5 Chameleon
接入成本
给新起项目提供了 cli 能力：
# 全局安装cli$ npm i -g chameleon-tool# 初始化项目$ cml init project
复制代码
给小程序原生、Vue、Weex 提供了 CML 的迁移指南。
学习成本
Chameleon 有一个相对完善的开源文档，其语法糖是类 Vue，对熟悉 Vue 的同学来说学习成本很低。
一个简单的 Chameleon 代码示例：
<!-- 数据绑定与计算属性 -->{{ message }}{{ message2 }}classIndex{ data = {message:'HelloCML', }}exportdefaultnewIndex().class1 { color: #f00;}
复制代码
2.3 项目性能
本文主要研讨的应用方向是微信小程序，所以选型的框架需要对微信小程序的兼容性很高、且产出的项目有较高的性能。多端框架很多都是基于微信小程序的 API 开发的，所以对微信小程序的兼容性都很高，下面我们来看一下一个简单的日历组件应用到各框架产出的微信小程序性能数据对比。
2.3.1 微信原生
小程序包大小：22.868 字节
微信基础库版本：2.6.2 （以下框架相同）
测试数据记录：
内存页面切换耗时启动耗时初次渲染耗时再次渲染耗时数据缓存
252m146ms1163ms26ms94ms0B
244m606ms1293ms38ms60ms0B
256m159ms1293ms26ms131ms0B
235m708ms1403ms49ms58ms0B
245m571ms1163ms32ms56ms0B
2.3.2 Wepy
小程序包大小：131,957 字节
Wepy 版本：1.6.0
测试数据记录：
内存页面切换耗时启动耗时初次渲染耗时再次渲染耗时数据缓存
253m436ms1049ms29ms35ms0B
259m542ms1340ms33ms61ms0B
267m466ms1113ms22ms37ms0B
260m447ms1160ms22ms50ms0B
254m459ms1036ms30ms40ms0B
2.3.3 Mpvue
小程序包大小：197,601 字节
Mpvue 版本：2.0.6
测试数据记录：
内存页面切换耗时启动耗时初次渲染耗时再次渲染耗时数据缓存
225m247ms896ms24ms62ms0B
239m253ms910ms22ms58ms0B
235m446ms1591ms27ms62ms0B
237m269ms979ms21ms60ms0B
243m270ms908ms23ms57ms0B
2.3.4 Taro
小程序包大小：167,080 字节
Taro 版本：1.3.2
测试数据记录：
内存页面切换耗时启动耗时初次渲染耗时再次渲染耗时数据缓存
246m231ms718ms16ms224ms0B
241m297ms1007ms19ms246ms0B
246m256ms868ms16ms288ms0B
242m227ms829ms17ms224ms0B
237m231ms869ms17ms229ms0B
2.3.5 Uni-app
小程序包大小：292,831 字节
Uni-app 版本：2.0.0
测试数据记录：
内存页面切换耗时启动耗时初次渲染耗时再次渲染耗时数据缓存
239m440ms987ms34ms178ms34B
237m529ms1365ms34ms182ms34B
232m531ms1133ms39ms183ms34B
236m487ms1154ms32ms178ms34B
239m486ms1051ms33ms190ms34B
2.3.6 Chameleon
小程序包大小：671,702 字节
Chameleon 版本：1.0.3
测试数据记录：
内存页面切换耗时启动耗时初次渲染耗时再次渲染耗时数据缓存
223m550ms1043ms46ms60ms0B
231m597ms1326ms36ms60ms0B
225m631ms1338ms37ms58ms0B
237m658ms1289ms47ms68ms0B
245m611ms1241ms35ms66ms0B
2.3.7 框架性能 PK (平均值)
包大小：
原生 < Wepy < Taro < Mpvue < Uni-app < Chameleon
微信小程序的性能：
Taro > Mpvue > Uni-app > Wepy > Chamelon > 未优化过的原生代码
框架使用后比原生的性能更好，这简直逆天了，后来研究发现：
微信原生框架耗时主要在 setData 调用上，开发者若不单独优化，则每次都会传递大量数据；而 Uni-app、Taro 等都在调用 setData 之前自动做 diff 计算，每次仅传递变动的数据。
2.4 可维护性
团队选型框架后，最担心的事情就是后期的维护性。在需求开发的过程中，发现框架本身有问题，怎么解决？框架深度使用过程中，突然发现该框架无人维护了，issue 上提交的问题迟迟没人跟进了，怎么办？所以在选型框架中，框架的可维护性是大部分团队所关注的事情。
WepyMpvueTaroUni-appChameleon
Star数188541860521740124846521
社群无论坛、无交流群；只能网搜或者提issues无论坛、无交流群；只能网搜或者提issues有论坛、社区、交流群等，论坛活跃有论坛、社区、交流群等，论坛活跃，交流群多且回复及时官方文档提供了微信、QQ交流群、顺风公鹿等
语言类Vue的语法糖类Vue的语法糖React的语法糖类Vue的语法糖类Vue的语法糖
开源程度完全开源完全开源完全开源半开源完全开源
从框架现有 star 数可以看出：Wepy、Mpvue 和 Taro 的开源关注度比较高，这说明这几个框架的论坛活跃度更高，相关问题的解决方法更多。
从社群活跃度可以看出：Wepy 和 Mpvue 已经很久没人维护了，所以后续的可维护性较差，建议使用其他的框架。
从框架停更的后期维护成本来看：
Wepy、Mpvue、Uni-app、Chameleon 都是类 Vue 的语法糖，其迁移成本略低；而 Taro 是 React 的语法糖，其迁移成本较高；
Wepy、Mpvue、Taro、Chameleon 都是完全开源的，团队可以根据自己需求把代码拷贝出来自己维护；而 Uni-app 是半开源的，团队无法把源代码拷贝出来。
3.总结
通过以上业务功能的满足度、接入成本、项目性能、可维护性等多方面对比，可以看出各个框架在各个方面有不同的优缺点。由于 wepy 和 mpvue 已长期不再维护，不建议团队选择。团队可以根据自己的实际业务需求和内部的技术栈选择，React 系的可以选择 Taro 框架，Vue 系的可以选择 Uni-app 或者 Chameleo
网友评论