從 2016 年微信小程序內(nèi)測到現(xiàn)在近她，各大公司對小程序的業(yè)務開發(fā)需求越來越大，但是微信的原生工具在實際使用時很不便捷坡脐，尤其是業(yè)務比較復雜的項目很難通過其進行管理和迭代赐俗。
使用原生開發(fā)的問題：
小程序本身不支持常用的 css 預編譯器
不支持 ES7 以上的高級語法檩电，如 async await 等特性；
不支持工程化挡篓，如環(huán)境捅暴、變量等管理
缺少統(tǒng)一的 request 攔截請求
缺少統(tǒng)一的本地緩存讀取管理
目前市面上開源的框架可以幫助我們解決上述問題恬砂，有些框架還有比較便捷的腳手架工具、以及支持多端的能力蓬痒。本文將從業(yè)務功能的滿足度泻骤、接入成本、項目性能梧奢、可維護性等多方面對現(xiàn)有框架進行介紹和對比狱掂，為大家在項目中選擇開源框架時提供一個參考。
1.框架介紹
1.1 Wepy
WePY (發(fā)音: /'wepi/)是一款讓小程序支持組件化開發(fā)的框架亲轨，通過預編譯的手段讓開發(fā)者可以選擇自己喜歡的開發(fā)風格去開發(fā)小程序趋惨。框架的細節(jié)優(yōu)化惦蚊、Promise器虾、Async Functions 的引入等都是為了能讓開發(fā)小程序項目變得更加簡單，高效蹦锋。
其特點如下圖所示：
1.2 Mpvue
Mpvue 是一個使用 Vue.js 開發(fā)小程序的前端框架兆沙。框架基于 Vue.js 核心莉掂，Mpvue 修改了 Vue.js 的 runtime 和 compiler 實現(xiàn)葛圃，使其可以運行在小程序環(huán)境中，從而為小程序開發(fā)引入了整套 Vue.js 開發(fā)體驗。
主要特性：
徹底的組件化開發(fā)能力：提高代碼復用性
完整的 Vue.js 開發(fā)體驗
方便的 Vuex 數(shù)據(jù)管理方案：方便構建復雜應用
快捷的 webpack 構建機制：自定義構建策略装悲、開發(fā)階段 hotReload
支持使用 npm 外部依賴
使用 Vue.js 命令行工具 vue-cli 快速初始化項目
H5 代碼轉換編譯成小程序目標代碼的能力
1.3 Taro
Taro 是一套遵循 React 語法規(guī)范的多端開發(fā)解決方案昏鹃。
1.4 Uni-app
Uni-app 是一個使用 Vue.js 開發(fā)跨平臺應用的前端框架。
1.5 Chamelon
Chameleon/k??mi?l??n/诀诊，簡寫 CML洞渤，中文名卡梅龍；中文意思變色龍属瓣，意味著就像變色龍一樣能適應不同環(huán)境的跨端整體解決方案载迄。
主要特性：
目錄結構：提供規(guī)范化的項目結構，適合于企業(yè)級大型應用的開發(fā)抡蛙。
視圖層：視圖層由 CML 與 CMSS 編寫护昧，核心是一個標準響應式數(shù)據(jù)驅動視圖更新。
邏輯層：邏輯層由 javascript 編寫粗截，邏輯層將處理數(shù)據(jù)后自動更新視圖惋耙，提供視圖層的事件響應方法。
多態(tài)協(xié)議：提供了跨端時各端底層組件與接口統(tǒng)一的解決方案熊昌。
規(guī)范校驗：為了提高開發(fā)的效率與代碼的可維護性绽榛，提供了全面的代碼規(guī)范與校驗。
2.框架選型
2.1 業(yè)務功能的滿足度
一般公司開發(fā)團隊對業(yè)務功能的需求婿屹，有兩種：
小程序原生基本業(yè)務功能的開發(fā)灭美，包括用戶登錄、內(nèi)容展示昂利、頁面交互届腐、圖片文檔查看等等
頁面開發(fā)一版支持微信小程序、百度小程序蜂奸、H5 或快應用等多端兼容需求
2.1.1 基本業(yè)務功能
Wepy犁苏、Mpvue、Taro扩所、Uni-app傀顾、Chamelon 幾種框架已經(jīng)支持小程序原生的大部分組件、API碌奉，在一般業(yè)務功能的開發(fā)上沒有太大的差異性短曾，在新功能的支持力度上略有差異。
從各框架最新版本的更新內(nèi)容和時間來看赐劣，Taro嫉拐、Uni-app 和 Chameleon 對新功能的支持力度比較好，尤其 Taro 框架支持了小程序原生的寫法魁兼，這樣即使框架不支持的小程序 API 也可以在不修改項目框架的前提下使用婉徘。
2.1.2 多端兼容需求
WepyMpvueTaroUni-appChameleon
微信小程序支持支持支持支持支持
支付寶小程序不支持支持支持支持不支持
百度小程序不支持支持支持支持不支持
頭條小程序不支持支持支持支持不支持
H5不支持不支持支持支持支持
React Native不支持不支持支持不支持不支持
快應用不支持不支持支持不支持不支持
QQ小程序不支持不支持支持支持不支持
Android原生不支持不支持不支持支持不支持
iOS原生不支持不支持不支持支持不支持
Chameleon Playground App不支持不支持不支持不支持支持
Weex playground App不支持不支持不支持不支持支持
從框架對各端的兼容性來看，Taro 和 Uni-app 對各端的兼容能力較強。
2.2 接入成本
選擇框架并接入到團隊內(nèi)盖呼，需要兩種成本：
代碼成本：新項目建立項目模板成本儒鹿、老項目代碼遷移成本
學習成本：團隊內(nèi)的開發(fā)人員從 0 到 1 熟練使用框架的成本
2.2.1 Wepy
接入成本
給新起項目提供了 cli 能力：
$ npm install@wepy/cli -g# 全局安裝 WePY CLI 工具$ wepy init standard myproj# 使用 standard 模板初始化項目$ cd myproj# 進入到項目目錄$ npm install# 安裝項目依賴包$ npm run dev# 監(jiān)聽并且編譯項目
復制代碼
未給老項目遷移提供能力，只能手動遷移代碼几晤。
學習成本
Wepy 有一個比較簡單的開源文檔约炎，Wepy 的語法糖是類 Vue，基本項目結構和原生小程序類似蟹瘾，對熟悉 Vue 和小程序的同學來說學習成本很低圾浅。
一個簡單的 Wepy 代碼示例：
.container {? height: 100%;}importwepyfrom'wepy'exportdefaultclassextendswepy.app{? config = {pages: ['pages/index'? ? ],window: {navigationBarTitleText:'日歷'? ? }? }}
復制代碼
2.2.2 Mpvue
接入成本
給新起項目提供了 cli 能力：
# 1. 全局安裝 vue-cli$ npm install --global vue-cli@2.9# 2. 創(chuàng)建一個基于 mpvue-quickstart 模板的新項目$ vue init mpvue/mpvue-quickstart my-project# 3. 安裝依賴，走你$ cd my-project$ npm install$ npm run dev
復制代碼
未給老項目遷移提供能力憾朴，只能手動遷移代碼狸捕。
學習成本
Mpvue 的文檔在 2018.8.10 后再也沒有更新過，文檔的內(nèi)容較老也比較簡單众雷，其語法糖是 Vue灸拍，為開發(fā)者提供了整體的 Vue 的開發(fā)體驗，對熟悉 Vue 的同學接入成本較低砾省。
一個簡單的 Mpvue 代碼示例：
importcardfrom'@/components/card'exportdefault{? data () {return{motto:'Hello miniprograme',userInfo: {nickName:'mpvue',avatarUrl:'http://mpvue.com/assets/logo.png'? ? ? }? ? }? }}.userinfo {? display: flex;}
復制代碼
2.2.3 Taro
接入成本
給新起項目提供了 cli 能力：
# 使用 npm 安裝 CLI$ npm install -g@tarojs/cli# 使用命令創(chuàng)建模板項目$ taro init myApp
復制代碼
給老的原生小程序項目提供了代碼一鍵轉換的指令：
$ taroconvert
復制代碼
學習成本
Taro 有一個完善的開源文檔鸡岗，詳細的描述了 Taro 的組件、API 支持情況和使用纯蛾、進階指南纤房，Taro 的語法糖是 React纵隔，對熟悉 React 同學來說學習成本很低翻诉。
一個簡單的 Taro 代碼示例：
importTaro, { Component }from"@tarojs/taro";import{ View, Button }from"@tarojs/components";exportdefaultclassIndexextendsComponent{constructor(){super(...arguments);this.state = {title:"首頁",list: [1,2,3]? ? };? }componentDidMount(){}add =e=>{// dosth? }render(){return({this.state.title}? ? );? }}
復制代碼
2.2.4 Uni-app
接入成本
給新起項目提供了兩種生產(chǎn)項目模板方式：
通過 HBuilderX 可視化界面，在點擊工具欄里的文件 -> 新建 -> 項目
通過 vue-cli 命令行：
# 全局安裝vue-cli$ npm install -g@vue/cli# 創(chuàng)建uni-app$ vue create -p dcloudio/uni-preset-vue my-project
復制代碼
給小程序原生捌刮、Wepy碰煌、Mpvue 提供了詳細的遷移步驟文檔。
學習成本
Uni-app 有一個完善的開源文檔绅作，其語法糖是 Vue芦圾，對熟悉 Vue 的同學來說學習成本很低，在開發(fā)工具上官方對 HBuilderX 更友好俄认，對熟悉 HBuilderX 使用的入手成本較低个少。
一個簡單的 Uni-app 代碼示例：
{{title}}exportdefault{data(){return{title:'Hello'? ? ? }? ? }? }? .content {? ? text-align: center;? ? height: 400upx;? }
復制代碼
2.2.5 Chameleon
接入成本
給新起項目提供了 cli 能力：
# 全局安裝cli$ npm i -g chameleon-tool# 初始化項目$ cml init project
復制代碼
給小程序原生、Vue眯杏、Weex 提供了 CML 的遷移指南夜焦。
學習成本
Chameleon 有一個相對完善的開源文檔，其語法糖是類 Vue岂贩，對熟悉 Vue 的同學來說學習成本很低茫经。
一個簡單的 Chameleon 代碼示例：
<!-- 數(shù)據(jù)綁定與計算屬性 -->{{ message }}{{ message2 }}classIndex{? data = {message:'HelloCML',? }}exportdefaultnewIndex().class1 {? color: #f00;}
復制代碼
2.3 項目性能
本文主要研討的應用方向是微信小程序，所以選型的框架需要對微信小程序的兼容性很高、且產(chǎn)出的項目有較高的性能卸伞。多端框架很多都是基于微信小程序的 API 開發(fā)的抹镊，所以對微信小程序的兼容性都很高，下面我們來看一下一個簡單的日歷組件應用到各框架產(chǎn)出的微信小程序性能數(shù)據(jù)對比荤傲。
2.3.1 微信原生
小程序包大锌宥：22.868 字節(jié)
微信基礎庫版本：2.6.2 （以下框架相同）
測試數(shù)據(jù)記錄：
內(nèi)存頁面切換耗時啟動耗時初次渲染耗時再次渲染耗時數(shù)據(jù)緩存
252m146ms1163ms26ms94ms0B
244m606ms1293ms38ms60ms0B
256m159ms1293ms26ms131ms0B
235m708ms1403ms49ms58ms0B
245m571ms1163ms32ms56ms0B
2.3.2 Wepy
小程序包大小：131,957 字節(jié)
Wepy 版本：1.6.0
測試數(shù)據(jù)記錄：
內(nèi)存頁面切換耗時啟動耗時初次渲染耗時再次渲染耗時數(shù)據(jù)緩存
253m436ms1049ms29ms35ms0B
259m542ms1340ms33ms61ms0B
267m466ms1113ms22ms37ms0B
260m447ms1160ms22ms50ms0B
254m459ms1036ms30ms40ms0B
2.3.3 Mpvue
小程序包大衅谩：197,601 字節(jié)
Mpvue 版本：2.0.6
測試數(shù)據(jù)記錄：
內(nèi)存頁面切換耗時啟動耗時初次渲染耗時再次渲染耗時數(shù)據(jù)緩存
225m247ms896ms24ms62ms0B
239m253ms910ms22ms58ms0B
235m446ms1591ms27ms62ms0B
237m269ms979ms21ms60ms0B
243m270ms908ms23ms57ms0B
2.3.4 Taro
小程序包大邪惫健：167,080 字節(jié)
Taro 版本：1.3.2
測試數(shù)據(jù)記錄：
內(nèi)存頁面切換耗時啟動耗時初次渲染耗時再次渲染耗時數(shù)據(jù)緩存
246m231ms718ms16ms224ms0B
241m297ms1007ms19ms246ms0B
246m256ms868ms16ms288ms0B
242m227ms829ms17ms224ms0B
237m231ms869ms17ms229ms0B
2.3.5 Uni-app
小程序包大小：292,831 字節(jié)
Uni-app 版本：2.0.0
測試數(shù)據(jù)記錄：
內(nèi)存頁面切換耗時啟動耗時初次渲染耗時再次渲染耗時數(shù)據(jù)緩存
239m440ms987ms34ms178ms34B
237m529ms1365ms34ms182ms34B
232m531ms1133ms39ms183ms34B
236m487ms1154ms32ms178ms34B
239m486ms1051ms33ms190ms34B
2.3.6 Chameleon
小程序包大屑讼妗：671,702 字節(jié)
Chameleon 版本：1.0.3
測試數(shù)據(jù)記錄：
內(nèi)存頁面切換耗時啟動耗時初次渲染耗時再次渲染耗時數(shù)據(jù)緩存
223m550ms1043ms46ms60ms0B
231m597ms1326ms36ms60ms0B
225m631ms1338ms37ms58ms0B
237m658ms1289ms47ms68ms0B
245m611ms1241ms35ms66ms0B
2.3.7 框架性能 PK (平均值)
包大小：
原生 < Wepy < Taro < Mpvue < Uni-app < Chameleon
微信小程序的性能：
Taro > Mpvue > Uni-app > Wepy > Chamelon > 未優(yōu)化過的原生代碼
框架使用后比原生的性能更好查蓉，這簡直逆天了，后來研究發(fā)現(xiàn)：
微信原生框架耗時主要在 setData 調(diào)用上榜贴，開發(fā)者若不單獨優(yōu)化豌研，則每次都會傳遞大量數(shù)據(jù)；而 Uni-app唬党、Taro 等都在調(diào)用 setData 之前自動做 diff 計算鹃共，每次僅傳遞變動的數(shù)據(jù)。
2.4 可維護性
團隊選型框架后驶拱，最擔心的事情就是后期的維護性霜浴。在需求開發(fā)的過程中，發(fā)現(xiàn)框架本身有問題蓝纲，怎么解決阴孟？框架深度使用過程中，突然發(fā)現(xiàn)該框架無人維護了税迷，issue 上提交的問題遲遲沒人跟進了永丝，怎么辦？所以在選型框架中箭养，框架的可維護性是大部分團隊所關注的事情慕嚷。
WepyMpvueTaroUni-appChameleon
Star數(shù)188541860521740124846521
社群無論壇、無交流群毕泌；只能網(wǎng)搜或者提issues無論壇喝检、無交流群；只能網(wǎng)搜或者提issues有論壇撼泛、社區(qū)挠说、交流群等，論壇活躍有論壇坎弯、社區(qū)纺涤、交流群等译暂，論壇活躍，交流群多且回復及時官方文檔提供了微信撩炊、QQ交流群外永、順風公鹿等
語言類Vue的語法糖類Vue的語法糖React的語法糖類Vue的語法糖類Vue的語法糖
開源程度完全開源完全開源完全開源半開源完全開源
從框架現(xiàn)有 star 數(shù)可以看出：Wepy、Mpvue 和 Taro 的開源關注度比較高拧咳，這說明這幾個框架的論壇活躍度更高伯顶，相關問題的解決方法更多。
從社群活躍度可以看出：Wepy 和 Mpvue 已經(jīng)很久沒人維護了骆膝，所以后續(xù)的可維護性較差祭衩，建議使用其他的框架。
從框架停更的后期維護成本來看：
Wepy阅签、Mpvue掐暮、Uni-app、Chameleon 都是類 Vue 的語法糖政钟，其遷移成本略低路克；而 Taro 是 React 的語法糖，其遷移成本較高养交；
Wepy精算、Mpvue、Taro碎连、Chameleon 都是完全開源的灰羽，團隊可以根據(jù)自己需求把代碼拷貝出來自己維護；而 Uni-app 是半開源的鱼辙，團隊無法把源代碼拷貝出來廉嚼。
3.總結
通過以上業(yè)務功能的滿足度、接入成本座每、項目性能前鹅、可維護性等多方面對比摘悴，可以看出各個框架在各個方面有不同的優(yōu)缺點峭梳。由于 wepy 和 mpvue 已長期不再維護，不建議團隊選擇蹂喻。團隊可以根據(jù)自己的實際業(yè)務需求和內(nèi)部的技術棧選擇葱椭，React 系的可以選擇 Taro 框架，Vue 系的可以選擇 Uni-app 或者 Chameleo
