最近因疫情被困家中,有點(diǎn)時(shí)間把現(xiàn)在市面上主流的小程序轉(zhuǎn)譯框架都試用了一下,沒有做深度試用,只是有個(gè)初步體感,各框架的性能數(shù)據(jù)在官方文檔里也都有提供,大家可以自行查閱,如有說的不恰當(dāng)?shù)牡胤竭€請(qǐng)指正。
目前市面上轉(zhuǎn)譯框架眾多,新的框架也在陸續(xù)輸出,個(gè)人認(rèn)為,做小程序轉(zhuǎn)譯框架應(yīng)該注意以下幾點(diǎn):
- 解決了原生平臺(tái)的哪些痛點(diǎn)?跨平臺(tái) or 組件化 or 性能提升?
- 小程序的DSL已經(jīng)趨于一致,不要再引入新的DSL
- 盡量降低用戶的學(xué)習(xí)成本
- 生成后的代碼是否可控
- 配套工具是否完善易用
1. 對(duì)比
下面從以下幾個(gè)方面對(duì)各個(gè)框架進(jìn)行對(duì)比:
- 跨平臺(tái)
- DSL
- 學(xué)習(xí)成本
- 性能
- 配套工具的易用性
跨平臺(tái)
| 框架 | 微信小程序 | 支付寶小程序 | QQ小程序 | 頭條小程序 | 百度小程序 | 快應(yīng)用 | H5 | Android | IOS |
|---|---|---|---|---|---|---|---|---|---|
| uniapp | ? | ? | ? | ? | ? | ? | ? | ? | ? |
| taro | ? | ? | ? | ? | ? | ? | ? | ? | ? |
| mpvue | ? | ? | ? | ? | ? | ? | ? | ? | ? |
| wepy | ? | ? | ? | ? | ? | ? | ? | ? | ? |
| chameleon | ? | ? | ? | ? | ? | ? | ? | ? | ? |
- uniapp,chameleon通過jsbridge支持移動(dòng)端
- taro通過react native支持移動(dòng)端
- mpvue與wepy只是一套使用vue語法開發(fā)小程序的框架,跨平臺(tái)能力較弱
DSL
- uniapp, mpvue: 純vue語法+抽象過的小程序api
- taro:純r(jià)eact語法+抽象過的小程序api
- wepy:類vue語法,但引入了新的dsl,文件后綴名為wpy
- chameleon:支持vue語法,但引入了新的dsl,文件后綴名cml
學(xué)習(xí)成本
根據(jù)以上關(guān)于DSL的描述,引入了新DSL的學(xué)習(xí)成本勢(shì)必要高于其他,而chameleon為了跨平臺(tái),限制要比wepy2多一些,因此由易到難依次為:
uniapp/taro < mpvue < wepy < chameleon
性能
性能可參考這篇文章:小程序開發(fā):用原生還是選框架(wepy/mpvue/taro/uni-app),里面有詳細(xì)的測(cè)試過程
配套工具的易用性
- uniapp:配套IDE+vue項(xiàng)目模版,兩者可選
- mpvue:vue項(xiàng)目模版
- taro,wepy,chemoleon均提供了配套的cli工具
過程中對(duì)uniapp提供的IDE(HBuilderX)進(jìn)行了試用,不知是自己網(wǎng)速問題還是什么,App開發(fā)版下載很慢,始終沒能下載成功,最終下載了標(biāo)準(zhǔn)版,運(yùn)行速度很快,包含智能提示,轉(zhuǎn)到定義等常用coding功能,還可以使用內(nèi)嵌瀏覽器進(jìn)行預(yù)覽和模擬等常用工具。
這里要對(duì)chemoleon吐槽一下,其他四個(gè)框架使用過程均很順利,唯獨(dú)chameleon耽誤了些時(shí)間,開始是chameleon-tool下載一致報(bào)錯(cuò),問了谷歌后,聽人說是node版本問題,無奈使用n將node切換到了9.11版本,下載完chameleon-tool,創(chuàng)建項(xiàng)目后卻無法運(yùn)行,將node切換到最新版本(12.x以上)后,終于成功將項(xiàng)目運(yùn)行起來
2. 總結(jié)
轉(zhuǎn)譯框架琳瑯滿目,以上只對(duì)目前一些主流的框架進(jìn)行了試用和對(duì)比,針對(duì)如何選擇,有以下幾點(diǎn)建議:
- 小程序的DSL正在逐漸趨于一致,阿里也正在推動(dòng)這一進(jìn)程,如果你對(duì)原生框架信手拈來,使代碼更可控,且遷移成本可以接受,那么可以選擇使用原生框架開發(fā)
- 如果你喜歡并熟悉react,那么taro是目前的唯一選擇,且現(xiàn)在用戶量不少,社區(qū)也比較活躍,對(duì)小程序平臺(tái)的api進(jìn)行了抽象,且同時(shí)支持調(diào)用原生平臺(tái)的api,靈活可擴(kuò)展
- 如果你喜歡并熟悉vue,那么uniapp是更好的選擇,配套工具齊全,且在開發(fā)者服務(wù)領(lǐng)域經(jīng)驗(yàn)豐富,測(cè)試全面,反饋處理速度快,底層還做了很多優(yōu)化工作。除對(duì)api進(jìn)行抽象封裝后,也支持直接調(diào)用各平臺(tái)特有api
- chameleon也是類vue語法,與uniapp完成的事情類似,但引入了新的DSL,增加了學(xué)習(xí)成本,且試用下來,從設(shè)計(jì)理念到配套工具的提供,感覺還是uniapp做的更好一些
- mpvue和wepy都是使用的vue語法,跨平臺(tái)能力很弱,是早期在小程序還不支持自定義組件時(shí)為了可以組件化開發(fā)小程序而產(chǎn)生的,目前來看,同樣是vue語法,選擇跨平臺(tái)能力更強(qiáng)的uniapp和chameleon更好一些