下載qrcode:npm i qrcode
在需要的組件引入:import QRCode from 'qrcode'
組件
<template>
<view class="container">
<button type="default" @click="scanCode">掃碼</button>
<view>
掃碼結果:{{qrCodeRes}}
</view>
</view>
</template>
<script>
import Qrcode from 'qrcode'
export default {
data() {
return {
qrCodeRes: ''
}
},
methods: {
// 掃碼
scanCode() {
// #ifdef APP-PLUS
this.scanCodeAPP()
// #endif
// #ifdef H5
this.scanCodeH5()
// #endif
},
// APP直接調用 uni.scanCode 接口
scanCodeAPP() {
uni.scanCode({
scanType: ['qrCode'],
success: (res) => {
this.qrCodeRes = res.result
}
})
},
// H5通過拉起相機拍照來識別二維碼
scanCodeH5() {
uni.chooseImage({
count: 1,
success: imgRes => {
Qrcode.qrcode.decode(this.getObjectURL(imgRes.tempFiles[0]))
Qrcode.qrcode.callback = (codeRes) => {
if (codeRes.indexOf('error') >= 0) {
// 二維碼識別失敗
this.qrCodeRes = '不合法二維碼:' + codeRes
} else {
// 二維碼識別成功
let r = this.decodeStr(codeRes)
this.qrCodeRes = r
}
}
}
})
},
// 獲取文件地址函數(shù)
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)
}
return url
},
// 解碼,輸出:中文
decodeStr(str) {
var out, i, len, c;
var char2, char3;
out = "";
len = str.length;
i = 0;
while (i < len) {
c = str.charCodeAt(i++);
switch (c >> 4) {
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
case 6:
case 7:
// 0xxxxxxx
out += str.charAt(i - 1);
break;
case 12:
case 13:
// 110x xxxx 10xx xxxx
char2 = str.charCodeAt(i++);
out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
break;
case 14:
// 1110 xxxx 10xx xxxx 10xx xxxx
char2 = str.charCodeAt(i++);
char3 = str.charCodeAt(i++);
out += String.fromCharCode(((c & 0x0F) << 12) |
((char2 & 0x3F) << 6) |
((char3 & 0x3F) << 0));
break;
}
}
return out;
},
}
}
</script>
<style>
.container{
padding: 10px;
}
</style>
關于h5 項目 掃碼功能(H5不具備調用手機相機的能力)
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
推薦閱讀更多精彩內容
- 前沿: 之前在做見到的時候有一個需求是更換頭像,于是乎就開始各種趟坑,還好搞出來了,之前忙著上線,沒時間整理,現(xiàn)在...
- 最近的一個項目中需要用到拍照上傳圖片的功能,因為是h5寫的頁面,不像app那樣可以授權獲取相機的使用功能,那該如何...
- 下面是完整的一個HTML頁面內容,放在服務器上然后瀏覽就可以了,只支持Chrome和Safari核的瀏覽器,QQ瀏...
- 一、引言 webview怎么實現(xiàn)web的 選擇圖片功能,如何讓h5通過webview調用系統(tǒng)相冊和相機,并在圖片傳...
- 在 里面加上: 需要撥打的電話: 168-1686-16888 調用發(fā)短信: 發(fā)短信 點擊 頁面上的電話號碼 ,頁...