Cordova利用phonegap-plugin-barcodescanner插件實現掃一掃

遇到問題用調試工具看一下,也可以自己寫一些日誌,看下結果:

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
                    showTorchButton : true, // iOS and Android
                    torchOn: true, // Android, launch with the torch switched on (if available)
                    saveHistory: true, // Android, save scan history (default false)
                    prompt : "Place a barcode inside the scan area", // Android
                    resultDisplayDuration: 500, // Android, display scanned text for X ms. 0 suppresses it entirely, default 1500
                    formats : "QR_CODE,PDF_417", // default: all but PDF_417 and RSS_EXPANDED
                    orientation : "landscape", // Android only (portrait|landscape), default unset so it rotates with the device
                    disableAnimations : true, // iOS
                    disableSuccessBeep: false // iOS and Android
                }
            );
        }
    }
};

app.initialize();

另附加採用Framework7框架實現的頁面:

<!--suppress ALL -->

<template>
    <div>
        <div class="list" style="margin: 0.35rem 0.1rem">
            <ul>
                <li>
                    <a href="/developing/" class="item-link item-content">
                        <img src="./img/me/d_me.png" style="width:15%; padding: 0.1rem 0;"/>
                        <div class="item-inner">
                            <div class="item-title">
                                <div class="item-header" style="font-weight: bold;font-size: 0.16rem;padding: 0.1rem 0;">{{name}}</div>
                                <div class="item-footer" style="font-size: 0.16rem;padding-bottom: 0.1rem;">{{role}}</div>
                            </div>
                            <div class="item-after">
                                <i class="f7-icons">right</i>
                            </div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <!--<div class="list" style="margin: 0.35rem 0.1rem">-->
            <!--<ul>-->
                <!--<li>-->
                    <!--<a href="/tabs-routable/tab3/" class="item-link item-content">-->
                        <!--<img src="./img/me/gb14.png" style="padding: 0.1rem 0;"/>-->
                        <!--<div class="item-inner">-->
                            <!--<div class="item-header" style="font-weight: bold;font-size: 0.16rem;padding: 0.1rem 0;">我的收藏</div>-->
                        <!--</div>-->
                    <!--</a>-->
                <!--</li>-->
            <!--</ul>-->
        <!--</div>-->
        <div class="list" style="margin: 0.35rem 0.1rem">
            <ul>
                <li style="border-bottom: 0.01rem solid #0000004a;">
                    <a  class="item-link item-content">
                        <img src="./img/me/gb14.png" style="padding: 0.1rem 0;"/>
                        <div class="item-inner">
                            <div class="item-header" id="sys" style="font-weight: bold;font-size: 0.16rem;padding: 0.1rem 0;">掃一掃</div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="/developing/" class="item-link item-content">
                        <img src="./img/me/gb14.png" style="padding: 0.1rem 0;"/>
                        <div class="item-inner">
                            <div class="item-header" style="font-weight: bold;font-size: 0.16rem;padding: 0.1rem 0;">用戶註冊</div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="list" style="margin: 0.35rem 0.1rem">
            <ul>
                <li><a id="exit_login" href="#" class="list-button item-link color-red">退出登錄</a></li>
            </ul>
            <!--<ul>-->
                <!--<li>-->
                    <!--<a id="exit_login" href="#" class="item-link item-content">-->
                        <!--<img src="./img/me/gb14.png" style="padding: 0.1rem 0;"/>-->
                        <!--<div class="item-inner">-->
                            <!--<div class="item-header" style="font-weight: bold;font-size: 0.16rem;padding: 0.1rem 0;">退出登錄</div>-->
                        <!--</div>-->
                    <!--</a>-->
                <!--</li>-->
            <!--</ul>-->
        </div>
    </div>
</template>
<script>
    return {
        data: function () {
            var user_info = getUserInfo();
            //console.log(user_info);
            return {
                name:user_info.user_name,
                role:user_info.role_name,
                phone:user_info.mobile_phone,
                company:user_info.unit_name,
            };
        },
        methods: {
            tab_entry: function(component){
                $$('#exit_login').on('click', function(){
                    dialog_confirm(NOTICE_MSG.CONFIRM_LOGOUT_MSG, function(){
                        debug_out('exit app by logout');
                        signOut();
                    }, function(){});
                });
                $$('#sys').on('click', 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
                            showTorchButton : true, // iOS and Android
                            torchOn: true, // Android, launch with the torch switched on (if available)
                            saveHistory: true, // Android, save scan history (default false)
                            prompt : "Place a barcode inside the scan area", // Android
                            resultDisplayDuration: 500, // Android, display scanned text for X ms. 0 suppresses it entirely, default 1500
                            formats : "QR_CODE,PDF_417", // default: all but PDF_417 and RSS_EXPANDED
                            orientation : "landscape", // Android only (portrait|landscape), default unset so it rotates with the device
                            disableAnimations : true, // iOS
                            disableSuccessBeep: false // iOS and Android
                        }
                    );
                });
            }
        },
        on: {
            tabInit: function () {
                $$('.title').text('我');
                $$('.tab-order-filter').hide();

                this.tab_entry(this);
            }
        }
    }
</script>

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章