uniapp 实现识别二维码（app端和h5端，兼容safari）

有个项目需求要实现扫描二维码并且识别出内容填充到输入框，app端还比较简单，官网上就有现成的，官网链接如下：

https://uniapp.dcloud.io/api/system/barcode?id=scancode

handleClick(){
    let that = this;
    uni.scanCode({
		success: function(res) {
		   // console.log('条码类型：' + res.scanType);
		   that.address = res.result;
		}
	});
}

h5端就比较麻烦了，我也是百度了很多方法，在此记录成功的方法，亲测有效，主要是借用了qrcode插件：

1. 引入qrcode.js插件；

reqrcode.js资源下载   https://download.csdn.net/download/weixin_50606255/85024917

网上也有很多资源，可自行查找。将下载的文件放在项目中static文件夹下面即可。

由于在uniapp中发布的h5端，所以引入资源要重新定义一个模板html才能引入，uniapp iOS自定义添加至主屏幕的书签名称和图标_Apeng_0919的博客-CSDN博客（我的另一篇博客中有记载如何自定义模板html，点击进去往下滑一点点就可以看到了，如下图） 

建立了模板html，就可以直接引入了。

 2.具体实现方法，见如下代码：

handleClick(val){
    let that = this;
	uni.chooseImage({
		count: 1, //默认9
		sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
		sourceType: ['album'], //从相册选择
		success: function (res) {
				let url = res.tempFilePaths[0];
				qrcode.decode(url);
				qrcode.callback = function (imgMsg) {
					if(imgMsg == 'Failed to load the image' || imgMsg == 'error decoding QR Code'){
						uni.showToast({
							title:'识别二维码失败，请重新上传!',
							icon:'none'
						})
					}else{
						that.address = imgMsg;
					}
				}
			}
	});
}

因为h5无法直接识别二维码，所以只能先调取摄像头，拍摄二维码图片或者选择相册中已保存的图片然后再将图片识别，将识别出来的内容填充到输入框中。

这里的uni.chooseImage就是调用摄像头的方法，可以拿到图片的临时路径，再用qrcode.js中的qrcode.decode()方法来识别出图片内容，将url传入即可。

如果是一套代码兼容app和h5端，可以通过条件编译将两个方法写在一起，这里就不做讲述了。

如有问题，欢迎留言！！！