uniapp 怎么实现长摁识别二维码图片？

Question

根据 https://blog.csdn.net/qq_27909209/article/details/130944423 写了，在电脑调试器长摁有识别功能。但在手机上没有

<template>
    <image mode="heightFix" :src="picURL1" show-menu-by-longpress @longpress="seeQRcode"></image>
</template>

<script setup>
    onShareAppMessage(() => {})
    onShareTimeline(() => {})

    // 查看二维码
    const picURL1 = "../../static/微信图片_20240306090210.png"
    function seeQRcode() {
        uni.previewImage({
            urls: [picURL1],
            longPressActions: {}
        });
    }
</script>

Answer 1

引自免费微信小程序：皆我百晓生

在uniapp中实现长按识别二维码图片的功能，你需要监听touch事件，并在长按时调用微信小程序的API来识别二维码。由于你提到在电脑调试器上长按有效，但在手机端无效，这可能是由于没有正确绑定移动端的触摸事件或者微信小程序的相关API没有在H5或APP模式下生效。

针对微信小程序平台，请确保你在对应的页面.json文件中开启了长按识别二维码的能力：

{
  "component": {
    "properties": {},
    "events": {}
  },
  "style": {},
  "schema": {
    "body": {
      "events": {
        "longpress": true // 开启长按事件
      }
    }
  }
}

然后，在对应的.vue文件中，你可以这样处理长按事件并调用微信扫一扫API（需确保在微信小程序环境中）：

<template>
  <view class="qrcode-container" @longpress="handleLongPress">
    <image :src="qrcodeImageUrl" mode="widthFix"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      qrcodeImageUrl: 'your-qrcode-image-url'
    };
  },
  methods: {
    handleLongPress(event) {
      if (typeof wx !== 'undefined') { // 检查是否在微信小程序环境
        wx.scanCode({
          onlyFromCamera: false, // 是否只能从相机扫码，不允许从相册选择图片
          scanType: ['qrCode'], // 扫码类型
          success: (res) => {
            console.log('扫码成功，结果为：', res.result);
            // 在这里处理扫码得到的结果
          },
          fail: (err) => {
            console.error('扫码失败', err);
          }
        });
      } else {
        uni.showModal({ // 如果不在微信小程序环境下，可以提示用户仅支持微信内使用
          title: '提示',
          content: '此功能仅在微信小程序内可用，请在微信中打开',
          showCancel: false
        });
      }
    }
  }
};
</script>

请确保在实际项目中将your-qrcode-image-url替换为你的二维码图片地址，并且注意上述代码片段仅适用于微信小程序环境，在H5和App模式下需要采用不同的方法来实现长按识别二维码的功能。对于非微信小程序环境下的长按识别二维码，可能需要借助第三方库来实现。