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 相关文章推荐
JQuery 无废话系列教程(一) jquery入门 [推荐]
Jun 23 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
Dec 30 Javascript
node.js WEB开发中图片验证码的实现方法
Jun 03 Javascript
jQuery中outerHeight()方法用法实例
Jan 19 Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 Javascript
Vue+webpack项目基础配置教程
Feb 12 Javascript
加快Vue项目的开发速度的方法
Dec 12 Javascript
JS中数据结构之栈
Jan 01 Javascript
vue引用外部JS的两种种方法
Jan 28 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 Javascript
vue实现在线学生录入系统
May 30 Javascript
详解js中的原型,原型对象,原型链
Jul 16 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
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
PHP中cookie和session的区别实例分析
2014/08/28 PHP
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
php中通过DirectoryIterator删除整个目录的方法
2015/03/13 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
lnmp安装多版本PHP共存的方法详解
2018/08/02 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
Javascript----文件操作
2007/01/18 Javascript
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
jquery五角星评分插件示例分享
2014/02/21 Javascript
JavaScript中实现最高效的数组乱序方法
2014/10/11 Javascript
Javascript中的方法链(Method Chaining)介绍
2015/03/15 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
2015/08/24 Javascript
深入php面向对象、模式与实践
2016/02/16 Javascript
第二章之Bootstrap 页面排版样式
2016/04/25 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
JS实现的样式切换功能tableCSS实例
2016/12/30 Javascript
jQuery实现 RadioButton做必选校验功能
2017/06/15 jQuery
VUE 3D轮播图封装实现方法
2018/07/03 Javascript
vue实现动态显示与隐藏底部导航的方法分析
2019/02/11 Javascript
JavaScript经典案例之简易计算器
2020/08/24 Javascript
深入浅析Python中的yield关键字
2018/01/24 Python
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
Python HTMLTestRunner如何下载生成报告
2020/09/04 Python
Python实现http接口自动化测试的示例代码
2020/10/09 Python
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
美国室内和室外装饰花盆购物网站:ePlanters
2019/03/22 全球购物
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
董事长助理岗位职责
2014/02/18 职场文书
毕业大学生自荐信
2014/06/17 职场文书
公司股东出资证明书
2014/11/01 职场文书
JavaScript继承的三种方法实例
2021/05/12 Javascript