分享幾個微信小程式開發框架和工具

codeGoogle發表於2018-04-18

###【小程式開發框架】

1、官方框架MINA

小程式提供的開發框架為MINA框架,它類似於淘寶Weex、Vue框架。MINA框架通過封裝微信客戶端提供的檔案系統、網路通訊、任務管理、資料安全等基礎功能,對上層提供一整套JavaScript API,讓開發者能夠非常方便地使用微信客戶端提供的各種基礎功能與能力,快速構建一個應用。

地址:

https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html

2、美團小程式框架mpvue

mpvue 是美團點評開源的一個使用Vue.js開發小程式的前端框架。框架基於 Vue.js 核心,mpvue 修改了 Vue.js 的  runtime 和  compiler 實現,使其可以執行在小程式環境中,從而為小程式開發引入了整套 Vue.js 開發體驗。使用  mpvue 開發小程式,你將在小程式技術體系的基礎上獲取到這樣一些能力:

  • 徹底的元件化開發能力:提高程式碼複用性
  • 完整的 Vue.js 開發體驗
  • 方便的 Vuex 資料管理方案:方便構建複雜應用
  • 快捷的 webpack 構建機制:自定義構建策略、開發階段 hotReload
  • 支援使用 npm 外部依賴
  • 使用 Vue.js 命令列工具 vue-cli 快速初始化專案
  • H5 程式碼轉換編譯成小程式目的碼的能力

Github:

https://github.com/Meituan-Dianping/mpvue

官網:

http://mpvue.com/

3、Tina.js 一款輕巧的漸進式微信小程式框架

tina-js.jpg
tina-js.jpg

特性: 輕盈小巧。 極易上手,保留 MINA (微信小程式官方框架) 的大部分 API 設計;無論你有無小程式開發經驗,都可以輕鬆過渡上手。 漸進增強,既有狀態管理器,也有路由增強,還可以自己編寫外掛。

Tina.js 開源框架地址:

https://github.com/tinajs/tina

4、元件化開發框架wepy

WePY 是一款讓小程式支援元件化開發的框架,通過預編譯的手段讓開發者可以選擇自己喜歡的開發風格去開發小程式。框架的細節優化,Promise,Async Functions的引入都是為了能讓開發小程式專案變得更加簡單,高效。

特性:
  • 類Vue開發風格
  • 支援自定義元件開發
  • 支援引入NPM包
  • 支援Promise
  • 支援ES2015+特性,如Async Functions
  • 支援多種編譯器,Less/Sass/Styus、Babel/Typescript、Pug
  • 支援多種外掛處理,檔案壓縮,圖片壓縮,內容替換等
  • 支援 Sourcemap,ESLint等
  • 小程式細節優化,如請求列隊,事件優化等

Github地址:

https://github.com/Tencent/wepy

官網地址:

https://tencent.github.io/wepy

5、前端框架weweb

weweb是一個相容小程式語法的前端框架,你可以用小程式的寫法,來寫web應用。如果你已經有小程式了,通過它你可以將你的小程式執行在瀏覽器中。

特性: 跨平臺,一套程式碼多端執行(小程式、h5、未來直接打包成安卓、ios app也不是夢) 自帶常用元件,完美繼承了小程式內建元件 相容小程式rpx語法,使頁面更容易適配各種機型

地址:

https://github.com/wdfe/weweb

小程式開發工具

1、圖片處理工具Jinaconvert

jinaconvert.jpg
jinaconvert.jpg

Jinaconvert可以幫你把圖片處理成各種需要的格式,你只需要在 Jinaconvert 上選擇你需要的格式型別,再將圖片檔案上傳至即可。

工具網站地址:

https://jinaconvert.com/cn/

2、單位轉換工具postcss-px2units

將px單位轉換為rpx單位,或者其他單位的PostCSS外掛。 postcss-px2units就可以使用簡單的配置,輕鬆實現轉換。而且該外掛可以將px轉換為任意你想轉換的單位,比如rem。

地址:

https://github.com/yingye/postcss-px2units

3、騰訊雲上傳外掛qcloud-upload

基於nodejs的騰訊雲上傳外掛 支援自定義檔案字首、覆蓋及非覆蓋上傳方式

地址:

https://github.com/yingye/qcloud-upload

4、二維碼工具weapp.qrcode.js

在微信小程式中,快速生成二維碼 可自定義二維碼內容、寬高、糾錯級別。此外,還支援生成不同前後景色的二維碼。

地址:

https://github.com/yingye/weapp-qrcode

微信小程式腳手架工具 wxdad

一款微信小程式腳手架工具,幫助你快速開發微信小程式應用。目前有兩個功能: 快速構建初始專案架構。 把 wxdad 語法快速編譯成 wxml 和 wxjs 檔案,幫助開發者急速開發。

地址:

https://gitee.com/lisniuse/wxdad

5、小程式圖示工具wx-charts

基於 canvas 繪製、體積小巧的微信小程式圖表工具。

  • 支援圖表型別:
  • 餅圖 pie
  • 圓環圖 ring
  • 線圖 line
  • 柱狀圖 column
  • 區域圖 area
  • 雷達圖 radar

地址:

https://github.com/xiaolin3303/wx-charts

6、小程式開發、微信公號管理系統RhaPHP

RhaPHP微信平臺管理系統,支援多公眾號管理,小程式開發,APP介面開發,平臺反文旁蟲立且快速簡潔易用。靈活的擴充套件應用機制,具有容易上手,幾乎融合微信介面,簡單的呼叫對二次開發與開發擴充套件應用模組大大提高開發效率,降低企業商家運營成本。擴充套件應用模組化,機制靈活,程式碼簡單並快速上手。基於THINKPHP5強力核心驅動與LAYUI前端框架,支援 Linux/Windows/Mac。

官方網站:

https://www.rhaphp.com/

7、即速應用:適合技術小白的小程式開發工具

視覺化操作,直接拖拽元件生成頁面 提供大量可套用的模板 可將程式碼打包下載,直接對接到小程式的開發工具 下載下來後的程式碼可以任意編輯 複雜的功能仍然需要專業程式設計師二次開發

官網:

http://www.jisuapp.cn/

附:微信小程式開發者文件官網地址

https://mp.weixin.qq.com/debug/wxadoc/dev/index.html

閱讀更多

Python探究之旅—Python語言的基本認識

玩Hook技術?這三個選擇題能答對算我服你!

歡迎和我一塊學習技術

相關文章