Vue（hash模式）开发微信公众号处理分享页面中分享链接中#后面的地址截取问题

最新推荐文章于 2023-11-17 15:01:30 发布

五月闲云一野鹤

最新推荐文章于 2023-11-17 15:01:30 发布

阅读量2.2k

点赞数 1

分类专栏：微信公众号 Vue 文章标签： vue javascript html js

本文链接：https://blog.csdn.net/qq_37131884/article/details/104124244

版权

Vue 同时被 2 个专栏收录

15 篇文章 3 订阅

订阅专栏

微信公众号

4 篇文章 0 订阅

订阅专栏

描述

使用Vue开发公众号时，分享链接的时候遇到这个问题，会把#后面的地址都截取，然后会跳到首页去。如果使用history模式下的话就不存在这个问题了，不过Vue开启这种模式，还需要后台配置支持。问了下我们后端，直接说不会，没办法，只能自己想办法来解决了。

思路

当时大致搜了下，各种方法也尝试了，转码，拼接什么的都没有用，后面采用了一个中转页面来帮我实现跳转才做好了。

其原理大致就是写一个第三方的页面，然后我们在做微信分享链接的时候带参数，跳到这个第三方页面里面去，然后在这个页面里面重新拼接参数，最后重定向跳到分享链接的需要分享的那个页面去。

这个也是根据需求来的，因为我这个进入页面就要发起微信授权，要获取code，所以采用的这个方法。所以也要看大家的项目需求。

代码

新建一个redirect.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
</head>

<body>
    <script>
        var str = window.location.search
        
        //这里写处理代码，因为我的分享链接有四个场景，所以在这里对str做了一些处理和判断
        
        window.location.href = '域名' + '/#/' + strr + '?' + can
    </script>
</body>

</html>

分享链接注入的时候

 const newUrl = window.location.protocol + "//" + window.location.host + "存放的路径/redirect.html?" + '拼接你的参数'
          
 wx.onMenuShareAppMessage({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: newUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: img, // 分享图标
            type: "", // 分享类型,music、video或link，不填默认为link
            dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
            success: function() {
              // 用户点击了分享后执行的回调函数
              // alert("分享成功");
            },
            cancel: function() {
              // 用户取消分享后执行的回调函数
              // alert("分享取消");
            }
          });

但是请求微信服务器获取code的时候，redirect_uri要保证这个路径，处理链接的时候要注意。我当时在这里被坑了下。

个人水平有限，有问题欢迎大家留言指导，仅供学习和参考。

学海无涯！努力二字，共勉！

五月闲云一野鹤

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue（hash模式）开发微信公众号处理分享页面中分享链接中#后面的地址截取问题

描述使用Vue开发公众号时，分享链接的时候遇到这个问题，会把#后面的地址都截取，然后会跳到首页去。如果使用history模式下的话就不存在这个问题了，不过Vue开启这种模式，还需要后台配置支持。问了下我们后端，直接说不会，没办法，只能自己想办法来解决了。思路当时大致搜了下，各种方法也尝试了，转码，拼接什么的都没有用，后面采用了一个中转页面来帮我实现跳转才做好了。其原理大致就是写一个第三方的...
复制链接

扫一扫