近期一直参与微信小程序的开发工作，这段时间让我受益匪浅。在整个过程中，学到了很多关于小程序开发的知识和技能，比如如何优化小程序的性能、如何设计更好的用户界面、如何提高小程序的安全性，以及在小程序展示统计图表，层级渲染问题等等。同时，我也深刻认识到了小程序开发中的一些痛点，比如提测和修改bug需要被测试催着在 测试、uat、生产 环境中频繁发版，很是难受，于是想把这些繁琐的步骤交给机器处理，最终确定技术方案，利用Jenkins和uniapp（） 还有 官方打包部署预览脚手架（miniprogram-ci） 配置了一套自动化部署的流程

准备

安装jenkins

服务器(本文 服务器系统是Ubuntu 22.04) 安装好jenkins，具体的步骤可以参考这篇文章

jenkins 自动化部署前端项目

配置项目

开发项目git仓库，项目搭建 具体请查看这篇

用Vue打造微信小程序，让你的开发效率翻倍！

打包部署预览原理和脚本编写请移步这篇文章

命令行秒传：一键上传微信小程序和生成二维码预览

上传脚本沿用了这篇文章的中脚本：命令行秒传：一键上传微信小程序和生成二维码预览，只需要略微改动, 改动支持了 设置版本号和备注，且先生成预览二维码和上传到微信小程序后台平台体验版

下面的代码中 appid 和 私钥（小程序后台的私钥 具体配置获取方法请参考上面文章链接）的路径 请自行更改

// 小程序发版
const ci = require('miniprogram-ci');
const path = require('path');
const argv = require('yargs').argv;

const appid = '*******'
let versions = '1.0.1'
let descs = '备注'
let projectPath = './dist/build/mp-weixin'
return (async () => {
if (argv.version) {

        versions = argv.version

    }
if (argv.descs) {

        versions = argv.version

    }
// 注意： new ci.Project 调用时，请确保项目代码已经是完整的，避免编译过程出现找不到文件的报错。
const project = new ci.Project({
appid: appid,
type: 'miniProgram',
projectPath: path.join(__dirname, projectPath), // 项目路径
privateKeyPath: path.join(__dirname, './private.*******.key'), // 私钥的路径
ignores: ['node_modules/**/*'],

    })
// 生成二维码
const previewResult = await ci.preview({

        project,
desc: 'hello', // 此备注将显示在“小程序助手”开发版列表中
setting: {
es6: true,

        },
qrcodeFormat: 'image',
qrcodeOutputDest: path.join(__dirname, '/qrcode/destination.jpg'),
onProgressUpdate: console.log,
pagePath: 'pages/index/index', // 预览页面
searchQuery: 'a=1&b=2', // 预览参数 [注意!]这里的`&`字符在命令行中应写成转义字符`\&`

    })
console.log('previewResult', previewResult)
console.log('等待5秒后 开始上传')
// 开始上传
let s = 5
let timer = setInterval(async () => {

        --s
console.log(`${s}秒`)
if (s == 0) {
clearInterval(timer);

            timer = undefined
const uploadResult = await ci.upload({

                project,
version: versions,
desc: descs,
setting: {
es6: false, // es6 转 es5
disableUseStrict: true,
autoPrefixWXSS: true, // 上传时样式自动补全
minifyJS: true,
minifyWXML: true,
minifyWXSS: true,

                }

            })
console.log('uploadResult', uploadResult)

        }

    }, 1000);

})()

服务器配置 ssh配置

root 用户登录服务器 执行以下命令 切换为jenkins用户

sudo su jenkins

执行生成sshkey命令

 ssh-keygen -t rsa -C "你的邮箱"
// 然后一路回车

输出ssh私钥 和 公钥 保存备用

 cat ~/.ssh/id_rsa
cat ~/.ssh/id_rsa.pub

jenkins配置

全局工具配置

配置Git installations

配置NodeJS版本

安装jenkins插件

Git Parameter： git分支参数插件

description setter 根据构建日志文件的正则表达式设置每个构建的描述

Version Number 修改版本号

在 Manage Jenkins->插件管理中 搜索 Git Parameter 并且安装重启生效

配置 ssh

jenkins 全局安全配置

系统管理->全局安全配置->Git Host Key Verification Configuration,选则Manually provided keys

Approved Host Keys中填写上方 服务器的jenkins用户生成的私钥内容

git仓库配置 ssh

如果你的项目是私人隐藏的，则需要在项目 配置 SSH 公钥(从上文服务器jenkins用户生成公钥获取内容)

修改标记格式器

这一步是为了 在构建记录中输出二维码和备注准备

在全局安全配置中 找到标记格式器，改为Safe HTML 保存

创建任务

首页新建任务

构建一个多配置项目

填写描述、选择github项目写入地址

设置参数

勾选参数化构建过程，添加git参数，输入名称、描述、默认分支
参数类型选择 分支

继续新增 字符参数 version和remark（这里名字可以自定义，随便起，与shell 脚本中变量名称相匹配就好 ）

配置源码管理

源码管理选择Git,填写 Repository URL，Branches to build 指定分支 ${branch}

构建环境

勾选 Create a formatted version number

依次填写

Environment Variable Name：BUILD_VERSION

Version Number Format String: ${branch}

Project Start Date: 2023-06-30(项目开始日期)

Provide Node & npm bin/ folder to PATH 选择 18.16.1

Build Steps shell脚本

点击 增加构建步骤，选择 执行 shell 输入以下命令（可根据自己的实际情况进行改写）

下方的图片（destination.jpg）存放目录，记得配置文件访问服务，或者自行 编写上传图片逻辑，保证能访问到图片即可；

cd /var/lib/jenkins/workspace/wechart;

npm config set registry https://registry.npmmirror.com/;

npm install -g yarn;

yarn config set registry https://registry.npmmirror.com/;

yarn;

npm run build:mp-weixin;

node upload.js --version=$version --remark=$remark;
mv qrcode/destination.jpg /var/www/html;
chmod -R 777 /var/www/html/destination.jpg;
echo DESC_INFO:http://服务器域名/destination.jpg,$remark;
exit 0;

继续新增构建步骤 选择 Set build description

Regular expression 填写 DESC_INFO:(.*),(.*)

Description 填写 <img src="\1" height:"200" width="200" /><div style="color:blue;">\2</div>

构建后操作

选择Git Publisher

勾选Push Only If Build Succeeds

点击 Add Tag

Tag to push: wechart-$BUILD_NUMBER

勾选 Create new tag

点击保存

打包运行构建

选择 Build with Parameters，设置分支（这里会默认显示 git仓库的所有分支）

打包构建完成后，选择 wechart 点击 配置default