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

【示例】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

要回复文章请先登录注册

你愁啥

你愁啥

回复 7***@qq.com :
这个扫码可以结合vue来使用吗?
2019-12-26 09:43
7***@qq.com

7***@qq.com

楼主大大你好,我现在有一个app每个页面都要扫码,并传接受的值,我是每个页面都要创建一个扫码界面呢, 还是创建一个就可以了,急急急,楼主大大救我
2019-08-22 10:56
前端小生

前端小生

很棒,解决了现在的问题,非常感谢
2019-03-18 14:52
j***@163.com

j***@163.com

回复 n***@qq.com :
请问您遇到:小米3 只能调用一次二维码扫描,第二次打开就无法显示扫描,请问要怎么解决
2018-08-01 15:26
j***@163.com

j***@163.com

小米3 只能调用一次二维码扫描,第二次打开就无法显示扫描,请问要怎么解决
2018-08-01 15:24
n***@qq.com

n***@qq.com

很棒!不错!完美解决了我的问题!感谢!
2018-07-30 13:28
2***@qq.com

2***@qq.com

还不错,给力。
2018-06-29 17:33
y***@163.com

y***@163.com

回复 Neil_HL :
非常感谢,还是有个问题呢,就是 小米3 只能调用一次二维码扫描,好像没有关闭那个扫描的对象,连拍照都不能调用了,大神你遇到过这个问题吗?
2018-05-11 14:44
Neil_HL

Neil_HL (作者)

回复 y***@163.com :
是的
2018-05-11 14:39
y***@163.com

y***@163.com

还有个问题:evalJS 是不是在当前窗口执行上一个入口页面的方法呢?
2018-05-11 14:11