基于Hbuilderx开发APP中的扫码功能，支持从相册扫描_hbuilder扫描二维码

使用原生集成的控件 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>