cordova plugin add cordova-plugin-qrscanner

初始化，获取摄像头权限等

if (typeof QRScanner !== 'object') {
          return;
        }

        QRScanner.prepare(onDone);
 function onDone(err, status) {
          if (err) {
            if (err.name === 'SCAN_CANCELED') {
              console.error('在找到二维码之前，扫描已被取消。');
            } else {
              console.error(err._message);
            }
            vm.$f7.dialog.alert(err._message);
          }

          if (status.authorized) {
            // vm.$f7.dialog.alert('Autorizado');
            console.log('Autorizado:', Autorizado);
          } else if (status.denied) {
            // vm.$f7.dialog.alert('Denegado');
            console.log('Denegado:', Denegado);
          } else {}
        }

监听扫描结果、取消监听 

var callback = function(err, contents){
  if(err){
    console.error(err._message);
  }
  alert('The QR Code contains: ' + contents);
};
QRScanner.scan(callback);
 
QRScanner.cancelScan(function(status){
  console.log(status);
});

开启和隐藏扫描

QRScanner.show(function(status){
  console.log(status);
});
QRScanner.hide(function(status){
  console.log(status);
});

开启、关闭手电筒

QRScanner.enableLight(function(err, status){
  err && console.error(err);
  console.log(status);
});
QRScanner.disableLight(function(err, status){
  err && console.error(err);
  console.log(status);
});

切换前后摄像头

QRScanner.useFrontCamera(function(err, status){
  err && console.error(err);
  console.log(status);
});
QRScanner.useBackCamera(function(err, status){
  err && console.error(err);
  console.log(status);
});

销毁、其他api参考git

QRScanner.destroy(function(status){
  console.log(status);
});

<template>
  <f7-page class="scanner-open-page" id="scanner-open-page">
    <f7-navbar :back-link="$t('app.back')" @backClick="onBackClick"></f7-navbar>
    <div class="qrscanner">
      <div class="qrscanner-area"></div>
      <div class="through-line"></div>
    </div>
    <f7-fab position="right-bottom" slot="fixed" color="green">
      <f7-icon ios="f7:add" md="material:add"></f7-icon>
      <f7-icon ios="f7:close" md="material:close"></f7-icon>
      <f7-fab-buttons position="left">
        <f7-fab-button @click="change">
          <f7-icon f7="refresh_round"></f7-icon>
        </f7-fab-button>
        <f7-fab-button @click="light">
          <f7-icon f7="bolt"></f7-icon>
        </f7-fab-button>
      </f7-fab-buttons>
    </f7-fab>
  </f7-page>
</template>
<style type="text/css">
  .page-previous {
    transform: translate3d(-100%, 0, 0) !important;
    -webkit-transform: translate3d(-100%, 0, 0) !important;
    /*background: none transparent !important;*/
  }

  .scanner-open-page {
    background: none transparent !important;
  }

</style>
<script>
  import { baseConfig } from '@/utils/baseConfig'
  import { codeFormat } from '@/utils/appFunc'
  import ScannerStyle from '@/assets/css/scanner.css'

  export default {
    beforeMount() {},
    mounted: function() {
      // this.$f7router.navigate('/inspection/scanner/')
      this._scan();
    },
    computed: {

    },
    data() {
      return {
        lightOn: false,
        frontCamera: false,
      }
    },
    methods: {
      _scan: function() {
        let vm = this;
        if (typeof QRScanner !== 'object') {
          return;
        }

        QRScanner.prepare(onDone);
        MostrarCamara();

        QRScanner.hide(function(status) {});

        function onDone(err, status) {
          if (err) {
            if (err.name === 'SCAN_CANCELED') {
              console.error('在找到二维码之前，扫描已被取消。');
            } else {
              console.error(err._message);
            }
            vm.$f7.dialog.alert(err._message);
          }

          if (status.authorized) {
            // vm.$f7.dialog.alert('Autorizado');
            console.log('Autorizado:', Autorizado);
          } else if (status.denied) {
            // vm.$f7.dialog.alert('Denegado');
            console.log('Denegado:', Denegado);
          } else {}
        }

        function displayContents(err, text) {
          if (err) {
            // vm.$f7.dialog.alert('Error');
            console.error('err:', err);
          } else {
            // vm.$f7.dialog.alert(text);
            // if (text.indexOf(baseConfig.wechatUrl) === -1) {
            // 	vm.$f7.dialog.alert("该码不符合规则。"+"码内容为："+text);
            // 	setTimeout(() => {
            // 		QRScanner.prepare(onDone);
            // 		QRScanner.cancelScan();
            // 		MostrarCamara();
            // 		QRScanner.hide();
            // 	}, 1200);

            // 	return;
            // }

            QRScanner.hide();
            QRScanner.destroy();
            vm.$f7router.navigate('/inspection/scanner/', {
              props: {
                // statusCode: 100,
                // error: "你查询的追溯码不存在<br>请注意甄别，谨防上当受骗",
                code: codeFormat(text)
              }
            })
          }
        }

        function MostrarCamara() {
          QRScanner.scan(displayContents);
          QRScanner.show();
        }
      },
      light: function() {
        let vm = this;
        if (typeof QRScanner !== 'object') {
          return;
        }

        if (!vm.lightOn) {
          QRScanner.enableLight(function(err, status) {
            console.log(status);
            if (err) {
              console.error(err);
              return;
            }
            vm.lightOn = true;
          });
        } else {
          QRScanner.disableLight(function(err, status) {
            console.log(status);
            if (err) {
              console.error(err);
              return;
            }
            vm.lightOn = false;
          });
        }
      },
      change: function() {
        let vm = this;
        if (typeof QRScanner !== 'object') {
          return;
        }

        if (!vm.frontCamera) {
          QRScanner.useFrontCamera(function(err, status) {
            console.log(status);
            if (err) {
              console.error(err);
              return;
            }
            vm.frontCamera = true;
          });
        } else {
          QRScanner.useBackCamera(function(err, status) {
            console.log(status);
            if (err) {
              console.error(err);
              return;
            }
            vm.frontCamera = false;
          });
        }
      },
      onBackClick: function() {
        if (typeof QRScanner !== 'object') {
          return;
        }

        QRScanner.destroy(function(status) {
          console.log(status);
        });
      }
    },
    components: {

    }
  }

</script>

.qrscanner {
  width: 100%;
  height: 100%;
}

.qrscanner-area {
  width: 100%;
  height: 85%;
  background: url(../images/scanner.svg) no-repeat center center;
  background-size: contain;
}

.through-line {
  left: 20%;
  width: 60%;
  height: 2px;
  background: red;
  position: absolute;
  animation: myfirst 5s linear infinite alternate;
}

@keyframes myfirst {
  0% {
    background: red;
    top: 180px;
  }

  25% {
    background: yellow;
    top: 240px;
  }

  50% {
    background: blue;
    top: 260px;
  }

  75% {
    background: green;
    top: 290px;
  }

  100% {
    background: red;
    top: 320px;
  }
}