小編給大家分享一下如何使用pandora-boierpalte-wechat微信小程序開(kāi)發(fā)腳手架，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
為越秀等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及越秀網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、越秀網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！
pandora-boierpalte-wechat 是一款小而美的微信小程序開(kāi)發(fā)腳手架，我們沒(méi)有引入任何新的復(fù)雜度，百分百使用小程序的能力，但是我們有補(bǔ)齊了小程序開(kāi)發(fā)者工具相較于正常 web 開(kāi)發(fā)所存在的短板，讓你更加輕松的搞定微信小程序的開(kāi)發(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ì)路徑來(lái)引入 js 模塊了
icon font 字體文件，小的圖標(biāo)直接使用字體文件，我們可以去 IconFont 站點(diǎn)下載喜歡的 svg 文件
我們默認(rèn)集成了有贊提供的 vant-weapp 來(lái)小程序組件庫(kù)，只需 pa i 我們就可以把需要的組件及其依賴安裝到項(xiàng)目中
樣板文件創(chuàng)建
及其方便的 CICD 能力，pa release 一鍵部署到小程序控制后臺(tái)，更加語(yǔ)義化的版本號(hào)管理
我們推薦配合使用 pandora-cli 來(lái)進(jìn)行微信小程序的開(kāi)發(fā)。
Less 使用
其實(shí)這個(gè)無(wú)需多說(shuō)，直接創(chuàng)建 less 文件替換 wxss 文件即可。
自動(dòng)引入 async/await 依賴
腳手架的構(gòu)建腳本會(huì)自動(dòng)分析代碼中是否使用了 async 和 await 關(guān)鍵字，如果使用了，就會(huì)自動(dòng)把其所依賴的三方庫(kù)引入到最終的構(gòu)建代碼中，所以大家可以放心的使用 async/await 語(yǔ)法。
多環(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ì)象就是我們通過(guò)不同環(huán)境構(gòu)建出來(lái)的配置文件
比如 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 依賴
該腳手架沒(méi)有使用小程序官方提供的 npm 構(gòu)建能力，原因如下：
pandora-boilerpalte-wechat 腳手架開(kāi)發(fā)時(shí)，官方并不支持 npm
官方 npm 能力需要 node_modules 目錄位于小程序 root 目錄中，與目前腳手架的目錄約定有沖突，且與正常 web 項(xiàng)目結(jié)構(gòu)也不同
基于以上原因，我們決定繼續(xù)使用我們自己提供的 npm 依賴處理機(jī)制，公司項(xiàng)目運(yùn)行將近一年，暫未遇到問(wèn)題。
你可以使用如下方式安裝 npm 包，在項(xiàng)目根目錄下：
pa i--npm 或者 npm i
以上兩種方式都可以講對(duì)應(yīng) pkg 的最新版本安裝到項(xiàng)目 node_modules 中
組件庫(kù)
我們集成了有贊開(kāi)源的 vant-weapp 小程序組件庫(kù)，使用時(shí)，只需要通過(guò) pa 命令安裝自己需要的組件即可，我們會(huì)自動(dòng)將所需的所有依賴進(jìn)行安裝，接下來(lái)就按照小程序自定義組件的使用姿勢(shì)進(jìn)行使用即可，最大程度的提升小程序的開(kāi)發(fā)效率。
比如我們要安裝 dialog 組件
pa i dialog
該命令會(huì)自動(dòng)從 vant-weapp 庫(kù)中只將 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 文件中通過(guò)為對(duì)應(yīng)標(biāo)簽添加如下 class 類即可
其中 icon-font 是必須的，第二個(gè)類型的組成 icon-font_
當(dāng)然我們可以為該元素再添加其他樣式
樣板文件創(chuàng)建
創(chuàng)建組件
pa c component demo 或者 pa create component demo
創(chuàng)建好的文件會(huì)自動(dòng)位于項(xiàng)目 src/components 中
創(chuàng)建頁(yè)面
pa c page demo 或者 pa create page demo
創(chuàng)建好的文件為自動(dòng)位于項(xiàng)目 src/pages 中
CICD支持
在項(xiàng)目根目錄下執(zhí)行以下命令可以自動(dòng)發(fā)布項(xiàng)目到小程序后臺(tái)
pa release-m ' '
其中 version-type 為 major, minor, patch 可以參考 npm version 語(yǔ)義化版本
comments 為此次發(fā)布的描述，必填。
這里需要注意的是，pa release 使用的是小程序開(kāi)發(fā)者工具的 HTTP 接口，所以務(wù)必保證小程序開(kāi)發(fā)者工具啟動(dòng)，并且 設(shè)置 -> 安全 -> 安全（服務(wù)端口）開(kāi)啟
看完了這篇文章，相信你對(duì)“如何使用pandora-boierpalte-wechat微信小程序開(kāi)發(fā)腳手架”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
