Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)


Posted in Javascript onJanuary 19, 2020

这几天做个了项。就是微信扫描二维码的然后进入公众号网页巴拉巴拉的,然后就很顺利的遇到了在安卓端扫码的时候,顺利的一塌糊涂,然后到了苹果端的时候,就只能出现一个保存图片,然后就写一下记录一下这问题的解决方法。

问题

机型:iphone 7p

这里的二维码是一张图片,微信返回的图片,具体下图

Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法) 

然后是正常情况下。当我们开始扫码的时,应该是这个样子

Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法) 

这个是正常的,但是在苹果端的时候就懵了,下面的菜单就只有一个保存图片。那么如何解决呢,请看下面。

解决方案

解决方案其实有两种。

使用 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 微信端扫描二维码苹果端只能保存图片解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
js玩一玩WSH吧
Feb 23 Javascript
javascript String 的扩展方法集合
Jun 01 Javascript
javascritp添加url参数将参数加入到url中
Sep 25 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 Javascript
使用bootstrap插件实现模态框效果
May 10 Javascript
zTree异步加载展开第一级节点的实现方法
Sep 05 Javascript
angularJS实现动态添加,删除div方法
Feb 27 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
May 08 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
Aug 20 Javascript
Vue插值、表达式、分隔符、指令知识小结
Oct 12 Javascript
nodemon实现Typescript项目热更新的示例代码
Nov 19 Javascript
vue实现简单图片上传
Jun 30 Javascript
JS基础之逻辑结构与循环操作示例
Jan 19 #Javascript
js实现图片上传到服务器和回显
Jan 19 #Javascript
ES6如何用一句代码实现函数的柯里化
Jan 18 #Javascript
ES6 Object.assign()的用法及其使用
Jan 18 #Javascript
vue项目中监听手机物理返回键的实现
Jan 18 #Javascript
vue组件内部引入外部js文件的方法
Jan 18 #Javascript
Node.js实现批量下载图片简单操作示例
Jan 18 #Javascript
You might like
解析php curl_setopt 函数的相关应用及介绍
2013/06/17 PHP
php简单实现快速排序的方法
2015/04/04 PHP
Js动态创建div
2008/09/25 Javascript
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
JavaScript匿名函数与委托使用示例
2014/07/22 Javascript
介绍JavaScript中Math.abs()方法的使用
2015/06/14 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
2015/11/24 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
浅析BootStrap栅格系统
2016/06/07 Javascript
Web打印解决方案之普通报表打印功能
2016/08/29 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
2016/11/28 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
20行js代码实现的贪吃蛇小游戏
2017/06/20 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
Python程序员开发中常犯的10个错误
2014/07/07 Python
python模拟鼠标拖动操作的方法
2015/03/11 Python
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
Sublime开发python程序的示例代码
2018/01/24 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
详解python的super()的作用和原理
2020/10/29 Python
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
怀旧收藏品和经典纪念品:Betty’s Attic
2018/08/29 全球购物
信息部岗位职责
2013/11/12 职场文书
2014信息技术专业毕业生自我评价
2014/01/17 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
销售顾问工作计划书
2014/08/15 职场文书
检讨书大全
2015/01/27 职场文书
2015年村计划生育工作总结
2015/04/28 职场文书
MySQL系列之开篇 MySQL关系型数据库基础概念
2021/07/02 MySQL
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL