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

今天向你們推薦一款本身開發的小程序開發腳手架，已經使用了近一年，相對比較穩定，後續也會持續更新，歡迎使用，歡迎 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 接口，因此務必保證小程序開發者工具啓動，而且 設置 -> 安全 -> 安全（服務端口）開啓