uniapp H5 掃碼 掃一掃 功能

前言

沒想到用H5來實作掃碼，也是第一次接觸，由于項目是打包成H5 ，是以無法調用uniapp scanCode掃碼API，在查閱其他前輩部落格之後發現H5不是很好實作，最後決定以檔案上傳的形式來實作。

（效果為 拍照識别，相冊照片識别 ）

期間使用過npm包的形式使用，也就是qrcode-decoder， 識别率實在是太低，最後還是采用引入qrcode的形式。

1. 引入qrcode.js （直接本地建立空js,然後點下方連結複制代碼到該空js檔案）

github下載下傳位址：https://gitee.com/weijunw/erweima/blob/master/erweima-jiexi-demo/reqrcode.js

之後暴露出 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包 的時候有沒有暴露

還是沒有的話就得看下自己的引入路徑是不是寫錯了