h5+app+vue调用手机扫描二维码界面

代码如下:

注意:onmarked方法最好别写在methods里,好像不太管用

<template>

    <div>

        <input type='button' @click='startRecognize()' value='创建扫码控件' />

        <input type='button' @click='startScan()' value='开始扫码' />

        <div id="bcid"></div>

        <input type='text' id='text' />

    </div>

</template>

<script>

export default {

    data() {

        return {

            scan: null

        }

    },

    methods: {

        onPlusReady() {

            // let e = document.getElementById("scan");

            // e.removeAttribute("disabled");

        },

        startRecognize() {

            let that = this

            //创建扫码识别控件

            that.scan = new plus.barcode.Barcode('bcid');

            that.scan.onmarked = function onmarked(type, result) {

                var text = '未知: ';

                switch (type) {

                    case plus.barcode.QR:

                        text = 'QR: ';

                        break;

                    case plus.barcode.EAN13:

                        text = 'EAN13: ';

                        break;

                    case plus.barcode.EAN8:

                        text = 'EAN8: ';

                        break;

                }

                alert(text + result);

            }

            // that.scan.onmarked = this.onmarked();

        },

        startScan() {

            console.log(this.scan)

            let that = this

            that.scan.start();

           

        }

    },

    mounted: function () {

        // 扩展API加载完毕后调用onPlusReady回调函数

        document.addEventListener("plusready", this.onPlusReady(), false);

        this.startRecognize()

        setTimeout(this.startScan(),500)

    }

}

</script>

<style  scoped>

#bcid {

    background: #0F0;

    height: 480px;

    width: 360px;

}

</style>