在工作中，分別使用微信小程序官方原生語法和跨端框架完成了幾個(gè)小程序的開發(fā)，從上線效果看基本都滿足了預(yù)期目標(biāo)。不同開發(fā)方式和不同框架各自有其優(yōu)缺點(diǎn)，在實(shí)際項(xiàng)目開發(fā)過程中，應(yīng)該根據(jù)實(shí)際的項(xiàng)目需求以及團(tuán)隊(duì)人員情況做綜合選擇。

本篇文章全面分析小程序相關(guān)框架和技術(shù)選型相關(guān)技術(shù)細(xì)節(jié)。

一、小程序概述

要對小程序有一個(gè)整體的了解，就需要了解移動(dòng)互聯(lián)網(wǎng)在國內(nèi)的發(fā)展歷程。從2007年移動(dòng)互聯(lián)網(wǎng)開始在國內(nèi)發(fā)展，到2015年進(jìn)入移動(dòng)互聯(lián)網(wǎng)產(chǎn)品廣泛應(yīng)用階段，各種移動(dòng)端開發(fā)技術(shù)層出不窮。

移動(dòng)端開發(fā)經(jīng)歷了：原生APP（Native APP）、Web APP、混合APP（Hibernate APP）這幾種開發(fā)方式，發(fā)展到目前這個(gè)階段，混合APP開發(fā)占據(jù)主流。從某種角度看，微信小程序也屬于混合APP開發(fā)模式。

早期移動(dòng)端的戰(zhàn)場上，web與app還在借助自己各自優(yōu)勢占據(jù)市場。騰訊于2017年1月9日推出一個(gè)很巧妙的方案，那就是介于web與app之間的小程序。

微信小程序是小程序的一種，英文名是Wechat Mini Program，是一種不需要下載安裝即可使用的應(yīng)用；小程序可以在微信內(nèi)被便捷地獲取和傳播，同時(shí)具有出色的使用體驗(yàn)。

通常大家所說的小程序指微信小程序，實(shí)際上除了微信小程序外，還有支付寶、百度、頭條、飛書、QQ、快手、釘釘、淘寶等個(gè)各種平臺(tái)的小程序。

二、小程序開發(fā)方式

在微信小程序開發(fā)中，開發(fā)者可以根據(jù)自身情況和項(xiàng)目需要，選擇不同的開發(fā)方式，包括：原生開發(fā)、WebView開發(fā)、框架開發(fā)和低代碼開發(fā)等。

1、原生開發(fā)

每一種小程序官方都推出了對應(yīng)的語法和開發(fā)工具。采用此種方式開發(fā)，同一個(gè)產(chǎn)品需要開發(fā)不同版本，比如你要實(shí)現(xiàn)一個(gè)外賣小程序，既要涵蓋微信小程序又要涵蓋支付寶小程序，那么需要根據(jù)各自平臺(tái)的語法和工具來開發(fā)2個(gè)不同的版本。

以微信小程序?yàn)槔_發(fā)采用的是WXML、WXSS和JavaScript等技術(shù)。要進(jìn)行微信小程序開發(fā)，首先，需要先去官網(wǎng)了解其語法、項(xiàng)目結(jié)構(gòu)、發(fā)布流程等基本內(nèi)容。

其次，需要下載微信開發(fā)者工具，在其中創(chuàng)建項(xiàng)目，選擇原生開發(fā)模式。微信開發(fā)者工具提供了豐富的代碼編輯器、調(diào)試工具和運(yùn)行環(huán)境等，可以幫助開發(fā)者進(jìn)行快速開發(fā)和調(diào)試。

原生開發(fā)方式優(yōu)點(diǎn)：

• 性能最優(yōu)

啟動(dòng)，調(diào)試，打包，加載資源等，一切基本的編譯，毫無疑問最快。因?yàn)橄啾绕渌绞?，少了很多輔助性的編譯時(shí)間。

• 擁有微信功能第一資源

如可視化，熱更新,性能檢測等，這些都是其他方式無法享受的小程序福利

• 調(diào)試清晰

無論是樣式的定位，或者是具體js的代碼定位，原生的更能快速定位到問題。

原生開發(fā)方式缺點(diǎn)：

• 擴(kuò)展能力弱
• 不支持scss，自定義eslint等
• 寫法不友好
• 單向綁定，沒有雙向綁定。而方式較獨(dú)立，與常用的框架不一致。
• 方法不支持直接傳遞參數(shù)。只能通過data-id的方式傳遞參數(shù)。寫法跟常用前端框架不一致且相對較繁瑣。
• 文件較多

這里對比其他框架，無論vue還是react都可以用一個(gè)文件，解決html js css。而小程序需要4個(gè)文件來支持，有時(shí)候項(xiàng)目大了顯得特別的繁瑣。

2、WebView開發(fā)

