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

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 服务

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

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

重启生效

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

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

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

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获取图片

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

Jenkins项目创建

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

创建一个自由风格的项目

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

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

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

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

![二维码${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

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

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

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

添加成员

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

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

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

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

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

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

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

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

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 "测试环境仅预览并不上传微信小程序平台"
)
huikawlkj

huikawlkj

相关推荐

学习微信小程序的系列(3) 如何优雅的使用微信开发者工具

如何优雅的使用微信开发者工具，提到优雅，我相信大家都会在自己的脑海里脑补了很多画面吧。当然了，根本就不能的事情了。好了~我们言归正传。回到我们的题面，如何才能做到“优雅”呢？微信开发者工具的界面可以用于代码编写、代码调试、项目预览与上传、编译、前后台切换、

郴州小程序 / 0评论 2020-02-29

微信小程序开发者工具升级后，控制台WXMLRT_$gwx:./

之前微信小程序开发者工具wx:key="*this"或者写唯一的标识，控制台也没有问题，但是在一两月之前吧，也许很久，发现这个问题了。我就降级开发者工具，避免了此问题。For developer:Do not set same key

sucheng / 0评论 2019-12-16

微信小程序开发者工具真机调试常见报错解答

以下整理了常见的真机调试控制台报错，以及建议的解决方法。出现此错误时，可以尝试在工具上登出开发者账户，切换开发者账号，重开项目再试一次。如果不能解决，可以在此贴评论，我们会后台排查原因。由于出现频率较低，此问题仍在排查修复中。这是微信客户端上的某个新改动引

moldy0 / 0评论 2019-09-06

electron 实现 微信开发者工具 devTools

devTool开发者工具解决的问题部署到第三方APP的代码调试！客户端 [类似微信开发者工具公众号模式] ：采用 electronjs 构建跨平台应用。集成浏览器内核 & 客户端插件，构建基本的模拟运行环境！调试 [类似微信开发者工具小程序模式]

moldy0 / 0评论 2019-06-29

iKcamp出品｜微信小程序｜工具安装+目录说明｜基于最新版1.0开发者工具初中级教程分享

访问官网更快阅读全部免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享》。然后根据自己的设备选择相应的下载 安装过程不再复述，一路默认。管理员账号 是上一节第 6 步中注册 appID 时，绑定的微信账

YClimb / 0评论 2019-06-25

HTML我帮您打造微信小程序web可视化开发者工具

HTML我帮您WEBAPP在线可视化开发工具是一款在线可视化网站在线设计软件，无须专业知识，通过鼠标拖拽，所见即所得，快速完成手机网页设计和微信场景应用、HTML5轻应用设计；在线DIY产品宣传册、婚礼、在线订单、市场调研、满意度调查、在线简历和各种报名表

lekuhu / 0评论 2017-03-08

小程序的启动—微信小程序前端开发者工具-小程序切片-小程序定制开发神器

微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。这个配置说明在 QuickStart 项目定义了两个页面，分别位于 pages/index/index 和 pages/logs/logs 目录。于是微信客户端就把首页的代码装载进来，通过小程序

BitTigerio / 0评论 2018-05-31

iKcamp出品｜微信小程序｜工具安装+目录说明｜基于最新版1.0开发者工具初中级教程分享

访问官网更快阅读全部免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享》。然后根据自己的设备选择相应的下载安装过程不再复述，一路默认。管理员账号 是上一节第 6 步中注册 appID 时，绑定的微信账号。

稀土 / 0评论 2017-11-28