微信小程序自動(dòng)化部署實(shí)例分析

這篇文章主要介紹“微信小程序自動(dòng)化部署實(shí)例分析”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“微信小程序自動(dòng)化部署實(shí)例分析”文章能幫助大家解決問(wè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)目中，只要能讓腳本訪問(wèn)到即可。

密鑰文件

微信公眾平臺(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ì)。說(shuō)人話就是腳本執(zhí)行過(guò)程中，有報(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 \

以上這段腳本就是核心了。

通過(guò)腳本也不難看出，我們是通過(guò) 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ù)無(wú)所謂）

至此，整個(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)選擇上傳的版本提交審核即可。

第二種方式

基于本地終端執(zhí)行，將腳本、密鑰文件直接放在項(xiàng)目根目錄，本地安裝 miniprogram-ci 插件，直接在終端中執(zhí)行腳本即可。

./ci-xxx.sh

下圖就是自動(dòng)化部署上傳的版本：

關(guān)于“微信小程序自動(dòng)化部署實(shí)例分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。