微信小程序开发：与Jenkins持续集成

terry 2年前 (2023-09-23) 阅读数 73 #移动小程序

为什么要持续集成？？想了想，继续写代码，默默吐槽一下（二维码有35分钟超时，等会儿你还要再来看我……）

场景二：测试用的小程序到了，你开发经理今天正好休假。，这意味着没人可以封锁测试合作伙伴，拖延项目进度。

以上两个案例我们发现了共同的问题。小程序的发布体验很大程度上取决于开发者，因为通常只有开发者知道上传微信开发者工具的一系列步骤，这影响了开发进度，导致发布过程失控。有几个问题等待着...

如果微程序可以通过Jenkins链接，将彻底解放开发者的生产力，并恢复Jenkins的许可给测试学生。每个版本都需要一名测试学生来完成构建，这可以通过一种或另一种方式来解决。发布过程不受控制的问题。

小程序持续集成的限制

微信开发者工具目前仅支持Mac和Windows环境。您可以在单独的Mac mini机器上设置Jenkins环境，专门用于打包iOS应用程序和小程序。

必备条件

除了图形工具之外，开发者工具还提供了两个接口：命令行和用于外部调用的HTTP服务。开发者可以使用命令行或者HTTP请求教程工具进行访问、查看、上传等。上班。官方文档

首先我们尝试使用命令行启动并进入微信开发者工具：

命令行位置：

macOS：/Contents/MacOS/cli

Windows：/cli.bat

以下示例均适用于 MacOS 10.13.5 环境：

如果我们安装在微信管理员应用中，为 /Applications/wechatwebdevtools.app

启动微信开发者工具

最终执行/Applications/wechatwebdevtools.o结果为：

开发者工具启动完成：

ps：如果是mac环境下新安装的开发者工具，必须先打开并通过安全检查。

进入微信开发者工具

最终执行/Applications/wechatwebdevtools.app/Contents/MacOS/cli -l结果如下：二维码，终端打印登录成功，开发者工具现已登录：

我们正在尝试使用 HTTP 服务来预览项目：

启动并登录设备开发者后，需要获取设备所使用的端口号运行在（端口不固定），然后调用http服务查看项目，按照以下命令获取端口号：

port=$(cat "/Users/pengyong/Library/Application Support/微信web开发者工具/Default/.ide")
echo "微信开发者工具运行在${port}端口"
复制代码

假设我的项目地址是：/User/demo，开发者工具打开在55228端口，在浏览器中输入http://127.0.0.1:55228/preview?projectpath=/User/demo，可以看到二维码预览

我们知道开发者可以开始了，通过命令或 HTTP 请求访问和示教设备。完成预览和其他任务后，我们进入正题：安装和部署 Jenkins。

`配置Jenkins`

Jenkins依赖于java环境。在终端中输入 java -version 查看输出是否正确。示例：java版本“1.8.0_151”

Mac上安装Jenkins一般有两种方式：

Jenkins官网（jenkins.io/）下载安装包，点击下一步。
Tomcat + War

这里我推荐第二种安装方法，因为第一种方法会创建Jenkins发行用户。后续所有构建任务均基于Jenkins用户，权限与你相同。今天登录的系统用户具有不同的凭据，导致设置过程中出现许多问题。

`安装Tomcat`

从官网下载Tomcat安装包。我下载了apache-tomcat-8.5.37.tar.gz。重命名为 Tomcat8。在文件夹/Users/users/Library。
将Tomcat的路径添加到环境变量中：

sudo vi ~/.bash_profile
export PATH=$JAVA_HOME/bin:$PATH:/Users/pengyong/Library/Tomcat8/bin
source ~/.bash_profile
复制代码

