微信网页jssdk hash路由分享导致个别机型分享跳转错误,或者白屏,就是因为不支持hash路由
hash路由
window.location.href // http://www.baidu.com/#/login?name=msea
解决思路 在项目静态资源目录(public)中增加页面,进行重定向
const share = ({ title, desc, imgUrl }) => {
// 分享朋友圈
const link = () => {
const url = window.location.href.split('#')[0] + 'redirect.html'
return url + '?share=' + encodeURIComponent(window.location.href)
}
wx.updateAppMessageShareData({
title: title , // 分享标题
desc: desc, // 分享描述
link: link(), // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl || logo, // 分享图标
success: () => {
// 设置成功
console.log('分享成功')
}
})
}
public/redirect.html 中转页重定向在决定跳转到项目中那个路由下面的那个页面
这样分享链接最稳
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<script>
if (location.search.indexOf('share') !== -1) {
// 检测分享链接,是分享链接进行重定向
var url = location.search.slice(1)
var params = url.split('&')
const data = {}
params.map(str => {
const p = str.split('=')
data[p[0]] = p[1]
})
const toUrl = decodeURIComponent(data.share)
// 直接跳转
location.replace(toUrl)
}
</script>
</body>
</html>
微信网页jssdk分享测试链接
微信网页jssdk分享测试链接,不要直接粘贴复制打开分享,如果URL代开分享出去永远是URL
网友评论