小程序框架选型方案报告

• 目前微信小程序框架：chameleon、Taro、uni-app、mpvue、WePY

生态

1. 开发工具

就开发工具而言 uni-app 应该是一骑绝尘，它的文档内容最为丰富，还自带了 IDE 图形化开发工具，鼠标点点就能编译测试发布。

其它的框架都是使用 CLI 命令行工具，但值得注意的是 chameleon 有独立的语法检查工具，Taro 则单独写了 ESLint 规则和规则集。

在语法支持方面，mpvue、uni-app、Taro 、WePY 均支持 TypeScript，四者也都能通过 typing 实现编辑器自动补全。除了 API 补全之外，得益于 TypeScript 对于 JSX 的良好支持，Taro 也能对组件进行自动补全。

CSS 方面，所有框架均支持 SASS、LESS、Stylus，Taro 则多一个 CSS Modules 的支持。

所以这一轮比拼的结果应该是：

uni-app > Taro > chameleon > WePY、mpvue

image.png

2. 多端支持度

只从支持端的数量来看，Taro 和 uni-app 以六端略微领先（移动端、H5、微信小程序、百度小程序、支付宝小程序、头条小程序），chameleon 少了头条小程序紧随其后。

但值得一提的是 chameleon 有一套自研多态协议，编写多端代码的体验会好许多，可以说是一个能戳到多端开发痛点的功能。uni-app 则有一套独立的条件编译语法，这套语法能同时作用于 js、样式和模板文件。Taro 可以在业务逻辑中根据环境变量使用条件编译，也可以直接使用条件编译文件（类似 React Native 的方式）。

在移动端方面，uni-app 基于 weex 定制了一套 nvue 方案 弥补 weex API 的不足；Taro则是暂时基于 expo 达到同样的效果；chameleon 在移动端则有一套 SDK 配合多端协议与原生语言通信。

H5 方面，chameleon 同样是由多态协议实现支持，uni-app 和 Taro 则是都在 H5 实现了一套兼容的组件库和 API。

mpvue 和 WePY 都提供了转换各端小程序的功能，但都没有 h5 和移动端的支持。

所以最后一轮对比的结果是：

chameleon > Taro、uni-app > mpvue > WePY

image

3. 组件库/工具库/demo

作为开源时间最长的框架，WePY 不管从 Demo，组件库数量 ，工具库来看都占有一定优势。

uni-app 则有自己的插件市场和 UI 库，如果算上收费的框架和插件比起 WePy 也是完全不遑多让的。

Taro 也有官方维护的跨端 UI 库 taro-ui ，另外在状态管理工具上也有非常丰富的选择（Redux、MobX、dva），但 demo 的数量不如前两个。但 Taro 有一个转换微信小程序代码为 Taro 代码的工具，可以弥补这一问题。

而 mpvue 没有官方维护的 UI 库，chameleon 第三方的 demo 和工具库也还基本没有。

所以这轮的排序是：

WePY > uni-app 、taro > mpvue > chameleon

image

4. 接入成本

接入成本有两个方面：

第一是框架接入原有微信小程序生态。由于目前微信小程序已呈一家独大之势，开源的组件和库（例如 wxparse、echart、zan-ui 等）多是基于原生微信小程序框架语法写成的。目前看来 uni-app 、Taro、mpvue 均有文档或 demo 在框架中直接使用原生小程序组件/库，WePY 由于运行机制的问题，很多情况需要小改一下目标库的源码，chameleon 则是提供了一个按步骤大改目标库源码的迁移方式。

第二是原有微信小程序项目部分接入框架重构。在这个方面 Taro 在京东购物小程序上进行了大胆的实践，具体可以查看文章《Taro 在京东购物小程序上的实践》。其它框架则没有提到相关内容。

而对于两种接入方式 Taro 都提供了 taro convert 功能，既可以将原有微信小程序项目转换为 Taro 多端代码，也可以将微信小程序生态的组件转换为 Taro 组件。

所以这轮的排序是：

Taro > mpvue 、 uni-app > WePY > chameleon

流行度

从 GitHub 的 star 来看，mpvue 、Taro、WePY 的差距非常小。从 NPM 和 CNPM 的 CLI 工具下载量来看，是 Taro（3k/week）> mpvue (2k/w) > WePY (1k/w)。但发布时间也刚好反过来。笔者估计三家的流行程度和案例都差不太多。

uni-app 则号称有上万案例，但不像其它框架一样有一些大厂应用案例。另外从开发者的数量来看也是 uni-app 领先，它拥有 20+ 个 QQ 交流群（最大人数 2000）。

