要实现这样的效果,需要下面3步：
1.下载 node 依赖包 miniprogram-ci，编写预览和上传功能
2. 登录微信公众平台, 下载项目的privateKey+添加代码上传IP白名单
3. 安装配置Jenkins
Step1 下载 node 依赖包 miniprogram-ci,编写预览和上传功能,
在微信小程序项目下创建package.json，wxCI.js文件，package.json内容如下，执行yarn 或 npm install指令 ,安装项目运行时需要的依赖
-
{
-
"scripts": {
-
"wxci":
"cross-env node ./wxCI.js"
-
},
-
"dependencies": {
-
"cross-env":
"^7.0.2",
-
"miniprogram-ci":
"1.0.93"
-
}
-
}
wxCI.js内容如下: 有两个方法，一个是生成预览二维码的方法，一个是上传发布代码的方法。从命令行接受参数，执行对应的操作。生成二维码的操作是任何情况下都会执行的。代码上传发布是选择执行的。
-
const ci
= require(
'miniprogram-ci');
-
-
/
**
-
* 获取环境参数
-
* type 操作类型 preview | publish
-
* version:版本号 上传操作必填
-
* desc:版本描述 上传操作必填
-
* appid:应用id,测试人员有时需要切换应用Id
-
* buildId: 构建id
-
*/
-
const {
type, version
=
'', desc
=
'', appid
=
'', buildId
=
'' }
= getEnvParams(process.argv);
-
-
console.log(process.argv);
-
-
if(!appid){
-
console.
error(
'appid不能为空!!!');
-
process.
exit(
1);
-
}
-
/
/ 微信小程序的私有
key文件存储路径,每次新增appid时,需要找运维加私有
key
-
const privateKeyPath
= `
/var
/lib
/jenkins
/cert
/private.${appid}.
key`;
-
-
/
/ 请求参数
-
const reqParams
= {
-
appid,
-
type:
'miniProgram',
-
projectPath:
'./',
-
privateKeyPath,
-
ignores: [
'node_modules/**/*',
'yarn.lock',
'.*'],
-
};
-
/
/ 上传文件处理设置参数
-
const uploadParams
= {
-
es
6:
true,
/
/
"es6 转 es5"
-
es
7:
true,
/
/
"增强编译"
-
minify:
true,
/
/
"样式自动补全"
-
codeProtect:
true,
/
/
"代码保护"
-
autoPrefixWXSS:
true,
/
/
"样式自动补全"
-
};
-
-
const project
= new ci.Project({ ...reqParams });
-
-
/
/ 任何时候都生成二维码
-
(async ()
=
> {
-
const previewResult
= await ci.preview({
-
project,
-
desc:
'预览',
/
/ 此备注将显示在“小程序助手”开发版列表中
-
setting: uploadParams,
-
qrcodeFormat:
'image',
-
qrcodeOutputDest: `.
/qrcode-${buildId}.jpg`,
-
onProgressUpdate: console.log,
-
/
/ pagePath:
'pages/index/index',
/
/ 预览页面
-
/
/ searchQuery:
'a=1&b=2',
/
/ 预览参数 [注意!]这里的`
&`字符在命令行中应写成转义字符`\
&`
-
});
-
console.log(previewResult);
-
})();
-
-
if (
type
=
=
'publish') {
-
(async ()
=
> {
-
const uploadResult
= await ci.upload({
-
project,
-
version,
-
desc,
-
setting: uploadParams,
-
onProgressUpdate: console.log,
-
});
-
console.log(uploadResult);
-
})();
-
}
-
-
/
**
-
* 获取node命令行参数
-
* @param {array} options 命令行数组
-
*/
-
function getEnvParams(
options) {
-
let envParams
= {};
-
/
/ 从第三个参数开始,是自定义参数
-
for (let i
=
2, len
=
options.
length; i
< len; i
+
+) {
-
let arg
=
options[i].split(
'=');
-
envParams[arg[
0]]
= arg[
1];
-
}
-
return envParams;
-
}
要实现自动预览和代码上传功能，最核心的一步是miniprogram-ci这个工具包，它是微信小程序官方提供的，点击查看官方文档 ，用它可以不打开微信开发者工具，就能实现和微信开发者工具的预览，代码上传一样的功能。这里有个大坑， 用命令行和HTTP调用的方式，都有一个很大的缺陷，就是要在Jenkins机器上安装微信开发者工具，而Jenkins机器一般是Linux操作系统，微信小程序官方并没有提供Linux操作系统的微信开发者工具安装包，尤其是HTTP调用方式，每次使用的时候，还需要启动微信开发者工具，才能获取HTTP服务端口号，而启动微信开发者工具，会弹出微信开发者工具可视化UI界面，根本无法做到静默处理。而网上充满了这两者做法的文章，实在是误导新手。如果你能看到这篇文章，可以少走一些弯路。
step2 登录微信公众平台, 下载项目的代码上传秘钥+添加代码上传IP白名单
miniprogram-ci需要的小程序代码上传秘钥,比较费周折，需要管理员账号，登录微信公众平台，下载下来，下载过的话，右侧的按钮会显示为重置， 下载下来的小程序代码上传秘钥文件，建议不要提交到git仓里，放在Jenkins工作目录下，防止密钥泄露。
其次，要将Jenkins服务所在机器的IP地址，添加到小程序代码上传IP白名单列表中。
如果忘记把上传代码的Jenkins机器IP地址配置到小程序代码上传IP白名单中的话，会报下面的错误
Step3 安装配置Jenkins
Jenkins的下载安装参见 Jenkins安装及入门配置 , 本文只介绍要实现用Jenkins自动构建微信小程序，生成预览二维码或上传发布代码该如何配置
1.创建一个自由风格的任务
2. 通用面板--填写任务描述
3.参数设置面板--配置构建参数
操作路径是 参数设置-->参数化构建过程-->添加参数，我们主要用到下面几种参数：
创建选项参数action是用来让用户选择预览还是发布
创建Git Parameter参数 branch--是用来选择构建git分支的，可以设置一个默认分支
创建选项参数appId是用来选择构建哪一个微信小程序。
创建文本参数version和desc，是为了在发布时让用户输入版本号和版本描述。
4. 源码管理面板 -- 指定构建代码分支，这里要写成变量$branch,如果写成常量，上面配置的git Parameter参数就不生效
5.构建面板 --需要配置构建执行操作
配置入口是： 构建----》增加构建后操作步骤----》执行 shell
配置执行的操作是，清理上一次构建生成的二维码， 在Jenkins机器上下载npm依赖包，调用微信官方提供的小程序的预览上传工具miniprogram-ci ,传入相关参数，执行预览或预览与代码上传发布操作，查看一下Jenkins 任务工作空间下，是否有二维码生成。
为了在后面的build description中获取到shell中的变量，需要安装一个插件Environment Injector,用它配置自定义全局变量。 它的用法是配置一个文件路径，向文件中写入值，Jenkins在全局都能获取到。这里先要计算微信预览二维码的生成时间，写入到自定义环境变量中，然后在build description就能获取到。
-
rm -rf qrcode*.jpg
-
yarn
-
#切换环境变量
-
yarn gen:config:custom appId=
$appid corpId=
$corpId navBarTitle=
$navBarTitle
-
-
#生成预览二维码
-
yarn wxci
type=
$action appid=
$appid version=
$version desc=
$desc buildId=
${BUILD_ID}
-
-
#计算过期时间，并将过期时间写进自定义环境变量
-
now=`
date
'+%Y-%m-%d %H:%M'`
-
echo QRCode_Expires=`
date -d
"$now 25 minute"
"+%Y-%m-%d %H:%M"` > wx-minipro-env.txt
-
-
pwd &&
ls
6. 构建后操作面板--配置展示二维码的HTML文档片段
需要下载一个Jenkins插件description setter，在增加构建后操作步骤选项列表中，才有Set build description这个选项，其次，将下面的文本复制进去，https://域名:端口/job/任务名称/ws/qrcode-${BUILD_ID}.jpg是生成的二维码的文件路径,用你实际的地址替换掉这个文件地址，可以把这个url复制到浏览器地址栏，看是否可以访问到。如果可以访问到，说明文件路径没问题。
-
<div style
=
"color:green;font-size:16px"
>二维码将于${QRCode_Expires}后过期
<
/div
>
-
<div style
=
"display: flex;justify-content: center;"
>
-
<img src
=
"${JOB_URL}ws/qrcode-${BUILD_ID}.jpg" alt
=
"预览二维码" width
=
"200" height
=
"200"
/
>
-
<
/div
>
-
<div style
=
"padding:5px 10px"
>构建分支----${branch}
<
/div
>
-
<div style
=
"padding:0 10px"
>企业AppID----${appid}
<
/div
>
还需设置将文本按照HTML标签渲染，设置方法：系统管理 -> 全局安全配置 -> 标记格式器 -> 选择Safe HTML
依次点击 Build with Parameters--》开始构建，本文开头的效果图就出来啦，至此，大功告成。
本文的代码已经托管到gitee, 点击 下载
避坑指南
不要安装miniprogram-ci的最新版本，有点时候不稳定比如说v1.1.5这个版本，有些API调用会出问题，比如说wx.getExtConfigSync，返回为空，导致生成二维码之后，页面逻辑不正确。建议将miniprogram-ci锁定在某个稳定版本。
扫一扫
1311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
