当前位置: 代码迷 >> 综合 >> Vue单页式应用(Hash模式下 '/#/')分享出来的链接点开是首页”问题解决
  详细解决方案

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

热度:85   发布时间:2023-11-16 22:17:27.0

问题: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 () {// 用户取消分享后执行的回调函数}})})
}

跳转页面完成!

  相关解决方案