返回 导航

Cordova

hangge.com

Cordova - barcodeScanner扫码插件的使用详解（支持条形码、二维码）

作者：hangge | 2021-10-19 08:10
    Cordova 提供了一个名为 barcodeScanner 的扫码插件，通过这个插件我们可以调用摄像头扫描二维码、条形码，获取数据。下面通过样例演示如何使用该插件。

1，添加插件

（1）我们要在“终端”中进入工程所在的目录，然后运行如下命令安装插件：
注意：除了 phonegap-plugin-barcodescanner 插件外，还有一个名为 cordova-plugin-barcodescanner 的插件也可以实现扫码功能，并且二者调用的 API 接口都是一样的。但是后者扫码时显示界面会自动变成横屏（无法修改），所以不太推荐。 
cordova plugin add phonegap-plugin-barcodescanner

（2）可以看到 barcodescanner 扫码插件已经成功添加了：

2，使用样例

（1）下面样例代码，点击页面上的“扫一扫”按钮后，会将调用摄像头进行扫码，扫描成功后会将结果弹出显示。
<!DOCTYPE html>
<html>
<head>
    <title>hangge.com</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">
        // 点击扫码
        function scan() {
            cordova.plugins.barcodeScanner.scan(
                function (result) {
                    alert("--- 扫码结束 ---\n" +
                        "Result: " + result.text + "\n" +
                        "Format: " + result.format + "\n" +
                        "Cancelled: " + result.cancelled);
                },
                function (error) {
                    alert("Scanning failed: " + error);
                }
            );
        }
    </script>
</head>
<body>
    <button style="font-size:23px;" onclick="scan()">扫一扫</button>
</body>
</html>

（2）效果图如下：
          

附：进阶用法

    barcodeScanner 插件还提供了一些更高级的配置功能，比如是否使用前置摄像头，闪光灯，是横向显示还纵向显示等等。这些只需要我们在调用方法时作为参数传入即可，具体可参考下方样例。 
cordova.plugins.barcodeScanner.scan(
    function (result) {
        alert("--- 扫码结束 ---\n" +
            "Result: " + result.text + "\n" +
            "Format: " + result.format + "\n" +
            "Cancelled: " + result.cancelled);
    },
    function (error) {
        alert("Scanning failed: " + error);
    },
    {
        preferFrontCamera : false, // 是否默认使用前置摄像头（同时支持 iOS 和 Android）
        showFlipCameraButton : true, // 是否显示前后摄像头切换按钮（同时支持 iOS 和 Android）
        showTorchButton : true, // 是否显示打开关闭闪光灯按钮（同时支持 iOS 和 Android）
        torchOn: true, // 是否默认打开闪关灯（仅支持 Android）
        saveHistory: true, // 是否记录扫码历史（仅支持 Android）
        prompt : "Place a barcode inside the scan area", // 扫码界面下方提示语（仅支持 Android）
        resultDisplayDuration: 500, // 扫码文本在扫码界面上显示多少毫秒。0完全禁用。默认1500（仅Android）
        formats : "QR_CODE,PDF_417", // 支持的格式,默认为除PDF_417和RSS_EXPANDED之外的所有格式
        orientation : "portrait", // 设置为横向或纵向(portrait|landscape),默认跟随手机旋转（仅Android）
        disableAnimations : true, // 禁用动画（仅支持 iOS）
        disableSuccessBeep: false // 禁用成功蜂鸣声（同时支持 iOS 和 Android）
    }
);
评论

全部评论（0）

回到顶部