Vue中实现将页面生成微信二维码

1.这里用到的插件是：qr-code-with-logo，所以第一步先安装此插件

 

npm install --save qr-code-with-logo

2.写个div用来存放二维码图片

      <li>
        <i class="wx"></i>
        微信扫一扫
        <div id="qrcodeCanvas"></div>
      </li>

3.生成二维码的方法：（在mounted的时候调用一下此方法就可以了）

  weChatQrCode () {
      const qrcode = document.getElementById(`qrcodeCanvas`)
      const myCanvas = document.createElement('canvas')
      qrcode.appendChild(myCanvas)
      QrCodeWithLogo.toCanvas({
        canvas: myCanvas,
        content: this.url, // 这里的url就是要分享的页面
        width: 110,
        errorCorrectionLevel: 'L',
        borderSize: 0, //计算模式,
        margin: 0
        // 二维码里放的图标
        logo: {
           src: xxxx
         }
      })
    }

若url地址太长，生成的二微博不好扫描，可以将二维码宽度调大一些～