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
         }
      })
    }

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

 

上一篇:几何图形在logo设计中的有哪些情感意义?


下一篇:合肥PS美工短期培训 PS淘宝美工课程