強(qiáng)烈推薦:小程序常用的6款框架總結(jié)

2023-01-06

隨著前端的知識(shí)不斷更新，小程序也成為了我們開(kāi)發(fā)中的日常。微信小程序、百度小程序、抖音小程序、支付寶小程序、頭條小程序等等不斷涌入我們的生活，隨著小程序的火爆，各種小程序框架不斷出現(xiàn)，也在不斷更新。把小程序給制作出來(lái)，只是使用了不同的框架。那么目前有哪些框架/組件庫(kù)比較優(yōu)秀呢？我在這里簡(jiǎn)單的羅列以下幾款：

1. uni-app

官方地址：uni-app官網(wǎng)

個(gè)人微信小程序開(kāi)發(fā)案例：“皮皮虎去水印”

短視頻圖集永久免費(fèi)去水印，一鍵去抖音、快手、火山、小紅書(shū)等短視頻圖集水印，無(wú)廣告，不限量！！！

uni-app是一個(gè)使用 Vue.js 開(kāi)發(fā)所有前端應(yīng)用的框架，開(kāi)發(fā)者編寫(xiě)一套代碼，可發(fā)布到iOS、Android、Web（響應(yīng)式）、以及各種小程序（微信/支付寶/百度/頭條/QQ/快手/釘釘/淘寶）、快應(yīng)用等多個(gè)平臺(tái)。uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序開(kāi)發(fā)框架（詳見(jiàn)）、更好的App跨平臺(tái)框架、更方便的H5開(kāi)發(fā)框架。不管領(lǐng)導(dǎo)安排什么樣的項(xiàng)目，你都可以快速交付，不需要轉(zhuǎn)換開(kāi)發(fā)思維、不需要更改開(kāi)發(fā)習(xí)慣。

我之前也是了解過(guò)很多框架，特別是目前比較流行跨多個(gè)平臺(tái)的框架，其中uni-app框架最終主要是為了小程序而打造的，后面慢慢演變成支持現(xiàn)在小程序、app、pc端h5、快應(yīng)用等。我個(gè)人目前用的框架也是uni-app。該框架可以說(shuō)滿足我現(xiàn)在的全部需求，公司的app我用nvue重構(gòu)，非常nice，小程序用uniapp打造，性能也很完美。由于對(duì)uniapp的熱愛(ài)和支持，我也會(huì)在插件市場(chǎng)開(kāi)源我的小插件，同時(shí)有了HBuilder X的加持，真的很方便，所以這款框架也是我強(qiáng)烈推薦的。

2. Taro

官方地址：Taro 介紹 | Taro 文檔

Taro 一套遵循React 語(yǔ)法規(guī)范的多端開(kāi)發(fā)解決方案。使用 Taro，只書(shū)寫(xiě)一套代碼，再通過(guò) Taro 的編譯工具，將源代碼分別編譯出可以在不同端（微信小程序、H5、App 端等）運(yùn)行的代碼。同時(shí) Taro 還提供了開(kāi)箱即用的語(yǔ)法檢測(cè)和自動(dòng)補(bǔ)全等功能。

Taro這款框架在當(dāng)初我們公司在選框架做APP的時(shí)候，我做了一些了解，它的核心其實(shí)就是react，由于react-native的火爆，所以特意了解了下相關(guān)的內(nèi)容。當(dāng)時(shí)vue3剛發(fā)布沒(méi)多久，Trao就支持了VUE3，這說(shuō)明官方的更新速度還是挺快的。特別是對(duì)react熱愛(ài)的開(kāi)發(fā)者可以多去了解下，所以這款框架也是值得大家去學(xué)習(xí)利用的，畢竟京東內(nèi)部打造，不容小覷。

3. mpvue

官方地址：mpvue.com

mpvue 是美團(tuán)點(diǎn)評(píng)開(kāi)源的一個(gè)使用 Vue.js 開(kāi)發(fā)小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實(shí)現(xiàn)，使其可以運(yùn)行在小程序環(huán)境中，從而為小程序開(kāi)發(fā)引入了整套 Vue.js 開(kāi)發(fā)體驗(yàn)。

