这两天在做微信自定义分享的需求，相信大家都遇到过这问题，就是使用JS-SDK的页面注入配置信息时安卓系统config:ok，ios系统config:invalid signature签名错误。然后大家都去查微信jssdk的文档，里面所说的config:invalid signature可能原因你都一个个查验过发现没有问题，但是还是提示签名错误，是不是很抓狂很蛋疼？？？然后你再去查请求配置信息时的动态URL是否有问题，你会发现安卓ios打印出来的url都是正确的，问题究竟出在哪里呢？？？就问你难不难受！！！
安卓系统签名没问题，ios系统签名有问题，那么肯定就是url的问题了。其实问题就出在ios系统对vue-router的history的支持上，由于Vue的spa特点，尽管你打印出来都是你所要的当前页面url，只要你不刷新页面，ios获取到的url永远是你进入这个项目的第一个url，这样的话你请求签名就会变成动态url不一致导致签名失败。不信？？？你可以到签名失败的那个页面手动刷新一次，然后你会发现此时签名就成功了，因为刷新后获取的第一个url就是你当前的页面url。既然如此我们就需要在如何获取真正的动态url这里做文章，至于那些设置js安全域名、获取timestamp，nonceStr，signature这些我就不说了，百度一下大把解决方案。
解决方法就是在路由守卫afterEach中判断是ios系统时添加一个获取当前url的函数，此函数只需要在url上添加一个随机数参数然后用location.replace更新即可，具体代码如下：
1.在util.js文件中定义函数：
import { getSignature } from '@/api/api'
// 判断手机系统
export function isAndroid () {
var u = navigator.userAgent
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1
if (isAndroid) {
return true
} else {
return false
}
}
// ios系统进行重定向获取最新的url便于微信获取权限签名
export function iosUrlRefresh (to) {
let iosRandom = 'iosRandom=' + new Date().getTime() // 新增随机参数
let url = location.protocol + '//' + location.host + '/mobileTest' + to.fullPath // 重组url 注意项目路径
if (url.indexOf('?') > 0) {
url = url + '&' + iosRandom
} else {
url = url + '?' + iosRandom
}
window.location.replace(url)
}
// 清除url中手动新增的随机数iosRandom
export function getCurrentUrl () {
let url = location.href.replace(/&iosRandom=[0-9]{13}/g, '')
window.history.replaceState({}, document.title, url)
}
// 自定义分享
export function shareWxApi (title, desc, link, imgUrl) {
getSignature(encodeURIComponent(location.href.split('#')[0])).then(data => {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: data.result.appId, // 必填，公众号的唯一标识
timestamp: data.result.timestamp, // 必填，生成签名的时间戳
nonceStr: data.result.noncestr, // 必填，生成签名的随机串
signature: data.result.signature, // 必填，签名，见附录1
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
})
wx.ready(function () {
wx.onMenuShareAppMessage({ // 分享给朋友
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
})
wx.onMenuShareTimeline({ // 朋友圈分享
title: title, // 分享标题
link: link, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
})
wx.onMenuShareQQ({
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
})
wx.onMenuShareWeibo({
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
})
wx.onMenuShareQZone({
title: title, // 分享标题
desc: desc, // 分享描述
link: link, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
})
})
wx.error(function (e) {
console.warn(e)
})
}, f => {
})
}
2.在路由守卫写入函数：
import { isAndroid, isoUrlRefresh } from '@/utils/util'
router.beforeEach((to, from, next) => {
next()
}
router.afterEach((to, from) => {
// 若为ios系统则进行重定向获取最新的url便于微信获取权限签名
if (!isAndroid()) {
!to.query.iosRandom && iosUrlRefresh(to)
}
})
3.在需要使用微信自定义分享的页面中写入函数：
import { setCurrentUrl, shareWxApi } from '@/utils/util'
mounted () {
setCurrentUrl()
shareWxApi('解决微信自定义分享问题', 'Vue微信自定义分享时安卓系统config:ok，ios系统config:invalid signature签名错误的解决办法', 'https://www.cnblogs.com/zishang91/p/10755488.html', 'https://xxx.png')
}
以上就是ios系统签名失败的详细解决方案，亲测有效，希望能帮到大家。
如需转载请注明出处：https://www.cnblogs.com/zishang91/p/10755488.html，以便有错误可以及时修改，若有错漏不足之处，请见谅并且指点，谢谢！！！
