微信小程序Jenkins部署方案

背景

微信小程序的测试发布在没有 CI/CD 等相关工具的状况下，存在着以下的问题：

• 小程序开发助手中，同一个开发者只能显示一个开发版本
• 测试同事找开发要二维码，效率较低
• 本地生成的二维码会出现携带本地代码、未及时拉取分支其余改动等问题
• 人工手动打包提交审核时易出错，如打包环境错误、未打包提交审核等问题

为了不如上问题的发生，采用微信小程序Jenkins部署方案。

准备工做

因微信小程序Jenkins部署依赖微信开发者工具与Jenkins，下面会介绍微信开发者工具除图形化界面的另外两种调用方式与Jenkins安装配置。

前置条件

在使用微信开发者工具http调用与命令行调用前，咱们须要开启微信开发工具安全设置中的CLI/HTTP调用功能，不然http与命令行都不能调用工具。开启路径：设置 -> 安全设置 -> 开启服务端端口。

微信开发工具-命令行调用

经过命令行调用安装完成的工具可执行文件，完成登陆、预览、上传、自动化测试等操做。调用返回码为 0 时表明正常，为 -1 时错误。

命令行工具所在位置：

<!--macOs下未更改安装路径，默认位置为：/Applications/wechatwebdevtools.app/Contents/MacOS/cli-->
macOS: <安装路径>/Contents/MacOS/cli

Windows: <安装路径>/cli.bat
复制代码

macOs下命令行调用微信开发工具

<!--打开工具-->
/Applications/wechatwebdevtools.app/Contents/MacOS/cli -o

<!--打开路径 /Users/username/demo 下的项目-->
/Applications/wechatwebdevtools.app/Contents/MacOS/cli -o /Users/username/demo

<!--登陆，在终端中打印登陆 base64 形式的二维码-->
/Applications/wechatwebdevtools.app/Contents/MacOS/cli -l --login-qr-output base64

<!--预览，在终端中打印登陆二维码-->
/Applications/wechatwebdevtools.app/Contents/MacOS/cli -p /Users/username/demo

<!--上传路径 /Users/username/demo 下的项目，指定版本号为 1.0.0，版本备注为 initial release-->
/Applications/wechatwebdevtools.app/Contents/MacOS/cli -u 1.0.0@/Users/username/demo --upload-desc 'initial release'
复制代码

更多调用方式见命令行调用

微信开发工具-http调用

http 服务在工具启动后自动开启，HTTP 服务端口号在用户目录下记录，可经过检查用户目录、检查用户目录下是否有端口文件及尝试链接来判断工具是否安装/启动。

端口号文件位置：

macOS : ~/Library/Application Support/微信开发者工具/Default/.ide

Windows : ~/AppData/Local/微信开发者工具/User Data/Default/.ide
复制代码

http调用微信开发工具，注：http调用不区分系统，除端口文件位置不一样，调用方式一致。

<!--打开工具 -->
http://127.0.0.1:端口号/open

<!--打开/刷新项目 -->
http://127.0.0.1:端口号/open?projectpath=项目全路径

<!--登陆，取 base64 格式二维码-->
http://127.0.0.1:端口号/login?format=base64

<!--预览路径为 /Users/username/demo 的项目，返回 base64 格式的二维码-->
http://127.0.0.1:端口号/preview?projectpath=%2FUsers%2Fusername%2Fdemo&format=base64

<!--上传路径为 /Users/username/demo 的项目，指定版本号为 v1.0.0，并带上备注test-->
http://127.0.0.1:端口号/upload?projectpath=%2FUsers%2Fusername%2Fdemo&version=v1.0.0&desc=test
复制代码

更多调用方式见：http调用

安装Jenkins

Jenkins依赖java运行环境，须要先安装java jdk，可在官网下载。注：Jenkins要求java jdk版本为8-11

macOs下安装Jenkins

1. 安装brew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
复制代码

2. 安装Jenkins

brew install jenkins
复制代码

3. 查看Jenkins 版本

jenkins -v
复制代码

红色标注为Jenkins版本号

4. 执行

<!--注：2.195为Jenkins版本，388为端口号，默认端口为8080-->
java -jar /usr/local/Cellar/jenkins/2.195/libexec/jenkins.war --httpPort=388
复制代码

5. 游览器打开locahost:388，进入Jenkins页面。

6. 查看管理员密码，注：具体目录根据参考提示

cat /Users/sung/.jenkins/secrets/initialAdminPassword
复制代码

7. 这里咱们选择默认安装

8. 安装完成后进入主页，选择系统管理 -> 插件管理 -> 可选插件。除默认勾选插件外，咱们还须要安装这些插件，以下：

   • Locale
   • SSH Agent
   • Node.js
   • build-name-setter
   • description setter
   • Git Parameter

9. 若是你已经完成上列步骤，那么Jenkins就已经安装完成了，咱们所需的依赖也有了，后续会讲述Jenkins任务配置。

Jenkins任务配置

1. 新建任务 -> 选择“构建一个自由风格的软件项目”。

2. 在General中，勾选参数化构建过程。

   • 选择“选项参数”，配置以下：

   

   

3. "项目管理"，选择Git，配置以下：

3. “构建环境”，选择Delete workspace before build starts，构建前清空工做区。

4. “构建”，选择执行 shell，脚本以下：