使用 mpvue 開(kāi)發(fā)小程序，你將在小程序技術(shù)體系的基礎(chǔ)上獲取到這樣一些能力：

徹底的組件化開(kāi)發(fā)能力：提高代碼復(fù)用性

完整的 Vue.js 開(kāi)發(fā)體驗(yàn)

方便的 Vuex 數(shù)據(jù)管理方案：方便構(gòu)建復(fù)雜應(yīng)用

快捷的 webpack 構(gòu)建機(jī)制：自定義構(gòu)建策略、開(kāi)發(fā)階段 hotReload

支持使用 npm 外部依賴

使用 Vue.js 命令行工具 vue-cli 快速初始化項(xiàng)目

H5 代碼轉(zhuǎn)換編譯成小程序目標(biāo)代碼的能力

在我剛接小程序的時(shí)候，聽(tīng)說(shuō)的第二個(gè)框架就是mpvue，第一個(gè)是微信小程序官網(wǎng)提供的框架。但是沒(méi)有緣分，我一直沒(méi)機(jī)會(huì)用上這款框架，沒(méi)關(guān)系，世界萬(wàn)千，有些東西終究是要錯(cuò)過(guò)。說(shuō)了這么多優(yōu)點(diǎn)，所所以它也是值得學(xué)習(xí)使用的。

4. 微信小程序官方框架

官方地址：微信開(kāi)放文檔

小程序開(kāi)發(fā)框架的目標(biāo)是通過(guò)盡可能簡(jiǎn)單、高效的方式讓開(kāi)發(fā)者可以在微信中開(kāi)發(fā)具有原生 APP 體驗(yàn)的服務(wù)。整個(gè)小程序框架系統(tǒng)分為兩部分：邏輯層（App Service）和視圖層（View）。小程序提供了自己的視圖層描述語(yǔ)言 WXML 和 WXSS，以及基于 JavaScript 的邏輯層框架，并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng)，讓開(kāi)發(fā)者能夠?qū)Ｗ⒂跀?shù)據(jù)與邏輯。

在剛接觸微信小程序的時(shí)候，就是官方提供的這個(gè)框架，其實(shí)該框架的思想和vue還是有相似之處，正所謂萬(wàn)變不離其宗。只不過(guò)這個(gè)框架就是直接使用微信小程序所需要的wxml、wxss等文件，而其他框架最終打包生成的文件才是官方所需要的。所以我建議就是初學(xué)者，還是可以先使用或?qū)W習(xí)下該框架，更能直接的了解小程序和學(xué)習(xí)。所以初學(xué)者值得推薦。

5. WePY

官方地址：WePY Document

WePY (發(fā)音: /'wepi/) 項(xiàng)目啟動(dòng)于 2016 年 11 月份，是小程序最早的框架之一，是一款讓小程序支持組件化開(kāi)發(fā)的框架，通過(guò)預(yù)編譯的手段讓開(kāi)發(fā)者可以選擇自己喜歡的開(kāi)發(fā)風(fēng)格去開(kāi)發(fā)小程序。框架的細(xì)節(jié)優(yōu)化，Promise，Async Functions的引入都是為了能讓開(kāi)發(fā)小程序項(xiàng)目變得更加簡(jiǎn)單，高效。騰訊團(tuán)隊(duì)開(kāi)源的一款類(lèi)vue語(yǔ)法規(guī)范的小程序框架,借鑒了Vue的語(yǔ)法風(fēng)格和功能特性,支持了Vue的諸多特征。

特性：

使用 Vue Observer 實(shí)現(xiàn)數(shù)據(jù)綁定

支持 Vue watch/computed/mixin 等特性

基于原生組件實(shí)現(xiàn)組件化開(kāi)發(fā)

支持 TypeScript