微信小程序-win10下搭建Jenkins+微信开发者工具

头像
锅包肉
    阅读 9 分钟
    1

    背景

    注：（下文的图片是我从别的网站的自己的贴子弄过来的，绝对原创，哎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 服务

    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 右键->属性 ->登陆

    /img/remote/1460000020142306?w=493&h=597

    重启生效

    /img/remote/1460000020142307?w=829&h=101

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

    clipboard.png

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

LANG  
zh.CH.UTF-8

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

    Jenkins插件安装

    安装下列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获取图片

    /img/remote/1460000020142309?w=1607&h=332

    Jenkins项目创建

    /img/remote/1460000020142310?w=1063&h=293

    创建一个自由风格的项目

    /img/remote/1460000020142311?w=1518&h=375

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

    /img/remote/1460000020142312?w=1265&h=742

    clipboard.png

    ![二维码${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 git@gitlab.xxxx.com:cdp/sk_platform_consumers_furniture.git %dir%  
git pull git@gitlab.skong.com: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%

    优化beta2.0

    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% git@gitlab.skong.com:cdp_furn/%projectname%.git %WORKSPACE%
git pull git@gitlab.skong.com: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 node-sass@4.11.0
CALL npm rebuild node-sass@4.11.0
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 "测试环境仅预览并不上传微信小程序平台"
)

    微信小程序限制上传2M大小文件

    当判断微信开发者工具无问题和代码编译无问题时出现“400的报错”：

    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

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

    clipboard.png

    clipboard.png

    添加成员

    注意代码里的appid是否有问题

    /img/remote/1460000020142316?w=1064&h=848

    clipboard.png

    windows使用 Linux命令编写构建脚本

    首先如果想使用微信开发者工具，你可能就必须的用mac或者windows，但是dos命令不是每个运维大哥都会熟练使用，所以可以在windows上下载一个Linux命令包

    clipboard.png

    如上图echo %path% 里放入Linux for win命令的exe文件即可使用Linux命令

    clipboard.png

    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% git@gitlab.skong.com:cdp_furn/%projectname%.git %WORKSPACE%
git pull git@gitlab.skong.com: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 node-sass@4.11.0
CALL npm rebuild node-sass@4.11.0
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 "测试环境仅预览并不上传微信小程序平台"
)
    Microsoftnode.jswindowsjenkins微信
    锅包肉
    89 声望17 粉丝

    这个人很懒，没有什么说的。

    « 上一篇
    Centos7 安装jumpserver堡垒机
    下一篇 »
    harbor仓库私服双主复制高可用

    引用和评论

    推荐阅读
    头像
    vue3.2 +vite+echarts简单入门

    锅包肉阅读 933

    头像
    如何在windows中我的电脑下添加一个程序启动入口

    热饭班长赞 3阅读 1.4k

    头像
    解决lodash由于依赖错误导致无法启动的问题

    LYX6666赞 3阅读 619

    头像
    阿里云ECS服务器部署Node.js项目全过程详解

    kovli赞 1阅读 5.2k

    头像
    Node.js学习备案

    寒青赞 1阅读 1.4k

    头像
    Windows 11 version 24H2 LTSC 2024 中文版、英文版 下载 (updated Oct 2024)

    sysin阅读 2.4k

    头像
    解决nvm install node 出现错误

    吴季分赞 1阅读 669

    0 条评论
    得票最新