前言
我們先來梳理一下日常開發(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 字段，并獲取其對(duì)應(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)岁钓，本文篇幅有限升略，沒有做全部介紹，感興趣的小伙伴可以自行探索屡限。
作者：大熊Sir
鏈接：https://juejin.cn/post/7124960511237554189
來源：稀土掘金
著作權(quán)歸作者所有品嚣。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處钧大。
