转载

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

痛点

开发方式（分支开发方式）
提审过程（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复制代码