前段时间因项目需求,要在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;
}