win10下搭建Jenkins+微信开发者工具

背景

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

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

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

wget&＃xff0c;node&＃xff0c;gitbash&＃xff08;可以不安装&＃xff09;&＃xff0c;微信web开发者工具&＃xff0c;Jenkins

基础

在介绍实现方案之前&＃xff0c;先来回顾一下常规的微信小程序发布流程。

从上面的流程图可以看出&＃xff0c;微信小程序预览、上传都是需要在微信开发者工具中进行的&＃xff0c;接下来了解一下微信开发者工具提供的上传方式。

微信开发者工具

除了图形化界面&＃xff0c;微信开发者工具还提供了命令行与 HTTP 服务两种接口供外部调用&＃xff0c;来进行登录、预览、上传等操作。

命令行调用

命令行工具所在位置&＃xff1a;

macOS: <安装路径>/Contents/Resources/app.nw/bin/cli
Windows: <安装路径>/cli.bat

以 macOS 操作系统示例&＃xff1a;

1、打开开发者工具&＃xff1a;

/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -o

其中&＃xff0c;/Applications/wechatwebdevtools.app/为安装路径。

2、登录&＃xff1a;

/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -l

输入上面的命令行后&＃xff0c;终端中打印出登录二维码&＃xff0c;使用微信扫码登录。在微信端完成操作之后&＃xff0c;会输出 login success&＃xff0c;如下图所示&＃xff1a;

HTTP 服务

HTTP 服务在工具启动后自动开启&＃xff0c;每次开启 host 固定为 127.0.0.1&＃xff0c;端口号并不固定。端口号在用户目录下记录&＃xff0c;位置如下&＃xff1a;

macOS : ~/Library/Application Support/微信web开发者工具/Default/.ide
Windows : ~/AppData/Local/微信web开发者工具/User Data/Default/.ide

以 macOS 操作系统示例&＃xff1a;

首先需要运行开发者工具&＃xff0c;可以利用上面介绍的命令行方法打开微信开发者工具。

/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -o
port&＃61;$(cat "/Users/zyy/Library/Application Support/微信web开发者工具/Default/.ide")
echo "微信开发者工具运行在${port}端口"

这样就可以拿到微信开发者工具运行的端口号了&＃xff0c;其中&＃xff0c;/Users/zyy/ 为用户目录。

1、打开开发者工具&＃xff1a;

# 打开工具
http://127.0.0.1:端口号/open
# 打开/刷新项目
http://127.0.0.1:端口号/open?projectpath&＃61;项目全路径

2、登录&＃xff1a;

# 登录&＃xff0c;返回图片格式的二维码
http://127.0.0.1:端口号/login
# 登录&＃xff0c;取 base64 格式二维码
http://127.0.0.1:端口号/login?format&＃61;base64
# 登录&＃xff0c;取 base64 格式二维码&＃xff0c;并写入 /Users/username/logincode.txt
http://127.0.0.1:端口号/login?format&＃61;base64&qroutput&＃61;%2FUsers%2Fusername%2Flogincode.txt

3、预览&＃xff1a;

# 预览路径为 /Users/username/demo 的项目&＃xff0c;返回图片格式的二维码
http://127.0.0.1:端口号/preview?projectpath&＃61;%2FUsers%2Fusername%2Fdemo# 预览路径为 /Users/username/demo 的项目&＃xff0c;返回 base64 格式的二维码
http://127.0.0.1:端口号/preview?projectpath&＃61;%2FUsers%2Fusername%2Fdemo&format&＃61;base64# 预览路径为 /Users/username/demo 的项目&＃xff0c;返回 base64 格式的二维码&＃xff0c;并写入 /Users/username/logincode.txt
http://127.0.0.1:端口号/preview?projectpath&＃61;%2FUsers%2Fusername%2Fdemo&format&＃61;base64&qroutput&＃61;%2FUsers%2Fusername%2Flogincode.txt# 预览路径为 /Users/username/demo 的项目&＃xff0c;返回图片格式的二维码&＃xff0c;并将预览信息输出至 /Users/username/info.json
http://127.0.0.1:端口号/preview?projectpath&＃61;%2FUsers%2Fusername%2Fdemo&infooutput&＃61;%2Users%2username%2info.json

