vue IOS 微信分享签名失败,二次刷新后就能成功的BUG

vue

这个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)

})

};

以上是 vue IOS 微信分享签名失败,二次刷新后就能成功的BUG 的全部内容, 来源链接: utcz.com/z/375067.html

回到顶部