背景

使用 vue-cli 搭建的小程序, 当项目开发完成后，需要打包上传小程序代码：在命令行执行打包小程序，然后在对应平台的【开发者工具】导入 dist/build/mp-xxx 文件夹，打开项目，上传小程序。

流程较多, 比较繁琐。所以采用小程序自动化打包上传并且集成到发布平台实现真正的一键上传。

整体步骤

发布平台运行shell脚本:

如果不存在对应项目, 则根据仓库地址克隆线上仓库项目
进入到对应项目文件夹
获取对应分支最新代码
拷贝小程序上传密钥到项目文件夹(添加IP白名单) / 或者存放到小程序文件中
执行小程序打包上传命令

PROJECT_NAME=(🔺小程序名称, 要改动)

#项目文件夹
PROJECT_FOLDER=mini-customer(🔺代码仓库名, 要改动)
#项目仓库
PROJECT_REPO=http://xxxxx/${PROJECT_FOLDER}.git(🔺仓库地址, 要改动)

#待发布分支
BRANCH_TO_RELEASE=(🔺待发布分支, 要改动)
#工作目录
WORKSPACE=xxx/${BRANCH_TO_RELEASE}(🔺工作目录, 要改动)
# 小程序appid
APPID=xxxxxxxxxxxxx(🔺小程序appid, 要改动)
if [ ${2} ]; then
    APPID=${2}
fi

ROBOT=(🔺机器人名称, 要改动)
VERSION=`date "+%Y%m%d"`
echo "${PROJECT_NAME}项目上传中..."

cd ${WORKSPACE}
if [ ! -d ${PROJECT_FOLDER} ]; then
        echo "项目不存在，创建中..."
        git clone -b ${BRANCH_TO_RELEASE} ${PROJECT_REPO}
        if [ $? -ne 0 ]; then
                echo "项目创建异常"
                exit 1
        fi
        echo "项目创建成功"
fi

cd ${PROJECT_FOLDER}

# 更新项目
git checkout .
git pull origin ${BRANCH_TO_RELEASE}
cp xxxxxx(🔺保存的密钥文件地址, 要改动) ${WORKSPACE}/${PROJECT_FOLDER}/privatekey.key
echo "项目更新成功"

COMMIT_SHA=`git log --pretty=format:'%h' -n 1`
COMMIT_LOG=`git log -1 --pretty=%B`
DESC="分支: "${BRANCH_TO_RELEASE}", git sha: "${COMMIT_SHA}", git log: "${COMMIT_LOG}
# 编译项目
echo "开始上传项目..."
cnpm run ${BRANCH_TO_RELEASE}-build(🔺小程序打包上传命令, 要改动)

if [ $? -ne 0 ]; then
        echo "编译项目异常"
        exit 1
fi

echo "项目上传成功"

小程序打包上传

微信小程序官方推出了一个代码上传工具 miniprogram-ci，借助这个实现自动化打包上传。

获取上传密钥并设置IP白名单

登录微信开放平台，找到开发管理-开发设置-小程序代码上传

点击右侧的重置/生成，点击【下载密钥】即可拿到密钥文件，保存在本地（可以保存在项目中）或者存放在服务器拷贝到项目中

然后如果下方开了【IP白名单】，我们需要把当前发布终端的IP添加进去（tips：如果开启了白名单且未添加IP，打包的时候会提示{errCode: -10008}，这时会提示我们电脑的IP是多少，再把这个IP地址加进去即可)

实现一键上传

步骤: 执行命令 build 打包，再执行 ci.ts 上传代码

首先在 vue-cli 搭建的项目中安装 miniprogram-ci

npm install miniprogram-ci --D

// eslint-disable-next-line @typescript-eslint/no-var-requires
const ci = require('miniprogram-ci');
const project = new ci.Project({
    appid: 'xxxxx', // (⚠️修改)
    type: 'miniProgram',
    projectPath: 'dist/build/mp-weixin', // uniapp打包后的路径
    privateKeyPath: 'privatekey.key',  // 微信公众平台密钥，建议放项目根目录(⚠️修改)
    ignores: ['node_modules/**/*'],
});
/** 上传 */
ci.upload({
    project, // 项目对象
    version: '1.0.0', // (⚠️修改)
    desc: '', // 项目描述 (⚠️修改)
    setting: {
        minifyWXML: false, // 压缩 WXML 代码
        minifyWXSS: false, // 压缩 WXSS 代码
        minifyJS: false, // 压缩 JS 代码
        codeProtect: false, // 对应小程序开发者工具的 "代码保护"
        minify: true, // 压缩所有代码，对应小程序开发者工具的 "压缩代码"
        es6: true, // 对应小程序开发者工具的 "es6 转 es5"
        es7: true, // 对应小程序开发者工具的 "增强编译"
        autoPrefixWXSS: true, // 对应小程序开发者工具的 "样式自动补全"
    },
    onProgressUpdate: () => {}, // 进度更新监听函数
})
    .then(() => {
        console.log('上传成功！');
    })
    .catch((error) => {
        console.log('上传失败，原因：', error);
        process.exit(-1);
    });

修改package.json打包指令

在原本的 build 指令后，追加 && node ci.ts，即打包后运行 ci.ts 的代码

Vue3+Uniapp小程序自动化打包一键上传

背景

整体步骤

小程序打包上传

获取上传密钥并设置IP白名单

实现一键上传