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微信无法识别二维码及小程序码问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1146980

相关文章

在Java中使用ModelMapper简化Shapefile属性转JavaBean实战过程

《在Java中使用ModelMapper简化Shapefile属性转JavaBean实战过程》本文介绍了在Java中使用ModelMapper库简化Shapefile属性转JavaBean的过程,对比... 目录前言一、原始的处理办法1、使用Set方法来转换2、使用构造方法转换二、基于ModelMapper

Java实战之自助进行多张图片合成拼接

《Java实战之自助进行多张图片合成拼接》在当今数字化时代,图像处理技术在各个领域都发挥着至关重要的作用,本文为大家详细介绍了如何使用Java实现多张图片合成拼接,需要的可以了解下... 目录前言一、图片合成需求描述二、图片合成设计与实现1、编程语言2、基础数据准备3、图片合成流程4、图片合成实现三、总结前

基于Python开发PPTX压缩工具

《基于Python开发PPTX压缩工具》在日常办公中,PPT文件往往因为图片过大而导致文件体积过大,不便于传输和存储,所以本文将使用Python开发一个PPTX压缩工具,需要的可以了解下... 目录引言全部代码环境准备代码结构代码实现运行结果引言在日常办公中,PPT文件往往因为图片过大而导致文件体积过大,

MySQL的cpu使用率100%的问题排查流程

《MySQL的cpu使用率100%的问题排查流程》线上mysql服务器经常性出现cpu使用率100%的告警,因此本文整理一下排查该问题的常规流程,文中通过代码示例讲解的非常详细,对大家的学习或工作有一... 目录1. 确认CPU占用来源2. 实时分析mysql活动3. 分析慢查询与执行计划4. 检查索引与表

MySQL报错sql_mode=only_full_group_by的问题解决

《MySQL报错sql_mode=only_full_group_by的问题解决》本文主要介绍了MySQL报错sql_mode=only_full_group_by的问题解决,文中通过示例代码介绍的非... 目录报错信息DataGrip 报错还原Navicat 报错还原报错原因解决方案查看当前 sql mo

Spring Boot 整合 ShedLock 处理定时任务重复执行的问题小结

《SpringBoot整合ShedLock处理定时任务重复执行的问题小结》ShedLock是解决分布式系统中定时任务重复执行问题的Java库,通过在数据库中加锁,确保只有一个节点在指定时间执行... 目录前言什么是 ShedLock?ShedLock 的工作原理:定时任务重复执行China编程的问题使用 Shed

MYSQL事务死锁问题排查及解决方案

《MYSQL事务死锁问题排查及解决方案》:本文主要介绍Java服务报错日志的情况,并通过一系列排查和优化措施,最终发现并解决了服务假死的问题,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录问题现象推测 1 - 客户端无错误重试配置推测 2 - 客户端超时时间过短推测 3 - mysql 版本问

nginx-rtmp-module构建流媒体直播服务器实战指南

《nginx-rtmp-module构建流媒体直播服务器实战指南》本文主要介绍了nginx-rtmp-module构建流媒体直播服务器实战指南,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有... 目录1. RTMP协议介绍与应用RTMP协议的原理RTMP协议的应用RTMP与现代流媒体技术的关系2

Git提交代码详细流程及问题总结

《Git提交代码详细流程及问题总结》:本文主要介绍Git的三大分区,分别是工作区、暂存区和版本库,并详细描述了提交、推送、拉取代码和合并分支的流程,文中通过代码介绍的非常详解,需要的朋友可以参考下... 目录1.git 三大分区2.Git提交、推送、拉取代码、合并分支详细流程3.问题总结4.git push

使用DeepSeek API 结合VSCode提升开发效率

《使用DeepSeekAPI结合VSCode提升开发效率》:本文主要介绍DeepSeekAPI与VisualStudioCode(VSCode)结合使用,以提升软件开发效率,具有一定的参考价值... 目录引言准备工作安装必要的 VSCode 扩展配置 DeepSeek API1. 创建 API 请求文件2.