PhoneGap 条码扫描问题答案

【问题标题】：PhoneGap Barcode Scanning IssuePhoneGap 条码扫描问题
【发布时间】：2014-07-18 03:58:38
【问题描述】：

我想从我的 android 手机上扫描条形码，我正在使用 PhoneGap，我的问题是我想在按钮的点击事件上扫描条形码，下面的代码对我来说非常适合但是当我在按钮上使用它时点击它想要作品

<body>
    <div class="app">
        <h1>DevExpress DevExtreme JS HTML</h1>
        <div id="deviceready" class="blink">
            <p class="event listening">Connecting to Device</p>
            <p class="event received">Device is Ready</p>
        </div>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="barcodescanner.js"></script>
    <script type="text/javascript">
        var app = {
            initialize: function () {
                this.bindEvents();
            },
            bindEvents: function () {
                document.addEventListener('deviceready', this.onDeviceReady, false);
            },
            onDeviceReady: function () {
                app.receivedEvent('deviceready');

   var scanner = cordova.require("cordova/plugin/BarcodeScanner");
        scanner.scan(
      function (result) {
          alert("We got a barcode\n" +
                "Result: " + result.text + "\n" +
                "Format: " + result.format + "\n" +
                "Cancelled: " + result.cancelled);
      }, 
      function (error) {
          alert("Scanning failed: " + error);
      }
   );                
            },
            receivedEvent: function (id) {
                var parentElement = document.getElementById(id);
                var listeningElement = parentElement.querySelector('.listening');
                var receivedElement = parentElement.querySelector('.received');
                listeningElement.setAttribute('style', 'display:none;');
                receivedElement.setAttribute('style', 'display:block;');
                console.log('Received Event: ' + id);
            }
        };
    </script>
    <script type="text/javascript">
        app.initialize();
    </script>
</body>

但是这段代码不起作用

<script type="text/javascript">
            function scanCode(){
                 var scanner = cordova.require("cordova/plugin/BarcodeScanner");

            scanner.scan(
                    function(result){
                        document.getElementById("data").value= result.text;
                    }, 
                    function(error){
                        alert("Scan failed: " + error);
                    }
                );
            }


        </script>
    </head>

    <body>
        <h3>Barcode/QR Code Scanner And Encoder</h3>

        <input type="button" value="Scan Code" onclick="scanCode();"/><br/><br/>

        Data : <br/>
        <input type="text" name="data" id="data" /><br/><br/>

    </body>

请帮忙

【问题讨论】：

您是否在等待设备准备好后再使用按钮？工作代码也有 'cordova.require("com.phonegap.plugins.barcodescanner.BarcodeScanner"); '，但其他代码块没有。是在代码的其他地方吗？

标签： android cordova phonegap-plugins barcode

【解决方案1】：

为scanner 创建一个全局范围的变量，然后在document ready 中保留将其分配给cordova.require 的行，然后在您的按钮事件调用中调用scanner.scan

例子：

<body>
<div class="app">
    <h3>Barcode/QR Code Scanner And Encoder</h3>

    <input type="button" value="Scan Code" onclick="scanCode();"/><br/><br/>

    Data : <br/>
    <input type="text" name="data" id="data" /><br/><br/>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="barcodescanner.js"></script>
<script type="text/javascript">
    var scanner = null;
    var app = {
        initialize: function () {
            this.bindEvents();
        },
        bindEvents: function () {
            document.addEventListener('deviceready', this.onDeviceReady, false);
        },
        onDeviceReady: function () {
            app.receivedEvent('deviceready');

            scanner = cordova.require("cordova/plugin/BarcodeScanner");
            cordova.require("com.phonegap.plugins.barcodescanner.BarcodeScanner");
        },
        receivedEvent: function (id) {
            var parentElement = document.getElementById(id);
            var listeningElement = parentElement.querySelector('.listening');
            var receivedElement = parentElement.querySelector('.received');
            listeningElement.setAttribute('style', 'display:none;');
            receivedElement.setAttribute('style', 'display:block;');
            console.log('Received Event: ' + id);
        }
    };

    function scanCode(){
        scanner.scan(
                function(result){
                    document.getElementById("data").value= result.text;
                },
                function(error){
                    alert("Scan failed: " + error);
                }
        );
    }
</script>
<script type="text/javascript">
    app.initialize();
</script>
</body>

【讨论】：

谢谢为我解决了，你忘了添加一些标签

正在连接到设备

设备准备就绪