uniapp生成二维码并解码

简介：uniapp生成二维码，uniapp解析二维码

1 导入uqrcodejs包

npm install uqrcodejs

2 uniapp生成二维码

2.1 页面放置一个canvas并设置canvas-id值

<canvas canvas-id='myQrcode' id="myQrcode" style='width:500rpx;height:500rpx;'></canvas>

2.2 js生成二维码

uni.createSelectorQuery().select('#myQrcode').boundingClientRect(data => {
	let qr = new UQRCode();
	qr.data = res.content;
	qr.size = data.width;
	qr.setOptions();
	qr.foregroundImageSrc = '二维码logo的链接' //可以是上传时的临时链接
	qr.make()
	// 获取canvas上下文
	let canvasContext = uni.createCanvasContext('myQrcode'); // 如果是组件，this必须传入
	// 设置uQRCode实例的canvas上下文
	qr.canvasContext = canvasContext;
	// 调用绘制方法将二维码图案绘制到canvas上
	qr.drawCanvas();
	this.qrcode_draw_status = 1;
}).exec();

uni.createSelectorQuery().select('#myQrcode').boundingClientRect()的目的是获取canvas的宽和高，可用于生成二维码时将二维码的内容与canvas的大小设置成一样大小

二维码的大小必须是正方形，所以size就是宽和高的大小

3 uniapp保存二维码内容到相册

uni.canvasToTempFilePath({
	canvasId: 'myQrcode',
	destWidth:600,
	destHeight:600,
	fileType: 'png',
	success: res => {
		uni.saveImageToPhotosAlbum({
			filePath:res.tempFilePath,
			success:(file_res)=> {
				uni.showToast({title:'保存成功',icon:'none'});
			}
		})
	},
	fail: err => {
		uni.showToast({title:'保存失败',icon:'none'});
	}
});

uni.canvasToTempFilePath是将canvas转换成本地临时文件，destWidth是导出后的宽度，destHeight是导出后的高度

保存图片到相册需要相应的权限，如果用户以前拒绝过保存图片到本地，此时无法保存图片到本地。所以在保存图片到本地之前需要先判断是否有相应的权限。具体代码如下：

uni.getSetting({
	success: (res) => {
		if(res.authSetting["scope.writePhotosAlbum"]==false){
			return uni.showModal({
				title:'未授权写入相册权限',
				content:'请授权运行程序保存图片到相册',
				showCancel:false,
				success: (auth_res) => {
					if(auth_res.confirm){
						//打开小程序设置面板
						uni.openSetting();
					}
				}
			});
		}
	}
});

4 uniapp解析二维码及条形码

uni.scanCode({
	scanType:'qrCode',
	success(res) {
		console.log('二维码内容：',res.result)
	}
})

 

有遗漏或者不对的可以在我的公众号留言哦