"Vue单页式应用(Hash模式下 '/#/')分享出来的链接点开是首页”问题解决

问题:vue组件开发项目中,商品详情页微信转发url,例如:http://wap.wsguwancheng.com/#/productlists/688。自定义分享的链接被微信端截掉,变成http://wap.wsguwancheng.com/?from=singlemessage

解决方案:页面中转,url重定向。

1,在static目录下新建一个名为html的文件夹,在html文件夹中再新建一个redirect.html

html中写入以下内容

<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>

只需要script标签就可以了,反正只是做重定向。

2,在商品详情页的内容如下,注意:link: shareWxLink,

shareconfig:function(){
    var _that = this;
    wx.ready(function () {
        var shareWxLink = window.location.href.split('#')[0] + 'static/html/redirect.html?app3Redirect=' + encodeURIComponent(window.location.href);

        wx.onMenuShareTimeline({
            title: '【网上古玩城】' + _that.goods_detail.goods_name, // 分享标题
            link: shareWxLink,        // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: _that.shareimg, // 分享图标
            success:function() {
                _that.$dialog.toast({
                    mes: '分享朋友圈成功',
                    timeout: 1500,
                    icon: 'success'
                });
                // 用户确认分享后执行的回调函数
            },
            cancel:function() {
                // 用户取消分享后执行的回调函数
            }
        });

        wx.onMenuShareAppMessage({
            title: '【网上古玩城】' + _that.goods_detail.goods_name, // 分享标题
            desc: _that.goods_detail.goods_content, // 分享描述
            link: shareWxLink,  // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: _that.shareimg, // 分享图标
            success: function () {
                // alert('分享给朋友成功')
                _that.$dialog.toast({
                    mes: '分享给朋友成功',
                    timeout: 1500,
                    icon: 'success'
                });
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        })
    })
}

跳转页面完成!

  • 8
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 8
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值