在工作中，分別使用微信小程序官方原生語法和跨端框架完成了幾個小程序的開發(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é)。

一、小程序概述

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

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

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

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

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

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

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

1、原生開發(fā)

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

以微信小程序?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)

啟動，調(diào)試，打包，加載資源等，一切基本的編譯，毫無疑問最快。因?yàn)橄啾绕渌绞剑倭撕芏噍o助性的編譯時間。

• 擁有微信功能第一資源

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

• 調(diào)試清晰

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

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

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

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

2、WebView開發(fā)

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

優(yōu)勢：

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

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

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

此時也已經(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ā)編譯到多平臺發(fā)布，提升開發(fā)效率。

優(yōu)勢：

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

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

• 多端編譯

一份最高支持：h5移動端，各類小程序，快應(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)過一段時間就不維護(hù)了。如幾年前比uni更火爆的的mpvue已不維護(hù)。不維護(hù)的那天，也就意味著你的項(xiàng)目，重構(gòu)！

• 無法調(diào)試

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

• 轉(zhuǎn)義效率低

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

• 雙平臺bug

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

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

• 編譯后工程化文件置空

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

4、低代碼平臺

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

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

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

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

1、uni-app

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

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

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

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

2、Taro

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

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

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

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

3、Mpvue

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

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

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

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

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

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ù)用代碼和組件。

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

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

5、Megalo

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

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

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

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

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

6、Remax

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

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

開發(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)行于所有小程序平臺 ( 微信、支付寶、百度、頭條、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)是在使用跨平臺開發(fā)的同時，需要考慮不同平臺的差異性和兼容性。

8、kbone

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

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

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

9、Nanachi

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

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

小編挨個查看官網(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ā)框架時，我們需要綜合考慮開發(fā)者技術(shù)棧、項(xiàng)目需求和目標(biāo)平臺等因素。

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

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

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