碼code | 9款小程序開源框架和組件庫,值得收藏!

作爲一名小程序開發者,面對複雜的代碼和運行邏輯,也有更多的需求:

想要一套代碼直接跑多端!
想要直接套用框架實現開發!
想要在小程序內擁有微信同款UI!

那就不妨試試小程序開源框架和組件庫,開發小程序項目也能變得更加簡單,高效。

今天我們收集了些實用的開發框架、組件庫以及騰訊官方插件,大家可以瞭解一下。

開發框架

WePy

圖片描述

WePy是一款讓小程序支持組件化開發的框架,通過預編譯的手段讓開發者可以選擇自己喜歡的開發風格去開發小程序。

特點:相對應的組件庫、工具庫豐富,也是應用廣泛的開發框架。注意一點,由於運行機制的問題,WePy在使用原生小程序組件/庫時需要對文檔/demo裏的源碼進行調整。

出品方:微信

案例:騰訊翻譯君 騰訊地圖+

Github:https://github.com/Tencent/wepy

Taro

圖片描述

Taro是一套遵循React語法規範的多端開發解決方案,用戶可以通過 Taro 的編譯工具,將源代碼分別編譯出可以在不同端運行的代碼。

特點:支持包括H5、移動端以及包括微信等4種小程序端,並且有官方維護的跨端 UI 庫 和工具庫,滿足開發者的需求。

出品方:京東

案例:京東購物 程序員英語

Github:https://github.com/NervJS/taro

mpvue

mpvue是一個使用 Vue.js 開發小程序的前端框架。框架基於 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 實現,使其可以運行在小程序環境中,從而爲小程序開發引入了整套 Vue.js 開發體驗。

特點:支持vue頁轉化爲包括微信等4種小程序,熟悉 Vue.js 基本語法的開發者便可以簡易上手小程序開發,不過目前沒有官方的UI組件庫。

出品方:美團

案例:美團外賣 享物說

Github:https://github.com/Meituan-Di...

Omi

圖片描述

Omi 框架是微信支付線研發部研發的下一代前端框架, 基於 Web Components 規範設計的組件化框架,可以開發 PC Web、移動端 H5,也可以直接使用 Omi 開發小程序。

特點:打通小程序端和web端,在小程序也能實現web頁面。除了一些平臺特有的API,代碼幾乎不用改動,就能跑在安卓/IOS的小程序裏。

出品方:微信

案例:markdown 內容發佈系統

Github:https://github.com/Tencent/omi

UI組件庫

WeUI

圖片描述

WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫,由微信官方設計團隊爲微信內網頁和微信小程序量身設計,令用戶的使用感知更加統一。

適用場景:簡潔風格的小程序

出品方:微信

案例:微信指數

GitHub:https://github.com/Tencent/weui

Vant Weapp

圖片描述

Vant Weapp 是有贊移動端組件庫 Vant 的小程序版本,兩者基於相同的視覺規範,提供一致的 API 接口,助力開發者快速搭建小程序應用。

適用場景:電商、餐飲、外賣平臺、票務預訂等購物類小程序

出品方:有贊

案例:有贊精選

GitHub:https://github.com/youzan/van...

騰訊官方插件

小程序插件是可以被開發者添加到小程序內直接使用併爲用戶提供具體服務的功能組件。

我們也曾經整理過官方插件的內容,可以在微信極客WeGeek公衆號下方點擊菜單【極客乾貨—小程序插件】獲取。

騰訊地圖——爲開發者提供簡單的路線方案規劃服務

騰訊視頻——在小程序內搭建視頻播放功能

微信同聲傳譯——實現語音轉文字、文本翻譯、語音合成接口等功能

好用的小程序開源項目不止這些,和同好們一起來探討小程序的開發吧~

圖片描述

我們建了個交流羣,歡迎到公衆號回覆關鍵詞【進羣】獲取進羣方式。

圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章