**重新定義微信小程式的開發** >官網:[https://qiu8310.github.io/minapp/](https://qiu8310.github.io/minapp/) >作者:[Mora](https://github.com/qiu8310) # minapp **重新定義... ...
minapp
重新定義微信小程式的開發
作者:Mora
minapp
重新定義微信小程式的開發
使用
- 用 npm 安裝命令行工具:
npm install -g @minapp/cli --registry "https://registry.npmjs.org/"
(避免從淘寶鏡像上安裝,它上面的還是老版本,已經給他們提了一個 issue) - 初始化項目:
minapp init <你要創建項目的文件夾>
(同時支持創建 js 和 ts 項目) - 安裝兩個 vscode 插件:minapp 和 dot-template(可選,但建議安裝)
功能概覽(在 vscode 編輯器下)
wx 所有介面都有智能的提醒,同時包括介面的參數,和返回值
提供一個 promise 版的 wx 介面 wxp,和 wx 一樣,只是它會將 wx 中所有需要 success/fail/complete 三個參數的函數 promise 化
- wxp 中也支持使用 success 回調
- wxp 給 Promise 添加了一個 finally 方法;如,你可以這樣用
wxp.getUserInfo().finally(() => { /* do something */ })
集成 mobx,可以非常方便的修改全局數據,並自動更新當前頁面狀態
- 註入 Store 只需要在 appify 函數中添加 Store 對象即可
- Page 和 Component 中都預設註入了 Store 對象,你可以使用
this.store
獲取
wxml 模板語言支持語法高亮,組件智能提示,組件屬性智能提示(需要安裝 vscode 插件 minapp)
json 文件支持自動提示
新建一個 page 文件夾時,自動生成相關文件(需要安裝 vscode 插件 dot-template)
- 自動為你創建相關的同名的文件,包括 js/json/wxml/scss,並且這些模板文件你可以隨時在 .dtpl 文件夾下修改
- 自動將新建的 page 路徑註入到 app.json 文件夾中
小程式 Page 中支持函數自動提示
同理,新建組件文件夾時,也會創建相關的文件;同時組件中的生命周期函數也會自動提示
關於此倉庫說明
這不是一個項目,是有好幾個項目組合而成的,用的是 lerna 開發工具,其它項目在 packages 目錄下,這裡對其中的幾個主要項目做個簡要概述
- minapp-generator: 此模塊負責解析微信官方文檔,生成結構化的數據,供其它模塊使用
- minapp-core: 微信所有原生 api 的 TypeScript 定義,另外提供一個 promise 版的 wx 介面
- minapp-mobx: 開發框架,集成 mobx
- minapp-compiler: 一個小程式的編譯器,集成 webpack 和 webpack-dev-server
- minapp-webpack-utils: 編譯器中需要使用的 webpack 相關的插件
- minapp-cli: 提供給用戶的命令行工具,集成了 minapp-compiler,並可以快速創建一個新項目
- minapp-vscode: vscode 插件,為wxml提供語法高亮、標簽與屬性的自動補全
TODO
- [ ] 小程式中的靜態資源自動上傳到 七牛 (完成我的 file-uploader 組件)
- [ ] 實現類似於 vue 的功能,可以將所有文件寫在一個頁面上
- [ ] webpack 升級到 4.0
- [ ] 寫一個小程式的自動化測試框架
下一篇:作者親著,重新定義微信小程式開發 —— 上篇