cordova 二维码插件

cordova 二维码插件

1 使用插件cordova-plugin-qrscanner 实现

该插件的样式需要自己定义默认的样式很空,支持摄像头切换, 打开/关闭闪光灯

cordova plugin add cordova-plugin-qrscanner

若在ionic或vue等spa应用中使用，有以下两种方式引入QRScanner 变量

var QRScanner = require('QRScanner');  或
<script src="path/to/qrscanner/library.bundle.min.js"></script>

该插件默认就已将QRScanner变量声明为全局使用

var app = {
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
        document.addEventListener("volumedownbutton",function(){ //将音量键模拟为触发条件
            if(QRScanner!==undefined){
                QRScanner.prepare(function(err,status){
                    if(err){
                        alert(err)
                        return false
                    }
                    document.getElementsByClassName("app")[0].style.display="none" //将cordova 默认样式清除
                    document.body.style.backgroundColor="transparent" // 背景设为可见
                    if(status.authorized){
                         QRScanner.scan(displayContents);
                        function displayContents(err, text) {
                            if (err) {
                              alert('启动扫描出错：' + JSON.stringify(err));
                            } else {
                                alert(text) // 若扫描有效,该变量就为对应的网址
                              QRScanner.scan(displayContents);//重复扫描
                              return false
                            }
                          }
                          QRScanner.show(); //打开扫描
                    }else if(status.denied){
                        alert("denied") //用户拒绝访问摄像头
                    }
                })
            }else{
                alert("ererr")
            }
        },false)
    }
};
app.initialize();

控制摄像头和闪光灯

QRScanner.useFrontCamera(); 切换成前置摄像头
QRScanner.useBackCamera();  切换成后置摄像头
QRScanner.enableLight();    打开闪关灯
QRScanner.disableLight();	关闭闪光灯

更详细api请到以下网址浏览

https://www.npmjs.com/package/cordova-plugin-qrscanner

2 cordova-plugin-cszbar 扫描二维码插件

该插件对android平台非常友好,android平台下响应速度快, 插件自带一套样式

百度插件cordova-plugin-baidumaplocation 与本插件同时安装可能有冲突，cordova-plugin-cszbar打不开相机，闪退

cordova plugin add cordova-plugin-cszbar

使用方法

var app = {
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
        document.addEventListener("volumeupbutton", function(){ //音量模拟触发场景
            if(cloudSky!==undefined || cloudSky!==null){
                cloudSky.zBar.scan({
                    text_title:"扫描二维码", //扫码标题
                    text_instructions:"请将相机对准二维码", //扫描提示文字
                    camera:"back", // 后置摄像头 front/back
                    flash:"auto", // 闪光灯自动 on/off/auto
                    drawSight:true // 相机中间出现一条红线
                },
                function success(succ){
                    alert("成功"+succ) // succ成功后返回的url地址
                },function fail(fail){
                    alert("失败"+fail)
                })
            }else{
                alert("扫描插件失败")
            }

        }, false);   
    }
};
app.initialize();