小程序开源框架选型及原理介绍

目前比较流行的小程序开源框架有京东的Taro、dclound的uni-app（集成mpvue）、美团的mpvue和腾讯的wepy。下面我们就从各方面对比这4个框架。

选型

社区生态

以下数据通过 Github Statistics 获得

维护状态

可以看到uni-app和taro近期还有更新，而wepy和mpvue最新提交已经是几个月前。
在这里插入图片描述
2. Star

截止2021年10月27日，整体情况如下图。从图中可以看到，后起之秀uni-app和taro处于领先地位。
在这里插入图片描述

框架	Star 数量	Star 平均增长量
wepy	21566	11.93
uni-app	34051	28.32
mpvue	20372	15.32
taro	29854	23.01

Issues

issues可以反应社区的活跃程度。可以看到taro的issue遥遥领先，表明taro社区非常活跃。由于Bug标签是用户自己打上的，相对不是那么准确，但也能看出uni-app反馈bug较多。
在这里插入图片描述

框架	Issues 打开/关闭	bug标签打开/关闭
wepy	344 / 1781	9 / 51
uni-app	827 / 1855	24 / 147
mpvue	422 / 1264	3 / 22
taro	850 / 7063	7 / 76

框架能力

	taro	uni-app	mpvue	wepy
语法规范	nerv、react、vue规范	vue规范	vue规范	类vue规范
模版系统	JSX	字符串模版	字符串模版	字符串模版
类型系统	业务代码+jsx模版	业务代码	业务代码	业务代码
组件规范	小程序组件	小程序组件	html标签+小程序组件	小程序组件
样式规范	postcss、sass、less、stylus	postcss、sass、less、stylus	postcss、sass、less	sass、less、stylus
组件化	react、vue组件化	vue组件化	vue组件化	自定义组件化
多端复用	复用为H5	复用为H5	复用为H5	复用为H5
自动构建	内建构建系统+webpack	内建构建系统+webpack	webpack	内建构建系统
上手成本	熟悉react\vue	熟悉vue	熟悉vue	熟悉vue+wepy
数据流管理	redux	vuex	vuex	redux

针对每个场景，都可以用原生写出性能最佳的代码，但是这样ROI太低。框架的优势在于：书写更有效率的代码、拥有更丰富的生态的同时，拥有不错的性能。

从社区生态和框架能力上来看，Taro是最优秀的。

实现原理

Taro 1/2 （重编译时、轻运行时）

为了实现兼容多个小程序，分为两个阶段：

编译阶段：通过babel转换成指定小程序的模板；
运行阶段：通过运行时框架，负责适配各端的底层能力。

这种方案有几个缺点：

JSX 太过灵活，适配成本高。（虽然可以引入react的解析，但Taro怎么能用React的东西「狗头」）。
不⽀持 source-map。因为Taro会对源码进行转换，所以source-map无法起作用。（可以在转换过程中处理，但是成本太高，ROI低）
强绑定React DSL，一旦React有新特性，也需要适配。作为开发者只能升级，才能用新特性。
因为需要频繁操作AST，所以编译速度会更慢。

Taro 3.x （轻编译时，重运行时）

借鉴React和Vue等框架设计，在不同平台中实现render需要的相关API。在小程序端模拟实现 DOM、BOM 相关API ，让前端框架直接运行在小程序环境中，从而达到小程序和 H5 统一的目的。而对于生命周期、组件库、API、路由等差异，通过定义统一标准，各端负责各自实现的方式来进行抹平。
在这里插入图片描述

因为架构上的调整，Taro 3 开始不再跟某一 DSL 强绑定，开发更加灵活，编译速度更加快。

版本区别

	Taro 1/2	Taro 3.x
开发体验	强绑定React DSL，且部分JSX语法不支持（需要hack）	不受DSL限制
性能	应用复杂，页面节点多、大规模数据更新频繁场景下更优	上述场景会薄弱一点，但官方说性能差异不明显。而且也提供了预渲染和虚拟列表组件等解决方案
社区支持力度	Taro 1/2 继续维护，但是人力相对较少	研发重心放在Taro 3，优先落地新特性