小程序框架选型方案报告

• 目前微信小程序框架：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

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

【个人观点】：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 可以实现多端，并且保证他们的差异化。

• 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 变量

用法示例：

<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. 深度横评对比