win10下搭建Jenkins+微信开发者工具-即速应用

背景

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

小程序开发助手中，同一个开发者只能显示一个开发版本
测试同事找开发要二维码，效率较低
本地生成的二维码会出现携带本地代码、未及时拉取分支其他改动等问题

为了避免如上问题的发生，采用微信小程序集成 Jenkins 的方案。
但是网上所有文档都是基于MacOS部署的，但是实际都是一样的东西。唯一不一样的就是在win10环境中使用批处理文件，还需要安装一些特定的软件：

wget，node，gitbash（可以不安装），微信web开发者工具，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，如下图所示：
小程序

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 -oport=$(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.txthttp://127.0.0.1:端口号/login?format=base64&qroutput=%2FUsers%2Fusername%2Flogincode.txt

3、预览：

# 预览路径为 /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.txthttp://127.0.0.1:端口号/preview?projectpath=%2FUsers%2Fusername%2Fdemo&format=base64&qroutput=%2FUsers%2Fusername%2Flogincode.txt# 预览路径为 /Users/username/demo 的项目，返回图片格式的二维码，并将预览信息输出至 /Users/username/info.jsonhttp://127.0.0.1:端口号/preview?projectpath=%2FUsers%2Fusername%2Fdemo&infooutput=%2Users%2username%2info.json

小程序

开始部署准备阶段

1.安装wget，node，Jenkins，gitbash，微信开发者工具

node，Jenkins去官网下载msi文件即可安装便利
wget下载后解压到D盘根路径下即可
（所有需要使用到的东西最好不要放到当前用户触碰不到的目录，否则你会哭的很惨）

2.安装gitbash并且上传公钥到代码库
#
#
小程序

3.配置Jenkins服务权限和更改环境变量（最重要的一步）

打开CMD->输入services.msc
#
#
小程序
找到Jenkins 右键->属性 ->登陆
#
#

小程序
#
重启生效
#

小程序
#
#
在Jenkins系统管理——全局安全配置页面，将标记格式器在下拉列表中修改为Safe HTML然后保存，这个修改是为了在build历史记录中能够直接显示二维码图片

JAVA_OPTS-Dsun.jnu.encoding=UTF-8 -Dfile.encoding=UTF-8LANGzh.CH.UTF-8

设置环境变量后重启生效（也可以不配直接写绝对路径）

Jenkins插件安装

安装下列Jenkins插件后重启：

GIT pluginGit Parameter:获取所有分支名，作为参数列表SSH Credentials PluginGit Changelog：获取Git提交logbuild-name-setterdescription setter plugin：在build历史记录描述信息中增加二维码显示PostBuildScript Plugin：编译完成后执行脚本NodeJS Plugin:小程序构建需要，在更改提交状态时使用node技术AnsiColordescription setter ：添加set build description获取图片

小程序

Jenkins项目创建

小程序
#
创建一个自由风格的项目
#

#
添加执行批处理构建，并且把如下带粘贴进去
#

#
小程序

小程序

#
<img src="http://192.168.120.191:8080/job/DEV-sk_platform_consumers_furniture-wechat/ws/${BUILD_ID}.png" alt="小程序"/>

优化beta2.0

chcp 65001set dir=D:ingoJenkinsworkspaceDEV-sk_xxx_app-wechatdistset srcdir=C:UsersxxxDesktoptmp  ::做清空使用，必须为空目录set project=C:UsersxxxDesktopupload-sk_xxx_appdist-sk_xxx_app%BUILD_ID%  ::将要上传的目录放到非workspace的目录外，如果放到workspace里回提示程序有占用，影响代码更新。set upload=C:UsersxxxDesktopupload-sk_xxx_appmkdir %project%echo %environment%echo %branch%echo %describe%echo %version%CALL robocopy %srcdir% %WORKSPACE% /purgeecho "test success"git clone -b %branch% git@gitlab.xxx.com:cdp_furn/sk_xxx_app.git %WORKSPACE%git pull git@gitlab.xxx.com:cdp_furn/sk_xxx_app.git"C:Program FilesWinRARWinRAR.exe" x -ibck -y -o+ node_modules.rar %WORKSPACE%CALL node project-handle.js %environment%CALL npm install node-sass@4.11.0CALL npm rebuild node-sass@4.11.0CALL C:UsersxxxxAppDataRoamingpmtaro build --type weappCALL robocopy %dir% %project% /SCALL "D:weixincli.bat" -oFOR /F "usebackq delims==" %%i IN (`type "C:UsersxxxAppDataLocal微信web开发者工具User DataDefault.ide"`) do (    echo 当前使用端口:%%i    set port=%%i)echo %port%echo %BUILD_ID%echo %path%CALL D:wgetwget.exe -O %BUILD_ID%.png http://127.0.0.1:%port%/preview?projectpath=%project%if %environment% == pro (CALL "D:weixincli.bat" -u %version%@%project% --upload-desc '%describe%'echo "生产环境预览并上传微信小程序平台") ELSE (echo "测试环境仅预览并不上传微信小程序平台")

小程序

优化beta3.0

beta3.0调整了变量使用，实现了可移植，复制的通用性。

chcp 65001set dir=%WORKSPACE%distset srcdir=C:UsersxxxxDesktoptmpset project=C:UsersxxxxDesktopupload%environment%-dist-%JOB_NAME%-%BUILD_ID%set upload=C:UsersxxxxDesktopuploadmkdir %project%echo %JOB_NAME% > C:UsersxxxxDesktopuploadame.txtecho "%JOB_NAME%" | D:Git-bashusrbinawk.exe -F '-' '{print $2}'@echo offfor /f "tokens=2 delims=-" %%l in (C:UsersxxxxDesktopuploadame.txt) do ( echo %%lset projectname=%%l)echo "projectname##%projectname%##"echo "environment%environment%"echo "branch##%branch%"echo "describe##%describe%"echo "version##%version%"CALL robocopy %srcdir% %WORKSPACE% /purgeecho "test success"git clone -b %branch% git@gitlab.dddd.com:cdp_furn/%projectname%.git %WORKSPACE%git pull git@gitlab.xxxx.com:cdp_furn/%projectname%.git"C:Program FilesWinRARWinRAR.exe" x -ibck -y -o+ node_modules.rar %WORKSPACE%CALL node project-handle.js %environment%CALL npm install node-sass@4.11.0CALL npm rebuild node-sass@4.11.0CALL sbtt git %environment%CALL C:UsersxxxxAppDataRoamingpmtaro build --type weappCALL robocopy %dir% %project% /SCALL "D:weixincli.bat" -oFOR /F "usebackq delims==" %%i IN (`type "C:UsersxxxxAppDataLocal微信web开发者工具User DataDefault.ide"`) do (    echo 当前使用端口:%%i    set port=%%i)echo %port%echo %BUILD_ID%echo %path%CALL D:wgetwget.exe -O %BUILD_ID%.png http://127.0.0.1:%port%/preview?projectpath=%project%if %uploadif% == prod (CALL "D:weixincli.bat" -u %version%@%project% --upload-desc '%describe%'echo "生产环境预览并上传微信小程序平台") ELSE (echo "测试环境仅预览并不上传微信小程序平台")

#
构建项目时记得先登陆微信开发者工具，如果没登陆报错如下：
#
小程序
#

#
添加成员
#
注意代码里的appid是否有问题
#
#