Neil_HL
Neil_HL
  • 发布:2017-06-22 13:58
  • 更新:2019-12-26 09:43
  • 阅读:16230

【示例】Barcod二维码扫描及其结果在webview中的信息的传递

分类:HTML5+

应用场景

1.A页面到B页面,B页面扫描得到结果,返回给A页面,A页面做相关处理;
2.A页面到B页面,B页面扫描得到结果,打开C页面,B页面的结果在C页面处理;根据需求是否关闭B页面,若不关闭,C页面back到B页面,重新调用barcode扫描二维码;
3.扫描页,可以添加本机图片进行扫描、也可以调用闪光灯;

具体实现

1.核心

调用扫描二维码Barcode的方法,Barcode参考文档

var scan = new plus.barcode.Barcode('mask');//创建  
scan.start();//执行  
scan.onmarked = function(type, result){//成功回调  
    console.log(result);  
};  
scan.onerror = function ( error ) {//失败回调  
     console.log(error);       
}

2.A→B→A

首先仍是调用Barcode,得到结果,使用evalJ传递数据给指定页面,evalJ参考文档

scan.onmarked = function(type, result){  
    if(result) {  
        alert(result);  
        scan.close();  
        plus.storage.setItem('result',result);//这里使用storage来保存数据  
        var wn = plus.webview.getLaunchWebview();//传递消息返回的webview  
        wn && wn.evalJS("var result = plus.storage.getItem('result');document.querySelector('#a').innerText = result;");//引号里为指定窗口要执行的代码  
        plus.webview.currentWebview().close();//扫码成功,关闭当前webview  
    }  
};

3.A→B→C

在B页面得到数据,传给C页面,这里采用的是 将数据存放在Webview窗口的额外扩展参数里面,参考文档
当然也可以用本地储存、mui自定义事件 mui.fire()等方法,本地储存文档mui.fire()文档

scan.onmarked = function(type, result) {  
    if(result) {  
         alert(result);  
         scan.close();  
         var w = plus.webview.create('Barcode_B2C.html', 'id', {  
             'titleNView': {  
                 'backgroundColor': '#262930',  
                 'titleText': '这里是C页面,返回应该关闭B',  
                 'titleColor': '#FFFFFF',  
                 autoBackButton: true  
             }  
         }, {//额外参数  
             barcode_data: result  
         });  
         w.show('pop-in','300ms');  
    }  
};

C页面返回时,关闭B页面,直接回到A页面,两种方法实现:

//1.在当前页面back时处理事件  
plus.key.addEventListener('backbutton',function(){  
    plus.webview.getWebviewById('carcode2').close();  
    plus.webview.currentWebview().close();  
});  
//2.在页面加载完成后直接关闭B页面  
plus.webview.getWebviewById('carcode2').close();

C页面返回时不关闭B页面,同时还要让B页面可以继续扫码:

plus.key.addEventListener('backbutton',function(){  
    var wn = plus.webview.getWebviewById('carcode3');  
//  wn && wn.reload();//刷新B页面  
    wn && wn.evalJS("scan = new plus.barcode.Barcode('mask');scan.start();scan.onmarked = function(type, result) {alert(result)}");//重新让B页面执行扫码操作  
    plus.webview.currentWebview().close();  
})

4.调用闪光灯、本地图片

调用闪光灯的方法,参考文档,相关代码如下:

//闪光灯  
document.querySelector('#scan2 img').addEventListener('click', function() {  
    if(/scan_off.png/.test(this.src)) {//实际中不建议用正则判断,声明个变量就行,这里偷了个懒  
         this.src = "../img/scan_on.png";  
         scan.setFlash(true);  
    } else {  
         this.src = "../img/scan_off.png";  
         scan.setFlash(false);  
    }  
})

调用本地图片的方法,调用了 Gallery模块的,参考文档

//闪光灯  
//添加本地图片  
document.querySelector('#scan1 img').addEventListener('click', function() {  
    plus.gallery.pick(function(path){//调用本机图片  
         console.log(path);  
        plus.barcode.scan(path,onmarked,function(error){//识别图片  
             plus.nativeUI.alert(JSON.stringify(error));  
         });  
    }, function(err){  
        plus.nativeUI.alert('Failed: '+err.message);  
    });  
})

最后,附上demo源码

9 关注 分享
Trust t***@foxmail.com i***@163.com 1***@qq.com n***@qq.com 6***@qq.com y***@163.com 逞英雄 8***@qq.com

要回复文章请先登录注册

Neil_HL

Neil_HL (作者)

回复 1***@qq.com :
目前只能在固定的容器里面没法全屏
2017-10-10 17:22
1***@qq.com

1***@qq.com

安卓下,为什么扫码不全屏
2017-10-10 17:14
xiaohai

xiaohai

我想让闪光灯图标覆盖在扫描模组上面显示,请问有办法做到吗?
2017-09-21 10:01
kay

kay

很棒!不错!完美解决了我的问题!感谢!
2017-08-05 16:08