描述
使用Vue开发公众号时,分享链接的时候遇到这个问题,会把#后面的地址都截取,然后会跳到首页去。如果使用history模式下的话就不存在这个问题了,不过Vue开启这种模式,还需要后台配置支持。问了下我们后端,直接说不会,没办法,只能自己想办法来解决了。
思路
当时大致搜了下,各种方法也尝试了,转码,拼接什么的都没有用,后面采用了一个中转页面来帮我实现跳转才做好了。
其原理大致就是写一个第三方的页面,然后我们在做微信分享链接的时候带参数,跳到这个第三方页面里面去,然后在这个页面里面重新拼接参数,最后重定向跳到分享链接的需要分享的那个页面去。
这个也是根据需求来的,因为我这个进入页面就要发起微信授权,要获取code,所以采用的这个方法。所以也要看大家的项目需求。
代码
新建一个redirect.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<script>
var str = window.location.search
//这里写处理代码,因为我的分享链接有四个场景,所以在这里对str做了一些处理和判断
window.location.href = '域名' + '/#/' + strr + '?' + can
</script>
</body>
</html>
分享链接注入的时候
const newUrl = window.location.protocol + "//" + window.location.host + "存放的路径/redirect.html?" + '拼接你的参数'
wx.onMenuShareAppMessage({
title: title, // 分享标题
desc: desc, // 分享描述
link: newUrl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: img, // 分享图标
type: "", // 分享类型,music、video或link,不填默认为link
dataUrl: "", // 如果type是music或video,则要提供数据链接,默认为空
success: function() {
// 用户点击了分享后执行的回调函数
// alert("分享成功");
},
cancel: function() {
// 用户取消分享后执行的回调函数
// alert("分享取消");
}
});
但是请求微信服务器获取code的时候,redirect_uri要保证这个路径,处理链接的时候要注意。我当时在这里被坑了下。
个人水平有限,有问题欢迎大家留言指导,仅供学习和参考。
学海无涯!努力二字,共勉!