微信小程序集成 jenkins 自动打码

背景

小程序编译、打包、预览均需要依赖开发者工具进行,且团队中成员均需要开通代码仓库权限,比较繁琐。故在官方论坛中找到以下CI集成插件,并结合jenkins做成了自动打码,详细介绍如下

一、miniprogram-ci工具

概述

miniprogram-ci 是从微信开发者工具中抽离的关于小程序/小游戏项目代码的编译模块。开发者可不打开小程序开发者工具,独立使用 miniprogram-ci 进行小程序代码的上传、预览等操作。

详细介绍见官网

https://developers.weixin.qq.com/miniprogram/dev/devtools/ci.html

二、工具准备内容

  1. 密钥
  2. IP白名单配置
  3. appid
  4. 一个存放打包后二维码的目录

三、注意事项

  1. 密钥、存放二维码的目录不能和小程序代码同级,需要分开(不然小程序目录大小会超出限制)
  2. 需要提前安装nodejs(目前我安装的版本是v10.8.0,其他版本自行测试)
  3. ip白名单可能过期,具体在工具运行时会提示,按照提示,在小程序后台更新一下ip白名单即可

四、开始

安装miniprogram-ci

npm install -g miniprogram-ci

运行CI命令

miniprogram-ci 
preview
--pp ./demo-proj/
--pkp ./private.YOUR_APPID.key
--appid YOUR_APPID
--uv PACKAGE_VERSION
-r 1
--enable-es6 true
--proxy YOUR_PROXY
--qrcode-format image
--qrcode-output-dest '/tmp/x.jpg'

出现以下提示,则证明成功

如报错,按报错提示解决即可

五、集成到jenkins

jenkins安装过程忽略,默认均安装成功

1、所需插件

  • OWASP Markup Formatter
  • Git
  • set build description
  • Text Finders
  • Git Parameter Plug-In

2、更换jenkins build页面描述信息展示为html

  • 安装OWASP Markup Formatter插件
  • 在Manage Jenkins -> Configure Global Security,将Markup Formatter的设置更改为Safe HTML即可注意:我测试下来,必须安装OWASP Markup Formatter插件才能将Markup Formatter的设置更改为Safe HTML

3、配置jenkins的git,用于拉取代码,这里直接贴图


4、打包命令配置

#!/bin/sh -l

# 固定一个默认的appid
app_

# 判断上面的environment变量值,用于多环境打包判断
case $environment in
"qa")
app_
;;
"production")
app_
;;
esac
echo $app_id
echo "-----------当前所选环境为:$environment-----------"
echo "-----------当前环境所对应的appid为:$app_id-----------"

# 因为我这边项目有多个环境的配置文件,这里需要根据前面选择的环境来对应的选择配置文件,大家结合自己项目实际情况来就行
echo "-----------正在复制环境数据config-${environment}.js到config.js-----------"
cd /XXX/Live-Test-Miniprgram/config
sudo rm -f config.js
sudo mv config-${environment}.js config.js
echo "-----------环境数据复制完毕!!!-----------"

time=$(date "+%Y%m%d%H%M%S")

# 此处为ci插件的执行命令
miniprogram-ci
preview
--pp /XXX/Live-Test-Miniprgram
--pkp /XXX/private.$app_id.key
--appid $app_id
--uv 1.0
--enable-es6 true
--preview-page-path "${pagePath}"
--qrcode-format image
--qrcode-output-dest "/Qrcode_img/${time}.jpg"

5、构建后操作

1) 构建后操作添加一个set build description

  • Regular expression输入(w*.jpg) 此处用于匹配日志中的二维码文件名
  • Description输入如下数据<h5>发布环境:$environment</h5> <h5>发布分支:$branch</h5> <img src ="图片存放目录1" height="140" width="140" >

2) 构建后操作添加一个Text Finders

  • Regular expression输入Could not determine description,见下方截图

六、最终效果