huikawlkj 2019-09-05
注:(下文的图片是我从别的网站的自己的贴子弄过来的,绝对原创,哎51cto我被封了0.0)
微信小程序的测试发布在没有 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 服务在工具启动后自动开启,每次开启 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.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.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
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-8 LANG zh.CH.UTF-8
设置环境变量后重启生效(也可以不配直接写绝对路径)
安装下列Jenkins插件后重启:
GIT plugin Git Parameter:获取所有分支名,作为参数列表 SSH Credentials Plugin Git Changelog:获取Git提交log build-name-setter description setter plugin:在build历史记录描述信息中增加二维码显示 PostBuildScript Plugin:编译完成后执行脚本 NodeJS Plugin:小程序构建需要,在更改提交状态时使用node技术 AnsiColor description setter :添加set build description获取图片
创建一个自由风格的项目
添加执行批处理构建,并且把如下带粘贴进去
![二维码${BUILD_ID}](http://192.168.120.191:8080/job/DEV-sk_platform_consumers_furniture-wechat/ws/${BUILD_ID}.png) [二维码${BUILD_ID}](http://192.168.120.191:8080/job/DEV-sk_platform_consumers_furniture-wechat/ws/${BUILD_ID}.png);;;;;;;;;;;
chcp 65001 ::更改字符集 set dir=D:\ingo\Jenkins\workspace\DEV-sk_platform_consumers_furniture-wechat set project=D:\ingo\Jenkins\workspace\DEV-sk_platform_consumers_furniture-wechat\dist ::del /F /S /Q %dir% ::rd /S /Q %dir% git clone [email protected]:cdp/sk_platform_consumers_furniture.git %dir% git pull [email protected]:cdp_furn/sk_platform_consumers_furniture.git "C:\Program Files\WinRAR\WinRAR.exe" x -ibck -y -o+ 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 (`type "C:\Windows\System32\config\systemprofile\AppData\Local\微信web开发者工具\User Data\Default\.ide"`) do @set port=%%a ::set /p port= < "C:\Windows\System32\config\systemprofile\AppData\Local\微信web开发者工具\User Data\Default\.ide" FOR /F "usebackq delims==" %%i IN (`type "C:\Users\xxxx\AppData\Local\微信web开发者工具\User Data\Default\.ide"`) do ( echo 当前使用端口:%%i set port=%%i ) echo %port% echo %BUILD_ID% echo %path% D:\wget\wget.exe -O %BUILD_ID%.png http://127.0.0.1:%port%/preview?projectpath=%project%
chcp 65001 set dir=%WORKSPACE%\dist set srcdir=C:\Users\skong\Desktop\tmp set project=C:\Users\skong\Desktop\upload\%environment%-dist-%JOB_NAME%-%BUILD_ID% set upload=C:\Users\skong\Desktop\upload mkdir %project% echo %JOB_NAME% > C:\Users\skong\Desktop\upload\name.txt echo "%JOB_NAME%" | D:\Git-bash\usr\bin\awk.exe -F '-' '{print $2}' @echo off for /f "tokens=2 delims=-" %%l in (C:\Users\skong\Desktop\upload\name.txt) do ( echo %%l set projectname=%%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% [email protected]:cdp_furn/%projectname%.git %WORKSPACE% git pull [email protected]:cdp_furn/%projectname%.git "C:\Program Files\WinRAR\WinRAR.exe" x -ibck -y -o+ node_modules.rar %WORKSPACE% CALL node project-handle.js %environment% CALL npm install [email protected] CALL npm rebuild [email protected] CALL sbtt git %environment% CALL C:\Users\skong\AppData\Roaming\npm\taro build --type weapp CALL robocopy %dir% %project% /S CALL "D:\weixin\cli.bat" -o FOR /F "usebackq delims==" %%i IN (`type "C:\Users\skong\AppData\Local\微信web开发者工具\User Data\Default\.ide"`) do ( echo 当前使用端口:%%i set port=%%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=%project% if %uploadif% == prod ( CALL "D:\weixin\cli.bat" -u %version%@%project% --upload-desc '%describe%' echo "生产环境预览并上传微信小程序平台" ) ELSE ( echo "测试环境仅预览并不上传微信小程序平台" )
13:17:50 Initializing... 13:17:50 idePortFile: C:\Users\skong\AppData\Local\微信web开发者工具\User Data\Default\.ide 13:17:50 IDE server has started, listening on http://127.0.0.1:25085 13:17:50 initialization finished 13:17:50 open IDE success 13:17:50 当前使用端口:25085 13:17:50 25085 13:17:50 14 13:17:50 D:\ingo\Jenkins\tools\jenkins.plugins.nodejs.tools.NodeJSInstallation\node11.10;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files\dotnet\;C:\Program Files\TortoiseSVN\bin;C:\Program Files (x86)\Microsoft Visual Studio\2017\Enterprise\MSBuild\15.0\Bin;C:\Program Files (x86)\Inno Setup 5;D:\Git-bash\cmd;C:\skongsoft\node-v8.9.0-win-x64\;D:\wget;C:\Users\skong\AppData\Local\Microsoft\WindowsApps;C:\Users\skong\AppData\Roaming\npm 13:17:50 --2019-08-19 13:17:50-- http://127.0.0.1:25085/preview?projectpath=C:%5CUsers%5Cskong%5CDesktop%5Cupload%5Csit-dist-UAT-sk_platform_consumers_furniture-wechat-14 13:17:50 Connecting to 127.0.0.1:25085... connected. 13:17:50 HTTP request sent, awaiting response... 400 Bad Request 13:17:57 2019-08-19 13:17:57 ERROR 400: Bad Request. 13:17:57 13:17:57 "测试环境仅预览并不上传微信小程序平台" 13:17:57 Build step '执行 Windows 批处理命令' marked build as failure 13:17:57 [description-setter] Description set: 13:17:57 Finished: FAILURE
构建项目时记得先登陆微信开发者工具,如果没登陆报错如下:
添加成员
注意代码里的appid是否有问题
首先如果想使用微信开发者工具,你可能就必须的用mac或者windows,但是dos命令不是每个运维大哥都会熟练使用,所以可以在windows上下载一个Linux命令包
如上图echo %path% 里放入Linux for win命令的exe文件即可使用Linux命令
chcp 65001 set dir=%WORKSPACE%\dist set srcdir=C:\Users\skong\Desktop\tmp set project=C:\Users\skong\Desktop\upload\%environment%-dist-%JOB_NAME%-%BUILD_ID% set upload=C:\Users\skong\Desktop\upload mkdir %project% echo %JOB_NAME% > C:\Users\skong\Desktop\upload\name.txt echo "%JOB_NAME%" | awk -F '-' '{print $2}' @echo off for /f "tokens=2 delims=-" %%l in (C:\Users\skong\Desktop\upload\name.txt) do ( echo %%l set projectname=%%l ) echo "projectname##%projectname%##" echo "environment%environment%" echo "branch##%branch%" echo "describe##%describe%" echo "version##%version%" git clone -b %branch% [email protected]:cdp_furn/%projectname%.git %WORKSPACE% git pull [email protected]:cdp_furn/%projectname%.git "C:\Program Files\WinRAR\WinRAR.exe" x -ibck -y -o+ node_modules.rar %WORKSPACE% CALL node project-handle.js %environment% CALL npm install [email protected] CALL npm rebuild [email protected] CALL sbtt git %environment% CALL C:\Users\skong\AppData\Roaming\npm\taro build --type weapp CALL cp -r %dir% %project% CALL "D:\weixin\cli.bat" -o FOR /F "usebackq delims==" %%i IN (`cat "C:\Users\skong\AppData\Local\微信web开发者工具\User Data\Default\.ide"`) do ( echo 当前使用端口:%%i set port=%%i ) echo %port% echo %BUILD_ID% echo %path% CALL wget -O %BUILD_ID%.png http://127.0.0.1:%port%/preview?projectpath=%project% if %uploadif% == prod ( CALL "D:\weixin\cli.bat" -u %version%@%project% --upload-desc '%describe%' echo "生产环境预览并上传微信小程序平台" ) ELSE ( echo "测试环境仅预览并不上传微信小程序平台" )