【推薦】開源項目minapp-從新定義微信小程序的開發

minapp

從新定義微信小程序的開發css

官網: https://qiu8310.github.io/minapp/

做者:Moravue

minapp

從新定義微信小程序的開發webpack

使用

  1. 用 npm 安裝命令行工具: npm install -g @minapp/cli --registry "https://registry.npmjs.org/" (避免從淘寶鏡像上安裝,它上面的仍是老版本,已經給他們提了一個 issue
  2. 初始化項目:minapp init <你要建立項目的文件夾> (同時支持建立 js 和 ts 項目)
  3. 安裝兩個 vscode 插件:minappdot-template(可選,但建議安裝)

功能概覽(在 vscode 編輯器下)

wx 全部接口都有智能的提醒,同時包括接口的參數,和返回值

wx接口示例

提供一個 promise 版的 wx 接口 wxp,和 wx 同樣,只是它會將 wx 中全部須要 success/fail/complete 三個參數的函數 promise 化

  • wxp 中也支持使用 success 回調
  • wxp 給 Promise 添加了一個 finally 方法;如,你能夠這樣用 wxp.getUserInfo().finally(() => { /* do something */ })

wxp示例

集成 mobx,能夠很是方便的修改全局數據,並自動更新當前頁面狀態

  • 注入 Store 只須要在 appify 函數中添加 Store 對象便可
  • Page 和 Component 中都默認注入了 Store 對象,你能夠使用 this.store 獲取

mobx

wxml 模板語言支持語法高亮,組件智能提示,組件屬性智能提示(須要安裝 vscode 插件 minapp

wxml

json 文件支持自動提示

json

新建一個 page 文件夾時,自動生成相關文件(須要安裝 vscode 插件 dot-template

  • 自動爲你建立相關的同名的文件,包括 js/json/wxml/scss,而且這些模板文件你能夠隨時在 .dtpl 文件夾下修改
  • 自動將新建的 page 路徑注入到 app.json 文件夾中

新建 Page 示例

小程序 Page 中支持函數自動提示

Page 中的函數自動提示示例

同理,新建組件文件夾時,也會建立相關的文件;同時組件中的生命週期函數也會自動提示

Component 示例

關於此倉庫說明

這不是一個項目,是有好幾個項目組合而成的,用的是 lerna 開發工具,其它項目在 packages 目錄下,這裏對其中的幾個主要項目作個簡要概述git

TODO

  • [ ] 小程序中的靜態資源自動上傳到 七牛 (完成個人 file-uploader 組件)
  • [ ] 實現相似於 vue 的功能,能夠將全部文件寫在一個頁面上
  • [ ] webpack 升級到 4.0
  • [ ] 寫一個小程序的自動化測試框架
下一篇:做者親著,從新定義微信小程序開發 —— 上篇
相關文章
相關標籤/搜索