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

本文主要是介绍flutter开发实战-flutter build web微信无法识别二维码及小程序码问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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;@overrideState<DisplayImageWidget> createState() => _DisplayImageWidgetState();
}class _DisplayImageWidgetState extends State<DisplayImageWidget> {@overridevoid initState() {// TODO: implement initStatesuper.initState();createImageElement(imagePath: widget.imagePath,imageWidth: widget.imageWidth ?? 0,imageHeight: widget.imageHeight ?? 0,);}@overrideWidget build(BuildContext context) {return Container(width: widget.imageWidth,height: widget.imageHeight,child: HtmlElementView(viewType: widget.imagePath,),);}Widget buildImageView(BuildContext context) {if (kIsWeb) {return HtmlElementView(viewType: widget.imagePath,);}return Image(image: AssetImage(widget.imagePath),fit: BoxFit.cover,width: widget.imageWidth,height: widget.imageHeight,);}void createImageElement({required String imagePath,required double imageWidth,required double imageHeight}) {if (kIsWeb) {ui.platformViewRegistry.registerViewFactory(imagePath,(int viewId) => ImageElement()..src = imagePath..height = imageHeight.toInt()..width = imageWidth.toInt());}}
}

二、flutter build web

完成代码后，可以通过以下命令进行build web

 flutter build web--web-renderer html

命令执行后，将在build文件夹中有一个web文件夹。

build后需要在index.html中添加

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no"/>

该web文件夹内即为build后的web项目。通过git将该web文件夹内上传到github pages。

三、上传github pages后，

可以看到通过DisplayImageWidget展示图片后，页面运行起来后是包含img标签了

如下图所示：

微信识别小程序码效果图如下：

github pages项目地址：https://goodbruce.github.io/

四、小结

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

学习记录，每天不停进步。

这篇关于flutter开发实战-flutter build web微信无法识别二维码及小程序码问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---