先說一下部署這個的背景和目的：發(fā)覺之前公司開發(fā)人員和測試人員的測試流程太過不清晰而且效率也不夠高针余，所以想達到一個效果是，開發(fā)人員只管往前寫代碼谬以，提交代碼强饮，修改bug。而測試人員就通過jenkins自動打包和部署進行測試開發(fā)人員所做的功能和回歸bug为黎。
由于各方面的因素而導致需要使用Windows電腦進行部署微信小程序自動化部署和提交代碼邮丰。經(jīng)歷了3，4天的努力铭乾，終于把各種困難突破并且實現(xiàn)了自動打包的功能剪廉。接下來一步一步說，希望可以幫助到有這方面需求的碼友炕檩。
教程大部分來自：https://blog.csdn.net/superiorpengFight/article/details/103988645
其實如果條件允許斗蒋，建議還是使用mac電腦進行配置，可以參考上面的鏈接進行操作笛质。
1吹泡、安裝jenkins，git经瓷，微信開發(fā)工具，wget等工具完成后
介紹一下我的環(huán)境：公司使用的是gitlab進行源碼管理洞难，小程序使用的react框架實現(xiàn)舆吮，所以需要npm的環(huán)境和部分腳本支持（如果使用原生vue開發(fā)小程序則另外執(zhí)行其他編譯腳本）
2、開始部署，先看看部分效果
-
打包成開發(fā)版
image.png
看到左下角打印出來的二維碼了嗎色冀？那就是開發(fā)版的二維碼潭袱，測試人員掃碼后就能進行測試開發(fā)人員提交到git的最新代碼。 -
打包成體驗版锋恬，提交代碼到微信公眾平臺
image.png
體驗版是需要自行登錄到微信公眾平臺手動操作成體驗版的
按照前文的教程操作屯换，其中最大的困難是Windows不支持shell腳本，所以我們只能選擇Windows10自帶的powershell腳本与学。
首先
先設置幾個參數(shù)讓測試人員選擇：
其中的參數(shù)含義在描述中都有
其次
設置好git的來源和分支彤悔，我門采取的是test項目只打包dev分支，我們還會另外建prod的項目索守，打包的就是master分支晕窑。
最后
在構建處添加一個執(zhí)行操作，選擇powershell
代碼如下：
echo "-------------------------------------------------------"
# 1卵佛、替換service下的config.js的環(huán)境參數(shù)CURRENT_ENV：test和prod
$txt = Get-Content src\service\config.js
$rtxt = $txt -replace 'const CURRENT_ENV = "prod";', 'const CURRENT_ENV = "test";'
$rtxt | Set-Content src\service\config.js
echo "完成config.js"
# 執(zhí)行項目構建
npm cache clean --force
npm install
npm run build:weapp
echo "完成npm"
# 2、打開微信開發(fā)者工具和獲取微信的服務端口
cd C:\
cd 'C:\Program Files (x86)\Tencent\微信web開發(fā)者工具'
./cli.bat -o
echo "項目路徑=${env:WORKSPACE}"
$port=$(cat "C:/Users/bunin/AppData/Local/微信開發(fā)者工具/User Data/1a695ca2de1a85735f93a43fb366c83f/Default/.ide")
echo "微信開發(fā)者工具運行在${port}端口"
$url = "http://127.0.0.1:${port}/open"
$req = [system.Net.WebRequest]::Create($url)
try {
$res = $req.GetResponse()
}
catch [System.Net.WebException] {
$res = $_.Exception.Response
}
$return_code=$res.StatusCode
if ($return_code -eq "OK") {
echo "返回狀態(tài)碼200截汪，devtool啟動成功疾牲！"
} else {
echo "返回狀態(tài)碼${return_code}，devtool啟動失敗"
exit 1
}
# 3衙解、設置版本號
$currentdate = date -Format 'MMddHH'
echo "時間 = ${currentdate}"
$ver="${env:version}.test.${currentdate}"
echo "版本=${ver}"
echo "build_type=${env:build_type}"
# 4阳柔、開始編譯
if (${env:build_type} -eq "develop") {
echo "發(fā)布開發(fā)版！"
cd E:\
cd ${env:WORKSPACE}
remove-item alias:wget
wget -O qrcode.png http://127.0.0.1:${port}/preview?projectpath=${env:WORKSPACE}
echo "預覽成功丢郊！請掃描二維碼進入開發(fā)版盔沫！"
} elseif (${env:build_type} -eq 'experience') {
echo "準備上傳！"
cd C:\
cd 'C:\Program Files (x86)\Tencent\微信web開發(fā)者工具'
./cli upload --project ${env:WORKSPACE} -v ${ver} -d "env:test ${ver}體驗版"
echo "上傳成功枫匾！請到微信小程序后臺設置體驗版架诞！"
}
以上都有很明確的注釋的，基本上是翻譯了前文的教程腳本干茉，從shell腳本翻譯成powershell
說一下代碼的思路：
1.先把api調用的環(huán)境確保是test的谴忧；
2.然后打開微信開發(fā)工具，拿到服務端口進行
3.如果是體驗版的就需要使用到版本號進行提交角虫，這里是把時間也帶上沾谓，好日后明確區(qū)分使用（方便溝通）
4.開發(fā)版就執(zhí)行wget，體驗版就執(zhí)行cli的代碼上傳
最后輸出
添加build description戳鹅，裝插件的時候搜索：description setter
因為前面腳本我是寫死了qrcode.png均驶，所以就每次都是覆蓋式的只有一張圖片。也就同樣返回這圖片咯
代碼如下：
<img src="http://{jenkins服務器ip}:{jenkins運行的端口}/job/${JOB_NAME}/ws/qrcode.png" alt="二維碼${BUILD_NUMBER}"width="200" height="200" /> <a href="http://{jenkins服務器ip}:{jenkins運行的端口}/job/${JOB_NAME}/ws/qrcode.png">二維碼${BUILD_ID}</a>
遇到的問題
- 需要該電腦的微信開發(fā)工具打開枫虏，并且手動在【安全設置】里面打開服務端口
- 微信開發(fā)工具需要登錄才能正常打包（關機后再開機妇穴，需要重新打開和登錄）
- 在進行wget時或者代碼upload時爬虱，都需要代碼能正常編譯才能跑成功，不然就會失敗或者卡著不動腾它。
- wget需要另外安裝跑筝，而且關鍵的一句話remove-item alias:wget需要執(zhí)行才能跑真正的wget。因為powershell內部的Invoke-WebRequest縮寫命令就是wget瞒滴。解決方案來源：https://zhuanlan.zhihu.com/p/135925681
- 其中遇到比較多的問題就是腳本和函數(shù)間的區(qū)別曲梗，不斷的去百度和各種嘗試后的結果。而且網(wǎng)上的教程基本上都是使用mac電腦進行部署的妓忍，所以網(wǎng)上全部腳本都是shell的虏两。期間還各種嘗試使用Python腳本，又嘗試了Windows的sh.exe執(zhí)行shell腳本单默，最終都各種放棄了碘举，還是對Windows各種妥協(xié)了。沒轍搁廓。
2020-6-21日更新引颈，最后還是換了mac來部署
Windows打包實在太不穩(wěn)定了，要么npm不行境蜕，要么wget不行蝙场。無奈只能換個平臺吧，換完后粱年，清爽感覺來了售滤，Windows所有的困難都沒有了。舒坦了台诗。
以下是我的腳本完箩，思路供參考
#!/bin/bash
echo -------------------------------------------------------
echo GIT_BRANCH: ${GIT_BRANCH}
echo -------------------------------------------------------
# 1、替換service下的config.js的環(huán)境參數(shù)CURRENT_ENV：test和prod
sed -i '' 's/const CURRENT_ENV = "prod";/const CURRENT_ENV = "test";/' src/service/config.js
# 2執(zhí)行項目構建
cd ${WORKSPACE}
pwd
npm install
npm run build:weapp
# 打開微信開發(fā)者工具
/Applications/wechatwebdevtools.app/Contents/MacOS/cli -o
port=$(cat "/Users/mg/Library/Application Support/微信開發(fā)者工具/50a7d9210159a32f006158795f893857/Default/.ide")
echo "微信開發(fā)者工具運行在${port}端口"
return_code=$(curl -sL -w %{http_code} http://127.0.0.1:${port}/open)
if [ $return_code == 200 ]
then
echo "返回狀態(tài)碼200拉队，devtool啟動成功弊知！"
else
echo "返回狀態(tài)碼${return_code}，devtool啟動失敗"
exit 1
fi
# 3粱快、設置版本號
currentdate=`date +%m%d%H`
echo "時間 = "${currentdate}
ver="${version}.test."${currentdate}
echo "版本=${ver}"
echo "build_type=${build_type}"
# 4秩彤、開始編譯
if [ "$build_type" == "develop" ]
then
echo "發(fā)布開發(fā)版！"
wget -O qrcode.png http://127.0.0.1:${port}/preview?projectpath=${WORKSPACE}
echo "預覽成功事哭！請掃描二維碼進入開發(fā)版漫雷！"
elif [ "$build_type" == "experience" ]
then
echo "準備上傳！"
/Applications/wechatwebdevtools.app/Contents/MacOS/cli upload --project ${WORKSPACE}/dist -v ${ver} -d 'env:test ${ver}體驗版'
echo "上傳成功鳍咱！請到微信小程序后臺設置體驗版降盹！"
fi
參考文獻
https://blog.csdn.net/superiorpengFight/article/details/103988645
https://zhuanlan.zhihu.com/p/135925681
