minapp

重新定義微信小程式的開發

官網：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
• 寫一個小程式的自動化測試框架

下一篇：作者親著，重新定義微信小程式開發 —— 上篇

---

2019年，iKcamp原創新書《Koa與Node.js開發實戰》已在京東、天貓、亞馬遜、噹噹開售啦！