小程序框架--選型

前言

從16年微信小程序內測到如今，各大公司對小程序的開發業務需求愈來愈大，可是開發者用原生去開發小程序很難受，尤爲是業務比較複雜的項目若是用原生開發很難去管理和迭代

使用原生開發的問題：

• 小程序自己不支持經常使用的css預編譯器
• 不支持ES7以上的高級語法，如async await等特性；
• 不支持工程化，如環境、變量等管理
• 缺乏統一的request攔截請求
• 缺乏統一的本地緩存讀取管理

使用框架能夠解決的問題：

• 支持css預編譯器
• 支持ES7以上語法
• 支持工程化
• 大部分框架支持多端，一套代碼多端複用

框架介紹與對比

Wepy

WePY (發音: /'wepi/)是一款讓小程序支持組件化開發的框架，經過預編譯的手段讓開發者能夠選擇本身喜歡的開發風格去開發小程序。框架的細節優化，Promise，Async Functions的引入都是爲了能讓開發小程序項目變得更加簡單，高效

Mpvue

mpvue 是一個使用 Vue.js 開發小程序的前端框架。框架基於 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實現，使其能夠運行在小程序環境中，從而爲小程序開發引入了整套 Vue.js 開發體驗。

主要特性

• 完全的組件化開發能力：提升代碼複用性
• 完整的 Vue.js 開發體驗
• 方便的 Vuex 數據管理方案：方便構建複雜應用
• 快捷的 webpack 構建機制：自定義構建策略、開發階段 hotReload
• 支持使用 npm 外部依賴
• 使用 Vue.js 命令行工具 vue-cli 快速初始化項目
• H5 代碼轉換編譯成小程序目標代碼的能力

Taro

Taro 是一套遵循 React 語法規範的 多端開發 解決方案

Uni-app

uni-app 是一個使用 Vue.js 開發跨平臺應用的前端框架。

Chamelon

Chameleon/kəˈmiːlɪən/，簡寫CML，中文名卡梅龍；中文意思變色龍，意味着就像變色龍同樣能適應不一樣環境的跨端總體解決方案。

主要特性

• 目錄結構：提供規範化的項目結構，適合於企業級大型應用的開發。
• 視圖層：視圖層由CML與CMSS編寫，核心是一個標準響應式數據驅動視圖更新。
• 邏輯層：邏輯層由javascript編寫，邏輯層將處理數據後自動更新視圖，提供視圖層的事件響應方法。
• 多態協議：提供了跨端時各端底層組件與接口統一的解決方案。
• 規範校驗：爲了提升開發的效率與代碼的可維護性，提供了全面的代碼規範與校驗。

框架對比

框架	支持力度	語法	star數量	開源時間	編譯方式
wepy	微信小程序	類Vue	18854	2016-11-23	環境變量條件編譯
mpvue	微信小程序、支付寶小程序、百度小程序、頭條小程序	Vue	18605	2018-03-09	環境變量條件編譯
taro	H五、微信小程序、支付寶小程序、百度小程序、頭條小程序、React Native、快應用、QQ小程序	React	21740	2018-06-07	環境變量+文件編譯
uni-app	H五、微信小程序、支付寶小程序、百度小程序、頭條小程序、QQ小程序、Android版、IOS版	Vue	12484	2018-07	自研條件編譯語法
chameleon	H五、微信小程序、APP端（Chameleon Playground App、Weex playground）	類Vue系，採用CML + CMSS + JS	6521	2019-02-26	自研多態協議

star數量記錄於2019-09-17

框架優缺點分析

wepy

優勢：微信團隊提供的框架，對微信小程序的支持度高，可工程化開發項目，組件和相關文檔內容豐富，論壇和交流社區活躍

缺點：只支持微信小程序，支持端單一，框架自己靜態編譯，動態repeat時會出現比較嚴重的 BUG，語法解析有時會出現錯誤，錯誤處理還比較簡單

mpvue

優勢：開源時間最先的多端框架，網上相關的問題和例子較多，適用於工程化和組件化開發項目

缺點：開發團隊基本再也不維護該框架，使用者數量愈來愈少，且框架自己存在的各類問題通過長時間的迭代依舊沒有解決

taro

優勢：支持端能力豐富，開發團隊維護力度大，論壇和官方的問題解決速度快，自己基於微信小程序API開發，微信小程序的支持能力強大

缺點：自己是文件的靜態編譯，複雜代碼的轉換的上會產生問題，對H5和移動端的端兼容能力比較差

uni-app

優勢：開發團隊主推的框架，論壇和交流社區很是活躍，端的兼容能力異常強大，存在特定IDE去兼容框架代碼的書寫規範

缺點：部分代碼未開源，官方問題反饋速度不及時，編輯器綁定

chameleon

優勢：規劃完整，統一的多態協議，漸進式跨端，提供了基礎開發腳手架命令工具，幫助端開發者從開發、聯調、測試、上線等全流程高效的完成業務開發

缺點：開源時間短，相關的資料和問題解決方法較少，端兼容能力還待完善

選型分析

現有的小程序框架不少，在項目開發中選型要根據業務和項目自己的實際狀況選擇

兼容微信小程序

若是隻是兼容微信小程序，使用wepy、taro、chameleon均可以，由於這些框架的API都是基於微信小程序的，因此對微信小程序的兼容性基本和原生差很少，vue系的開發者能夠選擇wepy、chameleon，react系的開發者能夠選用taro。固然一下開發者爲了輕便的開發可使用glup作工程化以原生的進行開發，不過框架自己雖然增長了包的大小，可是框架在原生基礎上會封裝一下性能優化的點，如setData的重複渲染等。

不選mpvue的緣由是由於mpvue的開發團隊已再也不維護，並且mpvue在兼容微信小程序的複雜業務上也存在部分問題一直沒有解決。

不選uni-app的緣由只有一個，不喜歡使用HBuildX

兼容多端

若是是要兼容多端的話，能夠根據兼容端能力的需求選擇taro或者chameleon，chameleon雖然開源時間短，可是統一多態協議這個設計理念確實很不錯。taro是凹凸實驗室重點推廣的項目，在使用過程當中能夠發現論壇的反饋和交流羣的恢復速度仍是很及時的，使用taro能夠很好的兼容微信小程序，若是要兼容其餘端須要在代碼根據端進行特殊處理

總結

小程序框架選型，不過選擇什麼框架，最後都會編譯成小程序可識別的代碼運行在微信客戶端，根據業務需求選擇小程序框架要搞清楚小程序原生的能力。最後不得不吐槽一下微信開發文檔的粗糙，不少關鍵的點描述的都不是很詳細