设为首页 加入收藏

TOP

记录vue用 html5+做移动APP 用barcode做扫一扫功能时安卓 的bug(黑屏、错位等等)和解决方法(一)
2019-09-17 18:37:56 】 浏览:42
Tags:记录 vue html5 移动 APP barcode 功能 时安卓 bug 黑屏 错位 等等 解决 方法

最近做项目时,要用到扫一扫二维码的功能,在html5+里面有提供barcode功能,于是照过来用了,

写的代码如下 :

扫码页面:

<style lang="less" scoped>
#camera {
  height: 100%;
  width: 100%;
  .van-icon {
    top: -2px;
    font-size: 30px;
    color: #fff;
    &.back {
      left: 10px;
    }
    &.light {
      right: 10px;
    }
  }
  #scan {
    width: 100%;
    height: 100%;
    z-index: 2;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 1);
  }
  .tips {
    text-align: center;
    position: absolute;
    width: 100%;
    top: 40%;
    color: #fff;
    z-index: 3;
    left: 0%;
  }
  .action {
    position: fixed;
    z-index: 777;
    width: 100%;
    left: 0;
    bottom: 0;
    .items {
      display: flex;
      justify-content: space-around;
      background: rgba(0, 0, 0, 0.35);
      width: 60%;
      padding: 4px;
      margin: 4px auto;
      .item {
        flex-basis: 50px;
        text-align: center;
        img {
          width: 27px;
        }
      }
    }
  }
}
</style>
<template>
  <div id="camera">
    <div id="scan"></div>
    <div class="tips">"加载中...</div>
    <div class="action">
      <div class="items">
        <div
          class="item"
          @click="openLight"
        ><img src="../assets/img/png-60@3x.png"></div>
        <div
          class="item"
          @click="getPicture()"
        ><img src="../assets/img/png-59@3x.png"></div>

        <div
          class="item"
          @click="cancelScan()"
        ><img src="../assets/img/png-61@3x.png"></div>
      </div>
    </div>
  </div>
</template>

<script  type='text/ecmascript-6'>
let scan = null;
export default {
  data() {
    return {
      codeUrl: "",
      isLight: false,
      showEnter: false,
      extra: null,
      type: ""
    };
  },

  mounted() {
    if (window.plus) {
      let s = plus.navigator.checkPermission("camera");
      if (s !== "notdeny") {
        plus.nativeUI.alert("相机权限未获取,请往设置应用程序里面开启权限!");
      }
    }
    this.startScan(); //`进入页面就调取扫一扫
  },
  beforeDestroy() {
    if (!window.plus) return;
    scan.cancel();
    scan.close();
  },
  methods: {
    // 打开闪光灯
    openLight() {
      this.isLight = !this.isLight;
      scan.setFlash(this.isLight);
    },

    //创建扫描控件
    startRecognize() {
      let that = this;
      if (!window.plus) return;

      scan = null;
      scan = new plus.barcode.Barcode(
        "scan",
        [plus.barcode.QR, plus.barcode.EAN8, plus.barcode.EAN13],
        {
          frameColor: "#1294cb",
          scanbarColor: "#1294cb",
          top: "100px",
          left: "0px",
          width: "100%",
          height: "500px",
          position: "fixed"
        }
      );

      scan.onmarked = onmarked;
      function onmarked(type, result, file) {
        result = result.replace(/\n/g, "");
        that.storage.save("cameraData", result);
        that.codeUrl = result; //扫描后返回值
        that.$router.go(-1);
      }
    },
    // //开始扫描
    startScan() {
      if (!window.plus) return;
      this.startRecognize(); //创建控件
      setTimeout(() => {
        scan.start();
      }, 200);
    },
    // 取消扫描
    cancelScan() {
      let l = plus.webview.all().length;
      this.$toast(l);
      if (l > 1) {
        let ws = plus.webview.currentWebview();
        plus.webview.close(ws);
      } else {
        this.$router.go(-1);
      }
      // this.$rou
首页 上一页 1 2 3 下一页 尾页 1/3/3
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇VUE组件 之 高德地图地址选择 下一篇CSS filter属性

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目