前言
前一段时间为了开发新的微信小程序项目，对开源的几大小程序框架进行了调研，汇总了几大框架的相关资料，根据材料对比分析了几大框架优缺点，但是缺少几大框架的对比实例，最近又做了几个各大框架demo对比，本文主要介绍一下各大框架对微信小程序的兼容性和一些性能数据的对比。
实例
微信原生
小程序包大小：22.868 字节
微信基础库版本：2.6.2 （以下框架相同）
测试数据记录：
| 内存 | 页面切换耗时 | 启动耗时 | 初次渲染耗时 | 再次渲染耗时 | 数据缓存 |
|---|---|---|---|---|---|
| 252m | 146ms | 1163ms | 26ms | 94ms | 0B |
| 244m | 606ms | 1293ms | 38ms | 60ms | 0B |
| 256m | 159ms | 1293ms | 26ms | 131ms | 0B |
| 235m | 708ms | 1403ms | 49ms | 58ms | 0B |
| 245m | 571ms | 1163ms | 32ms | 56ms | 0B |
Wepy
小程序包大小：131,957 字节
wepy版本：1.6.0
测试数据记录：
| 内存 | 页面切换耗时 | 启动耗时 | 初次渲染耗时 | 再次渲染耗时 | 数据缓存 |
|---|---|---|---|---|---|
| 253m | 436ms | 1049ms | 29ms | 35ms | 0B |
| 259m | 542ms | 1340ms | 33ms | 61ms | 0B |
| 267m | 466ms | 1113ms | 22ms | 37ms | 0B |
| 260m | 447ms | 1160ms | 22ms | 50ms | 0B |
| 254m | 459ms | 1036ms | 30ms | 40ms | 0B |
使用过程遇到的坑：
1、wepy官网提供的2.x的模板启动报错（无力吐槽-。-）
2、数据绑定方式，需要使用this.$apply()才能生效
this.dateList = dateList
this.$apply()
3、style样式添加变量的方式，1.x的文档没有相关介绍，试了半天方法才正确
style="width: {{dayW}}px;height:20px"
Mpvue
小程序包大小：197,601 字节
mpvue版本：2.0.6
测试数据记录：
| 内存 | 页面切换耗时 | 启动耗时 | 初次渲染耗时 | 再次渲染耗时 | 数据缓存 |
|---|---|---|---|---|---|
| 225m | 247ms | 896ms | 24ms | 62ms | 0B |
| 239m | 253ms | 910ms | 22ms | 58ms | 0B |
| 235m | 446ms | 1591ms | 27ms | 62ms | 0B |
| 237m | 269ms | 979ms | 21ms | 60ms | 0B |
| 243m | 270ms | 908ms | 23ms | 57ms | 0B |
使用过程遇到的坑：
1、mpvue的官方使用度很低了,百度搜索的第一页没有官网地址-。-
2、mpvue的官方文档没有目录，修改模板的时候查相关资料还得全局搜索，很不方便
3、mpvue的模板和原生的区别很大，完全采用的vue的v-bind等相关语法，如果对vue不熟悉的不好进行修改
Taro
小程序包大小：167,080 字节
taro版本：1.3.2
测试数据记录：
| 内存 | 页面切换耗时 | 启动耗时 | 初次渲染耗时 | 再次渲染耗时 | 数据缓存 |
|---|---|---|---|---|---|
| 246m | 231ms | 718ms | 16ms | 224ms | 0B |
| 241m | 297ms | 1007ms | 19ms | 246ms | 0B |
| 246m | 256ms | 868ms | 16ms | 288ms | 0B |
| 242m | 227ms | 829ms | 17ms | 224ms | 0B |
| 237m | 231ms | 869ms | 17ms | 229ms | 0B |
使用过程遇到的坑：
1、类class的方法前几个单词不要是render，否则会按render()函数处理，不返回JSX对象会报错
uni-app
小程序包大小：292,831 字节
uni-app版本：2.0.0
测试数据记录：
| 内存 | 页面切换耗时 | 启动耗时 | 初次渲染耗时 | 再次渲染耗时 | 数据缓存 |
|---|---|---|---|---|---|
| 239m | 440ms | 987ms | 34ms | 178ms | 34B |
| 237m | 529ms | 1365ms | 34ms | 182ms | 34B |
| 232m | 531ms | 1133ms | 39ms | 183ms | 34B |
| 236m | 487ms | 1154ms | 32ms | 178ms | 34B |
| 239m | 486ms | 1051ms | 33ms | 190ms | 34B |
使用过程遇到的坑：
1、官方文档给出的入门指南大部分都是结合HBuildX使用的方法，缺少命令式相关介绍
chameleon
小程序包大小：671,702 字节
chameleon版本：1.0.3
测试数据记录：
| 内存 | 页面切换耗时 | 启动耗时 | 初次渲染耗时 | 再次渲染耗时 | 数据缓存 |
|---|---|---|---|---|---|
| 223m | 550ms | 1043ms | 46ms | 60ms | 0B |
| 231m | 597ms | 1326ms | 36ms | 60ms | 0B |
| 225m | 631ms | 1338ms | 37ms | 58ms | 0B |
| 237m | 658ms | 1289ms | 47ms | 68ms | 0B |
| 245m | 611ms | 1241ms | 35ms | 66ms | 0B |
使用过程遇到的坑：
1、简单复制的代码存在样式问题，相关开发插件比较少
数据汇总 (平均值)
| 框架 | 包大小 | 内存 | 页面切换耗时 | 启动耗时 | 初次渲染耗时 | 再次渲染耗时 | 数据缓存 |
|---|---|---|---|---|---|---|---|
| taro | 167,080 字节 | 242m | 248ms | 858ms | 17ms | 242ms | 0B |
| mpvue | 197,601 字节 | 236m | 297ms | 1057m | 23m | 60m | 0B |
| uni-app | 292,831 字节 | 237m | 495ms | 1138ms | 34ms | 182ms | 34B |
| wepy | 131,957 字节 | 259m | 470ms | 1140m | 27m | 45m | 0B |
| chameleon | 671,702 字节 | 232m | 609ms | 1247ms | 40ms | 62ms | 0B |
| 原生 | 22.868 字节 | 246m | 438ms | 1263ms | 34ms | 80ms | 0B |
就包大小而言：原生 < wepy < taro < mpvue < uni-app < chameleon
就微信小程序的性能而言：优化后的原生代码 > taro > mpvue > uni-app > wepy > chamelon > 未优化过的原生代码
总结
各大框架就性能而言比原生的代码要好一些，这是因为各大框架本身都做了一些性能优化，如this.setData重复值不会重复渲染等
本文只是简单写了一个日历式的页面代码，汇总了各框架对微信小程序的性能数据进行了对比，大家在使用各大框架的时候可以根据自己的业务需求去选择框架，如若微信小程序是主要业务方向，个人建议选择原生或者taro
实例对比代码地址：
本文实例代码参考文章：
