小程序开源框架选型

$npm install@wepy/cli -g# 全局安装 WePY CLI 工具
$wepy init standard myproj# 使用 standard 模板初始化项目
$cd myproj# 进入到项目目录
$npm install# 安装项目依赖包
$npm run dev# 监听并且编译项目

.container{
height:100%;
}



importwepyfrom'wepy'
exportdefaultclassextendswepy.app{
config = {
pages: [
'pages/index'
],
window: {
navigationBarTitleText:'日历'
}
}
}

# 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

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 （以下框架相同）

测试数据记录：

2.3.2 Wepy

小程序包大小：131,957 字节

Wepy 版本：1.6.0

测试数据记录：

2.3.3 Mpvue

小程序包大小：197,601 字节

Mpvue 版本：2.0.6

测试数据记录：

2.3.4 Taro

小程序包大小：167,080 字节

Taro 版本：1.3.2

测试数据记录：

2.3.5 Uni-app

小程序包大小：292,831 字节

Uni-app 版本：2.0.0

测试数据记录：

2.3.6 Chameleon

小程序包大小：671,702 字节

Chameleon 版本：1.0.3

测试数据记录：

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 上提交的问题迟迟没人跟进了，怎么办？所以在选型框架中，框架的可维护性是大部分团队所关注的事情。

从框架现有 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 或者 Chameleon 。

本文转载自公众号贝壳产品技术（ID：beikeTC）。

原文链接：

https://mp.weixin.qq.com/s?__biz=MzIyMTg0OTExOQ==&mid=2247485612&idx=3&sn=2250d82d38a9701d4df4258f68c4fda0&chksm=e8373bdcdf40b2caaf1d387d52afe605eb730da791da070d2034a6c7cf78eefbb8a641bb46ce&scene=27#wechat_redirect