【移動應(yīng)用開發(fā)技術(shù)】如何使用pandora-boierpalte-wechat微信小程序開發(fā)腳手架

【移動應(yīng)用開發(fā)技術(shù)】如何使用pandora-boierpalte-wechat微信小程序開發(fā)腳手架

在下給大家分享一下如何使用pandora-boierpalte-wechat微信小程序開發(fā)腳手架，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！pandora-boierpalte-wechat是一款小而美的微信小程序開發(fā)腳手架，我們沒有引入任何新的復(fù)雜度，百分百使用小程序的能力，但是我們有補齊了小程序開發(fā)者工具相較于正常web開發(fā)所存在的短板，讓你更加輕松的搞定微信小程序的開發(fā)。我們支持如下增強能力：Less預(yù)編譯編寫樣式，自動轉(zhuǎn)成wxss自動引入async/await依賴dev/test/pre/prod多環(huán)境配置npm依賴，像正常web項目那樣使用npm包，剩下的就交給腳手架模塊別名，再也不用使用相對路徑來引入js模塊了iconfont字體文件，小的圖標直接使用字體文件，我們可以去IconFont站點下載喜歡的svg文件我們默認集成了有贊提供的vant-weapp來小程序組件庫，只需pai<component-name>我們就可以把需要的組件及其依賴安裝到項目中樣板文件創(chuàng)建及其方便的CICD能力，parelease一鍵部署到小程序控制后臺，更加語義化的版本號管理我們推薦配合使用pandora-cli來進行微信小程序的開發(fā)。Less使用其實這個無需多說，直接創(chuàng)建less文件替換wxss文件即可。自動引入async/await依賴腳手架的構(gòu)建腳本會自動分析代碼中是否使用了async和await關(guān)鍵字，如果使用了，就會自動把其所依賴的三方庫引入到最終的構(gòu)建代碼中，所以大家可以放心的使用async/await語法。多環(huán)境配置在小程序項目初始化完成后，可以在config/app.yaml中進行多環(huán)境配置。姿勢如下：app.yaml配置內(nèi)容如下：

appId:

'wxxxxxxxxx'

appName:

'test-pandora'

version:

'1.0.0'

development:

env:

'development'

host:

''

test:

env:

'test'

host:

''

preproduction:

env:

'preproduction'

host:

''

production:

env:

'production'

host:

''在項目啟動后,即pastart后，每次更新修改app.yaml文件都會觸發(fā)自動編譯在需要使用的使用的js文件中，使用如下方式引入

import

config

from

'config'config對象就是我們通過不同環(huán)境構(gòu)建出來的配置文件比如pastart啟動后，我們得到的配置對象如下：{

appId:

'wxxxxxxxxx',

appName:

'test-pandora',

version:

'1.0.0',

env:

'development',

host:

''

}使用pabuild--envtest,得到的配置對象如下：{

appId:

'wxxxxxxxxx',

appName:

'test-pandora',

version:

'1.0.0',

env:

'test',

host:

''

}npm依賴該腳手架沒有使用小程序官方提供的npm構(gòu)建能力，原因如下：pandora-boilerpalte-wechat腳手架開發(fā)時，官方并不支持npm官方npm能力需要node_modules目錄位于小程序root目錄中，與目前腳手架的目錄約定有沖突，且與正常web項目結(jié)構(gòu)也不同基于以上原因，我們決定繼續(xù)使用我們自己提供的npm依賴處理機制，公司項目運行將近一年，暫未遇到問題。你可以使用如下方式安裝npm包，在項目根目錄下：pa

i

<pkg>

--npm

或者

npm

i

<pkg>以上兩種方式都可以講對應(yīng)pkg的最新版本安裝到項目node_modules中組件庫我們集成了有贊開源的vant-weapp小程序組件庫，使用時，只需要通過pa命令安裝自己需要的組件即可，我們會自動將所需的所有依賴進行安裝，接下來就按照小程序自定義組件的使用姿勢進行使用即可，最大程度的提升小程序的開發(fā)效率。比如我們要安裝dialog組件pa

i

dialog該命令會自動從vant-weapp庫中只將dialog組件及其依賴安裝到項目src/compnents中。模塊別名配置在項目更目錄build.config.js文件中。我們可以為項目中的目錄配置別名，源碼中使用別名引用即可。iconfont支持去IconFont官網(wǎng)下載喜歡的圖標SVG文件到項目根目錄icons中，構(gòu)建會自動生成字體文件，并內(nèi)聯(lián)到項目中，按照如下姿勢使用即可。icons目錄下有如下文件wechat.svg在wxml文件中通過為對應(yīng)標簽添加如下class類即可<text

class="icon-font

icon-font_wechat"></text>其中icon-font是必須的，第二個類型的組成icon-font_<svg文件名>當然我們可以為該元素再添加其他樣式樣板文件創(chuàng)建創(chuàng)建組件pa

c

component

demo

或者

pa

create

component

demo創(chuàng)建好的文件會自動位于項目src/components中創(chuàng)建頁面pa

c

page

demo

或者

pa

create

page

demo創(chuàng)建好的文件為自動位于項目src/pages中CICD支持在項目根目錄下執(zhí)行以下命令可以自動發(fā)布項目到小程序后臺pa

release

<version-type>

-m

'<comments>'其中version-type為major,mi