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 相关文章推荐
JavaScript获取URL汇总
Jun 08 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
Aug 22 Javascript
jQuery结合CSS制作动态的下拉菜单
Oct 27 Javascript
详解JavaScript 中的 replace 方法
Jan 01 Javascript
jQuery动画效果图片轮播特效
Jan 12 Javascript
超实用的JavaScript表单代码段
Feb 26 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
JavaScript中的原型prototype完全解析
May 10 Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 Javascript
关于vue-router的那些事儿
May 23 Javascript
Vue 处理表单input单行文本框的实例代码
May 09 Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 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连接mysql数据库代码
2009/03/10 PHP
php二维数组排序与默认自然排序的方法介绍
2013/04/27 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
弹出广告特效代码(一个IP只弹出一次)
2007/05/11 Javascript
javascript:void(0)的真正含义实例分析
2008/08/20 Javascript
IE6、IE7中获取Button元素的值的bug说明
2011/08/28 Javascript
javascript 原型继承介绍
2011/08/30 Javascript
jquery处理json对象
2014/11/03 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
使用AngularJS创建自定义的过滤器的方法
2015/06/18 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
js判断日期时间有效性的方法
2015/10/24 Javascript
bootstrap-treeview自定义双击事件实现方法
2016/01/09 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
浅谈jQuery操作类数组的工具方法
2016/12/23 Javascript
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
angularjs实现猜数字大小功能
2020/05/20 Javascript
详解RequireJs官方使用教程
2017/10/31 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
2019/04/29 Javascript
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
python list中append()与extend()用法分享
2013/03/24 Python
Python管理Windows服务小脚本
2018/03/12 Python
对python字典元素的添加与修改方法详解
2018/07/06 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
树莓派3 搭建 django 服务器的实例
2019/08/29 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
德国旅游网站:weg.de
2018/06/03 全球购物
护理个人求职信范文
2014/01/08 职场文书
2014婚礼司仪主持词
2014/03/14 职场文书
环保标语口号
2014/06/13 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
三八红旗手主要事迹材料
2015/11/04 职场文书
深入浅析Django MTV模式
2021/09/04 Python