小程序内嵌H5页面图片长按识别二维码是否存在兼容性问题？

Question

小程序环境里内嵌的H5页面，图片长按识别有兼容行问题吗，类似识别图片中的二维码。

简单的图片长按了没啥问题，包含二维码的图片没试过。

Answer 1

普通图片在WebView里长按是可以触发保存或识别的。
二维码图片会可能因WebView内核或CSS影响而无法长按识别。

推荐使用 wx.previewImage 让用户手动长按识别，或者在 H5 端提供手动扫码的方式。

你可以先试试直接在WebView里长按二维码，如果发现不能识别，再考虑用 wx.previewImage 作为解决方案。

Answer 2

小程序内嵌H5页面图片长按识别二维码是可能存在兼容性问题的，具体如下：

• 不同手机系统与微信版本方面

  • iOS系统：在iOS系统下，微信版本对长按识别二维码功能有一定影响，iOS-8.0.6版本及以上支持小程序原生页面长按识别二维码，但如果是小程序内嵌H5页面中的二维码，可能存在因微信版本低而无法识别的情况。此外，iOS系统meta缩放设置不当也会导致二维码无法识别，如初始缩放设置小于1或大于1等一些特定设置会使识别失败。
  • 安卓系统：通常安卓系统在微信版本适配方面相对较好，但不同手机厂商对系统的定制以及微信版本的差异，也可能导致识别问题。比如部分老版本微信或某些小众厂商定制系统可能存在兼容性问题。

• 二维码本身及图片展示方面

  • 二维码图片位置：如果二维码图片放在background里，微信客户端无法通过img标签检测到，基本无法识别，应将二维码图片单独放在img标签中。
  • 多张二维码情况：同一屏幕中放置多张二维码图片时，微信长按识别相当于截屏识别，可能只会识别出一个，建议不要在同一屏幕放多张二维码或提示用户双击放大识别。

• 页面设置与布局方面

  • meta标签设置：meta标签中关于viewport的设置很关键，如果设置了固定的宽，导致二维码的实际位置偏移到屏幕外，或者页面有css样式fixed等，都可能使二维码无法识别。
  • 页面缩放：当设置支持缩放且进行了页面缩放操作后，可能导致二维码无法识别，一般设置初始缩放为1，最大缩放值大于1且不支持缩放可较好地保证识别。