qrcodejs华为手机无法识别二维码解决方法

前言

现在移动端很常用生成二维码，一般都是前端生成的，当然也有后台给你生成后台图片的。

例如，生成海报和邀请二维码很有用。 我在项目中遇到的问题是华为手机长按二维码会无法识别。 原因是你还应该搜索百度。 根据鉴定，我的解决办法是手动传输图片，隐藏内置件。 直接上代码。

项目使用VUE，封装组件

qrCode.vue

cript>
import QRCode from "qrcodejs2";
import html2canvas from "@/libs/html2canvas";
export default {
  name: "qrcode",
  props: ["text", "type", "color"],
  data() {
    return {
      imgdata: ""
    };
  },
  watch: {
    text() {
      this.codeInit();
    },
    color() {
      this.codeInit();
    }
  },
  mounted() {
    this.codeInit();
  },
  methods: {
    codeInit() {
      if (!this.$refs.code) return;
      this.$refs.code.innerHTML = "";
      let w = this.$el.clientWidth,
        h = this.$el.clientHeight;
      console.log(this.text);
      new QRCode(this.$refs.code, {
        text: this.text,
        width: w,
        height: h,
        scrollY: 0,
        scrollX: 0,
        colorDark: this.color || "#000",
        colorLight: "#fff",
        correctLevel: QRCode.CorrectLevel.L
      });
      console.log(this.$refs.code);
        var canvas=document.getElementsByTagName('canvas')[0];
        this.imgData = this.convertCanvasToImage(canvas);
    },
    convertCanvasToImage(canvas) {
       var url =  canvas.toDataURL("image/png");
      return url;
    },
    createPicture(w, h) {
      console.log("refresh");
      // this.$nextTick(() => {
      //   setTimeout(() => {
      //     html2canvas(this.$refs.code, {
      //       backgroundColor: "#fff",
      //       width: w,
      //       height: h,
      //       useOverflow: true,
      //       useCORS: true
      //     }).then(canvas => {
      //       var imgData = canvas.toDataURL("image/jpeg");
      //       this.imgData = imgData;
      //     });
      //   }, 500);
      // });
    }
  }
};
cript>

你不需要引用它。 之前我的想法是再次捕获生成的屏幕，但是有些手机只会捕获正常或黑屏。

指示

使用的页面
xx.vue

import qrCode from "@/components/qrCode";
...此处省略部分代码
components: {
    qrCode,
  },
.pop_qrc{
width:100px;
height:100px
}

必须给出容器的高度和宽度，否则不会显示