此種模式采用原生語法搭建小程序項(xiàng)目框架，然后再頁面中放置WebView用于渲染H5頁面，其它頁面邏輯通過H5頁面實(shí)現(xiàn)。

優(yōu)勢：

• 脫離微信體系
• 這是一個(gè)很大的缺陷，同時(shí)也是一個(gè)很大的優(yōu)勢。脫離了微信的體系，那也意味著只是一個(gè)webview的展示。這時(shí)候也已經(jīng)脫離了微信本身，不再受一些展示性的限制之類。
• 動(dòng)態(tài)發(fā)布

這點(diǎn)其實(shí)很香，直接越過了微信的審核。想什么時(shí)候上線，直接更新web服務(wù)器即可。

• 開發(fā)調(diào)試脫離

此時(shí)也已經(jīng)是H5頁面，開發(fā)也可以直接在常規(guī)瀏覽器調(diào)試，無需依賴微信調(diào)試工具。

缺點(diǎn)：

• 無法調(diào)用微信api
• 已經(jīng)脫離微信的體系，那也意味著小程序的一切功能，都無法使用。如分享，支付，統(tǒng)計(jì)等。
• 首次加載較慢
• 小程序是借助了微信本身內(nèi)部的封裝，而H5是完完全全自己的實(shí)現(xiàn)。所以，毫無疑問，同樣的功能，H5文件是更大的。這也是為什么說首 次加載較慢。
• 無法有原生功能

所有原生功能寄托在微信中間層上，將失效。如藍(lán)牙，拍照，獲取手機(jī)信息等

3、框架開發(fā)

除了原生開發(fā)，微信小程序還提供了一些框架來簡化開發(fā)過程，這些框架都基于微信小程序原生開發(fā)技術(shù)，提供了更加便捷的開發(fā)方式。

這種開發(fā)模式，并不是小程序的出現(xiàn)才有的。隨著技術(shù)的發(fā)展，hybird已不再有當(dāng)年的火爆，他們很多都轉(zhuǎn)戰(zhàn)"小程序"。

這類框架包括：WePY、Mpvue、Taro、Uni-app、chameleon、Megalo、kbone、Remax等等（當(dāng)然其中有些框架已經(jīng)停更了，后續(xù)進(jìn)行分析）。

這類框架要么是通過大家熟悉的語法對原生語法進(jìn)行包裝減低上手難度；要么是通過跨端技術(shù)，一次開發(fā)編譯到多平臺(tái)發(fā)布，提升開發(fā)效率。

優(yōu)勢：

• 學(xué)習(xí)成本低

如react生態(tài)低成本進(jìn)入taro，vue生態(tài)低成本進(jìn)入uni。無需適應(yīng)，小半小時(shí)即可參與開發(fā)

• 多端編譯

一份最高支持：h5移動(dòng)端，各類小程序，快應(yīng)用等。有些還支持生成app

• 自帶工程化

如支持scss，eslint，vuex等

• 方法的擴(kuò)展

框架基本都對自身對wx.api進(jìn)行了一次封裝。此外還進(jìn)行了擴(kuò)展以及修改。如uni實(shí)現(xiàn)了data對頁面的綁定，不需要再setDate。同理taro也采用了setState的方案。

• 拓展的組件庫

無論uni，還是taro，或者其他，基本都對官方的ui庫進(jìn)行二次封裝，其功能都有自己的特色，或者對其組件進(jìn)行了擴(kuò)展。

缺點(diǎn)：

• 依賴第三方

該問題可大可小。特別是非有聲望的公司維護(hù)的框架，沒準(zhǔn)過一段時(shí)間就不維護(hù)了。如幾年前比uni更火爆的的mpvue已不維護(hù)。不維護(hù)的那天，也就意味著你的項(xiàng)目，重構(gòu)！

• 無法調(diào)試

由于本身已經(jīng)是編譯后的文件，此時(shí)想再通過斷點(diǎn)調(diào)試，你甚至不清楚原來寫的代碼編譯后在哪里。

• 轉(zhuǎn)義效率低

寫完原生小程序代碼，就需要編譯一下才能才虛擬機(jī)上看到效果。而用第三方，還需編譯為原生。寫完代碼之后：你的代碼（第三方） –> 轉(zhuǎn)義為原生（原生）–>再編譯讓虛擬機(jī)允許。這多了個(gè)過程，所以效率變低。

• 雙平臺(tái)bug

原生小程序的bug，該問題近幾年也相對好轉(zhuǎn)，但問題還是依然存在。各大論壇搜索"小程序的坑"，總有一堆文章讓你體驗(yàn)。然而用第三方，你還要接受第三方的bug。你需要容納雙平臺(tái)的bug。

在接受小程序官方的“bug”的同時(shí)，還需要同時(shí)接受第三方的"bug"。

