公众号测试出的问题:新闻详情页面分享到好友,点击分享进入公众号是首页问题
首先想到的是自定义分享链接,结果不出所料,踩坑了
分享进入依旧是首页,感觉改了个寂寞
然后去搜索大佬们的解决办法,重定向
1、在项目下的static下建一个html文件夹,在里面建一个redirect.html文件
redirect.html里面内容:(只放一个script标签)
<script>
let url = location.href.split('?')
let pars = url[1].split('&')
let data = {}
pars.forEach((n, i) => {
let p = n.split('=')
data[p[0]] = p[1]
})
if (!!data.app3Redirect) {
self.location = decodeURIComponent(data.app3Redirect)
}
</script>
先引入jweixin-module
在要分享的页面中添加以下内容:
const jWeixin = require('jweixin-module');
在onShow()中添加自定义分享
onShow() {
let $this = this
//获取当前url传递给后台获取授权和签名信息
var shareUrl = window.location.href; // 获取url
let url=shareUrl.split('#')[0]; // hash模式,通过#截取
var shareWxLink = url + 'static/html/redirect.html?app3Redirect=' + encodeURIComponent(shareUrl); //拼接自定义分享链接,在这里重定向了
$this.$api.news.getArPC($this.infodata).then((result)=>{ // 获取新闻详情
$this.getWXData(url).then((res)=>{ // 将url传到后台获取appid,timestamp,nonceStr,signature
jWeixin.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId:res.data.appid, // 公众号的唯一标识
timestamp:res.data.timestamp, // 生成签名的时间戳
nonceStr:res.data.nonceStr, // 生成签名的随机串
signature:res.data.paySign, // 签名
jsApiList: ['updateTimelineShareData','updateAppMessageShareData'] // 需要使用的JS接口列表
});
jWeixin.ready(function () { //需在用户可能点击分享按钮前就先调用
// 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
jWeixin.updateAppMessageShareData({
title: '***-' + result.data.data.modelName, // 分享标题
desc: result.data.data.title, // 分享描述
link: shareWxLink, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: 'http://www.***.com.cn/images/logo.png', // 分享图标
success: function () {
// 设置成功
}
});
// 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
jWeixin.updateTimelineShareData({
title: '***-' + result.data.data.modelName, // 分享标题
link: shareWxLink, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: 'http://www.***.com.cn/images/logo.png', // 分享图标
success: function () {
// 设置成功
}
})
});
})
})
}