Vue项目history模式下微信分享爬坑总结

2023年6月11日上午9:34 • JavaScript

「Vue项目history模式下微信分享爬坑总结」这篇攻略主要是在Vue项目开发中，针对微信分享的一些问题和解决方案进行总结，并重点介绍了在使用history模式下遇到的问题和解决方法，下面是详细的攻略：

1. 什么是Vue项目history模式下的微信分享？

在Vue的路由模式下，有两种路由方式：hash和history。history模式利用了HTML5 History Interface中新增的pushState()和replaceState()方法，用来完成URL的变化，而不需要重新加载页面。同时，history模式也会出现一些问题，尤其是在微信分享的时候。

2. 微信分享的问题

在微信分享中，我们需要在页面的头部加入如下代码：

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
  wx.config({
    // 配置信息
  });

  wx.ready(function() {
    // 分享信息
  });
</script>

然而，在使用history模式后，页面切换的时候，并不会重新加载页面，而是通过路由切换。这样就会导致以上代码只会在第一次加载时生效，后面的路由切换都没有再次加载。因此，我们需要解决这个问题，让微信分享在每次路由切换的时候都能够生效。

3. 解决方案

为了解决这个问题，我们可以在Vue项目中使用Vue Router的导航守卫实现在每次路由切换时都重新加载页面。具体有两种方法：

3.1 利用beforeEach导航守卫

在路由配置文件中，我们可以使用beforeEach导航守卫监听路由变化事件，当路由变化的时候，重新加载一遍页面。代码示例如下：

router.beforeEach((to, from, next) => {
  window.location.reload();
  next();
});

这种方法的缺点在于，无论是路由变化还是其他的原因，都会重新加载页面。

3.2 利用微信API的重新加载事件

在微信分享的API中，我们可以监听在“分享成功”、“分享失败”、“取消分享”等事件，当这些事件触发的时候，重新加载一遍页面。代码示例如下：

wx.ready(function() {
  // 分享信息

  wx.onMenuShareTimeline({
    success: function() { // 分享到朋友圈成功
      window.location.reload();
    },
    fail: function() { // 分享到朋友圈失败
      window.location.reload();
    },
    cancel: function() { // 分享到朋友圈取消
      window.location.reload();
    }
  });

  wx.onMenuShareAppMessage({ // 分享到微信好友
    success: function() {
      window.location.reload();
    },
    fail: function() {
      window.location.reload();
    },
    cancel: function() {
      window.location.reload();
    }
  });
});

这种方法的好处在于只会重新加载页面，当触发其他事件时不会重新加载页面。

4. 示例说明

4.1 利用beforeEach导航守卫的示例

在路由配置文件中，我们可以像下面这样监听路由变化事件：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  // 路由配置
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

router.beforeEach((to, from, next) => {
  window.location.reload();
  next();
});

export default router

这种方法的缺点在于，无论是路由变化还是其他的原因，都会重新加载页面。

4.2 利用微信API的重新加载事件的示例

在微信分享的API中，我们可以像下面这样监听微信分享的事件：

import wx from 'weixin-js-sdk'

export function shareWX() {
  wx.ready(function() {
    wx.onMenuShareTimeline({
      success: function() { // 分享到朋友圈成功
        window.location.reload();
      },
      fail: function() { // 分享到朋友圈失败
        window.location.reload();
      },
      cancel: function() { // 分享到朋友圈取消
        window.location.reload();
      }
    });

    wx.onMenuShareAppMessage({ // 分享到微信好友
      success: function() {
        setTimeout(() => {
          window.location.reload();
        }, 500);
      },
      fail: function() {
        setTimeout(() => {
          window.location.reload();
        }, 500);
      },
      cancel: function() {
        setTimeout(() => {
          window.location.reload();
        }, 500);
      }
    });
  });

  // 配置信息
}

这种方法的好处在于只会重新加载页面，当触发其他事件时不会重新加载页面。