为避免权限问题，请为Tomcat/bin/*.sh授予权限

sudo chmod 755 /Users /pengyong/Library/Tomcat8/bin/Tomcat8 sh

检查8080端口是否存在，使用kill PID不占用

lsof -i:8080
kill PID
复制代码

输入终端startup.sh，如果弹出如图所示的精细内容访问http://localhost:8080/

关闭Tomcat并使用shutdown.sh
至此Tomcat安装完成。接下来，安装 Jenkins
安装 Jenkins
1。官网下载Jenkins war包，放到Tomcat/webapps文件夹下
浏览器访问http://localhost:8080/jenkins
第一次访问会要求你输入密码，根据提示即可获取密码到提示路径
如果文件推送了，没有权限是打不开的，需要先更改权限，如下： 
输入密码，点击继续，进入插件安装页面
点击推荐安装，等待安装完成
安装成功后，进入用户界面创建Jenkins并完成完成按钮保存并继续
创建用户后，你可以。进入 Jenkins URL 窗口。您可以将其更改为您想要的地址，然后点击保存并完成
进入此界面。恭喜Jenkins安装成功，但是我们还有最后一步：重启Jenkins
浏览器访问http://localhost:8080/jenkins/restart（你的jenkins地址+重启），点击Yes重启
就可以了页面仍在增长，您可以尝试直接访问Jenkins主页。如果出现此页面，则 Jenkins 安装过程已完成，您可以创建作业。 
插件安装：系统管理-插件管理-可选插件（有）
Git参数：启用选择指定分支构建setter的任务说明：用于创建二维码预览
 现在准备工作已经完成，让我们开始构建小程序。？ 
build_type用于选择是否构建小程序的开发版本、测试版本或生产版本
branch用于选择要构建的分支（如果该选项不可用，请参见参数 Git 是否安装插件） 
upload_desc 和 upload_version 这两个文本标签分别用来填写程序的注释和版本。 选择Git进行源代码管理，填写仓库地址。这里默认分支是master，修改为我们构建时选择的分支（注意：本地生成的id_rsa.pub是包含在git仓库的ssh认证中的，否则无法连接git Jenkins）
脚本如下这个，可以根据需要修改： 
echo -------------------------------------------------------
echo GIT_BRANCH: ${GIT_BRANCH}
echo -------------------------------------------------------
# 执行项目构建
yarn install 
if [ "$build_type" == "dev" ]
  then
  yarn run test
else
  yarn run $build_type
fi
# 打开微信开发者工具
/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -o
port=$(cat "/Users/pengyong/Library/Application Support/微信web开发者工具/Default/.ide")
echo "微信开发者工具运行在${port}端口"
return_code=$(curl -sL -w %{http_code} http://127.0.0.1:${port}/open)
if [ $return_code == 200 ]
  then
  echo "返回状态码200，devtool启动成功！"
else
  echo "返回状态码${return_code}，devtool启动失败"
  exit 1
fi
if [ "$build_type" == "dev" ]
  then
  echo "发布开发版！"
  # wget -o下载预览二维码，以build_id命名
  /usr/local/bin/wget -O $BUILD_ID.png http://127.0.0.1:${port}/preview?projectpath=/Users/pengyong/.jenkins/workspace/wechat
  echo "预览成功！请扫描二维码进入开发版！"
elif [ "$build_type" == 'prod' ] || [ "$build_type" == "test" ] || [ "$build_type" == "test:demo" ]
  then
  echo "准备上传！"
  # 上传到微信平台
  /Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -u $upload_version@/Users/pengyong/.jenkins/workspace/wechat --upload-desc $upload_desc
  echo "上传成功！请到微信小程序后台设置体验版或提交审核！"
fi
复制代码
设置任务后，选择设置构建规范（如果没有，检查是否安装了规范设置器插件）
这里使用img标签来显示二维码构建后的代码（注：端口号是启动Jenkins时的端口，作业名称是我们这一步填写的名称任务构建，这里是微信）：
 二维码${BUILD_ID}
此时我们已经完成了我们的任务构建，这是开发版本：
构建完成后出现二维码显示为文本，不显示图像
解决办法是进入系统管理->全局安全配置->标签格式化程序->选择安全HTML
此时会显示二维码预览。请注意，二维码有超时时间（35分钟）
此时，二维码预览已创建。我们正在尝试将代码上传至微信平台
施工 - 输入代码
 仍然选择施工类型和分支。不同的是，上传代码的时候需要填写版本号-小版本以及项目的注释，然后运行构建
 去运行平台或者开发平台查看建议版本
友情提醒
开发者工具必须具备预览和上传功能。为了避免账号冲突，您可以使用Jenkins服务器专用的微信账号登录。该帐户必须具有开发者权限和经验。尝试不要使用开发者账号
不要直接从官网下载Jenkins，安装配置，有很多陷阱。 
总结
目前小程序的发布主要依靠开发者手动上传，小程序的持续引入还存在很多问题：不支持开发者工具的Linux环境，以及测试版本。无法通过命令等生成二维码。不过，持续集成的方向还是值得单独探索的。开发和发布需要同时绽放……
Achor：Pasoul
链接：https://juejin.im/post/5c35beaf51882525Eb362EBEB362EBE
来源商业印刷请联系作者获取许可。非商业转载请注明来源。