小程序開(kāi)發(fā)：用原生還是選框架
本文從面向用戶推捐、面向開(kāi)發(fā)者兩大維度七大細(xì)項(xiàng)弟灼，對(duì)微信原生及主流的wepy、mpvue萍摊、taro、uni-app開(kāi)發(fā)框架進(jìn)行橫向?qū)Ρ取?/p>
面向用戶献酗、面向開(kāi)發(fā)者維度蠢莺，具體包括：
1. 用戶：提供完整的業(yè)務(wù)實(shí)現(xiàn)，并保證高性能體驗(yàn)蝇闭。
2. 開(kāi)發(fā)者：平緩的學(xué)習(xí)曲線呻率、現(xiàn)代開(kāi)發(fā)體驗(yàn)（工程化）、高效的社區(qū)支持呻引、活躍的開(kāi)發(fā)迭代礼仗、多端復(fù)用。
1. 用戶
1-1. 功能實(shí)現(xiàn)： 【出發(fā)點(diǎn)：小程序在不斷的迭代升級(jí)逻悠，如果某項(xiàng)業(yè)務(wù)依賴于最新的小程序 API元践，但三方框架尚未封裝，該怎么辦童谒？】
| 框架 | 描述 |
|---|---|
| wepy | 未對(duì)小程序 API 作二次封裝单旁，API 依然使用微信原生的，框架與微信小程序是否新增 API 無(wú)關(guān) |
| mpvue | 支持微信的所有原生組件和 api饥伊，無(wú)限制象浑。同時(shí)框架封裝了自己的跨端 API，使用方式類似mpvue.request() |
| taro | 支持微信的所有原生組件和 api撵渡，無(wú)限制融柬。同時(shí)框架封裝了自己的跨端 API，使用方式類似Taro.request()趋距，支持 Taro 代碼與小程序代碼混寫(xiě)（鏈接）粒氧，可通過(guò)混寫(xiě)的方式調(diào)用框架尚未封裝的小程序新增 API |
| uni-app | 支持微信的所有原生組件和 api，無(wú)限制节腐。在跨端方面外盯，即便仍然使用微信原生的組件和 API，也可以直接跨端編譯到 App翼雀、H5饱苟、以及支付寶百度頭條等小程序。但為了管理清晰狼渊，推薦使用 uni 封裝的 API箱熬，類似uni.request()类垦。同時(shí)支持條件編譯（鏈接），可在條件編譯代碼塊中城须，隨意調(diào)用各個(gè)平臺(tái)新增的 API 及組件 |
結(jié)論：三方框架均可調(diào)用所有小程序 API蚤认，完成用戶的業(yè)務(wù)需求，這個(gè)維度各框架是無(wú)差別的糕伐。
1-2. 性能
結(jié)論：微信原生開(kāi)發(fā)手工優(yōu)化砰琢，uni-app>微信原生開(kāi)發(fā)未手工優(yōu)化,taro > wepy > mpvue
2. 開(kāi)發(fā)者
2-1. 平滑的學(xué)習(xí)曲線
| 框架 | DSL支持程度描述 | 學(xué)習(xí)資料完整度 |
|---|---|---|
| 微信原生 | 四不像...要學(xué)習(xí)新語(yǔ)法 | 文檔豐富，API 搜索準(zhǔn)確良瞧，官方有示例 demo陪汽，支持官網(wǎng)上調(diào)起微信開(kāi)發(fā)者工具，預(yù)覽運(yùn)行效果 褥蚯，詳見(jiàn)：傳送門 |
| wepy | 開(kāi)發(fā)風(fēng)格接近于 Vue.js挚冤，屬于類 Vue實(shí)現(xiàn)，相對(duì)微信原生開(kāi)發(fā)算前進(jìn)了一大步遵岩，但相比完整Vue語(yǔ)法還有較大差距你辣，開(kāi)發(fā)時(shí)需要單獨(dú)學(xué)習(xí)它的規(guī)則 | 文檔只有 2 頁(yè)，沒(méi)有搜索尘执，組件 API 等文檔都直接看微信的文檔舍哄。沒(méi)有提供示例 demo，很多配置需要靠猜誊锭。詳見(jiàn)：傳送門 |
| mpvue | mpvue支持的 Vue 語(yǔ)法略少 | 文檔較少表悬，但其概念不復(fù)雜，組件 API 等文檔都直接看微信的文檔丧靡，學(xué)習(xí)難度低蟆沫。問(wèn)題搜索效果一般。沒(méi)有提供示例 demo温治。詳見(jiàn)：傳送門 |
| uni-app | uni-app 則基本支持絕大多數(shù) vue 語(yǔ)法饭庞，如filter、復(fù)雜 JavaScript 表達(dá)式等 | 基礎(chǔ)文檔和各種使用專題內(nèi)容豐富熬荆，問(wèn)題搜索效果較好舟山，示例 demo 功能完備，并發(fā)布為 7 端上線卤恳。詳見(jiàn)：傳送門 |
| taro | 對(duì)于 JSX 的語(yǔ)法支持度累盗，也達(dá)到了絕大多數(shù)都支持的完善程度 | 基礎(chǔ)文檔完整，具體使用問(wèn)題資源較少突琳，問(wèn)題搜索效果一般若债，示例 demo 只包含基礎(chǔ)功能，僅發(fā)布了微信一端拆融。詳見(jiàn)：傳送門 |
備注：mpvue蠢琳、uni-app 框架基于 Vue.js 核心啊终，通過(guò)修改 Vue.js 的 runtime 和 compiler，實(shí)現(xiàn)了在小程序端的運(yùn)行
結(jié)論：
DSL 語(yǔ)法支持評(píng)測(cè)：taro,uni-app > mpvue > wepy > 微信原生
學(xué)習(xí)資料完善度評(píng)測(cè)：微信原生 > uni-app > mpvue , taro > wepy
2-2. 現(xiàn)代前端開(kāi)發(fā)體驗(yàn)
通過(guò)cli的支持程度挪凑、開(kāi)發(fā)工具和語(yǔ)法提示庫(kù)等的對(duì)比
結(jié)論：開(kāi)發(fā)體驗(yàn)維度孕索，對(duì)比結(jié)果：uni-app > taro,mpvue > wepy > 微信原生
友情提示：如果你需要工程化能力，那就直接忘了微信原生開(kāi)發(fā)吧
2-3. 社區(qū)支持
2-4 多端復(fù)用
結(jié)論：uni-app > taro > mpvue > 原生微信小程序躏碳、wepy
ENDING
如果你只開(kāi)發(fā)微信小程序，不做多端散怖，那么使用uni-app菇绵、taro是更優(yōu)的選擇，他們相當(dāng)于 web 世界的 vue 和 react镇眷，有了這些工具咬最，不再需要使用原生 wxml 開(kāi)發(fā)。
- 如果堅(jiān)持微信原生開(kāi)發(fā)欠动，需要注意手動(dòng)寫(xiě)優(yōu)化代碼來(lái)控制setdata永乌，并且注意其工程化能力非常弱。
- 如果你是react系具伍，那就用taro翅雏。
- 如果是vue系，那就用uni-app人芽，uni-app在性能望几、周邊生態(tài)和開(kāi)發(fā)效率上更有優(yōu)勢(shì)。
- 如果你開(kāi)發(fā)多端萤厅，uni-app和taro都可以橄抹，可根據(jù)自己熟悉的技術(shù)棧選擇，相對(duì)而言u(píng)ni-app的多端成熟度更高一些惕味。
