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

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

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

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

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

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

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

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

但是在测试过程中发现：

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

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

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

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

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

如下：

正常进入分享：

刷新后分享：

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

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

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

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

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

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

赞 (0)

相关推荐

  • vue项目中微信登录的实现操作

    1.下载组件 wxlogin npm install vue-wxlogin --save 2.引入组件,给组件传参 3.重定向的url应该是微信登录官网中的微信授权作用域 4.如果url里面有端口号,微信授权作用里面也要有 5.重定向的url:需要在http://tool.chinaz.com/tools/urlencode.aspx中转码 6.微信登录成功后,会自动重定向到新地址,此时的地址栏中就有code参数 7.如果报错说不能从组件跳到页面,那就找到wxlogin组件里面的iframe标

  • vue单应用在ios系统中实现微信分享功能操作

    表示是第一次使用vue做单应用显目,也是在逐渐的摸索中~更是各种踩坑,各种填坑,打算写博客么?是因为不想写笔记了,嗯嗯 就是这么简单 进入正题. 刚开始做微信分享的这个功能的时候,脑补了官方文档微信JS-SDK说明文档 基础的知识不多说了,反正多看文档总是没错的~在安卓系统上面分享是没出错的,但是在ios上面问题就来了,表示无限吐槽ios,但是吐槽归吐槽,问题总是该解决的-在网上百度了很多vue单应用在ios系统中实现微信分享失败的原因以及解决方案 原因 单页面应用通过什么入口进去的 url保持

  • vue swipeCell滑动单元格(仿微信)的实现示例

    抽离Vant weapp滑动单元格代码改造而成 带有拉动弹性回弹效果 demo展示:https://littaotao.github.io/me/index(切换为浏览器调试的手机模式并且再次刷新一次) <template> <div class="cell_container" @touchstart v-click-outside="handleClickOutside" @click="getClickHandler('cell')

  • 基于vue hash模式微信分享#号的解决

    看代码吧~ // 问题描述在微信中分享到朋友圈或好友时,分享出去的路由被破坏,打开分享的链接,路由中的"#"会被去掉并追加?fromTimeline之类的后缀参数,这就造成了分享出去的链接只能进入首页,无法正常跳转到其他路由. // 获取签名 this.$ajax.post(this.apiUrl+"/api/wxShare/getWxConfig", this.$qs.stringify({"url":window.location.href.

  • vue中解决微信html5原生ios虚拟键返回不刷新问题

    问题描述: 做微信h5页面时,经过了微信授权才跳转到一级默认路由home.vue中,因此在home页面时在IOS中底部会出现虚拟的返回键,安卓上不会出现.且在IOS点击返回时会跳转到home空白页面不重新加载,但是在安卓机上点击返回键会重新加载. 实现功能: 解决IOS问题(在home页面点返回时路由还是在home页面,并完成重新加载) 分析: 需要在进入页面时加入监听,并在页面离开时移除监听.因为home页面是个滚动列表,所以我采用了keep-alive路由缓存,所以不能在created()和

  • vue 解决在微信内置浏览器中调用支付宝支付的情况

    我的思路大概是这样的 1. 验证是否是在微信内置浏览器中调用支付宝 2.给支付页面的url加上调用接口所需的参数(因为在微信里是不能直接调用支付宝的需要调用外部浏览器) 3.在外部浏览器中完成支付跳转页面 第一步: payment: 是选择支付页面,pay-mask是用于在微信内置浏览器中调用支付宝的中间页 payment主要代码: let ua = window.navigator.userAgent.toLowerCase() ua.match(/MicroMessenger/i) == "

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

    产品需求:在微信内分享需要手动配置的分享地址.分享图片与内容描述,引导用户分享,并在微信分享成功回调内进行相应的操作. 首先需要在项目中引入微信jsSDk包,然后通过接口获取后台签名. 封装函数获取微信分享必填参数 其中的jsApiList中填的是需要使用的微信分享js接口的列表,参数URL默认是location.href,即分享当前页面的URL. 在需要分享的页面引入封装的函数 然后通过wxShare方法将URL和配置的参数传入,link参数是分享出去的链接,必须与当前页面的对应js安全域名一

  • vue微信分享到朋友圈 vue微信发送给好友

    本文为大家分享了vue微信分享至朋友圈&&分享至朋友代码的封装,供大家参考,具体内容如下 1.新建share.js文件 import {shareSDK} from "../api/common";//分享api import wx from 'weixin-js-sdk' export const shareTitle = '测试'; export const shareUrl = '测试连接'; export const shareImg = '测试图片'; exp

  • vue微信分享 vue实现当前页面分享其他页面

    本文实例为大家分享了vue微信分享展示的具体代码,供大家参考,具体内容如下 首先以分享给朋友为例 1.先看官方文档 wx.onMenuShareAppMessage({ title: '', // 分享标题 desc: '', // 分享描述 link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: '', // 分享图标 type: '', // 分享类型,music.video或link,不填默认为link dataUrl: '', //

  • vue微信分享插件使用方法详解

    本文为大家分享了vue微信分享插件的使用方法,供大家参考,具体内容如下 1.安装weixin-js-sdk npm install weixin-js-sdk 2.创建文件并引入 在src下创建common目录 在common目录下创建wxshare.js 3.在wxshare.js中编写插件 import wx from 'weixin-js-sdk' import URL from '@/common/urlConfig' export const shareTitle = '测试'; ex

  • vue微信分享出来的链接点开是首页问题的解决方法

    最近工作上遇到了这样一个Bug:"vue微信分享出来的链接点开是首页" 公司网站有PC端和移动端,两个版本.其中如果手机访问PC端,则自动跳转到移动端.(这是常规操作,没啥稀奇点.) 可神奇的问题来了. 在移动端中有微信分享功能,如果手机直接访问手机端的地址进入子页面分享,点开分享的链接进入的是子页面.但是如果是从PC端跳转进入手机端,分享子页面链接打开将会是主页. 这个问题我也百度了各种方法,折腾了一天,然而都没啥用. 最后自己想了一个替代方案: 在static目录下新建一个名为ht

  • element 结合vue 在表单验证时有值却提示错误的解决办法

    绑定的值与规则指定的值一定要相同------- 第一步: <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> 加上rules ref 第二部: <el-form-item label="活动名称" prop="na

  • vue微信分享的实现(在当前页面分享其他页面)

    首先以分享给朋友为例 1.先看官方文档 wx.onMenuShareAppMessage({ title: '', // 分享标题 desc: '', // 分享描述 link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: '', // 分享图标 type: '', // 分享类型,music.video或link,不填默认为link dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空 succ

  • 使用iOS推送时警告错误的解决方法

    使用iOS推送时警告错误的解决方法

    在使用iOS推送时,出现下面错误: **[1412:60b] You've implemented -[<UIApplicationDelegate> application:performFetchWithCompletionHandler:], but you still need to add "fetch" to the list of your supported UIBackgroundModes in your Info.plist. **[1412:60b]

  • vue中使用$http.post请求传参的错误及解决

    vue中使用$http.post请求传参的错误及解决

    目录 使用$http.post请求传参的错误 vue post请求之坑 解决方法 使用$http.post请求传参的错误 在使用$http请求后台,照常我们在后端 使用注解@PostMapper或者 @RequestMapping(value = “XXXX”,method = RequestMethod.POST)接受请求 handleAdd(node) { this.$http.post("/item/category/addCategory",{ node:node }) .th

随机推荐