关于H5扫描二维码方式(plus)

本文使用了HTML5+API Reference (参考地址:https://www.html5plus.org/doc/zh_cn/barcode.html#plus.barcode.getBarcodeById)

代码示例

new Vue({
        el: "#list",
        data: { 
            text: '', 
            barcode: null,
    },
methods: {
        //关闭扫码
        closeBarcode() {
        this.barcode.close();
        this.barcode = null;
        },
        //扫码识别错误事件
        onerror(error) {
        var self = this;
        mui.alert("识别二维码异常,请确认后重试", "温馨提示", function () {
        self.closeBarcode();
        });
        },
        //扫码成功事件 type 当前扫描条码类型数值,二维码为0 code 扫描结果
        onmarked(type, code) {
        var self = this; 
        self.text= code;
        self.closeBarcode();
        },
        // 创建Barcode扫码控件
        createBarcode() {
        var self = this;
        if (!self.barcode) {
        self.barcode = plus.barcode.create('barcode', [plus.barcode.QR], {
        top: '80px',//本来是0px  占用整个页面,但是没有关闭按钮,所以往下调整80像素,在html页面写了一个关闭按钮,调用关闭扫码事件
        left: '0px',
        width: '100%',
        height: '100%',//默认100%
        position: 'static',
        frameColor: '#33d5ac',//扫码框颜色
        scanbarColor: '#33d5ac',//扫码动画颜色
        });
        plus.webview.currentWebview().append(self.barcode);
        }
        self.barcode.start();
        //回调函数
        self.barcode.onmarked = self.onmarked;
        self.barcode.onerror = self.onerror;
        }, 

    },

    }
})

该方法没有关闭或者返回按钮

我在页面写了一层遮罩 ,加了一个关闭按钮

<div v-if="barcode!=null" class="mui-backdrop" style="z-index: 9999; background-color: #000;">
  <span class="close-scan mui-icon mui-icon-closeempty" v-on:click="closeBarcode"></span>
</div>

 

posted @ 2023-06-30 17:24  账号昵称  阅读(873)  评论(0)    收藏  举报