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 相关文章推荐
用正则获取指定路径文件的名称
Feb 27 Javascript
JQuery为textarea添加maxlength属性的代码
Apr 07 Javascript
JavaScript高级程序设计 事件学习笔记
Sep 10 Javascript
从零学JSON之JSON数据结构
May 19 Javascript
javascript动态控制服务器控件实例
Sep 05 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
微信小程序 支付后台java实现实例
May 09 Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
Jul 19 Javascript
简单实现节流函数和防抖函数过程解析
Oct 08 Javascript
node.js中事件触发器events的使用方法实例分析
Nov 23 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 Javascript
一篇文章带你从零快速上手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
《DOTA3》开发工作已经开始 《DOTA3》将代替《DOTA2》
2021/03/06 DOTA
浅谈json_encode用法
2015/03/05 PHP
PHP获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
php简单处理XML数据的方法示例
2017/05/19 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
JavaScript对象数组排序函数及六个用法
2015/12/23 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
JavaScript实现弹出广告功能
2017/03/30 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
2018/01/05 Javascript
常用python数据类型转换函数总结
2014/03/11 Python
python的类变量和成员变量用法实例教程
2014/08/25 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
python中必要的名词解释
2019/11/20 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
python实现飞行棋游戏
2020/02/05 Python
jupyter lab文件导出/下载方式
2020/04/22 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
Urban Outfitters英国官网:美国平价服饰品牌
2016/11/25 全球购物
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
竞选班长的演讲稿
2014/04/24 职场文书
小区推广策划方案
2014/06/06 职场文书
超市仓管员岗位职责范本
2014/09/18 职场文书
2014年中学生检讨书大全
2014/10/09 职场文书
宇宙与人观后感
2015/06/05 职场文书
小学语文继续教育研修日志
2015/11/13 职场文书
JavaScript实现班级抽签小程序
2021/05/19 Javascript
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript
优化Mysql查询的示例
2022/04/26 MySQL
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript