Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
作者:三里清风 发布时间:2024-05-02 16:58:01
这几天做个了项。就是微信扫描二维码的然后进入公众号网页巴拉巴拉的,然后就很顺利的遇到了在安卓端扫码的时候,顺利的一塌糊涂,然后到了苹果端的时候,就只能出现一个保存图片,然后就写一下记录一下这问题的解决方法。
问题
机型:iphone 7p
这里的二维码是一张图片,微信返回的图片,具体下图
然后是正常情况下。当我们开始扫码的时,应该是这个样子
这个是正常的,但是在苹果端的时候就懵了,下面的菜单就只有一个保存图片。那么如何解决呢,请看下面。
解决方案
解决方案其实有两种。
使用 qrcodeJs 就不做介绍了,官网应有尽有,也就是将二维码的链接填写进绘制的 canvas 里面,然后生成二维码扫描。
附上github地址: qrcodejs
使用a标签进行跳转
使用 a 标签进行跳转这个应该没什人有疑问怎么做了,也就是几行代码的事情
let a = document.createElement("a");
a.href = `${window.location.origin}/invite?qrcode=${qrcode}`;
a.click();
这个在项目内的时候呢,确实是可以解决问题的,但如果从外部带参数进入网页,例如有人分享了一个二维码给我,然后让我去扫码的时候呢? 他就不行了。然后经过我几次测试之后,我发现了问题
// 第一次跳转的时候,也就是进入页面的时候,url是这样的
http://dududev.huikaoedu.com/invite?qrcode=https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=xxxx
然后这个时候呢,他是无法扫码的,只能保存到本地,但是我又想起之前在百度看见一个很奇葩的解决方式,刷新页面,说是刷新页面就可以了,然后在我坚持不懈的刷新了两以后,我发现我的url变成了下面这样子
http://dududev.huikaoedu.com/invite?qrcode=https%3A%2F%2Fmp.weixin.qq.com%2Fcgi-bin%2Fshowqrcode%3Fticket%xxx
没错,他进行了编码!!!!!!!所以最终的方案就是,如果你发现使用了 a 标签没用,那么就要进行 encodeURIComponent() 编码,具体就是这样了
let a = document.createElement("a");
const qrcode = encodeURIComponent(this.$route.query.qrcode);
a.href = `${window.location.origin}/invite?qrcode=${qrcode}`;
a.click();
总结
以上所述是小编给大家介绍的V的ue 微信端扫描二维码苹果端只能保存图片解决方法网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
来源:https://juejin.im/post/5e1edac7e51d451c521936db
猜你喜欢
- 案例以论坛为例,有个接口返回帖子(posts)信息,然后呢,来了新需求,说需要显示帖子的 author 信息。此时会有两种选择:在 post
- 1.新建site-packages目录,进入到site-packages目录下;2.在site-packages目录下执行pip freez
- 自己写了一个简单的python脚本,用来推送zabbix告警到钉钉机器人,推送格式为markdown,有需要的可以自己修改markdown的
- Python之Web框架Django项目搭建全过程IDE说明:Win7系统Python:3.5Django:1.10Pymysql:0.7.
- PDO::execPDO::exec — 执行一条 SQL 语句,并返回受影响的行数(PHP 5 >= 5.1.0, PECL pdo
- 本文实例为大家分享了python3使用matplotlib绘制条形图的具体代码,供大家参考,具体内容如下绘制竖状条形图代码from matp
- 最近开发了一个 Google Analytics 相关的应用,但需要在 Windows 下部署,结合网上的相关经验,最终选择了 apache
- 本文实例为大家分享了小程序自定义弹出框效果的具体代码,供大家参考,具体内容如下my-pop----api:title ------字符串--
- 最近想做实时目标检测,需要用到python开启摄像头,我手上只有两个uvc免驱的摄像头,性能一般。利用python开启摄像头费了一番功夫,主
- pycharm下载库时出现Failed to install package怎么解决?奶奶都会解决的那种。一、当前现状 看看你是否也是这种情
- tensorlfow网络模型可视化。baidu了一些方法,现在介绍下我的流程和遇到的问题:配置window7tensorlfow1.5ana
- 我们开发数据库应用时,常常需要用到模糊查询。如果同一个条件需要匹配很多字段怎么办呢?通常,程序员会每个字段都在SQL中“field like
- 触发器的概念:“在数据库中为响应一个特殊表格中的某些事件而自动执行的程序代码。”(Wikipedia)说得简单一些,它是在一个特殊的数据库事
- FrontPage服务器扩展可以做以下工作:(1),保存和检索Web服务器的文件;(2),远程执行所有文件管理操作;(3),改名或移动文件时
- 在实际开发中经常会遇到计算某个字段的排名的情况如下表:totak_sales现在又如此要求:按sales的逆序排序,要求添加一个sales_
- 1. 前言文章主要围绕着以下三个问题:group by的作用where与having的区别表的连接分为哪些,分别是什么作用2. 表的设计在创
- 如果我们想对一个表的每一行做出比较复杂的操作,大多会想到用游标,本文中,我们将换一种思路,用SQL Server 2005中的新函数ROW_
- 介绍此教程为我的数篇文章中的一个重点。主题是魔术方法。 什么是魔术方法?他们是面向对象的Python的一切。他们是可以给你的类增加"
- 前言pass 语句不执行任何操作。语法上需要一个语句,但程序不实际执行任何动作时,可以使用该语句。例如:>>>
- 本文实例为大家分享了wxPython绘图模块wxPyPlot实现数据可视化的具体代码,供大家参考,具体内容如下#-*- coding: ut