前端生成二维码以及会出现的问题

qrcode

qrcode.js是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas绘制而成,不依赖任何库。可以快速的在web页面中绘制出二维码。

安装插件

npm install --save qrcodejs2

在需要的页面引入

import QRCode from 'qrcodejs2'

HTML布局

<template>
  <div>
      <div id="qrcode" ref="qrCodeDiv"></div>
  </div>
</template>

   this.$http.get('二维码链接地址接口').then((res) => {
        if (res.data.code == 1) {
          new QRCode(this.$refs.qrCodeUrl, {
            text: res.data.data.url, //接口返回的二维码链接地址
            width: 200,    // 二维码的宽度
            height: 200,    // 二维码的高度
            colorDark: "#000",    //二维码的颜色
            colorLight: "#fff",    //二维码的背景色
          });
        } else {
          this.$message.error({ message: res.data.msg });
        }
      });

注意：

qrcode生成二维码插件在线上运行时可能会报一个错误

 我当时也是一脸懵逼，因为在本地运行没有报错但是在线上会出现这个错误，不能刷新页面，不能进入二级页面，当时在项目包里面也搜索不到这个字段，后来也是问了前端大佬才知道问题在哪

安装完qrcode插件后会在node_modules里面生成一个包，找到这个js文件

 然后搜索报错的字段，改成这样的，删掉第一个this后面的_android就可以了