所以从流行程度来看应该是：

uni-app > Taro、WePY、mpvue > chameleon

image

5. 开源建设

一个开源作品能走多远是由框架维护团队和第三方开发者共同决定的。虽然开源建设不能具体地量化，但依然是衡量一个框架/库生命力的非常重要的标准。

从第三方贡献者数量来看，Taro 在这一方面领先，并且 Taro 的一些核心包/功能（MobX、CSS Modules、alias）也是由第三方开发者贡献的。除此之外，腾讯开源的 omi 框架小程序部分也是基于 Taro 完成的。

WePY 在腾讯开源计划的加持下在这一方面也有不错的表现；mpvue 由于停滞开发了很久就比较落后了；可能是产品策略的原因，uni-app 在开源建设上并不热心，甚至有些部分代码都没有开源；chameleon 刚刚开源不久，但它的代码和测试用例都非常规范，以后或许会有不错的表现。

那么这一轮的对比结果是：

Taro > WePY > mpvue > chameleon > uni-app

最后补一个总的生态对比图表：

image

官网优势介绍

uniapp 官网 taro 官网

【个人观点】：1. 结合公司现有小程序进行转化，发现 taro 并不能完美支持小程序原生组件与API 文档；2. uniapp 使用的是 vue 语法，taro 使用的是 react 语法，相对来说，vue更易上手。 3. uniapp 社区更为丰富，所以遇到问题后，有强大的后盾支持，能更快速的解决问题。综上，个人认为 uniapp 更适合我们进行快速的切换到多端支持的小程序框架上来。

细化 uniapp

参考：https://uniapp.dcloud.io/README

• 1. uniapp 简介
     uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。
     DCloud公司拥有420万开发者，几十万应用案例、10.5亿手机端用户，数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（详见），腾讯课堂官方为uni-app录制培训课程（详见），开发者可以放心选择。
     DCloud于2012年开始研发小程序技术，于2015年正式商用了自己的小程序，产品名为“流应用”，它不是B/S模式的轻应用，而是能接近原生功能、性能的动态App，并且即点即用。
• 2. uniapp 目录结构
     一个uni-app工程，默认包含如下目录及文件：

目录结构

了解一个项目首先要了解他的目录结构，其次需要了解它的组件，这里重点关注存放小程序组件的地方，这里就可以了解到为什么 uniapp 可以实现多端，并且保证他们的差异化。

wxcomponents 小程序组件支持情况

• 3. uniapp 生命周期
     uniapp 生命周期包括应用生命周期与页面生命周期。
     应用生命周期包括 onLaunch、onShow、onHide、onError、onUniNViewMessage。它仅可在App.vue中监听，在其它页面监听无效。
     页面生命周期包括 onLoad、onShow、onReady、onHide、onUnload、onResize、onPullDownRefresh、onReachBottom、onTabItemTap、onShareAppMessage、onPageScroll、onNavigationBarButtonTap、onBackPress、onBackPress、onNavigationBarSearchInputChanged、onNavigationBarSearchInputConfirmed、onNavigationBarSearchInputClicked。其中最后5个生命周期函数在微信小程序中是没有的。
• 4. uniapp 路由
     uni-app 有两种页面路由跳转方式：使用navigator组件跳转、调用API跳转。
• 5. uniapp 页面样式与布局
     基本与小程序样式布局一致，只是uni-app 提供内置 CSS 变量

CSS变量	描述	App	小程序	H5
--status-bar-height	系统状态栏高度	系统状态栏高度、nvue注意见下	25px	0
--window-top	内容区域距离顶部的距离	0	0	NavigationBar 的高度
--window-bottom	内容区域距离底部的距离	0	0	TabBar 的高度

用法示例：

<template>
    <view>
        <view class="status_bar">
            <!-- 这里是状态栏 -->
        </view>
        <view> 状态栏下的文字 </view>
    </view>
</template>    
<style>
    .status_bar {
        height: var(--status-bar-height);
        width: 100%;
    }
</style>

• 6. uniapp 拓展能力
     1）uniapp 在支持绝大部分 ES6 API 的同时，也支持了 ES7 的 await/async。
     2）uniapp 支持使用npm安装第三方包。npm 号称世界上最大的插件包管理器，这使得 uniapp的插件非常的丰富。
     3）uniapp 支持 TypeScript 开发。
     4）uniapp 支持在 App 和 小程序 中使用小程序自定义组件。

优秀测评文档

1. 跨端框架深度评测：微信原生、wepy、mpvue、uni-app、taro、chameleon

2. 深度横评对比