vue 微信分享回调iOS和安卓回调出现错误的解决


Posted in Javascript onSeptember 07, 2020

产品需求:在微信内分享需要手动配置的分享地址、分享图片与内容描述,引导用户分享,并在微信分享成功回调内进行相应的操作。

首先需要在项目中引入微信jsSDk包,然后通过接口获取后台签名。

vue 微信分享回调iOS和安卓回调出现错误的解决

封装函数获取微信分享必填参数

vue 微信分享回调iOS和安卓回调出现错误的解决

其中的jsApiList中填的是需要使用的微信分享js接口的列表,参数URL默认是location.href,即分享当前页面的URL。

在需要分享的页面引入封装的函数

vue 微信分享回调iOS和安卓回调出现错误的解决

然后通过wxShare方法将URL和配置的参数传入,link参数是分享出去的链接,必须与当前页面的对应js安全域名一致;

vue 微信分享回调iOS和安卓回调出现错误的解决

...shareData就是在函数内传对象,进行解构赋值es6写法

vue 微信分享回调iOS和安卓回调出现错误的解决

但是在测试过程中发现:

1.同一套程序,andriod分享正常,ios分享报签名不正确,主要原因是微信的ios和安卓处理方式不一样,ios不会刷新当前的页面地址,使用的是history的记录地址,所以每次分享出来的链接,都是第一个进入系统页面的链接,当跳转到子页面的时候,系统就会识别打开的url和签名的url不一致导致签名不正确

2.由于单页面的hash模式会自带#号,但是分享的时候会将#号后面的参数变成无效,导致想传参数都传不过去,可以做一个页面没有#号的,然后统一带参数分享到这个页面然后再重定向到指定的vue页面

解决方法:在向后台发送请求获取微信签名的时候将传给后台的URL的#后面的参数截去,后台根据截取完的URL生成签名就能实现安卓和iOS分享回调成功的问题。

vue 微信分享回调iOS和安卓回调出现错误的解决

补充知识:使用Vue全家桶进行微信分享时出现的错误

使用vue.js进行微信H5页面开发,开发过程中先进行oAuth身份验证。后使用JSSDK,进行微信分享。分享时会出现不调用自定义分享界面的情况,但是在刷新后可以正常显示,

如下:

正常进入分享:

vue 微信分享回调iOS和安卓回调出现错误的解决

刷新后分享:

vue 微信分享回调iOS和安卓回调出现错误的解决

由于Vue和微信调试环境的问题,在经过几次痛苦的尝试后,我们发现了一个现象,那就是,如果此时点击使用Safari打开,会出现:

vue 微信分享回调iOS和安卓回调出现错误的解决

这是我们在使用oAuth认证时跳转的中间界面(从oauth回调的页面),但是在使用微信调试工具的时候,显示的url为正确页面,既为从回调页面跳转的页面。

我们知道,在使用JSSDK进行微信认证的时候,需要使用当前url调用wxcofig,那会不会有一种可能,当vue进行页面跳转的时候,微信浏览器仍然认为当前页面在原页面,所以导致传递的url和微信认为你的url不一致,所以导致认证错误。

于是在尝试给wxconfig传递url的时候,使用了跳转前中间结果的url(既,保持传递给认证的url和使用Safari打开的url一致),结果居然就行了。。。

行吧,算是微信在兼容vue的时候的一个坑,但愿大家以后能尽早跳出来。。。

以上这篇vue 微信分享回调iOS和安卓回调出现错误的解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript web页面刷新的方法收集
Jul 02 Javascript
juqery 学习之三 选择器 层级 基本
Nov 25 Javascript
JS将秒换成时分秒实现代码
Sep 03 Javascript
angular中使用路由和$location切换视图
Jan 23 Javascript
javascript操作ul中li的方法
May 14 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
May 18 Javascript
使用堆实现Top K算法(JS实现)
Dec 25 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
Oct 20 Javascript
基于canvas粒子系统的构建详解
Aug 31 Javascript
js数组实现权重概率分配
Sep 12 Javascript
vue 项目如何引入微信sdk接口的方法
Dec 18 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
一篇文章带你从零快速上手Rollup
Sep 07 #Javascript
基于vue hash模式微信分享#号的解决
Sep 07 #Javascript
在项目vue中使用echarts的操作步骤
Sep 07 #Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
Sep 07 #Javascript
Vue.js原理分析之nextTick实现详解
Sep 07 #Javascript
小程序实现可拖动的悬浮按钮
Sep 07 #Javascript
vue 修改 data 数据问题并实时显示操作
Sep 07 #Javascript
You might like
PHP - Html Transfer Code
2006/10/09 PHP
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
php实现session自定义会话处理器的方法
2015/01/27 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
Javascript 不能释放内存.
2006/09/07 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
微信小程序 地图map实例详解
2017/06/07 Javascript
JavaScript程序设计高级算法之动态规划实例分析
2017/11/24 Javascript
微信小程序自定义底部弹出框
2020/11/16 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
2018/09/03 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
JS实现联想、自动补齐国家或地区名称的功能
2020/07/07 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
2020/07/11 Javascript
vue调用本地摄像头实现拍照功能
2020/08/14 Javascript
原生JavaScript实现刮刮乐
2020/09/29 Javascript
[48:24]完美世界DOTA2联赛循环赛LBZS vs Forest 第一场 10月30日
2020/10/31 DOTA
python3写爬取B站视频弹幕功能
2017/12/22 Python
Python全排列操作实例分析
2018/07/24 Python
Python3.6.x中内置函数总结及讲解
2019/02/22 Python
python程序 线程队列queue使用方法解析
2019/09/23 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
Python爬取阿拉丁统计信息过程图解
2020/05/12 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
查环查孕证明
2014/01/10 职场文书
客户接待方案
2014/02/26 职场文书
工作骂脏话检讨书
2014/10/05 职场文书
2015年女生节活动总结
2015/02/27 职场文书
客户答谢会致辞
2015/07/30 职场文书
导游词之河北野三坡
2019/12/11 职场文书
警用民用对讲机找不同
2022/02/18 无线电