微信小程序自動(dòng)化部署的全過程
前言
我們先來梳理一下日常開發(fā)微信小程序的流程:代碼開發(fā)完之后我們首先要提交到代碼倉庫,然后使用微信開發(fā)者工具運(yùn)行代碼,接著通過開發(fā)者工具上傳代碼到微信小程序后臺(tái),最后在后臺(tái)提交審核。
不難看出流程還是比較繁瑣的,自動(dòng)化部署流程可以幫助我們縮減這個(gè)流程,做到解放解放碼農(nóng)的雙手,具體如何實(shí)現(xiàn),我們往下看。
miniprogram-ci
微信小程序的自動(dòng)化部署流程必須依賴 miniprogram-ci,這個(gè)插件。
miniprogram-ci 是從微信開發(fā)者工具中抽離的關(guān)于小程序/小游戲項(xiàng)目代碼的編譯模塊。
開發(fā)者可不打開小程序開發(fā)者工具,獨(dú)立使用 miniprogram-ci 進(jìn)行小程序代碼的上傳、預(yù)覽等操作。
因?yàn)槟_本的執(zhí)行依賴這個(gè)插件,所以我們可以將這個(gè)插件安裝在要執(zhí)行腳本的服務(wù)器上,或者安裝在本地項(xiàng)目中。
npm install miniprogram-ci --save
微信公眾平臺(tái)配置
登錄公眾平臺(tái),打開 開發(fā)-開發(fā)管理-開發(fā)設(shè)置,找到 小程序代碼上傳 配置項(xiàng),生成小程序代碼上傳密鑰,并添加 ip 白名單,密鑰文件可以存放在要執(zhí)行腳本的服務(wù)器上,或者保存在項(xiàng)目中,只要能讓腳本訪問到即可。
密鑰文件
微信公眾平臺(tái)生成的密鑰文件具體內(nèi)容如下:
腳本
編寫 xxx.sh 的執(zhí)行腳本,命名隨意。
set -e while read -r line do if [[ $line =~ "version" ]] then declare a=${line##*:} declare b=${a#*\"} declare version=${b%\"*} break fi done < package.json echo $version yarn echo "開始編譯..." start1=$(date +%s) yarn build:mp-weixin end1=$(date +%s) take1=$(( end1 - start1 )) echo "Compile Success:${take1}s" echo "微信小程序上傳..." start2=$(date +%s) # upload miniprogram-ci \ upload \ --pp ./dist/build/mp-weixin \ --pkp ./private.wx3fxxxxxxxx3.key \ --appid wx3fxxxxxxxx3 \ --uv $version \ --threads 1 \ -r 1 \ --enable-es6 true \ --enable-es7 true \ --enable-autoprefixwxss true \ --enable-minify true \ end2=$(date +%s) take2=$(( end2 - start2 )) echo "Upload Success: ${take2}s" take3=$(( end2 - start1 )) echo "Total Time: ${take3}s"
腳本具體模塊講解
set -e
表示后續(xù)所有的 bash 命令的返回 code 如果不是 0,那么腳本立即退出,后續(xù)的腳本將不會(huì)得到執(zhí)行的機(jī)會(huì)。說人話就是腳本執(zhí)行過程中,有報(bào)錯(cuò)立即退出停止執(zhí)行。
while read -r line do if [[ $line =~ "version" ]] then declare a=${line##*:} declare b=${a#*\"} declare version=${b%\"*} break fi done < package.json echo $version
以上腳本是逐行讀取 package.json
文件內(nèi)容,找到 version
字段,并獲取其對應(yīng)的值定義一個(gè) $version
變量。直白點(diǎn)講就是獲取項(xiàng)目的版本號(hào),因?yàn)橄旅嬉谩?/p>
yarn echo "開始編譯..." start1=$(date +%s) yarn build:mp-weixin end1=$(date +%s) take1=$(( end1 - start1 )) echo "Compile Success:${take1}s" echo "微信小程序上傳..." start2=$(date +%s)
看到 yarn
, 大家應(yīng)該都知道這段腳本就是安裝項(xiàng)目依賴,并且打包編譯小程序項(xiàng)目,其中的 start1、end1、take1
這些是記錄時(shí)間的,可忽略。
# upload miniprogram-ci \ upload \ --pp ./dist/build/mp-weixin \ --pkp ./private.wx3fxxxxxxxx3.key \ --appid wx3fxxxxxxxx3 \ --uv $version \ --threads 1 \ -r 1 \ --enable-es6 true \ --enable-es7 true \ --enable-autoprefixwxss true \ --enable-minify true \
以上這段腳本就是核心了。
通過腳本也不難看出,我們是通過 miniprogram-ci
進(jìn)行代碼上傳的。
具體參數(shù)含義:
- --pp:編譯打包產(chǎn)物文件路徑
- --pkp:微信公眾平臺(tái)生產(chǎn)的那個(gè)私鑰文件路徑
- --appid:小程序的 appid
- --uv:項(xiàng)目的版本號(hào)
- --threads:開啟線程數(shù)
- -r:機(jī)器人編號(hào)(這個(gè)參數(shù)無所謂)
至此,整個(gè)腳本就基本完成了。
自動(dòng)化部署實(shí)現(xiàn)
主要三個(gè)核心部分:
- 上傳腳本
- miniprogram-ci 插件
- 密鑰文件
自動(dòng)化部署實(shí)現(xiàn)方式有很多種,本文主要講解兩種。
第一種方式(推薦)
jenkins + gitlab + webhook
將腳本、密鑰文件直接放在項(xiàng)目根目錄,jenkins 安裝 webhook 相關(guān)插件,gitlab 配置 webhook,這樣就可以做到 master 分支代碼變動(dòng)就可以觸發(fā) webhook,進(jìn)而觸發(fā) jenkins 執(zhí)行,別忘了在 jenkins 服務(wù)器全局安裝 miniprogram-ci 插件。
這樣我們就實(shí)現(xiàn)了,當(dāng)業(yè)務(wù)需求開發(fā)完,代碼合并到 master 分支之后,自動(dòng)觸發(fā) webhook,進(jìn)而觸發(fā) jenkins 執(zhí)行上傳腳本。
我們開發(fā)人員需要做的就只是合并代碼到 master 分支,然后到小程序后臺(tái)選擇上傳的版本提交審核即可。
nice~
第二種方式
基于本地終端執(zhí)行,將腳本、密鑰文件直接放在項(xiàng)目根目錄,本地安裝 miniprogram-ci 插件,直接在終端中執(zhí)行腳本即可。
./ci-xxx.sh
下圖就是自動(dòng)化部署上傳的版本:
總結(jié)
以上就是小程序自動(dòng)化部署的具體實(shí)現(xiàn)過程,希望能為迷茫的小伙伴帶來一點(diǎn)幫助。自動(dòng)化部署還有一些功能也可以實(shí)現(xiàn),本文篇幅有限,沒有做全部介紹,感興趣的小伙伴可以自行探索。
到此這篇關(guān)于微信小程序自動(dòng)化部署的文章就介紹到這了,更多相關(guān)微信小程序自動(dòng)化部署內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
IE8的JavaScript點(diǎn)擊事件(onclick)不兼容的解決方法
這篇文章主要介紹了IE8的JavaScript點(diǎn)擊事件(onclick)不兼容的解決方法,大家參考使用吧2013-11-11JS的遞增/遞減運(yùn)算符和帶操作的賦值運(yùn)算符的等價(jià)式
JS的遞增/遞減運(yùn)算符和帶操作的賦值運(yùn)算符的等價(jià)式...2007-12-12微信小程序開發(fā)之全局配置與頁面配置實(shí)現(xiàn)
本文主要介紹了微信小程序開發(fā)之全局配置與頁面配置實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07Javascript通過overflow控制列表閉合與展開的方法
這篇文章主要介紹了Javascript通過overflow控制列表閉合與展開的方法,設(shè)計(jì)javascript動(dòng)態(tài)操作頁面元素與樣式的相關(guān)技巧,需要的朋友可以參考下2015-05-05javascript實(shí)現(xiàn)校驗(yàn)文件上傳控件實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)校驗(yàn)文件上傳控件,實(shí)例分析了javascript檢測上傳文件類型是否為圖片的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04基于javascript實(shí)現(xiàn)放大鏡特效
這篇文章主要為大家詳細(xì)介紹了基于javascript實(shí)現(xiàn)放大鏡特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12