<template>
<div id="div_page">
<div class="scan">
<div id="bcid"></div>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { Notify } from "vant";
let scan = null;
let scanTip = null;
let bFlash = null;
let bAlbum = null;
//设置扫码框样式和位置
let styles = {
frameColor: "#1294cb",
scanbarColor: "#1294cb",
top: "44px",
left: "0px",
width: "100%",
height: "100%",
position: "fixed",
zindex: 1,
};
//设置扫码格式
let filter = [plus.barcode.QR]; //扫码格式 空为全类型
export default {
data () {
return {
codeUrl: "",
flash: false,
};
},
mounted () {
this.startRecognize();
this.startScan();
let flag = this.isWindowBrowser();
if (!flag) {
plus.key.addEventListener("backbutton", this.backScan, false);
}
},
destroyed () {
plus.key.removeEventListener("backbutton", this.backScan, false);
},
methods: {
backScan () {
scan.close(); //关闭条码识别控件
scan.cancel();
scanTip.close();
bFlash.close();
bAlbum.close();
},
//创建扫描控件
startRecognize () {
if (!window.plus) return;
scan = plus.barcode.create("bcid", filter, styles);
scan.onmarked = this.onmarked;
plus.webview.currentWebview().append(scan);
this.createView();
this.startScan();
},
createView () {
let _this = this
//扫码框下提示文字
scanTip = new plus.nativeObj.View(
"scanTip",
{
top: "65%",
left: "5%",
height: "20%",
width: "90%",
},
[
{
tag: "font",
fontSrc: '_www/helloh5.ttf',
id: "font",
text: "将手机和二维码置于平行状态即可自动扫描",
textStyles: {
size: "16px",
color: "#ffffff",
},
position: {
width: "100%",
},
},
]
);
//闪光灯
bFlash = new plus.nativeObj.View('nbutton', {
bottom: '20px',
left: '5%',
width: '40%',
height: '44px'
}, [{
tag: 'rect',
id: 'rect',
rectStyles: {
radius: '8px',
color: 'rgba(0,0,0,0.5)'
}
}, {
tag: 'font',
id: 'text',
text: '闪光灯',
textStyles: {
color: '#FFFFFF'
}
}]);
let that = _this
bFlash.addEventListener('touchend', function (e) {
that.flash = !that.flash;
scan.setFlash(that.flash);
}, false);
//相册
bAlbum = new plus.nativeObj.View('nbutton', {
bottom: '20px',
left: '55%',
width: '40%',
height: '44px'
}, [{
tag: 'rect',
id: 'rect',
rectStyles: {
radius: '8px',
color: 'rgba(0,0,0,0.5)'
}
}, {
tag: 'font',
id: 'text',
text: '相册',
textStyles: {
color: '#FFFFFF'
}
}]);
bAlbum.addEventListener('touchend', function (e) {
plus.gallery.pick(
function (path) {
plus.barcode.scan(path, that.onmarked, function (error) {
plus.nativeUI.alert("无法识别此图片");
});
},
function (err) {
plus.nativeUI.alert("请选择正确的二维码图片");
}
);
}, false);
plus.webview.currentWebview().append(scanTip);
plus.webview.currentWebview().append(bFlash);
plus.webview.currentWebview().append(bAlbum);
},
onmarked (type, result, file) {
result = result.replace(/\n/g, "");
this.codeUrl = result;
if (result != "") {
this.scanSuccess();
}
},
//开始扫描
startScan () {
if (!window.plus) return;
scan.start();
},
//扫描成功后带参数跳转
scanSuccess () {
let arr = [];
let result = this.codeUrl;
console.log("result ")
//关闭组件，不然会继续显示
scan.cancel();
scan.close();
scanTip.close();
bFlash.close();
bAlbum.close();
},
},
};
</script>
以上就是h5 barcode的实现代码，目前问题是无法在view视图层显示图片，正在解决。欢迎大家提问或者给出解决意见。
原生控件对象可用于在屏幕上绘制图片或文本内容，当控件不再使用时需要调用close方法销毁控件。
NView不支持zindex，后显示的覆盖先显示的；
调用Webview窗口对象的append方法添加到Webview中，显示在父窗口所有子Webview的上面；不添加到Webview窗口对象，显示在所有Webview的上面。
