uniapp H5 扫码扫一扫功能

前言没想到用H5来实现扫码，也是第一次接触，由于项目是打包成H5 ，所以无法调用uniapp scanCode扫码API，在查阅其他前辈博客之后发现H5不是很好实现，最后决定以文件上传的形式来实现。（效果为拍照识别，相册照片识别）期间使用过npm包的形式使用，也就是qrcode-decoder，识别率实在是太低，最后还是采用引入qrcode的形式。1. 引入qrcode.js （直接本地新建

词不达意难知

11630人浏览 · 2021-05-25 13:59:14

词不达意难知 · 2021-05-25 13:59:14 发布

前言
没想到用H5来实现扫码，也是第一次接触，由于项目是打包成H5 ，所以无法调用uniapp scanCode扫码API，在查阅其他前辈博客之后发现H5不是很好实现，最后决定以文件上传的形式来实现。
（效果为 拍照识别，相册照片识别 ）

在这里插入图片描述

期间使用过npm包的形式使用，也就是qrcode-decoder，识别率实在是太低，最后还是采用引入qrcode的形式。
1. 引入qrcode.js （直接本地新建空js,然后点下方链接复制代码到该空js文件）
qrcode.js 下载地址 https://gitee.com/xiahaolin/some-important-demo
长的好看的都点⭐了！！！

之后暴露出 qrcode对象，（我看了很多前辈的文章都没有详细讲到uniapp或者vue项目中怎么暴露怎么在页面中使用这个对象所以我这边写的比较细，感兴趣的可以在页面上导出后打印输出一下qrcode）
在这里插入图片描述

2.页面使用
首先导出该对象
在这里插入图片描述
申明获取文件地址函数

	getObjectURL(file) {
				var url = null
				if (window.createObjectURL !== undefined) { // basic
					url = window.createObjectURL(file)
				} else if (window.URL !== undefined) { // mozilla(firefox)
					url = window.URL.createObjectURL(file)
				} else if (window.webkitURL !== undefined) { // webkit or chrome
					url = window.webkitURL.createObjectURL(file)
				}
				console.log(url)
				return url
			},

最后就是使用解码
我这边图方便直接调用的uniapp的拉取相册和照相机API，获取文件流。
在qrcode中传入通过getObjectURL 返回的url 。最后在qrcode.callback回调中就可以访问到解码值，
小提示：解码失败会返回什么什么error 一条字符串用此来判断识别失败的业务逻辑处理。

		resolveQR(event) {
				uni.chooseImage({
					count: 1, //默认9 上传数量
					success: res => {
					Qrcode.qrcode.decode(this.getObjectURL(res.tempFiles[0]))
					Qrcode.qrcode.callback = function(res1) {
							console.log(res1)	
								if (res1.indexOf('error') >= 0) {
									//失败
									}else{
									//成功
									}					
						}
					}
				})
			},