• 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     },

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

  • 相关阅读:
    书写高效的CSS
    _blank开新窗口不符合标准?
    IE6支持PNG透明(alpha通道)的4种方法
    jQuery插件支持天干地支阴历阳历万年历节假日红字显示记事等功能的日历插件(1)
    讓你的windowsXP支持四桌面,類似Ubuntu的效果
    MySql语句常见操作创建数据库,选择数据库,创建表,数据库中文乱码;
    解决<pre>标签里的文本换行(兼容IE, FF和Opera等)
    使用jquyer擴展方法定義屬於自己的氣泡提示
    jQuery插件通用input或textarea靜態ajax修改功能插件
    SEO的经验
  • 原文地址:https://www.cnblogs.com/chenghuayike/p/14121490.html
Copyright © 2020-2023  润新知