本文首发于
https://github.com/yingye/Blo… ，迎接列位关注我的Blog，正文以issue情势显现，喜好请点star，定阅请点watch～
背景
微信小顺序的测试宣布在没有 CI/CD 等相干东西的情况下，存在着以下的题目：
- 小顺序开辟助手中，同一个开辟者只能显现一个开辟版本
- 测试同事找开辟要二维码，效力较低
- 当地天生的二维码会涌现照顾当地代码、未实时拉取分支其他修改等题目
为了防止如上题目标发作，采纳微信小顺序集成 Jenkins 的计划。
基础
在引见完成计划之前，先来回忆一下通例的微信小顺序宣布流程。
从上面的流程图能够看出，微信小顺序预览、上传都是须要在微信开辟者东西中举行的，接下来相识一下微信开辟者东西供应的上传体式格局。
微信开辟者东西
除了图形化界面，微信开辟者东西还供应了敕令行与 HTTP 效劳两种接供词外部挪用，来举行登录、预览、上传等操纵。
敕令行挪用
敕令行东西所在位置：
macOS: <装置途径>/Contents/Resources/app.nw/bin/cli
Windows: <装置途径>/cli.bat
以 macOS 操纵体系示例：
1、翻开开辟者东西：
/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -o个中，/Applications/wechatwebdevtools.app/为装置途径。
2、登录：
/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -l输入上面的敕令行后，终端中打印出登录二维码，运用微信扫码登录。在微信端完成操纵以后，会输出 login success，以下图所示：
假如想得到 base64 情势的二维码，能够运用下面的敕令：
# 登录，在终端中打印登录 base64 情势的二维码
cli -l --login-qr-output base64
# 登录，二维码转成 base64 并存到文件 /Users/username/code.txt
cli -l --login-qr-output base64@/Users/username/code.txt更多 API 能够参考 敕令行挪用 。
HTTP 效劳
HTTP 效劳在东西启动后自动开启，每次开启 host 牢固为 127.0.0.1，端口号并不牢固。端口号在用户目次下纪录，位置以下：
macOS : ~/Library/Application Support/微信web开辟者东西/Default/.ide
Windows : ~/AppData/Local/微信web开辟者东西/User Data/Default/.ide
以 macOS 操纵体系示例：
起首须要运转开辟者东西，能够应用上面引见的敕令行要领翻开微信开辟者东西。
/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -o
port=$(cat "/Users/zyy/Library/Application Support/微信web开辟者东西/Default/.ide")
echo "微信开辟者东西运转在${port}端口"如许就能够拿到微信开辟者东西运转的端口号了，个中，/Users/zyy/ 为用户目次。
1、翻开开辟者东西：
# 翻开东西
http://127.0.0.1:端口号/open
# 翻开/革新项目
http://127.0.0.1:端口号/open?projectpath=项目全途径2、登录：
# 登录，返回图片花样的二维码
http://127.0.0.1:端口号/login
# 登录，取 base64 花样二维码
http://127.0.0.1:端口号/login?format=base64
# 登录，取 base64 花样二维码，并写入 /Users/username/logincode.txt
http://127.0.0.1:端口号/login?format=base64&qroutput=%2FUsers%2Fusername%2Flogincode.txt3、预览：
# 预览途径为 /Users/username/demo 的项目，返回图片花样的二维码
http://127.0.0.1:端口号/preview?projectpath=%2FUsers%2Fusername%2Fdemo
# 预览途径为 /Users/username/demo 的项目，返回 base64 花样的二维码
http://127.0.0.1:端口号/preview?projectpath=%2FUsers%2Fusername%2Fdemo&format=base64
# 预览途径为 /Users/username/demo 的项目，返回 base64 花样的二维码，并写入 /Users/username/logincode.txt
http://127.0.0.1:端口号/preview?projectpath=%2FUsers%2Fusername%2Fdemo&format=base64&qroutput=%2FUsers%2Fusername%2Flogincode.txt
# 预览途径为 /Users/username/demo 的项目，返回图片花样的二维码，并将预览信息输出至 /Users/username/info.json
http://127.0.0.1:端口号/preview?projectpath=%2FUsers%2Fusername%2Fdemo&infooutput=%2Users%2username%2info.json更多 API 能够参考 HTTP 挪用 。
计划
微信开辟者东西现在只要 macOS 和 Windows 两种版本，这限定了效劳器的体系。下面以 macOS 为例，
来引见详细的完成历程：
装置 Jenkins
The leading open source automation server, Jenkins provides hundreds of plugins to support building, deploying and automating any project.
作为抢先的开源自动化效劳器，Jenkins供应数百个插件来支撑构建，布置和自动化任何项目。
Jenkins 依赖于 Java 运转环境，所以须要在机械上装置 Java。装置 Jenkins 体式格局许多，能够在官网直接下载最新的软件包，然后实行下面的敕令启动 Jenkins 。
java -jar jenkins.war --httpPort=8888个中，--httpPort=8888 为设置效劳端口号，默许端口号为 8080 。
新建使命
挑选 “构建一个自在作风的软件项目” ，在输入使命称号以后，点击肯定按钮，进入到使命设置页面。
使命设置
在引见使命设置之前，先来看一下终究要完成的功用。
重要的功用点以下：
- 运用 git 来治理代码，能够挑选分支
- 打包版本（开辟版／体验版）能够挑选（注重：这里的「开辟版」对应「预览」，体验版对应「上传」）
1、源码治理
在使命设置页面的第二项 “源码治理” 中，挑选 git 体式格局治理代码。填入 git 堆栈地点及接见的账户，上图中的 $branch 是自定义的构建参数，下面来看一下构建参数的定义。
2、构建参数
在使命设置页面的第二项 “General” 中，挑选 “参数化构建历程”，进入构建参数设置页面。
参数有上述的几种范例供挑选，能够参考下图举行设置，这里不再赘述。
须要注重的是，这里的 name 能够经由过程 $name 的情势猎取到，比方上面提到的 $branch 。
构建
在使命设置页面的 “构建” 中，挑选 “实行 shell” 体式格局来举行构建。
Tips：这里的 shell 剧本是微信小顺序集成 Jenkins 最中心的内容。
回忆一下，本文最最先提到的微信小顺序宣布流程图：
这一系列的操纵运用 shell 脚原本完成，怎样完成呢？
登录
微信开辟者东西的登录须要在微信端扫码确认，这一步微信并没有供应账号密码的登录体式格局。不过，微信开辟者东西是能够坚持登录态的。由于微信限定，一个开辟者身份只能在一个终端登录，所以我们申请了一个新的微信账号「前端小姐姐」用于在 Jenkins 机械上登录。
项目基础设置
在图形化界面中，上传代码时，会在开辟者东西中填入 AppID 、项目途径等信息，也会在「概况」中挑选项目标基础设置，比方「ES6 转 ES5」。微信还供应了一种设置要领，在项目根目次运用 project.config.json 文件。这里经由过程一段 node 剧本，天生 project.config.json 文件。
const fs = require('fs')
const content = '{"description":"项目设置文件。","setting":{"urlCheck":false,"es6":true,"postcss":true,"minified":true,"newFeature":true},"miniprogramRoot":"./","compileType":"miniprogram","appid":"***","projectname":"wechat-app","condition":{"search":{"current":-1,"list":[]},"conversation":{"current":-1,"list":[]},"plugin":{"current":-1,"list":[]},"game":{"currentL":-1,"list":[]},"miniprogram":{"current":-1,"list":[]}}}'
fs.writeFileSync('./dist/project.config.json', content, 'utf-8')如许就完成了项目标基础设置，接下来将引见怎样经由过程 shell 剧本完成上传。
shell 剧本
echo -------------------------------------------------------
echo GIT_BRANCH: ${GIT_BRANCH}
echo -------------------------------------------------------
# 实行项目构建
npm i --registry=http://registry.npm.taobao.org
npm run build
# 翻开微信开辟者东西
/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -o
port=$(cat "/Users/devops/Library/Application Support/微信web开辟者东西/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" == "dev" ]
then
echo "宣布开辟版！"
wget -O $BUILD_ID.png http://127.0.0.1:${port}/preview?projectpath=/Users/Shared/Jenkins/Home/workspace/fe-wechat-app/dist
echo "预览胜利！请扫描二维码进入开辟版！"
elif [ "$build_type" == 'prod' ]
then
echo "预备上传！"
/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -u 1.0.0@/Users/Shared/Jenkins/Home/workspace/fe-wechat-app/dist --upload-desc 'initial release'
echo "上传胜利！请到微信小顺序背景设置体验版并提交考核！"
fi由于本项目须要编译代码，所以效劳器上须要装置 node 和 npm。npm run build 敕令不光在编译代码，而且还实行了前面引见的天生 project.config.json 的 node 剧本。
开辟版上传胜利后，将二维码图片保留下来，用于构建后显现二维码和发送邮件。
这里连系敕令行挪用和 HTTP 挪用两种体式格局来完成上传，重要出于以下缘由：
- HTTP 挪用能够很轻易的下载天生的二维码图片
- HTTP 效劳只要在微信开辟者东西启动以后，才会启动，所以须要经由过程敕令行挪用体式格局，来启动微信开辟者东西
构建后
运用 description setter plugin 插件来完成，构建完成后显现二维码图片。
装置插件
回到 Jenkins 主页，在「体系治理」中，进入到「插件治理」页面，搜刮 description setter plugin 并装置。
装置好插件后，返回使命设置页面。在「构建后操纵」中，增添「Set build description」步骤，以下图：
这里采纳 HTML <img> 标签情势，展现二维码信息，以下：
<img src="http://机械ip:端口/job/项目称号/ws/${BUILD_ID}.png" alt="二维码${BUILD_ID}" width="200" height="200" /> <a href="http://机械ip:端口/job/项目称号/ws/${BUILD_ID}.png">二维码${BUILD_ID}</a>根据上面的体式格局设置后，发明图片并没有显现出来，而是显现了文本信息。这是由于 Jenkins 出于平安的限定，一切形貌信息的 Markup Formatter 默许都采纳 Plain text 的形式。
在「体系治理」-> 「全局平安设置」中，将 Markup Formatter 由 Plain text (纯文本) 更改成 Safe HTML 即可。
根据上面的步骤操纵后，就能够显现出开辟版二维码。由于 Jenkins 构建时，均运用「前端小姐姐」微信账号，所以小顺序开辟助手上「前端小姐姐」宣布的开辟版不肯定是哪位同砚构建的，故须要运用 Jenkins 平台天生的二维码，并注重二维码有效期（有效期25分钟）。
总结
本文以微信小顺序通例的宣布流程为切入点，循规蹈矩地引见了怎样集成 Jenkins 完成微信小顺序预览、上传功用。背景、测试同事能够在该平台上挑选分支猎取开辟版用于联调、测试，处理了本文开篇说起的题目。
由于本文篇幅有限，只是引见了该平台的一些基础功用，假如有其他的需求，能够参考文末的拓展链接处理。另外，文中如有任何表述不清或不当的处所，迎接人人批评指正～
拓展链接：
