[图片] 如上，除了在开发者工具里上传代码， 我们现在还能借助微信开发者工具提供的 miniprogram-ci 库，实现一键上传。 这对需要批量上传多个工程代码，提供了极大的便捷。 我们来尝试下。 新建一个[代码]upload.js[代码]文件，存放我们的上传脚本 touch upload.js 引入[代码]miniprogram-ci[代码]库 npm i miniprogram-ci --save 在代码里引入 const ci = require('miniprogram-ci'); 借助[代码]miniprogram-ci[代码]库提供的[代码]upload[代码]API，我们来写下： ; (async () => { const project = new ci.Project({ appid: 'xxx', type: 'miniProgram', projectPath: 'the/path/to/project', privateKeyPath: 'the/path/to/privatekey', ignores: ['node_modules/**/*'], }) const uploadResult = await ci.upload({ project, version: '版本号', desc: '项目备注', setting: { es6: true, }, onProgressUpdate: console.log, }) console.log('uploadResult:', uploadResult); })() 这里有几个参数需要说明下： appid是需要上传的小程序的appidprojectPath填写工程所在的目录privateKeyPath填写秘钥所在目录version和desc对应图一截图里的版本号和项目备注 到这一步，我们上传代码的脚本，已经万事俱备了，还差一阵东风。 我们需要搞到，上传的秘钥，也就是上文提到的[代码]privateKeyPath[代码]。 使用小程序管理员身份访问"微信公众平台-开发-开发设置"后下载代码上传密钥，并配置 IP 白名单。 [图片] 这里我不开启ip白名单，方便测试，但您务必明白风险。 OK，我们来执行下[代码]uplaod.js[代码]脚本。 node upload.js 当看到控制台输出如下信息后，即表示已成功上传。 [图片] 登录小程序后台，我们也能看到本次的提交记录了。 [图片] 至此，我们已初步跑通小程序代码上传的脚本。 执行上传脚本的过程，实际是会对工程代码做 预编译检查。 比如我们在工程代码里，故意定义两个同名的变量。 [图片] 会在执行脚本的时候报错如下： [图片] 回看之前的上传脚本，有一个细节还是可以值得优化下。 我们注意到，[代码]upload[代码]的[代码]API[代码]有提供一个上传进度更新监听函数[代码]onProgressUpdate[代码]。 上述的代码，只是简单接入[代码]console.log[代码]，把进度输出到控制台。 我们可以优化下： 定义一个回调函数[代码]cb[代码]，实现两个功能： 对过回调里的字符串做过滤，记录上传的“文件名”。如有报错，标识出来 来看代码（其中借助kuler库做字符串着色）： const uploadSucFiles = []; let haveError = false; const cb = output => { if (haveError) return; if (!!output.code) { haveError = true; console.log(output); console.log(kuler('something wrong is happened.pleace check.', '#ff4d4f')); return; } const allowSuffixs = ['js', 'json', 'wxml', 'wxss', 'ts', 'less', 'sass']; const curSuffix = output._msg.slice(output._msg.lastIndexOf('.') + 1); // 按后缀筛选 _msg if ( allowSuffixs.indexOf(curSuffix) >= 0 && output._status === 'done' ) { uploadSucFiles.push(`${output._msg} ${kuler('is uploaded.', '#2da44e')}`); // clear terminal output console.clear(); console.log(uploadSucFiles.join('\n')); } }; // 调用 const uploadResult = await ci.upload({ project, version: '版本号', desc: '项目备注', setting: { es6: true, }, onProgressUpdate: cb, }) 修饰后的控制台输出，如下截图，有点打包上传的那味了😛。 [图片] 出错时，直接打印调用栈，红色提示 [图片] 最后 我们来看下完整的[代码]upload.js[代码]文件。 const ci = require('miniprogram-ci'); const kuler = require('kuler'); const uploadSucFiles = []; let haveError = false; const cb = output => { if (haveError) return; if (!!output.code) { haveError = true; console.log(output); console.log(kuler('something wrong is happened.pleace check.', '#ff4d4f')); return; } const allowSuffixs = ['js', 'json', 'wxml', 'wxss', 'ts', 'less', 'sass']; const curSuffix = output._msg.slice(output._msg.lastIndexOf('.') + 1); // 按后缀筛选 _msg if ( allowSuffixs.indexOf(curSuffix) >= 0 && output._status === 'done' ) { uploadSucFiles.push(`${output._msg} ${kuler('is uploaded.', '#2da44e')}`); // clear terminal output console.clear(); console.log(uploadSucFiles.join('\n')); } }; ; (async () => { try { const project = new ci.Project({ appid: 'wx202120212021', type: 'miniProgram', projectPath: './wx202120212021', privateKeyPath: './private.wx202120212021.key', ignores: ['node_modules/**/*'], }) const uploadResult = await ci.upload({ project, version: '版本号', desc: '项目备注', setting: { es6: true, }, onProgressUpdate: cb, }) // console.log('uploadResult:', uploadResult); console.log('\n'); console.log(`${kuler('upload success~', '#ff5722')} 🎉🥳`); } catch (error) { cb(error); } })() 整个目录结构 [图片] 工程也已上传到github了，看这里miniprogram-ci-onestep。 clone下来后，需要自行替换对应的文件名和上传秘钥。 另外 miniprogram-ci库除了支持 node 脚本调用方式，还支持命令行调用。 安装 npm install -g miniprogram-ci 示例 miniprogram-ci \ upload \ --pp ./demo-proj/ \ --pkp ./private.YOUR_APPID.key \ --appid YOUR_APPID \ --uv PACKAGE_VERSION \ -r 1 \ --enable-es6 true \

weapp-qrcode-canvas-2d weapp-qrcode-canvas-2d 是使用新版canvas-2d接口在微信小程序中生成二维码（外部二维码）的js包。canvas 2d 接口支持同层渲染且性能更佳，建议切换使用，可大幅提升生成图片的速度。 仓库地址 weapp-qrcode-canvas-2d【码云gitee】 weapp-qrcode-canvas-2d【github】 [图片] 测试环境 微信小程序基础库版本：2.10.4 开发者工具版本：Stable 1.03.2101150 Usage 先在 wxml 文件中，创建绘制的 [代码]canvas[代码]，并定义好 [代码]width[代码], [代码]height[代码], [代码]id[代码] , [代码]type[代码] ，其中type的值必须为[代码]2d[代码] [代码]<canvas type="2d" style="width: 260px; height: 260px;" id="myQrcode"></canvas> [代码] 安装方法1：直接引入 js 文件 直接引入 js 文件，使用 [代码]drawQrcode()[代码] 绘制二维码 [代码]// 将 dist 目录下，weapp.qrcode.esm.js 复制到项目中。路径根据实际引用的页面路径自行改变 import drawQrcode from '../../utils/weapp.qrcode.esm.js' [代码] 安装方法2：npm安装 [代码]npm install weapp-qrcode-canvas-2d --save [代码] // 然后需要在小程序开发者工具中：构建npm [代码]import drawQrcode from 'weapp-qrcode-canvas-2d' [代码] 安装完成后调用 例子1：没有使用叠加图片 [代码]const query = wx.createSelectorQuery() query.select('#myQrcode') .fields({ node: true, size: true }) .exec((res) => { var canvas = res[0].node // 调用方法drawQrcode生成二维码 drawQrcode({ canvas: canvas, canvasId: 'myQrcode', width: 260, padding: 30, background: '#ffffff', foreground: '#000000', text: 'abc', }) // 获取临时路径（得到之后，想干嘛就干嘛了） wx.canvasToTempFilePath({ canvasId: 'myQrcode', canvas: canvas, x: 0, y: 0, width: 260, height: 260, destWidth: 260, destHeight: 260, success(res) { console.log('二维码临时路径：', res.tempFilePath) }, fail(res) { console.error(res) } }) }) [代码] 例子2：使用叠加图片(在二维码中加logo) [代码]const query = wx.createSelectorQuery() query.select('#myQrcode') .fields({ node: true, size: true }) .exec((res) => { var canvas = res[0].node var img = canvas.createImage(); img.src = "/image/logo.png" img.onload = function () { // img.onload完成后才能调用 drawQrcode方法 var options = { canvas: canvas, canvasId: 'myQrcode', width: 260, padding: 30, paddingColor: '#fff', background: '#fff', foreground: '#000000', text: '123456789', image: { imageResource: img, width: 80, // 建议不要设置过大，以免影响扫码 height: 80, // 建议不要设置过大，以免影响扫码 round: true // Logo图片是否为圆形 } } drawQrcode(options) // 获取临时路径（得到之后，想干嘛就干嘛了） wx.canvasToTempFilePath({ x: 0, y: 0, width: 260, height: 260, destWidth: 600, destHeight: 600, canvasId: 'myQrcode', canvas: canvas, success(res) { console.log('二维码临时路径为：', res.tempFilePath) }, fail(res) { console.error(res) } }) }; }) [代码] API drawQrcode([options]) options Type: Object 参数 必须 说明 示例 canvas 必须 画布标识，传入 canvas 组件实例 canvasId 非 绘制的[代码]canvasId[代码] [代码]'myQrcode'[代码] text 必须 二维码内容 ‘123456789’ width 非 二维码宽度，与[代码]canvas[代码]的[代码]width[代码]保持一致 260 padding 非 空白内边距 20 paddingColor 非 内边距颜色 默认与background一致 background 非 二维码背景颜色，默认值白色 [代码]'#ffffff'[代码] foreground 非 二维码前景色，默认值黑色 [代码]'#000000'[代码] typeNumber 非 二维码的计算模式，默认值-1 8 correctLevel 非 二维码纠错级别，默认值为高级，取值：[代码]{ L: 1, M: 0, Q: 3, H: 2 }[代码] 1 image 非 在 canvas 上绘制图片，层级高于二维码，v1.1.1+版本支持。具体使用见：例子2 [代码]{imageResource: '', width:80, height: 80, round: true}[代码]