欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

记录贴——用Jenkins自动化构建部署微信小程序

程序员文章站 2022-07-03 20:11:01
最近开始接触小程序开发,顺便尝试了一下使用Jenkins对小程序进行自动化构建部署,即:git仓库变更——>jenkins自动构建——>代码上传至微信小程序服务器jenkins监听git仓库自不必多说,主要写一下小程序的miniprogram-ci模块以及在服务器上构建以及上传是遇到的坑1.miniprogram-ci在miniprogram-ci模块出现之前,小程序的代码上传要通过微信开发者工具手动上传。当然,仍然有很多大佬开发出了各种脚本工具实现自动化,但大都还是.....

最近开始接触小程序开发,顺便尝试了一下使用Jenkins对小程序进行自动化构建部署,

即:git仓库变更——>jenkins自动构建——>代码上传至微信小程序服务器

 

jenkins监听git仓库自不必多说,主要写一下小程序的miniprogram-ci模块以及在服务器上构建以及上传是遇到的坑

 

1.miniprogram-ci

在miniprogram-ci模块出现之前,小程序的代码上传要通过微信开发者工具手动上传。当然,仍然有很多大佬开发出了各种脚本工具实现自动化,但大都还是基于windows/Mac等操作系统安装微信开发者工具之后的实现。

miniprogram-ci 是从微信开发者工具中抽离的关于小程序/小游戏项目代码的编译模块。

开发者可不打开小程序开发者工具,独立使用 miniprogram-ci 进行小程序代码的上传、预览等操作。

所以我们可以愉快的在linux服务器上愉快的玩耍了ヽ( ̄▽ ̄)ノ

具体API文档可查看https://developers.weixin.qq.com/miniprogram/dev/devtools/ci.html

这里晒一下我的配置文件:

const ci = require('miniprogram-ci')
;(async () => {
  const BUILD_NUMBER = process.env.BUILD_NUMBER;
  const SCM_CHANGELOG = process.env.SCM_CHANGELOG;
  // 工程信息
  const project = new ci.Project({
    appid: 'wxac429285b3099f2e',
    type: 'miniProgram',
    projectPath: 'dist/build/mp-weixin',
    privateKeyPath: '/root/wechat_key/private.wxac429285b3099f2e.key',
    ignores: ['node_modules/**/*'],
  })
  // 上传信息
  const uploadResult = await ci.upload({
    project,
    version: `1.0.${BUILD_NUMBER}`,
    desc: `${SCM_CHANGELOG}`,
    onProgressUpdate: console.log,
  })
  console.log(uploadResult)
  // 预览信息
  const previewResult = await ci.preview({
    project,
    version: `1.0.${BUILD_NUMBER}`,
    desc: `${SCM_CHANGELOG}`,
    qrcodeFormat: 'image',
    qrcodeOutputDest: 'ci/destination.jpg',
    onProgressUpdate: console.log,
    // pagePath: 'pages/index/index', // 预览页面
    // searchQuery: 'a=1&b=2',  // 预览参数 [注意!]这里的`&`字符在命令行中应写成转义字符`\&`
  })
  console.log(previewResult)
})()

注意:

要想使用miniprogram-ci模块上传小程序代码,必须在  微信公众平台-开发-开发设置  下载代码上传密钥,并配置 IP 白名单 开发者可选择打开 IP 白名单,打开后只有白名单中的 IP 才能调用相关接口。

记录贴——用Jenkins自动化构建部署微信小程序

 

2.构建以及发布

遇到的坑:

(1)由于我开发使用的是uni-app框架,采用vue.js编写,所以比直接的小程序代码上传多了一步编译构建过程,在部署到服务器构建时遇到了一个问题——使用npm install安装某些包时构建程序卡住超时。。。不知道是不是我用的是*服务器的原因,切换成淘宝镜像源也没解决这个问题。。。最后手动打包了node_modules放到了代码里,在构建时直接解压就可以了

注意:如果要使用手动打包好的依赖包,必须是采用npm安装的包,不能使用cnpm安装,因为cnpm会利用原有的缓存。

(2)代码上传时,有时会报错,错误信息如下:

20003 'Error: {"errCode":-10008,"errMsg":"invalid ip: 101.32.177.136, reference: https://developers.weixin.qq.com/miniprogram/dev/devtools/ci.html"}'
(node:1877) UnhandledPromiseRejectionWarning: Error: Error: {"errCode":-10008,"errMsg":"invalid ip: 101.32.177.136, reference: https://developers.weixin.qq.com/miniprogram/dev/devtools/ci.html"}

这是由于微信小程序上传服务器的原因,可直接再次构建直到解决,这里我使用了一个jenkins插件Naginator

记录贴——用Jenkins自动化构建部署微信小程序

然后修改配置,在构建后操作勾选Retry build after failure,fix delay中设置延迟时间,我这里设置的是1s,执行3次

记录贴——用Jenkins自动化构建部署微信小程序

(3)在小程序上传版本描述中增加代码提交信息

jenkins可用的环境变量中并没有代码提交中的commit信息,想要获取变更的commit信息,需要使用插件Changelog

下载地址https://github.com/KrisMarko/kr-changelog

下载.hpi文件后在Jenkins——系统管理——插件管理——高级中上传.hpi文件即可

修改配置如下图:

记录贴——用Jenkins自动化构建部署微信小程序

之后在脚本中调用 SCM_CHANGELOG 环境变量即可获取提交信息

本文地址:https://blog.csdn.net/woaidouya123/article/details/109233075