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

2023-01-06

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

1. uni-app

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

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

短視頻圖集永久免費去水印，一鍵去抖音、快手、火山、小紅書等短視頻圖集水印，無廣告，不限量?。?！

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

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

2. Taro

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

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

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

3. mpvue

官方地址：mpvue.com

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

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

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

完整的 Vue.js 開發(fā)體驗

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

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

支持使用 npm 外部依賴

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

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

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

4. 微信小程序官方框架

官方地址：微信開放文檔

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

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

5. WePY

官方地址：WePY Document

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

特性：

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

支持 Vue watch/computed/mixin 等特性

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

支持 TypeScript