开始部署准备阶段

1.安装wget&＃xff0c;node&＃xff0c;Jenkins&＃xff0c;gitbash&＃xff0c;微信开发者工具

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

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

3.配置Jenkins服务权限和更改环境变量&＃xff08;最重要的一步&＃xff09;

打开CMD->输入services.msc
#
#

找到Jenkins 右键->属性 ->登陆
#
#

#
重启生效
#

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

JAVA_OPTS
-Dsun.jnu.encoding&＃61;UTF-8 -Dfile.encoding&＃61;UTF-8LANG
zh.CH.UTF-8

设置环境变量后重启生效&＃xff08;也可以不配直接写绝对路径&＃xff09;

Jenkins插件安装

安装下列Jenkins插件后重启&＃xff1a;

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

Jenkins项目创建

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

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

#

#
二维码${BUILD_ID};;;;;;;;;;;
#

chcp 65001 ::更改字符集
set dir&＃61;D:\ingo\Jenkins\workspace\DEV-sk_platform_consumers_furniture-wechat
set project&＃61;D:\ingo\Jenkins\workspace\DEV-sk_platform_consumers_furniture-wechat\dist
::del /F /S /Q %dir%
::rd /S /Q %dir%
git clone git&＃64;gitlab.xxxx.com:cdp/sk_platform_consumers_furniture.git %dir%
git pull git&＃64;gitlab.xxxx.com:cdp_furn/sk_platform_consumers_furniture.git
"C:\Program Files\WinRAR\WinRAR.exe" x -ibck -y -o&＃43; node_modules.rar %dir%
CALL C:\Users\xxxx\AppData\Roaming\npm\taro build --type weapp
CALL "D:\weixin\cli.bat" -o
::for /f "usebackq" %%a in (&＃96;type "C:\Windows\System32\config\systemprofile\AppData\Local\微信web开发者工具\User Data\Default\.ide"&＃96;) do &＃64;set port&＃61;%%a
::set /p port&＃61; <"C:\Windows\System32\config\systemprofile\AppData\Local\微信web开发者工具\User Data\Default\.ide"
FOR /F "usebackq delims&＃61;&＃61;" %%i IN (&＃96;type "C:\Users\xxxx\AppData\Local\微信web开发者工具\User Data\Default\.ide"&＃96;) do (echo 当前使用端口:%%iset port&＃61;%%i
)
echo %port%
echo %BUILD_ID%
echo %path%D:\wget\wget.exe -O %BUILD_ID%.png http://127.0.0.1:%port%/preview?projectpath&＃61;%project%

优化beta2.0


