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

时间：2022-10-14 16:11:03

微信长按识别二维码是 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)

              })

}

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

相关文章