微信H5vue-router使用不同的mode模式对微信分享接口的影响

最新推荐文章于 2023-12-30 08:00:00 发布

scarecrowll

最新推荐文章于 2023-12-30 08:00:00 发布

阅读量344

点赞数

本文链接：https://blog.csdn.net/qq_41227106/article/details/105058174

版权

vue的路由一般会只用两种模式，一种是hash（默认），另外一种是history模式

hash模式大家可能比较熟悉，因为vue模式就是它，不需要修改任何操作，然后在本地运行的时候可以看到是这样的链接：

http://localhost:8080/#/

这个链接跟平时看到的ur链接有点不一样，他携带了#，实际上#和它后面的的整体称之为hash,如果不想要这个#号，那么就需要把路由设置为history模式，具体设置如下：找到router的index.js，然后设置mode: 'history',

这个时候再运行本地项目发现地址变成了http://localhost:8080/，成功取出#

当你打包并且发布到线上的时候，如果发现页面一片空白的话，请看下面这篇文章

https://blog.csdn.net/qq_41227106/article/details/104940542

废话那么多，现在开始讲vue项目调用微信分享问题

1、hash模式

无论是安卓机还是苹果机，只需要做一次的初始化，这个时候可以在app.vue进行请求。hash模式携带了#，但是微信分享链接并不支持带#的链接，那么这个时候需要截取掉#后面的数据

    getWxShare() {
      let data = {
        url: window.location.href.split("#")[0]
      };
      // 请求接口拿appid timestamp signature 等
      this.$get( 
        "url",
        data,
        res => {
          wx.config({
            appId: res.appId,
            timestamp: res.timestamp,
            nonceStr: res.nonceStr,
            signature: res.signature,
            jsApiList: [
              "onMenuShareTimeline", //分享给好友
              "onMenuShareAppMessage", //分享到朋友圈
              "onMenuShareQQ", //分享到QQ
              "onMenuShareWeibo" //分享到微博
            ]
          });
          wx.ready(function(e) {
            var shareData = {
              title: "分享标题",
              desc: "分享摘要",
              link: "分享链接（不带#）",
              imgUrl: "分享图链接" 
            };
            wx.onMenuShareAppMessage(shareData);
            wx.onMenuShareTimeline(shareData);
            wx.onMenuShareQQ(shareData);
            wx.onMenuShareWeibo(shareData);
          });
        },
        error => {
          console.log(error);
        }
      );
    },

2、history模式，使用history模式，苹果机也是只需要进行一次的初始化，但是安卓机需要重新初始化一遍sdk去算签名，重新刷新那些sharedata。也就是说使用history模式需要每个vue文件都进行一遍初始化的操作