• 編譯后工程化文件置空

此外，編譯后文件歷史等置空的問題。如快速頁面讀取配置，編譯之后又置空。

4、低代碼平臺(tái)

低代碼或零代碼平臺(tái)，無需編寫代碼，通過官網(wǎng)提供平臺(tái)拓展組件即可快速完成小程序搭建。此類平臺(tái)有：阿里宜搭、騰訊微搭、意派Coolsite360等。

此類平臺(tái)無需編碼或只需要少量編碼，減低小程序制作門檻，但大部分都需要收費(fèi)。

三、小程序開發(fā)框架

隨著微信、支付寶等開放平臺(tái)的壯大，移動(dòng)應(yīng)用生態(tài)市場的蓬勃發(fā)展，例如小程序已經(jīng)成為各個(gè)企業(yè)和開發(fā)者的重要選擇。為了提高小程序的開發(fā)效率和代碼重用性，許多第三方開發(fā)框架應(yīng)運(yùn)而生。

1、uni-app

uni-app 是一個(gè)使用 Vue.js 開發(fā)跨平臺(tái)應(yīng)用的框架，支持微信小程序、支付寶小程序、百度小程序、字節(jié)跳動(dòng)小程序、H5 網(wǎng)頁應(yīng)用等多個(gè)平臺(tái)。

它采用了一套統(tǒng)一的組件規(guī)范和開發(fā)語法，開發(fā)者可以通過一套代碼同時(shí)生成多個(gè)平臺(tái)的應(yīng)用。

uni-app提供了豐富的組件庫和插件生態(tài)系統(tǒng)，開發(fā)者可以快速搭建小程序界面并擴(kuò)展功能。

uni-app 還具有良好的性能和跨平臺(tái)兼容性，可以在不同平臺(tái)上保持一致的用戶體驗(yàn)。

2、Taro

京東的親兒子，類 React 開發(fā)風(fēng)格，名字來自于實(shí)力最強(qiáng)的奧特曼。

Taro 是一款多端統(tǒng)一開發(fā)框架，可以同時(shí)開發(fā)微信小程序、支付寶小程序、百度小程序等多個(gè)平臺(tái)的應(yīng)用。

它采用類 React 的開發(fā)語法，支持 JSX 和組件化開發(fā)，使得代碼的編寫更加簡潔和可維護(hù)。

Taro 的一個(gè)主要優(yōu)勢是它能夠一次編寫代碼，同時(shí)生成多個(gè)平臺(tái)的應(yīng)用，大大提高了開發(fā)效率。

3、Mpvue

美團(tuán)的親兒子，框架直接基于 Vue 核心，修改了 runtime 和 compiler 使程序可以在微信小程序環(huán)境中運(yùn)行。該項(xiàng)目已停止維護(hù)，但仍然可用。

Mpvue 是一個(gè)基于 Vue.js 的小程序開發(fā)框架，通過使用 Vue.js 的語法進(jìn)行開發(fā)。

對于熟悉 Vue.js 的開發(fā)者來說，上手 Mpvue 非常容易。

它提供了類似 Vue 的開發(fā)體驗(yàn)和功能，如組件化、數(shù)據(jù)綁定和計(jì)算屬性等。

此外，Mpvue 支持微信小程序和百度小程序，讓開發(fā)者能夠同時(shí)覆蓋多個(gè)平臺(tái)。

4、WePY

騰訊的親兒子，類 Vue 開發(fā)風(fēng)格?；谛〕绦蛟M件實(shí)現(xiàn)組件化開發(fā)，是對小程序原有能力的封裝和優(yōu)化。該項(xiàng)目已停止維護(hù)，但仍然可用。

WePY 是一款類 Vue 語法的小程序組件化開發(fā)框架，它與 Vue.js 的語法相似，提供了類似的組件化開發(fā)方式。

WePY 支持微信小程序和支付寶小程序，使得開發(fā)者能夠更好地復(fù)用代碼和組件。

與此同時(shí)，WePY 還提供了許多擴(kuò)展能力和開發(fā)工具，如代碼熱重載、模板編譯優(yōu)化等，大大提高了開發(fā)效率。

然而，由于 WePY 不支持其他小程序平臺(tái)，對于需要覆蓋多個(gè)平臺(tái)的開發(fā)者來說，可能需要考慮其他選擇。

5、Megalo

網(wǎng)易親兒子，類似vue語法編寫小程序，跨H5和小程序兩端。該項(xiàng)目已停止維護(hù)，但仍然可用。

Megalo 是一個(gè)使用 Vue.js 開發(fā)微信小程序的框架，兼容大部分 Vue.js 的語法和特性。

開發(fā)者可以利用 Vue.js 的強(qiáng)大生態(tài)系統(tǒng)進(jìn)行開發(fā)，并享受 Vue.js 帶來的開發(fā)便利性。

