flutter开发实战-flutter build web微信无法识别二维码及小程序码问题

原创

已于 2024-09-07 14:10:08 修改 · 836 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #前端 #微信 #小游戏

于 2024-09-07 14:09:42 首次发布

flutter开发实战-flutter build web微信无法识别二维码及小程序码问题

GitHub Pages是一个直接从GitHub存储库托管的静态站点服务，‌它允许用户通过简单的配置，‌将个人的代码项目转化为一个可以在线访问的网站。‌这里使用flutter build web来构建web发布到GitHub Pages。

最近通过flutter build web，通过发布到GitHub Pages后，微信打开项目地址，微信无法识别二维码及小程序码

项目地址：

https://goodbruce.github.io/

一、问题原因及解决方案

微信识别二维码采用的逻辑是截屏识别，当客户端发现用户在网页的img标签内进行长按操作时，会立刻截屏并且启动二维码识别算法。所以这里用于二维码识别的图片是截屏，而不是之前有人提到的img标签中的图片。

通过了解微信识别二维码的关键在img标签，我们看下flutter web 页面运行起来后是不包含img标签

我们使用Chrome 打开web页面，打开页面检测，使用控件选取工具，点击页面中的二维码图片，查看标签信息.

我们需要更改代码


class DisplayImageWidget extends StatefulWidget {
  const DisplayImageWidget({
    super.key,
    required this.imagePath,
    this.imageWidth,
    this.imageHeight,
  });

  final String imagePath;
  final double? imageWidth;
  final double? imageHeight;

  @override
  State<DisplayImageWidget> createState() => _DisplayImage