微信小程序生成二维码带参海报

本文主要是介绍微信小程序生成二维码带参海报，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

微信小程序生成二维码带参海报

没错，就是用 canvas 来实现

---

---

首先声明，微信小程序的官方文档我是看了的，但是我真没看懂???，所以退而求其次，以下代码可能存在很多冗余，请不吝赐教，拜谢。

获取屏幕分辨率比

讲到生成海报，就不得不提分辨率比，因为canvas里设置的值是基于设计稿的，但是这个二维码图片的尺寸及位置是设置不了微信小程序里的自适应单位 rpx 的，所以我们需要先获取屏幕分辨率比。

	/** 获取屏幕比例 */_getScreenRatio() {/** 设计稿里的屏幕宽度 */const ORI_WIDTH = 375;return new Promise(resolve => {wx.getSystemInfo({success: res => {this.setData({ratio: ORI_WIDTH / res.windowWidth || 1});resolve(null);}// 因为设置了ratio的默认初始值为1，所以这里不做false回调处理});});},

生成二维码

这里我用到了 weapp-qrcode包 ,因为使用npm包构建有些小问题，原谅偷懒的我直接复制了 文件weapp.qrcode.esm.js。

	import drawQrcode from './weapp.qrcode.esm';Page({/** 根据链接生成动态二维码 */_getGenerateQR() {const QRCodeWidth = 115 / this.data.ratio; // 是canvasQRCode的长宽除以2，即真实二维码图片的长宽除以2const QRCodeHeight = 115 / this.data.ratio;const CanvasId = 'canvasQRCode'; // 页面二维码canvas容器的ID，必须在页面添加canvas，且设置好长宽return new Promise(resolve => {drawQrcode({width: QRCodeWidth,height: QRCodeHeight,canvasId: CanvasId,text: '要生成二维码的链接，可以在其他地方设置，用this.data.xxx获取',callback: e => {// HACK: 安卓机上不准确，生成的二维码无法扫描，加延时解决setTimeout(() => {console.log('_getGenerageQR()', 'qrcode: ', e);// 将canvas保存至临时文件wx.canvasToTempFilePath({canvasId: CanvasId,success: res => {resolve(res.tempFilePath);}});}, 500);}});});}
});

获取网络图片并转为本地临时文件

注意这里的网络图片域名必须是【微信公众平台】里面设置了的。

let backgroundImgSrc = 'https://xxx/yyy.png';wx.getImageInfo({src: backgroundImgSrc,success: res => {this._drawImage(res.path, qrcodeSrc);  // 绘制合成图片},fail: err => {console.error('_drawImage/wx.getImageInfo()', '获取网络图片失败', err);}});

绘制背景图片以及二维码

	/*** 绘制带二维码的背景图片* @param {number} index 背景图片及canvas编号* @param {String} backgroundImgPath 背景图片本地地址* @param {String} qrcodeSrc 二维码图片本地临时地址*/_drawImage(backgroundImgPath, qrcodeSrc) {// 图片尺寸常量const backImgWidth = 353.5 / this.data.ratio;const backImgHeight = 525 / this.data.ratio;const qrcodeX = 117 / this.data.ratio;const qrcodeY = 280.5 / this.data.ratio;const qrcodeWidth = 115 / this.data.ratio;const qrcodeHeight = 115 / this.data.ratio;// 准备画布,设置长宽let ctx = wx.createCanvasContext('canvasBackground');  // 这个canvas必须是在页面里存在的ctx.drawImage(backgroundImgPath, 0, 0, backImgWidth, backImgHeight); // 设置背景图片ctx.drawImage(qrcodeSrc, qrcodeX, qrcodeY, qrcodeWidth, qrcodeHeight); // X坐标，Y坐标，二维码长，二维码宽ctx.draw(true, () => {// 为了防止canvas资源转换失败，所以将资源转换放在draw的成功回调内执行wx.canvasToTempFilePath({canvasId: 'canvasBackground',success: res => {this.setData({imgSrc: res.tempFilePath});                    wx.hideLoading();  // 隐藏onload内的加载中},fail: err => {console.error('_drawImage/wx.canvasToTempFilePath()','获取canvas临时图片地址失败',err);}});});}

代码片段

微信小程序代码片段

参考链接

感谢
[1] 微信小程序官方文档 扫普通链接二维码打开小程序
[2] yingye weapp-qrcode

这篇关于微信小程序生成二维码带参海报的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---