一文看懂微信小程序开发该选用什么框架（一）

前言

自 2017-1-9微信小程序诞生以来，历经2年多的迭代升级，现已有数百万小程序上线，而微信小程序开发也成为前端开发中的一种主流且必备的开发技术。同时与之相随的，小程序的开发生态也在蓬勃发展，现主流框架有wepy框架、mpvue框架、taro框架、uni-app框架等框架。

选择多了，问题也就来了，前端人员在开发小程序时，该选用什么框架？

1、原生开发的吐槽点：

• 原生开发对Node、预编译器、webpack支持不好，影响开发效率和工程构建流程。

• 微信定义了一个不伦不类的语法，不如正经学vue、react，学会了全端通用，而不是只为微信小程序。

• vue/react生态里有太多周边工具，可以提高开发效率，比如ide、校验器、三方库。

• 微信的ide和专业编辑器相比实在不好用。

2、选用框架的顾虑：

• 怕第三方框架的性能比不上原生框架。

• 怕有些业务功能或场景使用框架实现不了，只能用原生。

• 怕框架不稳定，维护慢，社区不活跃，坑太多。

本次，Jerome对原生框架，wepy框架、mpvue框架，taro框架、uni-app框架做一次横向对比评测，帮助众多前端开发者做一次选择。

一、底层调用

软件开发，首要目标是向用户提供完整、闭环的业务功能。任何的开发框架，都不能限制底层的api调用。而各种业务功能底层依赖微信官方提供的组件和接口（即微信原生API），所有第三方框架必须是基于微信原生进行的二次封装。

对比如下：

• wepy：未对小程序API作二次封装，API依然使用微信原生的，框架与微信小程序是否新增API无关

• mpvue：支持微信的所有原生组件和api，无限制。同时框架封装了自己的跨端API，使用方式类似mpvue.request()

• taro：支持微信的所有原生组件和api，无限制。同时框架封装了自己的跨端API，使用方式类似Taro.request()，支持Taro 代码与小程序代码混写，可通过混写的方式调用框架尚未封装的小程序新增API

• uni-app：支持微信的所有原生组件和api，无限制。在跨端方面，即便仍然使用微信原生的组件和API，也可以直接跨端编译到App、H5等。使用方法类似uni.request()。同时支持条件编译，可在条件编译代码块中，随意调用各个平台新增的API及组件

因此，在底层调用方面，三方框架均可调用微信小程序的API，完成开发中的业务场景和功能需求，在这个维度上，各框架是无差别的。

二、框架性能

所有的第三方框架，内部都是做了多次封装，但是我们需要知道这些封装是否会增加框架负载，从而影响性能。因此，对各框架做了一次性能测评。

1、测评框架：微信原生框架、wepy框架、mpvue框架、taro框架、uni-app框架。

2、测评内容：开发一个精品微博小程序首页的复杂长列表，支持下拉刷新、上拉加载、点赞等功能。

3、主要测评点：长列表加载、大量点赞时组件数据更新速度。

4、测试环境：测试机型：红米 Redmi 6 Pro、MIUI 10.2.2.0 稳定版（最新版）、微信版本 7.0.3（最新版）

5、测试方式：从页面空列表开始，通过程序自动触发上拉加载，每次新增20条列表，记录单次耗时；固定间隔连续触发 N 次上拉加载，使得页面达到 20*N 条列表，计算这 N 次触发上拉到渲染完成的平均耗时。

6、测试结果如下：

（1）、长列表加载结果

测试结果说明：

以400条微博列表为例，从页面空列表开始，每隔1秒触发一次上拉加载（新增20条微博），记录单次耗时，触发20次后停止（页面达到400条微博），计算这20次的平均耗时，结果微信原生在这20次触发上拉 -> 渲染完成的平均耗时为876毫秒，最快的uni-app是741毫秒，最慢的mpvue是4493毫秒。

A、为何 mpvue/wepy 测试数据不完整?

mpvue、wepy 诞生之初，微信小程序尚不支持自定义组件，无法进行组件化开发；mpvue、wepy 为解决这个问题，将用户编写的Vue组件，编译为WXML中的模板（template)，变通实现了组件化开发能力，提高代码复用性，但如此方案，在页面复杂、组件较多的时，会大量增加页面 dom 节点数量，甚至超出微信的 dom 节点数限制。我们在 测评中发现，页面组件超过500个时，mpvue、wepy 会抛出该异常“dom limit exceeded please check if there's any mistake you've made”并停止渲染，这也就意味着，当页面组件太多时，无法使用这2个框架。

B：为什么测试数据显示uni-app 会比微信原生框架的性能略好呢？

微信原生框架耗时主要在setData调用上，开发者若不单独对代码做优化，则每次都会传递大量数据；而 uni-app、taro 都在调用setData之前自动做diff计算，每次仅传递变动的数据。例如当前页面有20条数据，触发上拉加载时，会新加载20条数据，此时原生框架在执行时，setData会传输40条数据，因此是会有性能影响。

（2）、点赞组件数据更新速度结果

测试结果说明：

wepy/mpvue 测试数据不完整的原因同上，在组件较多时，页面已经不再渲染了

基于微信自定义组件实现组件开发的框架（uni-app/taro），组件数据通讯性能接近于微信原生框架，远高于基于template实现组件开发的框架（wepy/mpvue），因此在组件数据更新性能测评中：微信原生开发>uni-app,taro > wepy > mpvue。

在下期测评中，我们将从开发者的学习使用角度，来对五大微信小程序框架进行测评。