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 相关文章推荐
兼容多浏览器的字幕特效Marquee的通用js类
Jul 20 Javascript
JavaScript表达式:URL 协议介绍
Mar 10 Javascript
javascript实现10个球随机运动、碰撞实例详解
Jul 08 Javascript
angularjs学习笔记之简单介绍
Sep 26 Javascript
jQuery实现验证年龄简单思路
Feb 24 Javascript
js实现纯前端的图片预览
Apr 27 Javascript
bootstrap table小案例
Oct 21 Javascript
详解Angular如何正确的操作DOM
Jul 06 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
May 18 Javascript
微信小程序实现拼图小游戏
Oct 22 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
Jan 18 Javascript
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
一篇文章带你从零快速上手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中检查文件或目录是否存在的代码小结
2012/10/22 PHP
PHP JSON出错:Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
php使用cookie实现记住登录状态
2015/04/27 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
window.open()弹出居中的窗口
2007/02/01 Javascript
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
2010/05/07 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
2011/03/28 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
2015/04/06 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
2016/08/01 Javascript
BootStrap的table表头固定tbody滚动的实例代码
2016/08/24 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
2017/01/17 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
javascript头像上传代码实例
2019/09/28 Javascript
Python实现批量读取word中表格信息的方法
2015/07/30 Python
浅谈python正则的常用方法 覆盖范围70%以上
2018/03/14 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
python动态规划算法实例详解
2020/11/22 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
prAna官网:瑜伽、旅行和冒险服装
2019/03/10 全球购物
一套Delphi的笔试题一
2016/02/14 面试题
中专毕业自我鉴定
2013/10/16 职场文书
高三自我鉴定
2013/10/23 职场文书
函授毕业自我鉴定
2013/12/19 职场文书
餐厅销售主管职责范本
2014/02/19 职场文书
幼儿园教师教育感言
2014/02/28 职场文书
行风评议整改报告
2014/11/06 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
JavaScript 事件捕获冒泡与捕获详情
2021/11/11 Javascript