uni-app 中应用H5+自定义二维码扫码界面

前段时间因项目需求，要在uni-app的扫码uni.scanCode(OBJECT)，中并没有自定的参数或者接口，所以自己用H5+搞了个扫码界面，这里做一下记录，就算是一个轮子。

下面开始造轮子。

1，创建一个.vue的页面文件。因为我这需求是全屏的扫码，所以在pages.json 中设置去掉原生导航栏

2,开始在页面中绘制界面

如图我们看到有内容，返回箭头，标题，提示文本信息，扫码框，打开手电动按钮等内容，

虽然看上去是有这5部分，但是我们可以认为是二维码一层，文字及操作按钮是一层，

A.二维码层创建

// 创建二维码窗口
            createBarcode(currentWebview) {
                barcode = plus.barcode.create('barcode', [plus.barcode.QR], {
                    top: '0',
                    left: '0',
                    width: '100%',
                    height: '100%',
                    scanbarColor: '#1DA7FF',
                    position: 'static',
                    frameColor: '#1DA7FF'
                });
                barcode.onmarked = this.onmarked;
                barcode.setFlash(this.flash);
                currentWebview.append(barcode);
                barcode.start();
            }

// 扫码成功回调
            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;
                }