这个BUG 搞得头大了两天,心态搞TM要蹦了
安卓正常操作使用window.location.href 作为签名链接 一点毛病也没有
然后我用IOS 分享的时候第一次签名失败 然后返回了上一页再进入试着分享就能成功。这是个什么逻辑。。。自己搞懵逼了
然后我就试着把 签名的URL alert出来看看。结果发现 TM一模一样啊,为什么会config 报错签名失败呢
下面是借鉴了一个网友的记录(他写得比较明白)
------------------------------------------------------------------------------
问题:
在IOS手机微信端,从A页面(http://a.com/A) 跳转到B页面(http://a.com/B)后,B页面进行分享时就会报签名(invalid signature)错误。
分析:
从A页面跳转到B页面时,由于是使用vue-router切换,都是操作浏览器历史记录,所以ios端微信浏览器锁定的url的还是A页面的url。
这个时候,是不是很多人都会认为,既然页面路由变化了,那我重新请求下url签名接口,不就可以了。呵呵呵,你会发现报错:invalid signature。但是再刷新一下,又没有签名问题,尼玛,这是什么原因呢???
那么你在请求url签名接口的时候,传递的url参数又是什么呢?大概如下吧:
url1、直接是 location.href (history模式)
url2、自己拼装的 location.origin + '/#' + this.$route.pullPath (hash模式)
这个时候,你请求的接口都没问题,也能拿到签名数据。但是
问题就出在:你所请求的url签名地址和浏览器执行jweixin-1.x.x.js时锁定的地址 不一致、不一致、不一致。你当前请求的可能是url1或url2,而此时微信锁定的地址仍然是进入A页面时的url(因为在进入A页面是加载并执行了jweixin-1.x.x.js, 而路由变化A到B时,并没有再次执行jxinwei-1.x.x.js)。所以问题就发生了,但是你再刷新一下,jweixin-1.x.x.js重新执行,此时微信浏览器锁定的url就是你当前刷新的url地址了,所以签名又成功了。
主要是因为:
【IOS】:ios微信端,路由变化时,微信认为SPA的url是不变的。
【Android】:android微信端,路由变化时,SPA的url是会变的(官方在安卓6.2版本,才对SPA变化作了支持)
所以,发起签名的url必须是微信锁定的url。
解决方案:
IOS端,把请求签名的url,保存到全局变量中。路由切换后,在调用分享接口时,使用全局变量里保存的url来请求签名
// 记录进入app时的url if (typeof window.entryUrl === 'undefined' || window.entryUrl === '') { window.entryUrl = location.href.split('#')[0] } // 进行签名的时候 Android 不用使用之前的链接, ios 需要 let signLink = /(Android)/i.test(navigator.userAgent) ? location.href.split('#')[0] : window.entryUrl;
最后,每次验签名使用 signLink 获取,就ok了。
版权声明:本文为CSDN博主「hualvm」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/hualvm/article/details/85344076
------------------------------------------------------------------------------
附上我自己封装调用的微信分享源码
import { post } from "../api/http";//分享api import wx from 'weixin-js-sdk' // export const shareTitle = '测试'; // export const shareUrl = '测试连接'; // export const shareImg = '测试图片'; // export const shareDesc = '测试详情'; export const option = {}; /** *分享 * @param _this * @param shareTitle 标题 * @param shareUrl 链接 * @param shareImg 图片 * @param shareDesc 描述 */ export const commonShare = (_this, option) => { var url = '' var u = navigator.userAgent; var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if (isIOS) { url=window.entryUrl }else{ url = window.location.href; } var data = { url: url }; //console.log(data.url) post('main/getShareSign', data).then(res => { if (res.signature != '') { var data = res; wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: data.appId, // 必填,公众号的唯一标识 timestamp: data.timestamp, // 必填,生成签名的时间戳 nonceStr: data.nonceStr, // 必填,生成签名的随机串 signature: data.signature, // 必填,签名,见附录1 jsApiList: ["updateAppMessageShareData", "updateTimelineShareData", "showMenuItems", "onMenuShareTimeline", "onMenuShareAppMessage"] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 }); wx.ready(function () { wx.showMenuItems({ menuList: [ "menuItem:share:appMessage", "menuItem:share:timeline", "menuItem:favorite" ] // 要显示的菜单项,所有menu项见附录3 }); wx.updateTimelineShareData({ title: option.shareTitle, // 分享标题 link: option.shareUrl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: option.shareImg, // 分享图标 success: function () { // 用户确认分享后执行的回调函数 // _this.$vux.toast.text('分享成功!!!'); option.success(); }, cancel: function () { // 用户取消分享后执行的回调函数 // _this.$vux.toast.text('取消分享!!!'); option.error(); } }); wx.updateAppMessageShareData({ title: option.shareTitle, // 分享标题 desc: option.shareDesc, // 分享描述 link: option.shareUrl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: option.shareImg, // 分享图标 type: "", // 分享类型,music、video或link,不填默认为link dataUrl: "", // 如果type是music或video,则要提供数据链接,默认为空 success: function () {//微信2018年5月16日就改了,分享不管是真的分享了还是取消了分享,返回来的都是success // 用户确认分享后执行的回调函数 //_this.$vux.toast.text('分享成功!!!'); option.success(); }, cancel: function () { // 用户取消分享后执行的回调函数 //_this.$vux.toast.text('取消分享!!!'); option.error(); } }); wx.error(function (res) { // config信息验证失败会执行error函数 console.log('微信config失败:', res) }); }); } }).catch(err => { alert(err) console.log(err) }) };