vue2 H5 網(wǎng)頁掃碼(線上需要在https服務(wù)器部署) vue3 h5掃碼插件點(diǎn)這里
1.首先uniapp初始化（需要引入npm包已經(jīng)初始化就忽略吧）
在項(xiàng)目中打開cmd窗口
npm init -y
根目錄會多出一個 package.json 文件。
2.終端執(zhí)行（需要引入vue-qrcode-reader）//只適用于vue2版本
npm install --save vue-qrcode-reader
3 創(chuàng)建一個掃碼頁面（用于其他頁面往此頁面跳轉(zhuǎn)）
<template>
<view>
<text>{{ result }}</text>
<qrcode-stream @decode="onDecode" @init="onInit" />
</view>
</template>
<script>
//引入
import {
QrcodeStream
} from 'vue-qrcode-reader';
export default {
data() {
return {
result: '', //掃碼結(jié)果信息
}
},
methods: {
onDecode(result) {
this.result = result;
//這是是要掃碼后要帶參數(shù)跳轉(zhuǎn)其他頁面
//uni.redirectTo({
// url: `../msg/msg?code=${this.result}`
//})
},
async onInit(promise) {
try {
await promise
} catch (error) {
if (error.name === 'NotAllowedError') {
this.error = "ERROR: 您需要授予相機(jī)訪問權(quán)限"
} else if (error.name === 'NotFoundError') {
this.error = "ERROR: 這個設(shè)備上沒有攝像頭"
} else if (error.name === 'NotSupportedError') {
this.error = "ERROR: 所需的安全上下文(HTTPS、本地主機(jī))"
} else if (error.name === 'NotReadableError') {
this.error = "ERROR: 相機(jī)被占用"
} else if (error.name === 'OverconstrainedError') {
this.error = "ERROR: 安裝攝像頭不合適"
} else if (error.name === 'StreamApiNotSupportedError') {
this.error = "ERROR: 此瀏覽器不支持流API"
}
}
}
},
components: {
QrcodeStream
}
}
</script>
4.manifest.json配置H5
"h5" : {
"devServer" : {
"https" : true, //加這個本地可以用，線上需要在https服務(wù)器部署
}
},
app掃碼
1.直接創(chuàng)建掃碼頁面（用于其他頁面往此頁面跳轉(zhuǎn)）文章來源：http://www.zghlxwxcb.cn/news/detail-539403.html
<template>
<view>
<!-- 掃碼頁面 -->
<!-- #ifndef APP-PLUS -->
<view class="wrap">
<view class="u-tips-color">
請?jiān)赼pp中打開
</view>
</view>
<!-- #endif -->
</view>
</template>
<script>
export default {
data() {
return {
barcode: null,
flash: false,
tip: '將二維碼放入框中，即可自動掃描',
}
},
onShow() {
// 頁面展示時，重新啟動掃描檢測
if (this.barcode) {
this.barcode.start()
}
},
onLoad(params) {
const {
tip
} = params
if (tip) {
this.tip = tip
}
// #ifdef APP-PLUS
plus.navigator.setFullscreen(true); //全屏
let currentWebview = this.$scope.$getAppWebview();
this.createBarcode(currentWebview)
this.createTipInfoView(currentWebview)
this.createFlashBarView(currentWebview)
// #endif
},
mounted() {
},
methods: {
/**
* 創(chuàng)建二維碼
* @param {Object} currentWebview
*/
createBarcode(currentWebview) {
if (!this.barcode) {
this.barcode = plus.barcode.create('barcode', [plus.barcode.QR], {
top: `0px`,
left: '0px',
height: `100%`,
width: '100%',
position: 'absolute',
background: '#FFCC00',
frameColor: '#FFCC33',
scanbarColor: '#FFCC33',
});
this.barcode.onmarked = this.onmarked;
this.barcode.setFlash(this.flash);
//此處未演示掃碼成功回調(diào)的地址設(shè)置，實(shí)際請參考HTML5Plus API自行處理
//注意掃碼區(qū)域需為正方形，否則影響掃碼識別率
currentWebview.append(this.barcode);
}
this.barcode.start()
},
/**
* 創(chuàng)建提示信息
* @param {Object} currentWebview
*/
createTipInfoView(currentWebview) {
const content = new plus.nativeObj.View('content', {
top: '0px',
left: '0px',
height: '100%',
width: '100%'
},
[{
tag: 'font',
id: 'scanTips',
text: this.tip,
textStyles: {
size: '14px',
color: '#ffffff',
whiteSpace: 'normal'
},
position: {
top: '90px',
left: '10%',
width: '80%',
height: 'wrap_content'
}
}]);
currentWebview.append(content);
},
// 創(chuàng)建 開關(guān)燈按鈕
createFlashBarView(currentWebview) {
const openImg = this.crtFlashImg('static/yellow-scanBar.png')
const closeImg = this.crtFlashImg('static/scanBar.png')
const scanBarVew = new plus.nativeObj.View('scanBarVew', {
top: '65%',
left: '40%',
height: '10%',
width: '20%',
},
closeImg);
scanBarVew.interceptTouchEvent(true);
currentWebview.append(scanBarVew);
scanBarVew.addEventListener("click", (e) => { //點(diǎn)亮手電筒
this.flash = !this.flash;
if (this.flash) {
scanBarVew.draw(openImg);
} else {
scanBarVew.draw(closeImg)
}
if (this.barcode) {
this.barcode.setFlash(this.flash);
}
}, false)
},
crtFlashImg(imgsrc) {
return [{
tag: 'img',
id: 'scanBar',
src: imgsrc,
position: {
width: '28%',
left: '36%',
height: '30%'
}
}, {
tag: 'font',
id: 'font',
text: '輕觸照亮',
textStyles: {
size: '10px',
color: '#ffffff'
},
position: {
width: '80%',
left: '10%'
}
}]
},
// 掃碼成功回調(diào)
onmarked(type, result) {
console.log('條碼類型：' + type);
console.log('條碼內(nèi)容：' + result);
uni.redirectTo({
url: `../msg/msg?code=${result}`
})
// 業(yè)務(wù)代碼
// 核對掃描結(jié)果
// 判斷是否是正確的格式
// 不正確則跳轉(zhuǎn)到 錯誤頁面
}
}
}
</script>
<style scoped>
.wrap {
height: calc(100vh);
/* #ifdef H5 */
height: calc(100vh - var(--window-top));
/* #endif */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
wx小程序文章來源地址http://www.zghlxwxcb.cn/news/detail-539403.html
// 掃碼
scanCode() {
// #ifdef MP-WEIXIN
// 允許從相機(jī)和相冊掃碼
uni.scanCode({
scanType: ["qrCode"],
success: (res) => {
if (res.result) {
const val = res.result;
console.log(val)
uni.navigateTo({
url: `../msg/msg?code=${val}`
})
} else {
console.log('請重新掃描');
return false;
}
},
fail: (res) => {
console.log('未識別到二維碼');
}
})
// #endif
},
到了這里，關(guān)于uniapp實(shí)現(xiàn)掃碼功能H5+APP+wx小程序的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
