cordova+vue使用插件cordova-plugin-qrscanner自定义扫码页面

原文地址声明：https://blog.csdn.net/qq_23179075/article/details/99627909

预览效果：

cordova-plugin-qrscanner 的使用方式可以自己到github上阅读文档，这里主要贴上 Vue 自定义页面的代码。

<template>
  <div>
    <div class="header">
      <x-header class="x-header" slot="header" :left-options="{backText:'返回'}"
                :title="title">
      x-header>
    div>
    <div class="scroll-container scan-container">
      <div class="scan-none-1">div>
      <div class="scan-box-container">
        <div class="scan-none-2">div>
        <div class="scan-box">
          <div class="scan-box-area">
            <div class="top-left">div>
            <div class="top-right">div>
            <div class="bottom-left">div>
            <div class="bottom-right">div>
            <div class="light" @click="onLightTrigger">
              <i :class="['iconfont',light?'icon-shoudiantong-dakai':'icon-shoudiantong-guanbi']">i>
              <span>轻触 {{light?'关闭':'打开'}}span>
            div>
          div>
        div>
        <div class="scan-none-2">div>
      div>
      <div class="scan-none-1">
        放入框内，自动扫描
      div>
    div>
  div>
template>

<script>
  export default {
    name: "Scan",
    data() {
      return {
        light: false,
      }
    },
    beforeCreate() {
      //将网页背景设置透明
      document.getElementById("app").style.backgroundColor = "transparent";
      document.querySelector('body').style.backgroundColor = "transparent";
    },
    beforeDestroy() {
      //恢复之前的背景
      document.getElementById("app").style.backgroundColor = "#f6f6f6";
      document.querySelector('body').style.backgroundColor = "#f6f6f6";
      try {
        QRScanner.hide(status => {
          console.log("[Scan.vue] 关闭扫描" + JSON.stringify(status));
        });
        QRScanner.destroy(function (status) {
          console.log("[Scan.vue] 销毁扫码" + JSON.stringify(status));
        });
      } catch (e) {
        console.log("[Scan.vue]" + JSON.stringify(e));
      }
    },
    mounted() {
      this.onScan();
    },
    methods: {
      /**
       * 扫码
       */
      onScan() {
        try {
          QRScanner.show(status => {
            console.log("[Scan.vue onScan] 显示扫描" + JSON.stringify(status));
          });
          QRScanner.scan((err, contents) => {
            if (err) {
              alert(JSON.stringify(e))
            }else {
              alert('扫描结果: ' + contents);
            }
          });
        } catch (e) {
          console.log("[Scan.vue：onScan] " + JSON.stringify(e))
        }
      },

      /**
       * 手电筒开关
       */
      onLightTrigger() {
        try {
          if (!this.light) {
            QRScanner.enableLight((err, status) => {
              err && console.log("[Scan.vue] 打开手电筒状态错误：" + JSON.stringify(err));
              console.log("[Scan.vue] 打开手电筒状态：" + JSON.stringify(status));
            });
          } else {
            QRScanner.disableLight((err, status) => {
              err && console.log("[Scan.vue] 关闭手电筒状态错误：" + JSON.stringify(err));
              console.log("[Scan.vue] 关闭手电筒状态：" + JSON.stringify(status));
            });
          }
        } catch (e) {
          console.log("[Scan.vue] " + JSON.stringify(e));
          return
        }
        this.light = !this.light
      },

    }
  }
</script>

标题栏用的 VUX UI库 中的 XHeader组件！