• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

新手避坑 — 用 Jenkins +miniprogram-ci 自动构建微信小程序

开发技术 开发技术 5天前 7次浏览

先看看效果:

新手避坑 -- 用 Jenkins +miniprogram-ci 自动构建微信小程序

 

要实现这样的效果,需要下面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 = {
  es6: true, //  "es6 转 es5"
  es7: 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这个工具包,它是微信小程序官方提供的,官方文档参见 https://developers.weixin.qq.com/miniprogram/dev/devtools/ci.html,用它可以不打开微信开发者工具,就能实现和微信开发工具的预览,代码上传一样的功能。这里有个大坑, 用命令行和HTTP调用的方式,都有一个很大的缺陷,就是要在Jenkins机器上安装微信开发者工具,而Jenkins机器一般是Linux操作系统,微信小程序官方并没有提供Linux操作系统的微信开发工具安装包,尤其是HTTP调用方式,每次使用的时候,还需要启动微信开发者工具,才能获取HTTP服务端口号,而启动微信开发者工具,会弹出微信开发者工具可视化UI界面,根本无法做到静默处理。而网上充满了这两者做法的文章,实在是误导新手。如果你能看到这篇文章,可以少走一些弯路。

 

 step2  登录微信公众平台, 下载项目的privateKey+添加代码上传IP白名单

miniprogram-ci需要的privateKey参数,比较费周折,需要管理员账号,登录微信公众平台,下载下来,下载过的话,AppSecret右侧的按钮会显示为重置, 下载下来的小程序代码秘钥文件,建议不要提交到git仓里,放在Jenkins工作目录下,防止密钥泄露。

其次,要将Jenkins服务所在机器的IP地址,添加到小程序代码上传IP白名单列表中。

 

新手避坑 -- 用 Jenkins +miniprogram-ci 自动构建微信小程序

 如果忘记把上传代码的Jenkins机器IP地址配置到小程序代码上传IP白名单中的话,会报下面的错误

新手避坑 -- 用 Jenkins +miniprogram-ci 自动构建微信小程序

Step3 安装配置Jenkins

Jenkins的下载安装参见   Jenkins安装及入门配置 ,  本文只介绍要实现用Jenkins自动构建微信小程序,生成预览二维码或上传发布代码该如何配置

1.创建一个自由风格的任务

新手避坑 -- 用 Jenkins +miniprogram-ci 自动构建微信小程序

 2. 通用面板–填写任务描述

新手避坑 -- 用 Jenkins +miniprogram-ci 自动构建微信小程序

 

 

 

 3.参数设置面板–配置构建参数

操作路径是 参数设置–>参数化构建过程–>添加参数,我们主要用到下面几种参数:

新手避坑 -- 用 Jenkins +miniprogram-ci 自动构建微信小程序

 

 

 创建选项参数action是用来让用户选择预览还是发布

新手避坑 -- 用 Jenkins +miniprogram-ci 自动构建微信小程序

 创建Git Parameter参数 branch–是用来选择构建git分支的,可以设置一个默认分支

新手避坑 -- 用 Jenkins +miniprogram-ci 自动构建微信小程序

 

 创建选项参数appId是用来选择构建哪一个微信小程序。

 新手避坑 -- 用 Jenkins +miniprogram-ci 自动构建微信小程序

创建文本参数version和desc,是为了在发布时让用户输入版本号和版本描述。

 新手避坑 -- 用 Jenkins +miniprogram-ci 自动构建微信小程序

4. 源码管理面板 — 指定构建代码分支,这里要写成变量$branch,如果写成常量,上面配置的git Parameter参数就不生效

 新手避坑 -- 用 Jenkins +miniprogram-ci 自动构建微信小程序

5.构建面板 –需要配置构建执行操作

配置入口是: 构建—-》增加构建后操作步骤—-》执行 shell

配置执行的操作是,清理上一次构建生成的二维码, 在Jenkins机器上下载npm依赖包,调用微信官方提供的小程序的预览上传工具miniprogram-ci ,传入相关参数,执行预览或预览与代码上传发布操作,查看一下Jenkins 任务工作空间下,是否有二维码生成。

新手避坑 -- 用 Jenkins +miniprogram-ci 自动构建微信小程序

rm -rf qrcode*.jpg
yarn 

yarn wxci type=$action appid=$appid version=$version desc=$desc buildId=${BUILD_ID}

pwd && ls

6. 构建后操作面板–配置展示二维码的HTML文档片段

需要下载一个Jenkins插件description setter,在增加构建后操作步骤选项列表中,才有Set  build description这个选项,其次,将下面的文本复制进去,https://域名:端口/job/任务名称/ws/qrcode-${BUILD_ID}.jpg是生成的二维码的文件路径,用你实际的地址替换掉这个文件地址,可以把这个url复制到浏览器地址栏,看是否可以访问到。如果可以访问到,说明文件路径没问题。

<img src="https://域名:端口/job/任务名称/ws/qrcode-${BUILD_ID}.jpg" alt="预览二维码" width="200" height="200" /><br /> <a href="https://域名:端口/job/任务名称/ws/qrcode-${BUILD_ID}.jpg" target="_blank">${branch}-${appid}-${BUILD_ID}-二维码</a>

新手避坑 -- 用 Jenkins +miniprogram-ci 自动构建微信小程序

 还需设置将文本按照HTML标签渲染,设置方法:系统管理 -> 全局安全配置 -> 标记格式器 -> 选择Safe HTML

 新手避坑 -- 用 Jenkins +miniprogram-ci 自动构建微信小程序

再附赠一段快速清除错误构建的脚本,执行的入口是 Jenkins –》 Manage Jenkins–》 Tools and Actions –》 Script Console

 

新手避坑 -- 用 Jenkins +miniprogram-ci 自动构建微信小程序

新手避坑 -- 用 Jenkins +miniprogram-ci 自动构建微信小程序

#如下代码将删除1到9999的历史构建
#任务名称
def jobName = "wx-ci-test" 
#最大行号
def maxNumber = 9999 

Jenkins.instance.getItemByFullName(jobName).builds.findAll {
  it.number <= maxNumber
}.each {
  it.delete()
}

最后,依次点击 Build with Parameters–》开始构建,本文开头的效果图就出来啦,至此,大功告成。

新手避坑 -- 用 Jenkins +miniprogram-ci 自动构建微信小程序

 

本文的代码已经托管到gitee, 点击 下载

 

参考文章:

[1] 手摸手聊聊小程序持续集成Jenkins

[2] Jenkins安装及入门配置


喜欢 (0)