chcp 65001set dir&＃61;D:\ingo\Jenkins\workspace\DEV-sk_xxx_app-wechat\dist
set srcdir&＃61;C:\Users\xxx\Desktop\tmp ::做清空使用&＃xff0c;必须为空目录
set project&＃61;C:\Users\xxx\Desktop\upload-sk_xxx_app\dist-sk_xxx_app%BUILD_ID% ::将要上传的目录放到非workspace的目录外&＃xff0c;如果放到workspace里回提示程序有占用&＃xff0c;影响代码更新。
set upload&＃61;C:\Users\xxx\Desktop\upload-sk_xxx_app
mkdir %project%echo %environment%
echo %branch%
echo %describe%
echo %version%CALL robocopy %srcdir% %WORKSPACE% /purge
echo "test success"
git clone -b %branch% git&＃64;gitlab.xxx.com:cdp_furn/sk_xxx_app.git %WORKSPACE%
git pull git&＃64;gitlab.xxx.com:cdp_furn/sk_xxx_app.git"C:\Program Files\WinRAR\WinRAR.exe" x -ibck -y -o&＃43; node_modules.rar %WORKSPACE%
CALL node project-handle.js %environment%
CALL npm install node-sass&＃64;4.11.0
CALL npm rebuild node-sass&＃64;4.11.0
CALL C:\Users\xxxx\AppData\Roaming\npm\taro build --type weappCALL robocopy %dir% %project% /S
CALL "D:\weixin\cli.bat" -o
FOR /F "usebackq delims&＃61;&＃61;" %%i IN (&＃96;type "C:\Users\xxx\AppData\Local\微信web开发者工具\User Data\Default\.ide"&＃96;) do (echo 当前使用端口:%%iset port&＃61;%%i
)
echo %port%
echo %BUILD_ID%
echo %path%CALL D:\wget\wget.exe -O %BUILD_ID%.png http://127.0.0.1:%port%/preview?projectpath&＃61;%project%if %environment% &＃61;&＃61; pro (
CALL "D:\weixin\cli.bat" -u %version%&＃64;%project% --upload-desc &＃39;%describe%&＃39;
echo "生产环境预览并上传微信小程序平台"
) ELSE (
echo "测试环境仅预览并不上传微信小程序平台"
)


优化beta3.0

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


chcp 65001set dir&＃61;%WORKSPACE%\dist
set srcdir&＃61;C:\Users\xxxx\Desktop\tmp
set project&＃61;C:\Users\xxxx\Desktop\upload\%environment%-dist-%JOB_NAME%-%BUILD_ID%
set upload&＃61;C:\Users\xxxx\Desktop\upload
mkdir %project%echo %JOB_NAME% > C:\Users\xxxx\Desktop\upload\name.txt
echo "%JOB_NAME%" | D:\Git-bash\usr\bin\awk.exe -F &＃39;-&＃39; &＃39;{print $2}&＃39;
&＃64;echo off
for /f "tokens&＃61;2 delims&＃61;-" %%l in (C:\Users\xxxx\Desktop\upload\name.txt) do (
echo %%l
set projectname&＃61;%%l
)echo "projectname##%projectname%##"
echo "environment%environment%"
echo "branch##%branch%"
echo "describe##%describe%"
echo "version##%version%"CALL robocopy %srcdir% %WORKSPACE% /purge
echo "test success"
git clone -b %branch% git&＃64;gitlab.dddd.com:cdp_furn/%projectname%.git %WORKSPACE%
git pull git&＃64;gitlab.xxxx.com:cdp_furn/%projectname%.git"C:\Program Files\WinRAR\WinRAR.exe" x -ibck -y -o&＃43; node_modules.rar %WORKSPACE%
CALL node project-handle.js %environment%
CALL npm install node-sass&＃64;4.11.0
CALL npm rebuild node-sass&＃64;4.11.0
CALL sbtt git %environment%
CALL C:\Users\xxxx\AppData\Roaming\npm\taro build --type weappCALL robocopy %dir% %project% /S
CALL "D:\weixin\cli.bat" -o
FOR /F "usebackq delims&＃61;&＃61;" %%i IN (&＃96;type "C:\Users\xxxx\AppData\Local\微信web开发者工具\User Data\Default\.ide"&＃96;) do (echo 当前使用端口:%%iset port&＃61;%%i
)
echo %port%
echo %BUILD_ID%
echo %path%CALL D:\wget\wget.exe -O %BUILD_ID%.png http://127.0.0.1:%port%/preview?projectpath&＃61;%project%if %uploadif% &＃61;&＃61; prod (
CALL "D:\weixin\cli.bat" -u %version%&＃64;%project% --upload-desc &＃39;%describe%&＃39;
echo "生产环境预览并上传微信小程序平台"
) ELSE (
echo "测试环境仅预览并不上传微信小程序平台"
)


#
构建项目时记得先登陆微信开发者工具&＃xff0c;如果没登陆报错如下&＃xff1a;
#

#

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

#
#

#

#
楼镇图