Vue微信公众号分享携带参数(页面重定向)

这个问题一直困扰了我好久,项目要求从微信里分享出去的页面携带邀请关系,查找了好多资料都没有具体的实现方案,这次我把我的方法分享给大家, 好东西要与大家分享

问题描述:微信在分享的时候不管我们从哪个页面分享出去,都会把我们携带的参数全部截取掉(避免诱导分享),当别人点击分享出去的页面时,通通 通通  通通进入到首页,这可不是我们想要的结果,在这里我们用另一种方法来实现它:  页面重定向

第一步: 微信分享

​
​
//公众号分享
export function commonShare (shareUrl,shareTitle,shareDesc,shareImg) {
    _http('url','GET',{
        url: shareUrl.split("#")[0]
    }).then((res)=> {
        if (res){
            wx.config({
                debug:false,
                appId:res.data.data.appId,
                timestamp:res.data.data.timestamp,
                nonceStr:res.data.data.nonceStr,
                signature:res.data.data.signature,
                jsApiList:['onMenuShareTimeline','onMenuShareAppMessage']
            });
            wx.ready(() => {
                //修改分享路径至redirect页面,将我们的当前页面座位参数传过去
                shareUrl = `${window.location.protocol}//${window.location.host}/redirect.html?redirectUrl=${encodeURIComponent(shareUrl)}`;
                //分享朋友圈
                wx.onMenuShareTimeline({
                    title:shareTitle,
                    desc:shareDesc,
                    link:shareUrl,
                    imgUrl:shareImg
                });
                //分享微信
                wx.onMenuShareAppMessage({
                    title:shareTitle,
                    desc:shareDesc,
                    link:shareUrl,
                    imgUrl:shareImg
                });
            })
        }
    })
};

​

​

第二步:和index.html并列创建一个redirect.html这个就是我们分享出去定向到的页面

这个页面只需加入以下代码,获取到们的目标页面路径,跳转到目标路径

 

​

    <script>
        (function () {
            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]
            })
            location.href = decodeURIComponent(data.redirectUrl)
        })();
    </script>

​

 

OK,大功告成,拿走不谢!!!

 

如果实现给个 赞 和 关注 哦!!!