vue 在做微信分享的时候总是会签名失败，查了各种资料和原因，原来是传给后端的URL的问题
首先得引入 微信自带的SDK import wx from 'weixin-js-sdk'，
没安装的同学记得安装一下。
以下是重点 vue 在获取当前Url的时候,当前url会加上一串微信带过来的参数，咱们只需要改变url的路径，来把正确需要传给后端的url传给后端即可。
以下代码是改变url地址栏的代码
var stateObject = {} 这个空就行可以忽略
var title = '' //标题这个可以忽略
var newUrl = '' //重点是这个，这个参数是存改变过后的url
if (location.href.indexOf('?') == '-1') {
newUrl = window.location.href
} else {
newUrl = encodeURI(location.href.split('?')[0] + '#' + location.href.split('#')[1])
}
history.pushState(stateObject, title, newUrl) //这一句代码是把newUrl重新赋予给url地址栏
然后下面就是传给后端参数
axios.post(‘接口地址’, {
loanKey: this.$route.params.loanKey,
url: location.href.split('#')[0] //vue获取到地址栏之后 要截取掉#号
}).then(function (data) {
//成功之后，配置微信项
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: data.data.data.appId, // 必填，公众号的唯一标识
timestamp: data.data.data.timestamp, // 必填，生成签名的时间戳
nonceStr: data.data.data.nonceStr, // 必填，生成签名的随机串
signature: data.data.data.signature, // 必填，签名
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareQZone', 'onMenuShareWeibo', 'translateVoice'] // 必填，需要使用的JS接口列表
})
wx.ready(function () {
// 分享给朋友
wx.onMenuShareAppMessage({
title: title, // 分享标题
desc: desc, // 分享描述
link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: img, // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function (res) {
},
cancel: function (res) {
// 用户取消分享后执行的回调函数
}
})
这样既可完成分享，我当初在这个坑上折磨了几天，解决了之后感觉不难，主要是传Url这块。巨坑。注意就好
网友评论