使用原生集成的控件 barcode 调试时在PC端无法调试 需要build 或者云打包到真机上才可以调试
功能常见 点击扫描按钮,然后在此页面的基础上创建扫描页面并开始扫描
扫描控件 我是放在dialog(vant2)弹窗中的
此方法在点击扫描按钮后,会有一秒中的黑屏,各种百度和GPT搜,可能是创建扫描控件和初始化摄像头不及时造成,并且此方法在连续扫描时,极容易卡死在黑屏页面,此方法不推荐实际开发使用。仅做踩坑记录。
解决办法,在扫描控件创建好之前选择一个页面也代替黑屏,就是做个动画盖住黑屏,
<template>
<!--1.首先,弹窗页面中要有el-dialog组件即弹窗组件,我们把弹窗中的内容放在el-dialog组件中-->
<!--2.设置:visible.sync属性,动态绑定一个布尔值,通过这个属性来控制弹窗是否弹出-->
<el-dialog title="弹窗"
:visible.sync="detailVisible"
width="100%"
top="50px"
fullscreen
align-center
append-to-body
class="dialog">
<div class="barcode">
<!-- <header class="header"> -->
<!-- <el-button
class="filter-item"
style="margin-right: 80px;height: 39px;font-size: 16px;"
type="primary"
@click="closeScan"
:loading="btnLoading"
>返回</el-button
> -->
<!-- <el-button
class="filter-item"
style="margin-right: 80px;height: 39px;font-size: 16px;"
type="primary"
@click="scanImg"
:loading="btnLoading"
>相册</el-button
> -->
<div class="head-bar">
<p class="canle" @click="clickIndexLeft">取消</p>
<p class="picture" @click="scanImg">相册</p>
</div>
<!-- <p @click="closeScan">返回</p>
<p @click="scanImg">相册</p> -->
<!-- </header> -->
<div id="bcid">
<!-- <div style="height:20%"></div> -->
</div>
</div>
</el-dialog>
</template>
<script>
var barcode = null;
export default {
name: "dialogComponent",
props: ['articles'],
data(){
return{
detailVisible:false,
result: "",
resultInfo:[]
}
},
mounted() {
//跳转时自动开启
var currentWebview = plus.webview.currentWebview().opener();
this.creatBarCode(currentWebview);
},
beforeDestroy() {
barcode && barcode.close()
barcode = null
},
methods:{
// 通过设置detailVisible值为true来让弹窗弹出,这个函数会在父组件的方法中被调用
init(data){
this.detailVisible=false;
},
// 创建扫描控件
creatBarCode(currentWebview) {
// 隐藏当前窗口
plus.navigator.setStatusBarBackground('#000000');
plus.navigator.setStatusBarStyle('light');
plus.webview.currentWebview().hide();
barcode = new plus.barcode.Barcode("bcid", [plus.barcode.QR,plus.barcode.EAN13,plus.barcode.EAN8], {
background: '#000000',
frameColor: '#07c160',
scanbarColor: '#07c160',
top: "0px",
left: '0px',
width: '100%',
height: '580px',
position: 'static'
});
barcode.onmarked = this.onmarked //扫码成功
barcode.onerror = this.onerror //扫码失败
plus.webview.currentWebview().append(barcode);
barcode.start()
// 显示当前窗口
plus.webview.currentWebview().show('slide-in-right', 300);
console.log("开始扫描")
},
onmarked(type, result) {
var text = '未知: ';
switch (type) {
case plus.barcode.QR:
type = "QR";
break;
case plus.barcode.EAN13:
type = "EAN13";
break;
case plus.barcode.EAN8:
type = "EAN8";
break;
}
this.result = result.replace(/\n/g, "");
barcode.close();
this.$emit('dialogClose');
this.$emit('receive');
console.log("弹窗扫描结果" + result)
},
// 识别失败
onerror(err) {
alert("扫码失败");
console.log('扫码失败', JSON.stringify(err))
barcode && barcode.close();
barcode = null;
},
// 关闭返回
closeScan() {
// barcode.close();
this.$emit('dialogClose');
},
// 从系统相册选择文件
scanImg() {
window.plus.gallery.pick(
(path) => {
window.plus.barcode.scan(
path,
(type, result) => {
this.result = result.replace(/\n/g, '');
barcode.close();
this.$emit('dialogClose');
this.$emit('receive');
console.log("弹窗扫描结果" + result)
},
() => {
alert('QR Code not found');
}
)
}
), {
filters: "images"
}
},
}
}
</script>
<style lang="scss">
.head-bar{
position: relative;
top: -388px;
width: 100%;
height: 35px;
background-color: #42a5ff;
color: #fff;
}
.canle{
float: left;
margin-left: 10px;
margin-top: 7px;
}
.picture{
float: right;
margin-right: 10px;
margin-top: 7px;
}
.dialog{
// margin-top: 50px;
}
.barcode {
position: relative;
top: 0px;
height: 300px;
border-color: pink;
#bcid {
width: 100%;
position: absolute;
left: 0;
right: 0;
height: 350px;
top: -353px;
bottom: 0px;
text-align: center;
color: #fff;
background: #ccc;
background-color: #42a5ff;
}
header{
position: absolute;
display: flex;
justify-content: space-between;
font-size: 20px;
color: #009DE2;
width: 65%;
left: 0.3rem;
top: 0px;
bottom: 40px;
right: 0.3rem;
height: 1rem;
line-height: 1rem;
z-index: 999999;
}
}
</style>