從2017年小程式推出以來,小程式的發展可謂突飛猛進。其流量入口多、易於傳播且開發成本低的特性,使得越來越多的企業摒棄原生開發選擇小程式。市場業務需求也越來越大,但是對於開發者來說哦,用原生去開發小程式很難受,尤其是業務比較複雜的專案如果用原生開發很難去管理和迭代。
小程式原生開發的缺點
- 程式碼量大:原生開發的程式碼量相對較大,需要編寫更多的程式碼來實現相同功能。
- 開發效率:由於語法靈活度和元件數量的限制,原生開發效率可能較低。
- 多平臺適配成本:如果需要適配多個小程式平臺,如微信、支付寶、百度等,原生開發需要為每個平臺單獨編寫程式碼,導致開發成本增加。
有需求就會有市場,針對各家小程式原生開發的困境,各種小程式框架也陸續推出。
1、Wepy
WePY (發音: /'wepi/)是一款讓小程式支援元件化開發的框架,是騰訊團隊開源的類Vue語法規範的小程式框架。支援元件化開發,資料繫結和Vue的多種特性。非常適合喜歡Vue.js風格的開發者。
而且透過預編譯的手段讓開發者可以選擇自己喜歡的開發風格去開發小程式。Promise,Async Functions的引入都是為了能讓開發小程式專案變得更加簡單,高效。
主要特性:
- 元件化開發:支援將頁面拆分為多個元件,每個元件擁有自己的樣式、模板和邏輯,提高程式碼的複用性和可維護性。
- 支援自定義元件:允許開發者定義和使用自定義元件,增強了應用的功能擴充套件性。
- NPM包管理:支援引入外部 NPM 包,方便管理和使用第三方庫。
- 單檔案模式:採用單檔案元件模式,使得目錄結構更清晰,開發更方便。
- ES6/7 特性支援:預設使用 Babel 編譯,支援 ES6/7 的一些新特性,如箭頭函式、模組化匯入匯出等。
- Promise 支援:框架預設對小程式提供的 API 進行了 Promise 處理,可以使用 async/await 等新特性進行開發。
- 編譯器支援:支援多種編譯器,如 Less、Sass、Stylus、PostCSS、Babel、Typescript、Pug 等。
Github :github.com/Tencent/wepy
2、mpvue
同樣是使用Vue.js開發小程式,來源於美團點評開源的框架。提供完整的Vue.js開發體驗,包括元件化開發能力和Vuex資料管理。同樣適合熟悉Vue.js的開發者,希望在小程式中使用Vue.js開發體驗。
主要特性:
- 徹底的元件化開發能力:提高程式碼複用性
- 完整的 Vue.js 開發體驗
- 方便的 Vuex 資料管理方案:方便構建複雜應用
- 快捷的 webpack 構建機制:自定義構建策略、開發階段 hotReload
- 支援使用 npm 外部依賴
- 使用 Vue.js 命令列工具 vue-cli 快速初始化專案
- H5 程式碼轉換編譯成小程式目的碼的能力
Github:github.com/Meituan-Dianping/mpvue
3、Taro
由京東凹凸實驗室開發的,遵循React語法規範的多端統一開發框架。允許一次編寫,多端執行,支援編譯到微信小程式、H5、App端等。提供現代前端開發流程,包括NPM包管理、ES6+語法支援等。
主要特性:
多端編譯:Taro 可以將原始碼編譯為不同小程式平臺的程式碼,實現跨平臺執行。
豐富的元件庫:Taro 提供了一套豐富的元件庫,這些元件庫與 React 元件相似,便於開發者快速構建介面。
外掛系統:Taro 支援外掛擴充套件,允許開發者透過外掛來擴充套件 Taro 的功能,如新增新的編譯目標或整合第三方服務。
熱更新:Taro 支援熱更新機制,允許開發者快速迭代產品,無需使用者重新下載即可體驗新功能。
TypeScript 支援:Taro 支援 TypeScript,為開發者提供了靜態型別檢查,提高了程式碼質量和開發體驗。
UI 框架整合:Taro 允許整合市面上流行的 UI 框架,如 Ant Design Mobile 等。
GitHub: github.com/nervjs/taro
4、Chameleon
Chameleon(簡寫 CML)是由滴滴出行開源的一款跨端框架,它允許開發者使用一套程式碼來構建並執行在多個小程式平臺以及其他端上,如微信、支付寶、百度、頭條、QQ等,同時也支援H5和客戶端
主要特性:
目錄結構:提供規範化的專案結構,適合於企業級大型應用的開發。
檢視層:檢視層由CML與CMSS編寫,核心是一個標準響應式資料驅動檢視更新。
邏輯層:邏輯層由javascript編寫,邏輯層將處理資料後自動更新檢視,提供檢視層的事件響應方法。
多型協議:提供了跨端時各端底層元件與介面統一的解決方案。
規範校驗:為了提高開發的效率與程式碼的可維護性,提供了全面的程式碼規範與校驗。
GitHub: github.com/didi/chameleon
5、Tina.js
Tina.js 是個開源的微信小程式框架,這個小程式框架比較小眾,GitHub 上該框架被描述為“一款輕巧的漸進式微信小程式框架。
特性: 輕盈小巧。 極易上手,保留 MINA (微信小程式官方框架) 的大部分 API 設計;無論你有無小程式開發經驗,都可以輕鬆過渡上手。 漸進增強,既有狀態管理器,也有路由增強,還可以自己編寫外掛。
Tina.js 開源框架地址:github.com/tinajs/tina
6、FinClip
嚴格意義上來說FinClip 並不熟一款小程式框架,FinClip是一款小程式容器技術,不論是移動 App,還是電腦、電視、車載主機等裝置,在整合FinClip 小程式 SDK之後,都能快速獲得執行小程式的能力。
除了微信、支付寶、美團等流量平臺之外,想要把已有小程式上架到app,必須依賴小程式的底層容器引擎。
除了小程式本身的執行能力以外,例如 FinClip 這樣的小程式容器技術還具備對小程式全生命週期進行管理的能力。對於第三方的支援度也是較好,具體可以查閱相關的測評:小程式框架與平臺編譯對比