手机扫码+生成二维码

手机生成二维码

• 安装npm地址

npm install  qrcodejs2 --save

• 按需引入使用
  vue文件

<template>
  <div>
    <van-button type="primary" @click="generateQr">生成二维码</van-button>
    <div id="qrcode"></div>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
export default {
  components: { QRCode },
  data() {
    return {
      link: "https://baidu.com",
    };
  },

  methods: {
    generateQr() {
      this.qrcode();
    },
    qrcode() {
      let that = this;
      let qrcode = new QRCode("qrcode", {
        width: 124,
        height: 124, // 高度
        text: this.link, // 二维码内容
        // render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        // background: '#f0f',   // 背景色
        // foreground: '#ff0'    // 前景色
      });
    },
  },
};
</script>

<style>
</style>

扫码

如果真机上可以弹出使用摄像机权限，但是扫码后没有反应，就是版本问题，ios支持14.3以上，安卓的浏览器限制，看下图2
api地址：https://gruhn.github.io/vue-qrcode-reader/api/QrcodeStream.html#browser-support

推荐一个好用的网站：https://caniuse.com/stream

扫码npm地址

• 安装
• 使用
  下面是vue文件

<template>
  <div>
    <van-nav-bar title="首页" right-text="菜单" right-icon="bars">
      <template #right>
        <van-icon name="bars" size="18" @click="menuShow" />
      </template>
    </van-nav-bar>
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <nav-bar v-if="nshow"></nav-bar>

    <van-grid>
      <van-grid-item icon="photo-o" text="人员管理" @click="perManage" />
      <van-grid-item icon="photo-o" text="人员录入" @click="perAdd" />
      <van-grid-item icon="photo-o" text="违规上报" @click="perViolation" />
      <van-grid-item icon="photo-o" text="扫一扫" />
      <!-- <van-grid-item icon="photo-o" text="生成二维码" @click="qrcode" /> -->
    </van-grid>
    <qrcode-stream @decode="onDecode"> </qrcode-stream> 
    <div>
      <p class="error">{{ error }}</p>

      <p class="decode-result">
        Last result: <b>{{ result }}</b>
      </p>

      <qrcode-stream @decode="onDecode" @init="onInit" />
    </div>
  </div>
</template>
<script>
import NavBar from "./common/navBar";
import { QrcodeStream } from "vue-qrcode-reader";
import { Lazyload } from 'vant';
import Vue from 'vue';
Vue.use(Lazyload);
export default {
  name: "",
  data() {
    return {
      nshow: false,
      userInfo: "",
      result: "",
      error: "",
      navShow: false,
      images: [
         'https://img01.yzcdn.cn/vant/apple-1.jpg',
        'https://img01.yzcdn.cn/vant/apple-2.jpg',
      ],
    };
  },
  mounted() {
    this.title = this.$route.meta.title;
    this.isleftarrow = this.$route.meta.isleftarrow;
  },
  components: {
    QrcodeStream,
    NavBar,
  },
  methods: {
    menuShow() {
      !this.navShow;
    },
    // 扫码方法开始
    onDecode(result) {
      this.result = result;
      window.location.href = this.result;
    },

    async onInit(promise) {
      try {
        await promise;
      } catch (error) {
        if (error.name === "NotAllowedError") {
          this.error = "ERROR: you need to grant camera access permisson";
        } else if (error.name === "NotFoundError") {
          this.error = "ERROR: no camera on this device";
        } else if (error.name === "NotSupportedError") {
          this.error = "ERROR: secure context required (HTTPS, localhost)";
        } else if (error.name === "NotReadableError") {
          this.error = "ERROR: is the camera already in use?";
        } else if (error.name === "OverconstrainedError") {
          this.error = "ERROR: installed cameras are not suitable";
        } else if (error.name === "StreamApiNotSupportedError") {
          this.error = "ERROR: Stream API is not supported in this browser";
        }
      }
    },
    // 扫码方法结束
    // 人员录入
    qrcode() {
      this.$router.push({
        path: "/personnel/qrcode",
      });
    },
    // 人员管理
    perManage() {
      this.$router.push({
        path: "/personnel/perManage",
      });
    },
    // 人员录入
    perAdd() {
      this.$router.push({
        path: "/personnel/perAdd",
      });
    },
    // 违规上报
    perViolation() {
      this.$router.push({
        path: "/personnel/perViolation",
      });
    },
    exit() {
      //销毁
      localStorage.clear();
      this.$router.push({
        path: "/login",
      });
    },
  },
};
</script>
<style scoped>
.error {
  font-weight: bold;
  color: red;
}
.van-swipe-item{
  width: 80vw;
}
.van-swipe-item img{
  width: 100%;
}
</style>