真实测评：小程序开源框架选型对

从 2016 年微信小程序内测到现在，各大公司对小程序的业务开发需求越来越大，但是微信的原生工具在实际使用时很不便捷，尤其是业务比较复杂的项目很难通过其进行管理和迭代。

使用原生开发的问题：

1. 小程序本身不支持常用的 css 预编译器
2. 不支持 ES7 以上的高级语法，如 async await 等特性；
3. 不支持工程化，如环境、变量等管理
4. 缺少统一的 request 拦截请求
5. 缺少统一的本地缓存读取管理

目前市面上开源的框架可以帮助我们解决上述问题，有些框架还有比较便捷的脚手架工具、以及支持多端的能力。本文将从 业务功能的满足度、接入成本、项目性能、可维护性 等多方面对现有框架进行介绍和对比，为大家在项目中选择开源框架时提供一个参考。

1. 框架介绍

1.1 Wepy

WePY (发音: /'wepi/) 是一款让小程序支持组件化开发的框架，通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化、Promise、Async Functions 的引入等都是为了能让开发小程序项目变得更加简单，高效。

其特点如下图所示：

1.2 Mpvue

Mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，Mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。

主要特性：

1. 彻底的组件化开发能力：提高代码复用性
2. 完整的 Vue.js 开发体验
3. 方便的 Vuex 数据管理方案：方便构建复杂应用 快捷的
4. webpack 构建机制：自定义构建策略、开发阶段 hotReload
5. 支持使用 npm 外部依赖
6. 使用 Vue.js 命令行工具
7. vue-cli 快速初始化项目 H5
8. 代码转换编译成小程序目标代码的能力

1.3 Taro

Taro 是一套遵循 React 语法规范的多端开发解决方案。

1.4 Uni-app

Uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。

1.5 Chamelon

Chameleon/kəˈmiːlɪən/，简写 CML，中文名卡梅龙；中文意思变色龙，意味着就像变色龙一样能适应不同环境的跨端整体解决方案。

主要特性：

1. 目录结构：提供规范化的项目结构，适合于企业级大型应用的开发。
2. 视图层：视图层由 CML 与 CMSS编写，核心是一个标准响应式数据驱动视图更新。
3. 逻辑层：逻辑层由 javascript编写，逻辑层将处理数据后自动更新视图，提供视图层的事件响应方法。
4. 多态协议：提供了跨端时各端底层组件与接口统一的解决方案。
5. 规范校验：为了提高开发的效率与代码的可维护性，提供了全面的代码规范与校验。

2. 框架选型

2.1 业务功能的满足度

一般公司开发团队对业务功能的需求，有两种：

1. 小程序原生基本业务功能的开发，包括用户登录、内容展示、页面交互、图片文档查看等等
2. 页面开发一版支持微信小程序、百度小程序、H5或快应用等多端兼容需求

2.1.1 基本业务功能

Wepy、Mpvue、Taro、Uni-app、Chamelon 几种框架已经支持小程序原生的大部分组件、API，在一般业务功能的开发上没有太大的差异性，在新功能的支持力度上略有差异。

从各框架最新版本的更新内容和时间来看， Taro、Uni-app 和 Chameleon 对新功能的支持力度比较好，尤其 Taro 框架支持了小程序原生的写法 ，这样即使框架不支持的小程序 API 也可以在不修改项目框架的前提下使用。

2.1.2 多端兼容需求

	Wepy	Mpvue	Taro	Uni-app	Chameleon
微信小程序	支持	支持	支持	支持	支持
支付宝小程序	不支持	支持	支持	支持	支持
百度小程序	不支持	支持	支持	支持	不支持
头条小程序	不支持	支持	支持	支持	不支持
H5	不支持	不支持	支持	支持	支持
React Native	不支持	不支持	支持	不支持	不支持
快应用	不支持	不支持	支持	不支持	不支持
QQ 小程序	不支持	不支持	支持	支持	不支持
Android 原生	不支持	不支持	不支持	支持	不支持
iOS 原生	不支持	不支持	不支持	支持	不支持
Chameleon Playground App	不支持	不支持	不支持	不支持	支持
Weex playground App	不支持	不支持	不支持	不支持	支持

从框架对各端的兼容性来看， Taro 和 Uni-app 对各端的兼容能力较强 。

2.2 接入成本

选择框架并接入到团队内，需要两种成本：

1. 代码成本：新项目建立项目模板成本、老项目代码迁移成本
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 代码示例：

<stylelang="less">
.container{
   
height:100%;
}
</style>

<script>
importwepyfrom&