微信长按识别二维码，在 vue 项目中的实现

微信长按识别二维码是 QQ 浏览器的内置功能，该功能的基础一定要使用 img 标签引入图片，其他方式的二维码无法识别。

在 vue 中使用 QrcodeVue 插件

• demo1 在 template 标签中直接使用

<qrcode-vue :value="codeUrl" :size="size" level="H"></qrcode-vue>

在微信中长按无法识别二维码

正确的做法

使用 qrcode 插件

• 在 template 标签中是使用 img 标签引入

<template>
  <div>
    <p>长按识别二维码支付</p>
    <div id="code">
      <img class="code" :src="url" alt="">
    </div>
  </div>
</template>

• 在 methods 方法里面生成二维码图片后加入 img 中即可

methods: {
            QRCode.toDataURL('自定义的内容,可传参')
              .then(url => {
                this.url = url
              })
              .catch(err => {
                console.error(err)
              })
}

如上方法正确执行后， 即可在微信中长按识别二维码