Cordova利用phonegap-plugin-barcodescanner插件实现扫一扫

最新推荐文章于 2024-08-09 08:21:47 发布

tingary

最新推荐文章于 2024-08-09 08:21:47 发布

阅读量4k

点赞数 1

分类专栏： app

本文链接：https://blog.csdn.net/tingary/article/details/101269305

版权

本文介绍了如何在Cordova项目中使用phonegap-plugin-barcodescanner插件来实现二维码/条形码扫描功能。在遇到版本不兼容问题后，通过指定旧版本解决了问题，并提供了index.html和index.js的关键代码片段，以及采用Framework7框架的页面实现详情。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

遇到问题用调试工具看一下，也可以自己写一些日志，看下结果:

chrome://inspect/#devices

调用摄像头：cordova plugin add cordova-plugin-camera
根据自己的项目适配版本，调用扫一扫：cordova plugin add phonegap-plugin-barcodescanner

git上插件太新，不兼容项目，一天都没整明白，后来丁老师告知版本问题，心累啊

index.html如下所示：

<body>
<div class="app">
    <div class="line"><button id="openLabrary">按钮</button></div>
    <div class="line"><img id="myImage" style="height: 200px;"></img></div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

index.js如下所示：

var app = {
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },
    onDeviceReady: function() {
        this.receivedEvent();
    },
    $$: function(id) {
        return document.getElementById(id);
    },
    receivedEvent: function() {
        var getDomLabrary = this.$$('openLabrary');
        var _this = this;

        getDomLabrary.onclick = function() {
            cordova.plugins.barcodeScanner.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);
                },
                {
                    preferFrontCamera : false, // iOS and Android
                    showFlipCameraButton : true, // iOS and Android

最低0.47元/天解锁文章