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

minapp

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

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

做者：Mora

minapp

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

使用

1. 用 npm 安裝命令行工具： npm install -g @minapp/cli --registry "https://registry.npmjs.org/" （避免從淘寶鏡像上安裝，它上面的仍是老版本，已經給他們提了一個 issue）
2. 初始化項目：minapp init <你要建立項目的文件夾> (同時支持建立 js 和 ts 項目)
3. 安裝兩個 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
• [ ] 寫一個小程序的自動化測試框架

下一篇：做者親著，從新定義微信小程序開發 —— 上篇