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 相关文章推荐
Prototype中dom对象方法汇总
Sep 17 Javascript
JS for...in 遍历语句用法实例分析
Aug 24 Javascript
javascript 实现动态侧边栏实例详解
Nov 11 Javascript
js实现右键菜单功能
Nov 28 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
Jun 09 Javascript
JavaScript基础之流程控制语句的用法
Aug 31 Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 Javascript
JS实现头条新闻的经典轮播图效果示例
Jan 30 Javascript
js实现unicode码字符串与utf8字节数据互转详解
Mar 21 Javascript
不刷新网页就能链接新的js文件方法总结
Mar 01 Javascript
原生js实现轮播图特效
May 04 Javascript
基于elementUI竖向表格、和并列的案例
Oct 26 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
社区(php&&mysql)二
2006/10/09 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
php xhprof使用实例详解
2019/04/15 PHP
PHP7创建COOKIE和销毁COOKIE的实例方法
2020/02/03 PHP
JavaScript中的prototype使用说明
2010/04/13 Javascript
jQuery EasyUI API 中文文档 - ComboTree组合树
2011/10/11 Javascript
angularjs实现与服务器交互分享
2014/06/24 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
Angularjs为ng-click事件传递参数
2017/06/15 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
2018/06/11 Javascript
Angular6 Filter实现页面搜索的示例代码
2018/12/02 Javascript
vue实现设置载入动画和初始化页面动画效果
2019/10/28 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
vue3.0中友好使用antdv示例详解
2021/01/05 Vue.js
Python学习笔记(一)(基础入门之环境搭建)
2014/06/05 Python
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
Python3实现的Mysql数据库操作封装类
2018/06/06 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
python实现全盘扫描搜索功能的方法
2019/02/14 Python
PyTorch搭建一维线性回归模型(二)
2019/05/22 Python
pycharm 代码自动补全的实现方法(图文)
2020/09/18 Python
Python制作简单的剪刀石头布游戏
2020/12/10 Python
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
如何用Java实现列出某个目录下的所有子目录
2015/07/20 面试题
就业自荐信
2013/12/04 职场文书
教师求职信
2014/06/17 职场文书
董事会决议范本
2015/07/01 职场文书
订货会主持词
2015/07/01 职场文书
SpringBoot整合Mybatis Generator自动生成代码
2021/08/23 Java/Android
golang生成vcf通讯录格式文件详情
2022/03/25 Golang
微信小程序 WeUI扩展组件库的入门教程
2022/04/21 Javascript