阅读 985

微信小程序自动化构建方案

痛点

  • 开发方式(分支开发方式)
  • 提审过程(1、本地测试完成=>2、合并master=>3、拉master最新代码=>4、打开开发者工具=>5、本地build=>6、上传代码(填写版本号以及备注)=>7、微信公众后台手动提审=>8、发版)

解决方案

jenkins是一款CI&CD的开源软件,用于自动化各种任务,包括构建、测试和部署软件。jenkins支持各种运行方式,可通过系统包、Docker或者一个独立的java程序。

我们通过在jenkins上创建job来实现小程序的自动化构建。将上述提审过程的2,3,4,5,6实现自动化一键编译、部署、上传,解放人力。

方案设计

  • jenkins服务搭建(微信开发者工具只有windows版本以及mac版本,所以需要在mac mini上重新搭建一套jenkins服务),具体参考jenkins官网,需要安装jdk,标准的jdk被墙了可以使用openjdk也可以成功安装;jenkins最强大的其实是它的插件系统,根据需要安装自己需要的插件,只有相关插件安装了在创建job的时候才会出来相应的选项,具体可以参考jenkins官网的插件系统一节;启动jenkins,使用jenkins命令启动
  • 创建job(小程序的自动化构建创建一个自由风格的job就可以,job创建过程中需要注意的有“多参数化构建”、“gitlab地址配置”、“构建过程、”“构建后的操作”等)
  • 脚本编写(当前分支构建、pull代码、npm run build、start、命令行登录、命令行上传)
  • 流程测试

jenkins服务搭建

  • 设备 Mac Mini
  • 下载jenkins 
  • 1)安装iterm2(mac上的终端系统,也可以使用mac自带终端) 
  • 2)安装homebrew(homebrew是mac上的一款Ruby包管理工具,可以使开发者方便的安装各种开发软件,而不用安装和配置其他依赖)
  •  3)使用homebrew安装jenkins(免去了手动下载配置的过程; 问题: 使用命令brew cask install caskroom/versions/java8发现各种报错,解决方法:brew cask install adoptopenjdk8,成功安装java8(openjdk和oracle jdk差别不大)
  •  4)安装jenkins必须首先安装java8,也就是jdk1.0.8,因为jenkins是运行在java8环境上的; 
  • 5)npm install jenkins成功安装jenkins 
  • 6)安装成功后使用命令jenkins启动jenkins服务,服务启动成功后在浏览器中输入http://localhost:8080,由于首次启动jenkins需要输入密码,则执行命令:

cat ~/.jenkins/secrets/initialAdminPassword(复制页面显示的路径,执行cat命令,会显示密码) 

  • 7)输入密码后即打开jenkins界面,成功安装

在jenkins初始化的过程中,会引导用户安装相应插件,用户根据自己的需求安装即可;

创建job

jenkins中可以创建多种类型的job,如下图: 


我们创建一个FreeStyle Project就可以。job的创建过程可以参考jenkins官网。

打包

对于一个持续继承打包平台来说,每次打包都有需要四步骤,触发构建、拉取代码、执行构建、构建后处理

小程序自动化构建思路

常规的小程序发布流程

代码Done-》本地build-》登录微信开发者工具(二维码登录)-》上传-》微信后台提审-》发布

在这个过程中,小程序的正式发版必须要通过小程序开发者工具进行,而小程序开发者工具提供了命令行和http服务两种接口供外部调用。所以我们可以在构建脚本中通过上述两种方式来实现。

jenkins打包步骤具化

1、job信息配置 


这里写清楚当前创建的job主要用途是什么。

 2、参数化构建过程 

小程序在上传过程中需要填写“版本号”以及“上线内容”这两条信息,以及如果需要在不同分支上线的话需要分支名称,故需要参数化构建过程,从用户处获取上述信息。 


代码远程仓库设置 这里设置需要拉取哪个仓库的代码进行构建,一般只是需要填写远程仓库地址即可。 

注意:如果需要用git管理代码,则需要安装git plugin插件,配置git路径,否则源码管理是不会有git选项的。

