一款小而美的小程式腳手架，讓你更流暢的開發小程式

摘要： 今天向大家推薦一款自己開發的小程式開發腳手架，已經使用了近一年，相對比較穩定，後續也會持續更新，歡迎使用，歡迎 star. pandora-boierpalte-wechat 是一款小而美的微信小程式開發腳手架，我們沒有引入任何新的複雜度，百分百使用小程式的能力，但是我們有補齊了...

今天向大家推薦一款自己開發的小程式開發腳手架，已經使用了近一年，相對比較穩定，後續也會持續更新，歡迎使用，歡迎 star.

pandora-boierpalte-wechat 是一款小而美的微信小程式開發腳手架，我們沒有引入任何新的複雜度，百分百使用小程式的能力，但是我們有補齊了小程式開發者工具相較於正常 web 開發所存在的短板，讓你更加輕鬆的搞定微信小程式的開發。

我們支援如下增強能力：

• Less 預編譯編寫樣式，自動轉成 wxss

• 自動引入 async/await 依賴

• dev / test / pre / prod 多環境配置

• npm 依賴，像正常 web 專案那樣使用 npm 包，剩下的就交給腳手架

• 模組別名，再也不用使用相對路徑來引入 js 模組了

• icon font 字型檔案，小的圖示直接使用字型檔案，我們可以去 IconFont 站點下載喜歡的 svg 檔案

• 我們預設集成了有贊提供的 vant-weapp 來小程式元件庫，只需pa i <component-name> 我們就可以把需要的元件及其依賴安裝到專案中

• 樣板檔案建立

• 及其方便的 CICD 能力，pa release 一鍵部署到小程式控制後臺，更加語義化的版本號管理

我們推薦配合使用pandora-cli 來進行微信小程式的開發。

Less 使用

其實這個無需多說，直接床架 less 檔案替換 wxss 檔案即可。

自動引入 async/await 依賴

腳手架的構建指令碼會自動分析程式碼中是否使用了 async 和 await 關鍵字，如果使用了，就會自動把其所依賴的三方庫引入到最終的構建程式碼中，所以大家可以放心的使用 async/await 語法。

多環境配置

在小程式專案初始化完成後，可以在config/app.yaml 中進行多環境配置。姿勢如下：

app.yaml 配置內容如下：

appId: 'wxxxxxxxxx'
appName: 'test-pandora'
version: '1.0.0'
development:
env: 'development'
host: 'https://api.dev.com'
test:
env: 'test'
host: 'https://api.test.com'
preproduction:
env: 'preproduction'
host: 'https://api.pre.com'
production:
env: 'production'
host: 'https://api.prod.com'
複製程式碼

在專案啟動後, 即 pa start 後，每次更新修改 app.yaml 檔案都會觸發自動編譯

在需要使用的使用的 js 檔案中，使用如下方式引入

import config from 'config'
複製程式碼

config 物件就是我們通過不同環境構建出來的配置檔案

比如 pa start 啟動後，我們得到的配置物件如下：

{
appId: 'wxxxxxxxxx',
appName: 'test-pandora',
version: '1.0.0',
env: 'development',
host: 'https://api.dev.com'
}
複製程式碼

使用pa build --env test , 得到的配置物件如下：

{
 
appId: 'wxxxxxxxxx',
 
appName: 'test-pandora',
version: '1.0.0',
env: 'test',
host: 'https://api.test.com'
}
複製程式碼

npm 依賴

該腳手架沒有使用小程式官方提供的 npm 構建能力，原因如下：

• pandora-boilerpalte-wechat 腳手架開發時，官方並不支援 npm

• 官方 npm 能力需要 node_modules 目錄位於小程式 root 目錄中，與目前腳手架的目錄約定有衝突，且與正常 web 專案結構也不同

基於以上原因，我們打算繼續使用我們自己提供的 npm 機制，公司專案執行將近一年，暫未遇到問題。

你可以使用如下方式安裝 npm 包，在專案根目錄下：

pa i <pkg> --npm



或者



npm i <pkg>
複製程式碼

以上兩種方式都可以講對應 pkg 的最新版本安裝到專案 node_modules 中

元件庫

我們集成了有贊開源的 vant-weapp 小程式元件庫，使用時，只需要通過 pa 命令安裝自己需要的元件即可，我們會自動將所需的所有依賴進行安裝，接下來就按照小程式自定義元件的使用姿勢進行使用即可，最大程度的提升小程式的開發效率。

比如我們要安裝 dialog 元件

pa i dialog
複製程式碼

該命令會自動從 vant-weapp 庫中只將 dialog 元件及其依賴安裝到專案 src/compnents 中。

模組別名

配置在專案更目錄 build.config.js 檔案中。我們可以為專案中的目錄配置別名，原始碼中使用別名引用即可。

icon font 支援

去阿里 IconFont 官網下載喜歡的圖示 SVG 檔案到專案根目錄icons 中，構建會自動生成字型檔案，並內聯到專案中，按照如下姿勢使用即可。

icons 目錄下有如下檔案

wechat.svg

在 wxml 檔案中通過為對應標籤新增如下 class 類即可

<text class="icon-font icon-font_wechat"></text>
複製程式碼

其中icon-font 是必須的，第二個型別的組成icon-font_<svg 檔名>

當然我們可以為該元素再新增其他樣式

樣板檔案建立

建立元件

pa c component demo

或者 

pa create component demo
複製程式碼

建立好的檔案會自動位於專案 src/components 中

建立頁面

pa c page demo

或者 

pa create page demo
複製程式碼

建立好的檔案為自動位於專案 src/pages 中

CICD支援

在專案根目錄下執行以下命令可以自動釋出專案到小程式後臺

pa release <version-type> -m '<comments>'
複製程式碼

其中version-type 為 major, minor, patch 可以參考 npm version 語義化版本

comments 為此次釋出的描述，必填。

這裡需要注意的是，pa release 使用的是小程式開發者工具的 HTTP 介面，所以務必保證小程式開發者工具啟動，並且設定 -> 安全 -> 安全（服務埠）開啟