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

「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);
      }
    });
  });

  // 配置信息
}

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

5. 总结

Vue项目在使用history模式时,微信分享会遇到一些问题。我们可以通过使用Vue Router的导航守卫或者微信API的重新加载事件来解决这个问题。同时在分享的时候,还需要注意图片的大小和链接的正确性,这也是会影响分享效果的原因。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Vue项目history模式下微信分享爬坑总结 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • js Math数学简单使用操作示例

    下面是关于“js Math数学简单使用操作示例”的完整攻略。 一、Math对象概述 JavaScript的内置对象之一是Math对象,它包含了许多常见的数学函数和常量。Math主要对数字进行操作,例如数学运算、幂运算、三角函数等。 二、Math对象中的常用方法 下面是 Math 对象中一些常用方法的介绍: 1. Math.floor() Math.floor…

    JavaScript 2023年5月27日
    00
  • 详解JS 比较两个Json对象的值是否相等的实例

    下面是“详解JS 比较两个Json对象的值是否相等的实例”的完整攻略: 实现方法概述 在JavaScript中,我们可以通过遍历两个json对象的每一个属性,比较它们的值是否相等来判断它们是否相等。如果两个json对象的每一个属性都相等,那么它们就相等。下面,我们详细介绍如何实现这个功能。 步骤1:遍历两个json对象的所有属性。 步骤2:判断它们的值是否相…

    JavaScript 2023年5月27日
    00
  • JS 自动安装exe程序

    JS 自动安装 exe 程序是一种自动安装程序的方法,主要用于后台自动安装某些特定的软件或工具。这种方法主要依赖于 JavaScript 的特性,在浏览器中实现自动下载和安装 exe 程序。 下面是 JS 自动安装 exe 程序的完整攻略: 安装准备 确认要安装的 exe 程序是否可以通过 JS 自动安装; 准备一个可以直接下载 exe 程序的链接(可以是百…

    JavaScript 2023年5月27日
    00
  • Javascript的setTimeout()使用闭包特性时需要注意的问题

    下面是关于“Javascript的setTimeout()使用闭包特性时需要注意的问题”的详细讲解。 什么是setTimeout() setTimeout() 是 JavaScript 语言自带的一个定时器,通常用于在指定的时间间隔之后执行一段指定的代码。setTimeout() 函数的语法如下: setTimeout(func|code, delay); …

    JavaScript 2023年6月10日
    00
  • 13个JavaScript 一行程序,让你看起来就是个专家

    下面我将详细讲解“13个JavaScript 一行程序,让你看起来就是个专家”的完整攻略。 首先,这篇文章介绍了13个能让你看起来很专业的 JavaScript 一行程序。这些程序都非常短小精悍,并且可以快速解决一些常见的编程问题。下面我们逐一介绍一下这些程序。 1. 取两个数中的最小值 const min = (a, b) => a < b ?…

    JavaScript 2023年5月18日
    00
  • Lottie动画前端开发使用技巧

    下面是关于 Lottie动画前端开发使用技巧的完整攻略。 背景 Lottie是由Airbnb开源的一个前端动画库,它可以将Adobe After Effects中的动画直接以Json文件的形式在 Web 应用展示,并且支持响应式、交互等功能,极大地提高了前端UI交互体验。在实际的项目中,使用Lottie可以减少开发人员的工作量,提高页面性能。 Lottie的…

    JavaScript 2023年6月11日
    00
  • Javascript 更新 JavaScript 数组的 uniq 方法

    下面是更新 JavaScript 数组的 uniq 方法的完整攻略: 1. 现状 目前,虽然 JavaScript 数组已有现成的 filter 函数可以用来过滤数组中重复的元素,但很多开发者经常需要自定义数组的 uniq 方法,以实现更加灵活的去重操作。目前,常见的去重实现方式有两种:基于 Set 对象的去重和基于对象属性的去重,其中基于 Set 的去重是…

    JavaScript 2023年5月27日
    00
  • Bootstrap Table的使用总结

    Bootstrap Table的使用总结 Bootstrap Table是一个基于Bootstrap的jQuery插件,它可以将一个普通的HTML表格转化成一个功能丰富的高级表格,支持分页、排序、搜索、多选等功能。在前端开发中,Bootstrap Table常常被用来展示比较复杂的数据集,它简单易用,功能强大,可以大大提升用户体验。 安装 要使用Bootst…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部