今天向大家推薦一款自己開發(fā)的小程序開發(fā)腳手架，已經(jīng)使用了近一年，相對(duì)比較穩(wěn)定，后續(xù)也會(huì)持續(xù)更新，歡迎使用，歡迎 star.相較于目前市場(chǎng)上的各種跨端解決方案，這個(gè)開發(fā)流程更加純粹，沒有引入任何新的開發(fā)難度，完全在原生小程序的基礎(chǔ)上進(jìn)行開發(fā)效率的提升 ~pandora-boierpalte-wechat 是一款小而美的微信小程序開發(fā)腳手架，我們沒有引入任何新的復(fù)雜度，百分百使用小程序的能力，但是我們有補(bǔ)齊了小程序開發(fā)者工具相較于正常 web 開發(fā)所存在的短板，讓你更加輕松的搞定微信小程序的開發(fā)。
我們支持如下增強(qiáng)能力：
Less 預(yù)編譯編寫樣式，自動(dòng)轉(zhuǎn)成 wxss自動(dòng)引入 async/await 依賴dev / test / pre / prod 多環(huán)境配置npm 依賴，像正常 web 項(xiàng)目那樣使用 npm 包，剩下的就交給腳手架模塊別名，再也不用使用相對(duì)路徑來引入 js 模塊了icon font 字體文件，小的圖標(biāo)直接使用字體文件，我們可以去 IconFont 站點(diǎn)下載喜歡的 svg 文件我們默認(rèn)集成了有贊提供的 vant-weapp 來小程序組件庫，只需 pa i 我們就可以把需要的組件及其依賴安裝到項(xiàng)目中樣板文件創(chuàng)建及其方便的 CICD 能力，pa release 一鍵部署到小程序控制后臺(tái)，更加語義化的版本號(hào)管理我們推薦配合使用 pandora-cli 來進(jìn)行微信小程序的開發(fā)。
Less 使用其實(shí)這個(gè)無需多說，直接創(chuàng)建 less 文件替換 wxss 文件即可。
自動(dòng)引入 async/await 依賴腳手架的構(gòu)建腳本會(huì)自動(dòng)分析代碼中是否使用了 async 和 await 關(guān)鍵字，如果使用了，就會(huì)自動(dòng)把其所依賴的三方庫引入到最終的構(gòu)建代碼中，所以大家可以放心的使用 async/await 語法。
多環(huán)境配置在小程序項(xiàng)目初始化完成后，可以在 config/app.yaml 中進(jìn)行多環(huán)境配置。
姿勢(shì)如下：
app.yaml 配置內(nèi)容如下：
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'
在項(xiàng)目啟動(dòng)后, 即 pa start 后，每次更新修改 app.yaml 文件都會(huì)觸發(fā)自動(dòng)編譯在需要使用的使用的 js 文件中，使用如下方式引入 import config from '
config'
config 對(duì)象就是我們通過不同環(huán)境構(gòu)建出來的配置文件比如 pa start 啟動(dòng)后，我們得到的配置對(duì)象如下：
{
appId: '
wxxxxxxxxx'
, appName: '
test-pandora'
, version: '
1.0.0'
, env: '
development'
, host: '
https://api.dev.com'
}
使用 pa build --env test , 得到的配置對(duì)象如下：
{
appId: '
wxxxxxxxxx'
, appName: '
test-pandora'
, version: '
1.0.0'
, env: '
test'
, host: '
https://api.test.com'
}
npm 依賴該腳手架沒有使用小程序官方提供的 npm 構(gòu)建能力，原因如下：
pandora-boilerpalte-wechat 腳手架開發(fā)時(shí)，官方并不支持 npm官方 npm 能力需要 node_modules 目錄位于小程序 root 目錄中，與目前腳手架的目錄約定有沖突，且與正常 web 項(xiàng)目結(jié)構(gòu)也不同基于以上原因，我們決定繼續(xù)使用我們自己提供的 npm 依賴處理機(jī)制，公司項(xiàng)目運(yùn)行將近一年，暫未遇到問題。
你可以使用如下方式安裝 npm 包，在項(xiàng)目根目錄下：
pa i --npm 或者 npm i 以上兩種方式都可以講對(duì)應(yīng) pkg 的最新版本安裝到項(xiàng)目 node_modules 中組件庫我們集成了有贊開源的 vant-weapp 小程序組件庫，使用時(shí)，只需要通過 pa 命令安裝自己需要的組件即可，我們會(huì)自動(dòng)將所需的所有依賴進(jìn)行安裝，接下來就按照小程序自定義組件的使用姿勢(shì)進(jìn)行使用即可，最大程度的提升小程序的開發(fā)效率。
比如我們要安裝 dialog 組件pa i dialog該命令會(huì)自動(dòng)從 vant-weapp 庫中只將 dialog 組件及其依賴安裝到項(xiàng)目 src/compnents 中。
模塊別名配置在項(xiàng)目更目錄 build.config.js 文件中。
我們可以為項(xiàng)目中的目錄配置別名，源碼中使用別名引用即可。
icon font 支持去阿里 IconFont 官網(wǎng)下載喜歡的圖標(biāo) SVG 文件到項(xiàng)目根目錄 icons 中，構(gòu)建會(huì)自動(dòng)生成字體文件，并內(nèi)聯(lián)到項(xiàng)目中，按照如下姿勢(shì)使用即可。
icons 目錄下有如下文件wechat.svg在 wxml 文件中通過為對(duì)應(yīng)標(biāo)簽添加如下 class 類即可其中 icon-font 是必須的，第二個(gè)類型的組成 icon-font_
'
其中 version-type 為 major, minor, patch 可以參考 npm version 語義化版本comments 為此次發(fā)布的描述，必填。
這里需要注意的是，pa release 使用的是小程序開發(fā)者工具的 HTTP 接口，所以務(wù)必保證小程序開發(fā)者工具啟動(dòng)，并且 設(shè)置 -> 安全 -> 安全（服務(wù)端口）開啟推薦教程：
《微信小程序》以上就是一款小而美小程序腳手架，讓你更流暢快速的開發(fā)小程序的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標(biāo)簽：
微信小程序本文轉(zhuǎn)載于：
掘金社區(qū)，如有侵犯，請(qǐng)聯(lián)系[email protected]刪除
上一篇：
小程序與H5比較的區(qū)別
下一篇：
小程序之picker 數(shù)據(jù)是 Object Array相關(guān)文章相關(guān)視頻怎么退出微信小程序的登錄？用微信小程序?qū)崿F(xiàn)WebSocket心跳重連Promise實(shí)踐 實(shí)現(xiàn)微信小程序接口封裝看不到關(guān)聯(lián)的小程序怎么辦？一款小而美小程序腳手架，讓你更流暢快速的開發(fā)小程序（歐陽克）微信小程序與CMS后臺(tái)認(rèn)識(shí)小程序開發(fā)工具認(rèn)識(shí)小程序的目錄結(jié)構(gòu) [溫州做小程序]