如何使用pandora-boierpalte-wechat微信小程序開(kāi)發(fā)腳手架

小編給大家分享一下如何使用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ù)編譯編寫(xiě)樣式，自動(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 <component-name> 我們就可以把需要的組件及其依賴安裝到項(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 <pkg> --npm



或者



npm i <pkg>

以上兩種方式都可以講對(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 類(lèi)即可

<text class="icon-font icon-font_wechat"></text>

其中 icon-font 是必須的，第二個(gè)類(lèi)型的組成 icon-font_<svg 文件名>

當(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 <version-type> -m '<comments>'

其中 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è)資訊頻道，感謝各位的閱讀！

分享標(biāo)題：如何使用pandora-boierpalte-wechat微信小程序開(kāi)發(fā)腳手架
瀏覽路徑：http://bm7419.com/article26/ipdicg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、網(wǎng)站內(nèi)鏈、小程序開(kāi)發(fā)、網(wǎng)站制作、標(biāo)簽優(yōu)化、網(wǎng)站設(shè)計(jì)公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容