试想以下两个场景:
场景一:你在开发新功能的时候,同事A找你要小程序体验二维码,于是你只能:
git stash // 缓存本地修改
git checkout release // 切换到测试分支
yarn test // 打测试包
... // 预览、切回分支
git stash pop // 还原本地修改
复制代码
然后整理被打断的代码思路,继续coding,暗自吐槽(二维码是有35min过期时间的,一会又得找我了...)
场景二:小程序到了提测日期,恰巧负责开发的你今天请假了,意味着没人可以为测试同学打包,因此耽误了项目进度。
以上两个场景我们发现一个共同的问题,小程序的体验发布太依赖开发者,因为通常只有开发者熟悉微信开发者工具一系列的上传流程,从而导致影响开发进度、发布流程不可控等一系列问题...
如果小程序可以通过Jenkins集成,将大大解放开发者的生产力,将Jenkins权限收回到测试同学手里,每次发布都需要测试同学执行构建,一定程度上解决发布过程不可控的问题。
微信开发者工具目前只支持Mac和Windows环境,可以在单独的Mac mini机器上搭一个Jenkins环境,专门用于打包ios app和小程序。
除了图形化工具,开发者工具还提供了命令行与 HTTP 服务两种接口供外部调用,开发者可以通过命令行或 HTTP 请求指示工具进行登录、预览、上传等操作。官方文档
我们先尝试使用命令行工具启动并登录微信开发者工具:
命令行工具所在位置:
macOS: <安装路径>/Contents/MacOS/cli
Windows: <安装路径>/cli.bat
以下示例皆运行在MacOS 10.13.5环境:
如果微信开发者安装在应用程序里面,其中<安装路径>则为 /Applications/wechatwebdevtools.app
启动微信开发者工具
终端执行/Applications/wechatwebdevtools.app/Contents/MacOS/cli -o
,结果如下:
并且开发者工具已经启动:
ps: mac环境下如果是新安装的开发者工具,一定要先打开并通过安全验证。
登录微信开发者工具
终端执行/Applications/wechatwebdevtools.app/Contents/MacOS/cli -l
,结果如下:
扫描二维码后,终端打印login success
,并且此时开发者工具已经登录:
我们尝试使用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运行依赖java环境,终端输入java -version,看输出是否正确比如:java version "1.8.0_151"
一般Mac安装Jenkins有两种方法:
Jenkins官网(jenkins.io/ )下载安装包,一路Next。 Tomcat + War这里我推荐第二种安装方式,因为第一种方式会生成一个共享的用户Jenkins,接下来所有构建的操作都是基于Jenkins这个用户的,它的权限与你当前登录的系统用户权限不同,导致构建过程中出现很多问题。
apache-tomcat-8.5.37.tar.gz
这个版本,重命名为Tomcat8
,放在/Users/用户/Library
这个目录下。 将Tomcat的bin路径添加到环境变量中:
sudo vi ~/.bash_profile
export PATH=$JAVA_HOME/bin:$PATH:/Users/pengyong/Library/Tomcat8/bin
source ~/.bash_profile
复制代码
sudo chmod 755 /Users/pengyong/Library/Tomcat8/bin/*.sh
lsof -i:8080
kill PID
复制代码
startup.sh
,如果出现下图所示内容,则启动成功
shutdown.sh
至此,Tomcat的安装基本上完成了,接下来安装Jenkins
1. 官网下载Jenkins war包,放入你的Tomcat/webapps目录下
浏览器访问http://localhost:8080/jenkins
初次访问会让你输入密码,可以根据路径提示获取密码
如果文件提示没有权限无法打开,需要先修改权限,如下:
Save and Continue
Save and Finish
有可能页面一直展示loading,你可以尝试直接访问Jenkins主页,如果出现这个页面,Jenkins的安装过程到此结束,你可以创建任务了。
Git parameter: 能够实现选择指定分支进行构建的功能 description setter: 用于生成预览二维码
至此准备工作已完成,让我们开始构建小程序吧。
构建一个自由风格的软件项目
,点击ok进入到配置界面
参数化构建过程
build_type
用于选择构建的是开发版、测试版还是生产版的小程序
branch
用于选择构建的分支(如果没有这个选项,检查Git parameter这个插件有没有安装)
upload_desc
和upload_version
两个文本参数分别用于在构建时填写小程序的备注和版本
脚本如下,可以按需修改:
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启动的端口,任务名称是我们任务构建这一步填写的名称,这里我们是wechat):
至此我们的任务构建配置基本完成了
Build with parameters
,选择你要构建的类型、分支等参数,这里我们选择的是开发版:
解决的方法是在系统管理 -> 全局安全配置 -> 标记格式器 -> 选择Safe HTML
这时预览二维码就出来了,注意二维码是有过期时间的(35min)
至此预览二维码的构建任务已经完成,我们尝试上传代码到微信平台
目前小程序的发布大多还是依赖开发者手动上传,并且小程序持续集成还是有很多问题:开发者工具不支持Linux环境、无法通过命令行生成体验版二维码等等。但是持续集成这个方向还是值得大家研究的,开发和发布要两开花嘛...