framework7+vue+cordova移动开发（三）调用摄像头扫一扫

骑猪看日落 2023-02-20 06:41 19阅读 0赞

1.在某个.vue里面添加下面代码

<template>
      <div id="app">
        <p>测试扫一扫</p>
        
        <button @click="handleClick" >扫一扫</button>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App',
      el: '#app',
      methods: {
        handleClick: 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(error)
            }
          )
        }
      }
    }
    </script>

2、在index.html 的引入cordova.js和cordova\_plugins.js

3、app.js中加入

if (process.env.TARGET === 'cordova'){
      /* eslint-disable no-new */
      document.addEventListener('deviceready', function () {
        // Init App
        new Vue({
          el: '#app',
          panel: {
            swipe: 'left',
            leftBreakpoint: 768,
            rightBreakpoint: 1024,
          },
          render: (h) => h(App),
          // Register App Component
          components: {
            app: App,
            statusbarOverlay:false
          },
        });
        window.navigator.splashscreen.hide()
      }, false);
    }else{
      new Vue({
        el: '#app',
        panel: {
          swipe: 'left',
          leftBreakpoint: 768,
          rightBreakpoint: 1024,
        },
        render: (h) => h(App),
        // Register App Component
        components: {
          app: App,
          statusbarOverlay:false
        },
      });
    }

4、添加相应的插件  
cordova plugin add phonegap-plugin-barcodescanner --save

然后自然就是打包测试了。