vue cordova 首页 vue使用cordova插件

转载

goody 2024-04-04 18:29:30

文章标签 vue cordova 首页 cordova android vue JSON 文章分类 物联网

首先我们需要使用cordova的插件cordova-plugin-qrscanner
安装：cordova plugin add cordova-plugin-qrscanner 贴上vue项目的代码：

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

<script>
export default {
  name: "Scan",
  data() {
    return {
      light: false,
    }
  },
  beforeCreate() {
    //将网页背景设置透明
    document.getElementById("app").style.backgroundColor = "transparent";
    document.querySelector('body').style.backgroundColor = "transparent";
  },
  deactivated() {
    //恢复之前的背景
    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));
    }
  },
  activated() {
    document.getElementById("app").style.backgroundColor = "transparent";
    document.querySelector('body').style.backgroundColor = "transparent";
    setTimeout(() => {
      this.onScan()
    }, 0)
  },
  methods: {
    /**
     * 扫码
     */
    onScan() {
      try {
        console.log('QRScanner:')
        console.log(QRScanner)
        //开启扫描
        QRScanner.show(status => {
          console.log("[Scan.vue onScan] 显示扫描" + JSON.stringify(status));
        });
        //监听扫描结果
        QRScanner.scan((err, contents) => {
          console.log("进入监听");
          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="scss">
//可滚动内容区域
.scroll-container {
  width: 100%;
  height: 100vh;
  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);
    font-size: 18px;

    &: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 #3661f7;
      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);
          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 #3661f7;
          border-left: 6px solid #3661f7;
        }

        .top-right {
          position: absolute;
          top: -3px;
          right: -3px;
          width: 1rem;
          height: 1rem;
          border-top: 6px solid #3661f7;
          border-right: 6px solid #3661f7;
        }

        .bottom-left {
          position: absolute;
          bottom: -3px;
          left: -3px;
          width: 1rem;
          height: 1rem;
          border-bottom: 6px solid #3661f7;
          border-left: 6px solid #3661f7;
        }

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

上面代码的效果如下：

vue cordova 首页 vue使用cordova插件_cordova

可以真机调试扫描二维码，此插件默认是只能扫描二维码的，也就是QR码，如果需要扫描条形码，也就是一维码，需要在源码里添加格式支持：

Android：plugins/cordova-plugin-qrscanner/src/android/QRScanner.java找到458行添加以下内容：

formatList.add(BarcodeFormat.UPC_A);
 formatList.add(BarcodeFormat.UPC_E);
 formatList.add(BarcodeFormat.EAN_13);
 formatList.add(BarcodeFormat.EAN_8);
 formatList.add(BarcodeFormat.CODE_39);
 formatList.add(BarcodeFormat.CODE_93);
 formatList.add(BarcodeFormat.CODE_128);
 formatList.add(BarcodeFormat.ITF);
 formatList.add(BarcodeFormat.DATA_MATRIX);

记住，改完上面配置后，一定一定要删掉对应的平台（我的是android）！在cordova根目录执行：

cordova platform rm android

然后再重新添加对应的平台：

cordova platform add android

这样，再重新打包就可以扫条形码了。
下面是cordova-plugin-qrscanner插件的API整理

监听扫描结果、取消监听

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);
});

销毁扫码器实例

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

QRScanner实例的状态描述如下：

{
  "authorized": Boolean
  "denied": Boolean
  "restricted": Boolean
  "prepared": Boolean
  "scanning": Boolean
  "previewing": Boolean
  "showing": Boolean
  "lightEnabled": Boolean
  "canOpenSettings": Boolean
  "canEnableLight": Boolean
  "currentCamera": Number
}
authorized:该authorized属性是一个布尔值，仅当用户允许相机访问您的应用程序时才为 true。
denied:一个布尔值，如果用户永久拒绝相机访问应用程序,则该值为 true,一旦被拒绝，只能通过请求用户更改他们的决定来获得相机访问权限。
prepared:一个布尔值，如果 QRScanner 准备捕获视频并将其呈现给视图，则该值为 true。
showing:一个布尔值，当预览层可见时为真（并且在所有平台上，但browser原生 webview 背景是透明的）。
scanning:一个布尔值，如果 QRScanner 正在主动扫描二维码，则该值为 true。
previewing:一个布尔值，如果 QRScanner 显示来自设备相机的实时预览，则该值为 true。暂停预览时设置为 false。
lightEnabled:一个布尔值，如果灯被启用则为真。
currentCamera:一个数字，表示当前相机的索引。0是后置摄像头，1是前置。

参考文档：https://gitee.com/zf1886/cordova-plugin-qrscanner#get-qrscanner-status

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。