微信長按識別二維碼，在 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)
              })
}

如上方法正確執行后， 即可在微信中長按識別二維碼