构建脚本 接下来就是构建脚本的编写。正常的流程应该是: 判断当前参数是否为空-》为空则return-》否则判断当前构建分支-》拉取远程仓库代码-》执行npm install-》执行npm run build-》命令行调用打开微信开发者工具-》命令行实现上传-》微信后台提审

上述流程乍一看基本没有任何问题,但是它正常上传的前提是在小程序开发者工具正常登陆的情况下,也就是说当小程序开发者工具失效的话则会上传失败,所以有必要在构建步骤中加入小程序开发者工具的登录流程。

小程序开发者工具只有扫描二维码这一种登录途径,因此只有将登录二维码集成到jenkins中才能解决登录问题。

登录

命令行提供了两种登录方式,一是将登录二维码转成base64给用户;二是将二维码打印在命令行中。 在iterm终端执行命令 /Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -l 则会在终端打印出登录二维码,前提是需要打开开发者工具的端口设置。 

设置-》安全设置-》服务端口-》开启

但是直接在脚本中执行这句命令并不能在jenkins的console output中输出二维码,而是会输出一堆unicode字符,此方案不太可行。

所以可以通过http的方式拿到base64的二维码,然后通过一段python脚本将其转为图片文件。 以下是这段的shell脚本

echo '生成微信开发者工具登录二维码'
WX_CLI=/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli
$WX_CLI -o
PORT=$(cat ~/Library/Application\ Support/微信web开发者工具/Default/.ide)
curl http://127.0.0.1:$PORT/login?format=base64 > ~/qrcode.txt
$(python ~/tools/base64tojpeg.py ~/qrcode.txt ~/.jenkins/workspace/项目名称/qrcode.jpg)
echo [QRCode generated succeed]$BUILD_NUMBER
复制代码

base64tojepg.py的脚本

#!/usr/bin/python
import os,base64,sys 
if len(sys.argv) == 3:
    inputFileName=sys.argv[1]
    outputFileName=sys.argv[2]
    allstr=open(inputFileName).read()
    idx=allstr.find(',')
    bstr=allstr[idx+1:]
    imgdata=base64.b64decode(bstr)
    file=open(outputFileName,'wb')
    file.write(imgdata)
    file.close()
else:
    print('Useage: python base64tojpeg.py inputFileName outputFileName')
复制代码

设置登录二维码的展示

在build构建步骤之后增加set build description,将刚刚生成的二维码图片设置到build构建界面中 


抹黑的部分分别是ip地址以及项目名称


注意:此处需要安装description setter plugin插件


上传

上传必须在登录之后调用,所以在上述set build description之后再增加一个build的构建步骤,作为上传部分的shell

#sh ~/wechat_cli.sh
WX_CLI=/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli
echo "版本号是${UPLOAD_VERSION}"
echo "描述是${UPLOAD_DESC}"

PRO_ROOT=$(pwd)/build/ZZWAMain
echo "PRO_ROOT是${PRO_ROOT}"
PORT=$(cat ~/Library/Application\ Support/微信web开发者工具/Default/.ide)

$WX_CLI -l --login-qr-output base64@qrcode.txt
echo '上传到微信后台'

$WX_CLI -u ${UPLOAD_VERSION}@/Users/用户名/.jenkins/workspace/项目名/项目名 --upload-desc ${UPLOAD_DESC}


#clean up
rm /Users/用户名/.jenkins/workspace/项目名/qrcode.jpg
rm /Users/用户名/qrcode.txt
cp /Users/用户名/expired.png /Users/用户名/.jenkins/workspace/项目名/qrcode.jpg复制代码

权限设置

jenkins只需要一个管理员即可,该管理员拥有超级权限,作为jenkins服务的管理人员,可以查看脚本,修改脚本,修改权限等一系列操作。 而普通开发人员作为jenkins的使用者,只需要拥有build项目的权限就可以。

二维码需要登录

设置二维码的plain text 

上传之后测试

将当前上传版本设置为体验版,检查有没有正常打开。