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

原文地址声明：http://www.noobyard.com/article/p-bjkcpmpv-nk.htmlcss

预览效果：

cordova-plugin-qrscanner 的使用方式能够本身到github上阅读文档，这里主要贴上 Vue 自定义页面的代码。html

<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>

<style scoped lang="less">
  @header-height: 1.2rem;
  //可滚动内容区域 .scroll-container {
    width: 100%;
    height: calc(100% - @header-height);
    padding-top: @header-height;
    overflow: auto;
    -webkit-overflow-scrolling: touch; &::-webkit-scrollbar {
      display: none;
    }
  }

  .scan-container {
    background: rgba(0, 0, 0, 0);
    display: flex;
    flex-direction: column; .scan-none-1 {
      flex: 1;
      width: 100%;
      background: rgba(0, 0, 0, 0.4);
      text-align: center;
      padding-top: 0.32rem;
      color: rgba(255, 255, 255, 0.8); &:first-child {
        flex: 0.6;
      }
    }

    .scan-box-container {
      display: flex; .scan-none-2 {
        flex: 1;
        height: calc(6rem + 2px);
        background: rgba(0, 0, 0, 0.4);
      }

      .scan-box {
        width: 6rem;
        height: 6rem;
        border: 1px solid @primary;
        background: rgba(0, 0, 0, 0); .scan-box-area {
          width: 6rem;
          height: 6rem;
          position: relative; .light {
            width: 6rem;
            position: absolute;
            color: rgba(255, 255, 255, 0.8);
            .center;
            flex-direction: column;
            bottom: 0.32rem; i {
              font-size: 0.8rem;
              line-height: 0.8rem;
            }
          }

          .top-left {
            position: absolute;
            top: -3px;
            left: -3px;
            width: 1rem;
            height: 1rem;
            border-top: 6px solid @primary;
            border-left: 6px solid @primary;
          }

          .top-right {
            position: absolute;
            top: -3px;
            right: -3px;
            width: 1rem;
            height: 1rem;
            border-top: 6px solid @primary;
            border-right: 6px solid @primary;
          }

          .bottom-left {
            position: absolute;
            bottom: -3px;
            left: -3px;
            width: 1rem;
            height: 1rem;
            border-bottom: 6px solid @primary;
            border-left: 6px solid @primary;
          }

          .bottom-right {
            position: absolute;
            bottom: -3px;
            right: -3px;
            width: 1rem;
            height: 1rem;
            border-bottom: 6px solid @primary;
            border-right: 6px solid @primary;
          }
        }
      }
    }
  }
  /deep/ .vux-header-back {
    color: white !important;
  }
</style>

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