Windows10用jenkins部署微信小程序自动化打包

先说一下部署这个的背景和目的：发觉之前公司开发人员和测试人员的测试流程太过不清晰而且效率也不够高，所以想达到一个效果是，开发人员只管往前写代码，提交代码，修改bug。而测试人员就通过jenkins自动打包和部署进行测试开发人员所做的功能和回归bug。

由于各方面的因素而导致需要使用Windows电脑进行部署微信小程序自动化部署和提交代码。经历了3，4天的努力，终于把各种困难突破并且实现了自动打包的功能。接下来一步一步说，希望可以帮助到有这方面需求的码友。
教程大部分来自：https://blog.csdn.net/superiorpengFight/article/details/103988645

其实如果条件允许，建议还是使用mac电脑进行配置，可以参考上面的链接进行操作。

1、安装jenkins，git，微信开发工具，wget等工具完成后

介绍一下我的环境：公司使用的是gitlab进行源码管理，小程序使用的react框架实现，所以需要npm的环境和部分脚本支持（如果使用原生vue开发小程序则另外执行其他编译脚本）

2、开始部署，先看看部分效果

• 打包成开发版
  

  image.png
  
  看到左下角打印出来的二维码了吗？那就是开发版的二维码，测试人员扫码后就能进行测试开发人员提交到git的最新代码。

• 打包成体验版，提交代码到微信公众平台
  

  image.png
  
  体验版是需要自行登录到微信公众平台手动操作成体验版的

按照前文的教程操作，其中最大的困难是Windows不支持shell脚本，所以我们只能选择Windows10自带的powershell脚本。

首先

先设置几个参数让测试人员选择：

image.png

其中的参数含义在描述中都有

其次

设置好git的来源和分支，我门采取的是test项目只打包dev分支，我们还会另外建prod的项目，打包的就是master分支。

image.png

最后

在构建处添加一个执行操作，选择powershell

image.png

代码如下：

echo "-------------------------------------------------------"

# 1、替换service下的config.js的环境参数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"
  
# 执行项目构建
npm cache clean --force
npm install
npm run build:weapp

echo "完成npm"

# 2、打开微信开发者工具和获取微信的服务端口
cd C:\
cd 'C:\Program Files (x86)\Tencent\微信web开发者工具'
./cli.bat -o

echo "项目路径=${env:WORKSPACE}"

$port=$(cat "C:/Users/bunin/AppData/Local/微信开发者工具/User Data/1a695ca2de1a85735f93a43fb366c83f/Default/.ide")
echo "微信开发者工具运行在${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 "返回状态码200，devtool启动成功！"
} else {
  echo "返回状态码${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 "发布开发版！"
  cd E:\
  cd ${env:WORKSPACE}
  remove-item alias:wget
  wget -O qrcode.png http://127.0.0.1:${port}/preview?projectpath=${env:WORKSPACE}
  echo "预览成功！请扫描二维码进入开发版！"
} elseif (${env:build_type} -eq 'experience') {
  echo "准备上传！"
  cd C:\
  cd 'C:\Program Files (x86)\Tencent\微信web开发者工具'
  ./cli upload --project ${env:WORKSPACE} -v ${ver} -d "env:test ${ver}体验版"
  echo "上传成功！请到微信小程序后台设置体验版！"
}

以上都有很明确的注释的，基本上是翻译了前文的教程脚本，从shell脚本翻译成powershell

说一下代码的思路：
1.先把api调用的环境确保是test的；
2.然后打开微信开发工具，拿到服务端口进行
3.如果是体验版的就需要使用到版本号进行提交，这里是把时间也带上，好日后明确区分使用（方便沟通）
4.开发版就执行wget，体验版就执行cli的代码上传

最后输出

添加build description，装插件的时候搜索：description setter
因为前面脚本我是写死了qrcode.png，所以就每次都是覆盖式的只有一张图片。也就同样返回这图片咯

image.png

代码如下：

 二维码${BUILD_ID}

遇到的问题

1. 需要该电脑的微信开发工具打开，并且手动在【安全设置】里面打开服务端口
2. 微信开发工具需要登录才能正常打包（关机后再开机，需要重新打开和登录）
3. 在进行wget时或者代码upload时，都需要代码能正常编译才能跑成功，不然就会失败或者卡着不动。
4. wget需要另外安装，而且关键的一句话remove-item alias:wget需要执行才能跑真正的wget。因为powershell内部的Invoke-WebRequest缩写命令就是wget。解决方案来源：https://zhuanlan.zhihu.com/p/135925681
5. 其中遇到比较多的问题就是脚本和函数间的区别，不断的去百度和各种尝试后的结果。而且网上的教程基本上都是使用mac电脑进行部署的，所以网上全部脚本都是shell的。期间还各种尝试使用Python脚本，又尝试了Windows的sh.exe执行shell脚本，最终都各种放弃了，还是对Windows各种妥协了。没辙。

2020-6-21日更新，最后还是换了mac来部署

Windows打包实在太不稳定了，要么npm不行，要么wget不行。无奈只能换个平台吧，换完后，清爽感觉来了，Windows所有的困难都没有了。舒坦了。
以下是我的脚本，思路供参考

#!/bin/bash
echo -------------------------------------------------------
echo GIT_BRANCH: ${GIT_BRANCH}
echo -------------------------------------------------------

# 1、替换service下的config.js的环境参数CURRENT_ENV：test和prod
sed -i '' 's/const CURRENT_ENV = "prod";/const CURRENT_ENV = "test";/' src/service/config.js

# 2执行项目构建
cd ${WORKSPACE}
pwd
npm install
npm run build:weapp

# 打开微信开发者工具
/Applications/wechatwebdevtools.app/Contents/MacOS/cli -o
port=$(cat "/Users/mg/Library/Application Support/微信开发者工具/50a7d9210159a32f006158795f893857/Default/.ide")
echo "微信开发者工具运行在${port}端口"
return_code=$(curl -sL -w %{http_code} http://127.0.0.1:${port}/open)

if [ $return_code == 200 ]
  then
  echo "返回状态码200，devtool启动成功！"
else
  echo "返回状态码${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 "发布开发版！"
  wget -O qrcode.png http://127.0.0.1:${port}/preview?projectpath=${WORKSPACE}
  echo "预览成功！请扫描二维码进入开发版！"
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