html5+plus(5+app) 扫一扫(plus.barcode)

uniapp扫描二维码：

　　官方API地址：https://uniapp.dcloud.io/api/system/barcode?id=scancode；

1 uni.scanCode({
2     scanType: ['barCode'],
3     success: function (res) {
4         console.log('条码类型：' + res.scanType);
5         console.log('条码内容：' + res.result);
6     }
7 });

　　官方API解释的很清楚，不再多记 (以上即可实现app扫码) ；

5+app 扫码：

　　官方API地址：http://www.html5plus.org/doc/zh_cn/barcode.html；

　　本人使用思路：创建一个空页面当做扫描页面载体 ---> 创建扫描框 ---> 正常扫描  ---> 扫描成功 ---> 处理逻辑
　　　　　　　　　　　　　　　　　　　　　　　　　　　    |　　　　　　  |
　　　　　　　　　　　　　　　　　　　　　　　　　　　　↓　　　　　　 ↓

　　　　　　　　　　　　　　　　　　　　　　　　　　非正常扫描         扫描失败 ---> 处理逻辑
　　　　　　　　　　　　　　　　　　　　　　　　　　　　↓
　　　　　　　　　　　　　　　　　　　　　　　　　　 取消扫描

 

　　①：新建页面

　　　　　……

　　②：创建webview承载扫描控件：

　　　　　　1.

1 //创建webview
2 var cw = plus.webview.currentWebview();    

　　　　　　2.创建扫描控件(我个人是直接在onload中实现所有内容，可拆分)：

· 正常扫描：

let _that = this;
this.barcode = null;
if (!_that.barcode) {
    // 创建扫描控件对象
    _that.barcode = plus.barcode.create('barcode',[plus.barcode.QR], 
    {
         scanbarColor: '#2E49C0',
     frameColor: '#2E49C0'
    });
    cw.append(_that.barcode)；
    // (以下可单独拆分为方法)扫码成功回调
    _that.barcode.onmarked = (type,result) => {
          // 此时已经可以直接获取结果自行处理结果
          _that.result = result;
          switch (type) {
        　　case plus.barcode.QR:
           　　 type = 'QR';
           　　 break;
        　　case plus.barcode.EAN13:
          　　  type = 'EAN13';
          　　  break;
       　　 case plus.barcode.EAN8:
          　　  type = 'EAN8';
          　　  break;
       　　 default:
           　　 type = '其它' + type;
           　　 break;
      　　}
         //结束对摄像头获取图片数据进行条码识别操作，同时关闭摄像头的视频捕获。 结束后可调用start方法重新开始识别。
         _that.barcode.cancel();
         //释放控件占用系统资源，调用close方法后控件对象将不可使用。
         _that.barcode.close(); 
         // (自行处理逻辑)可以判断是否是自己需要的二维码(方法多变，)
　　　　　扫描成功……
　　　　　扫描失败……
    }
}    

* 此时可能会出现不准备扫描，想要直接返回的情况。但是5+app的控件相当于在扫描二维码的页面创建了一个webview覆盖了本页面，所以物理按键返回是关闭不了扫码界面的；

* 当扫码界面覆盖原页面时，点击扫码按钮的位置可以多次打开或创建多个扫码控件(肯定还有其他解决方法)，我这边直接在点击扫码按钮跳转到扫码页面时，隐藏扫码按钮，然后在正常扫描完成和非正常扫描后重新显示按钮。

·非正常扫描：

 

 1 // 关闭当前webview
 2 plus.key.addEventListener('backbutton', function() {
 3     cw.canBack(function(e) {
 4         if (e.canBack) {
 5             uni.$emit('scanShow','show')
 6             //关闭扫描
 7             _that.cancelScan()
 8             _that.barcode.close()
 9         }
10     })
11 });
12     

 　　　　扫描：

1 this.barcode.start();

 

注：本人以上代码全部一体在onload()生命周期函数内部编写。

扩展：

1 //开启闪光灯
2     open() {
3     this.setFlash = !this.setFlash
4     this.barcode.setFlash(this.setFlash);
5     },

其余更多扩展自行查询文档。

 

标签：控件,扫码,barcode,app,扫一扫,扫描,plus,type
来源： https://www.cnblogs.com/chenghuayike/p/14121490.html