uniapp H5 扫码 扫一扫 功能

前言
没想到用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{
									//成功
									}					
						}
					}
				})
			},

！！ 有一个小点
如果打印输入 Qrcode的话 可以看到是有 由一个 qrcode 对象 点开后可以看到 decode 这个解码方法
没有输出的话看下 引入 JS包 的时候有没有暴露
还是没有的话就得看下自己的引入路径是不是写错了

------------------------------手动分割----------------------------------------
写了个demo 可以直接在电脑上运行测试识别结果 里面有解析中文的JS方法哟 移动端H5(JavaScript)识别二维码功能