# 执行项目构建
npm i --registry=http://registry.npm.taobao.org
npm run ${build_type}:weapp
# 打开微信开发者工具
/Applications/wechatwebdevtools.app/Contents/MacOS/cli -o
# 端口号文件
port=$(cat "/Users/sung/Library/Application Support/微信开发者工具/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
if [ "$build_type" != "prod" ]
  then
  echo "发布开发版！"
  wget -O $BUILD_ID.png http://127.0.0.1:${port}/preview?projectpath=${WORKSPACE}/dist
  # 用于生成带参数的预览码
  # /Applications/wechatwebdevtools.app/Contents/MacOS/cli -o -p /Users/sung/Desktop/weapp/dist --preview-qr-output base64@${WORKSPACE}/qrCode.txt --compile-condition '{"pathName":"pages/index/index","query":"agent_no=CN08662274"}'
  # npm run create ${build_type}
  echo "预览成功！请扫描二维码进入开发版！"
elif [ "$build_type" == 'prod' ]
  then
  echo "准备上传！"
  /Applications/wechatwebdevtools.app/Contents/MacOS/cli -u ${version}@/${WORKSPACE}/dist --upload-desc ${descr}
  echo "上传成功！请到微信小程序后台设置体验版并提交审核！"
fi
复制代码

5. "构建后"，选择Set build description，配置以下：

<img src="http://本机ip:启动jenkins端口/job/jenkins任务名称/ws/${BUILD_ID}.png" alt="二维码${BUILD_ID}" width="200" height="200" /> <a href="http://本机ip:启动jenkins端口/job/jenkins任务名称/ws/${BUILD_ID}.png">二维码${BUILD_ID}</a>
复制代码

6. 上列步骤执行完毕后，应用、保存执行构建，获得构建结果以下：

注：获得建构结果与预期不一致，图片并无显示出来，而是显示了文本信息。这是因为 Jenkins 出于安全的限制，全部描述信息的 Markup Formatter 默认都采用 Plain text 的模式。

在「系统管理」-> 「全局安全配置」中，将 Markup Formatter（标记格式器） 由 Plain text (纯文本) 更改成 Safe HTML 便可。

7. 修改完成后，最终构建结果以下：

关键点

1. 预览二维码有效期为25分钟
2. 因Jenkins shell执行wget会将&后的全部字段截掉，没办法使用http调用在预览二维码中携带参数。 咱们采用了一个比较绕的方法解决了该问题。

<!--使用命令行调用生成预览二维码，再将二维码导出为base64存储在工做区下的qrCode.txt文件中-->
/Applications/wechatwebdevtools.app/Contents/MacOS/cli -o -p /Users/sung/Desktop/weapp/dist --preview-qr-output base64@${WORKSPACE}/qrCode.txt --compile-condition '{"pathName":"pages/index/index","query":"agent_no=CN08662274"}'

<!--npm run create命令调用create.js-->
npm run create ${BUILD_ID}

<!--create.js-->
const fs = require('fs'); 
fs.readFile('./qrCode.txt', function(err, data) {
  //若是错误err
  if (err) {
    console.log(err, '读取文件失败');
  } else {
    const dataBuffer = new Buffer.from(data.toString(), 'base64');
    fs.writeFile(`./${process.argv[2]}.png`, dataBuffer, function(e) {
      if (e) {
        console.log(e, '写入文件失败');
      } else {
        console.log('保存成功');
      }
    });
  }
});
复制代码

3. 生成预览图片下载须要安装wget

测试与发布

测试

1. 测试正常流程，构建生成预览码，使用预览码进行测试。注：使用预览码缺点很明显，1.须要添加开发者权限，2.有效期只有25分钟，做用有限。

2. 测试特殊流程，例如扫码场景携带参数，可以使用上面所述关键点2，生成带参数的预览码。

3. 推荐使用体验版测试，每次构建都提交到小程序后台，覆盖以前的体验版。使用体验版有如下优缺点：

   优势：

   • 体验版二维码无时间限制
   • 无需添加开发者权限
   • 每次提交内容覆盖以前的内容

   缺点：

   • 体验版测试携带参数场景，须要在微信公众平台设置体验版路径，十分麻烦。

使用体验版进行测试

推荐将体验版二维码保存在项目中，经过设置Set build description，访问体验版二维码。设置以下：

<img src="http://本机ip:启动jenkins端口/job/jenkins任务名称/ws/体验版二维码名称.png" alt="体验版" width="200" height="200" /> <a href="http://本机ip:启动jenkins端口/job/jenkins任务名称/ws/体验版二维码名称.png">体验版</a>
复制代码

使用体验版测试脚本以下：

# 执行项目构建
npm i --registry=http://registry.npm.taobao.org
npm run ${build_type}:weapp
# 打开微信开发者工具
/Applications/wechatwebdevtools.app/Contents/MacOS/cli -o
port=$(cat "/Users/sung/Library/Application Support/微信开发者工具/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
if [ "$build_type" != "prod" ]
  then
  echo "覆盖体验版"
  /Applications/wechatwebdevtools.app/Contents/MacOS/cli -u ${version}@/${WORKSPACE}/dist --upload-desc ${build_type}环境，测试
elif [ "$build_type" == 'prod' ]
  then
  echo "准备上传！"
  /Applications/wechatwebdevtools.app/Contents/MacOS/cli -u ${version}@/${WORKSPACE}/dist --upload-desc ${descr}
  echo "上传成功！请到微信小程序后台设置体验版并提交审核！"
fi
复制代码

• 全部构建环境都使用上传命令，覆盖以前的体验版，结果以下：

发布

1. 构建选择prod环境，填写版本号与提交信息。

   

2. 微信公众平台，校验提交信息与版本号，提交审核。

到这里整个流程已经完成了闭环，你们能够尝试一下，开始策马奔腾吧。😂😂😂

参考资料

• linux安装jenkins
• 微信小程序发布助手
• 微信小程序集成 Jenkins
• 每日优鲜便利购微信小程序集成 Jenkins 生成二维码发版