Megalo 支持原生的微信小程序 API，開發(fā)者可以直接使用微信小程序的能力。

然而，Megalo 目前僅支持微信小程序，對于需要覆蓋其他小程序平臺(tái)的開發(fā)者來說，可能需要考慮其他選擇。

6、Remax

阿里螞蟻金服的親兒子，使用原生React來構(gòu)建小程序，運(yùn)行時(shí)框架，從Remax2.0開始支持Web應(yīng)用的構(gòu)建。該項(xiàng)目已停止維護(hù)，但仍然可用。

Remax 是一個(gè)使用 React 開發(fā)小程序的框架，支持微信小程序、支付寶小程序、字節(jié)跳動(dòng)小程序、QQ 小程序等多個(gè)平臺(tái)。

開發(fā)者可以借助熟悉的 React 生態(tài)系統(tǒng)進(jìn)行開發(fā)，并享受 React 帶來的開發(fā)效率和組件化能力。

Remax 還支持原生小程序的能力，開發(fā)者可以直接使用小程序的 API。

然而，對于不熟悉 React 的開發(fā)者來說，上手 Remax 可能需要一定的學(xué)習(xí)成本。

7、Chameleon

滴滴親兒子，跨端解決方案，基于Chameleon框架開發(fā)項(xiàng)目，一份代碼可以運(yùn)行于所有小程序平臺(tái) ( 微信、支付寶、百度、頭條、qq )、H5、客戶端以及快應(yīng)用。

青桔單車就是用它來實(shí)現(xiàn)的，該項(xiàng)目已停止維護(hù)，但仍然可用。

Chameleon/k??mi?l??n/，簡寫CML，中文名卡梅龍；中文意思變色龍，意味著就像變色龍一樣能適應(yīng)不同環(huán)境的跨端整體解決方案。一次開發(fā)，多端運(yùn)行，一端所見即多端所見。缺點(diǎn)是在使用跨平臺(tái)開發(fā)的同時(shí)，需要考慮不同平臺(tái)的差異性和兼容性。

8、kbone

騰訊親兒子，kbone 是一個(gè)致力于微信小程序和 Web 端同構(gòu)的解決方案。

微信小程序的底層模型和 Web 端不同，我們想直接把 Web 端的代碼挪到小程序環(huán)境內(nèi)執(zhí)行是不可能的。kbone 的誕生就是為了解決這個(gè)問題，它實(shí)現(xiàn)了一個(gè)適配器，在適配層里模擬出了瀏覽器環(huán)境，讓 Web 端的代碼可以不做什么改動(dòng)便可運(yùn)行在小程序里。

它模擬了一套dom和bom接口，用以兼容現(xiàn)有的前端體系，只能用于Web兼容微信小程序，無法滿足其他平臺(tái)小程序的開發(fā)。

9、Nanachi

Nanachi（ 娜娜奇），去哪兒親兒子，基于 React 的多端小程序轉(zhuǎn)譯框架，完美兼容 React 生命周期。該項(xiàng)目已停止維護(hù)。

在對框架進(jìn)行選擇時(shí)，除了結(jié)合自身業(yè)務(wù)需求外，由于技術(shù)更新迭代很快，還要綜合考慮每個(gè)框架更新維護(hù)的頻率，社群的活躍程度。

小編挨個(gè)查看官網(wǎng)發(fā)現(xiàn)，目前只有uniapp和Taro仍然在保持更新，所以商業(yè)項(xiàng)目建議選擇其一。從技術(shù)棧角度考慮，如果熟悉react就選擇taro，熟悉vue就選擇uni-app。

雖然很多項(xiàng)目已經(jīng)停止運(yùn)行了，它們都曾經(jīng)輝煌過，也為國內(nèi)it的發(fā)展做出共享。并且其代碼都在github上開源，可以作為研究之用。

四、小結(jié)

在選擇小程序第三方開發(fā)框架時(shí)，我們需要綜合考慮開發(fā)者技術(shù)棧、項(xiàng)目需求和目標(biāo)平臺(tái)等因素。

綜上，如果采用原生開發(fā)直接按官方語法即可；如果采用跨端開發(fā)，目前有2個(gè)選擇：Taro 是一個(gè)多端統(tǒng)一開發(fā)框架，適合需要覆蓋多個(gè)平臺(tái)的開發(fā)者；uni-app 是一個(gè)跨平臺(tái)框架，適用于同時(shí)開發(fā)多個(gè)小程序平臺(tái)的項(xiàng)目。

當(dāng)然隨著技術(shù)向前發(fā)展，技術(shù)更新非常之快，有可能有新的后起之秀

無論選擇哪個(gè)框架，都能夠提高開發(fā)效率、減少重復(fù)工作，并獲得豐富的組件庫和工具支持。