公司网站建设总结_js网页设计案例_公司广告推广_miy188coo免费入口

微信小程序：miniprogram-ci自动打包工具使用介绍以及支持配置环境变量、jekins打包、taro、uni-app三方工具

背景介绍

一直都是本地电脑运行微信开发者工具打包上传。多项目中新老版本对node版本要求不一致，老是切来切去。而且同一个人开发上传需要打包生产环境，发布后继续打包测试环境顶替回去。若需要审核失败、中途加东西重新发版很耽搁时间。
本文是依据：taro + ci + jekins 模式上传（原生的大同小异，区别很小），机器人1只发布生产环境，机器人2只发布测试环境。

概述

miniprogram-ci 是从微信开发者工具中抽离的关于小程序/小游戏项目代码的编译模块。
开发者可不打开小程序开发者工具，独立使用 miniprogram-ci 进行小程序代码的上传、预览等操作

官方文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/ci.html

功能

miniprogram-ci 目前提供以下能力：

上传代码，对应小程序开发者工具的上传【本文】
预览代码，对应小程序开发者工具的预览
构建 npm，对应小程序开发者工具的: 菜单-工具-构建npm
上传云开发云函数代码，对应小程序开发者工具的上传云函数能力
上传云托管代码，对应小程序开发者工具的上传云托管能力
上传云存储/静态托管文件，对应小程序开发者工具-云开发-云存储和静态托管文件管理
代理，配置 miniprogram-ci 的网络请求代理方式
支持获取最近上传版本的 sourceMap
支持 node 脚本调用方式和命令行调用方式

密钥及 IP 白名单配置

使用 miniprogram-ci 前应访问"微信公众平台-开发-开发设置"后下载代码上传密钥，并配置 IP 白名单开发者可选择打开 IP 白名单，打开后只有白名单中的 IP 才能调用相关接口

在这里插入图片描述

ip地址填写，当你不知道时候
cmd命令行跑下：curl ifconfig.me 上面显示的ip就是访问设备所在的ip地址
也可以直接浏览器打开 https://ifconfig.me

安装依赖

npm install miniprogram-ci --save

创建脚本文件

项目根目录下创建文件夹：miniprogram-ci（可自行更换）
新文件夹内新建 (名称可以自行更换)：

/miniprogram-ci/ci.js (脚本文件)
/miniprogram-ci/ci.key （小程序后台下载的key。可以不换名）

ci.js介绍

const ci = require('miniprogram-ci');
const path = require('path');
const config = require('../project.config.json');
const package = require('../package.json');const project = new ci.Project({ // 详见官方文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/ci.html#%E9%A1%B9%E7%9B%AE%E5%AF%B9%E8%B1%A1appid: config.appid, // 小程序appidtype: 'miniProgram',projectPath: process.cwd(), // 项目地址privateKeyPath: path.join(process.cwd(), `/miniprogram-ci/ci.key`), // key文件地址ignores: ['node_modules/**/*'], // 忽略上传文件
});(async () => {try {// 构建版本号和描述const version = package.version;const desc = `运行环境：${process.env.NODE_ENV || 'test'}`;// 打印执行上传操作console.log('开始上传...');console.log('上传版本号:', version);console.log('上传描述:', desc);const uploadResult = await ci.upload({project,version,desc,setting: { // 详见官方文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/ci.html#%E7%BC%96%E8%AF%91%E8%AE%BE%E7%BD%AEes6: true,minify: true,autoPrefixWXSS: true,},robot: process.env.CI_ROBOT_ID,onProgressUpdate: console.log,});console.log('上传结果:', uploadResult);process.exit();} catch (error) {console.error('上传失败:', error);process.exit(1);}
})();

package.json介绍

脚本参数说明：
【cross-env NODE_ENV=xxxx】定义项目的全局变量，如果是vite或者其他方式大同小异。也有的公司直接暴力注释切换接口地址前缀
【cross-env CI_ROBOT_ID=xxxx】定义执行的机器人id。如：生产环境用机器人1，测试环境使用机器人2，方便快速切换体验版本

有兴趣可以查看：

React自定义环境变量node、cross-env、webpack等方式不同环境配置命令整理
https://blog.csdn.net/weixin_44461275/article/details/122988359
vue、react、uniapp配置全局域名、环境变量NODE_ENV、–mode区分开发环境和正式环境https://blog.csdn.net/weixin_44461275/article/details/122325488

若是taro、uni-app这种框架：
因为【project.config.json】配置项一般入口地址配置的是【“miniprogramRoot”: “dist/”】所以，ci构建前需要先打包，读取里面的一些配置项和信息。

{// ..."scripts": {"ci-build": "npm run build && cross-env NODE_ENV=production CI_ROBOT_ID=1 node ./miniprogram-ci/ci.js","ci-build:test": "npm run build-test && cross-env CI_ROBOT_ID=2 node ./miniprogram-ci/ci.js","build": "cross-env NODE_ENV=production taro build --type weapp","build-test": "cross-env NODE_ENV=test taro build --type weapp",},
}

若是原生小程序框架写的：

{// ..."scripts": {"ci-build": "cross-env NODE_ENV=production CI_ROBOT_ID=1 node ./miniprogram-ci/ci.js","ci-build:test": "cross-env CI_ROBOT_ID=2 node ./miniprogram-ci/ci.js",},
}

运维配置jekins打包配置项

提供给运维这些信息即可

git项目仓地址
环境和分支信息
打包命令

测试环境：

npm install --registry http://registry.npm.taobao.org
npm run ci-build:test

生产环境：

npm install --registry http://registry.npm.taobao.org
npm run ci-build

也可以本地电脑命令测试

效果显示