沃梦达 / IT编程 / 前端开发 / 正文

JS实现微信里判断页面是否被分享成功的方法

实现微信里判断页面是否被分享成功的方法主要需要借助微信JS-SDK提供的能力。以下是实现步骤:

实现微信里判断页面是否被分享成功的方法主要需要借助微信JS-SDK提供的能力。以下是实现步骤:

步骤一:引入微信JS-SDK

首先,在网站中引入微信JS-SDK相关代码。代码示例如下:

<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
  wx.config({
    debug: false,
    appId: 'yourAppId',
    timestamp: 1609360629,
    nonceStr: 'yourNonceStr',
    signature: 'yourSignature',
    jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage']
  });
</script>

需要注意的是,在使用微信JS-SDK之前,需要先将网站注册为开发者,并获得相应的appid和appsecret,然后根据官方文档提供的方法,计算出signature、timestamp和nonceStr等参数。这些参数可以通过后端接口获取,也可以直接硬编码在页面中。

步骤二:判断页面是否被分享成功

接下来,我们需要在网页中添加相应的代码,来实现判断页面是否被分享成功的功能。

首先,我们需要监听微信JS-SDK提供的分享成功事件,代码示例如下:

wx.ready(function () {
  // 监听分享成功事件
  wx.onMenuShareTimeline({
    success: function () {
      // 分享成功的逻辑
    }
  });
});

在上述代码中,我们使用了wx.onMenuShareTimeline方法,并传入了一个包含success属性的对象作为参数。success属性是一个函数,它会在分享成功时被调用。在函数中,我们可以编写我们自己的分享成功的逻辑。

需要注意的是,上述代码中的wx.ready()方法必须在微信JS-SDK引入后执行,以确保微信JS-SDK已经准备就绪。

除了监听分享成功事件,我们还需要在页面加载时查询当前页面是否是由分享进入的。我们可以使用微信JS-SDK提供的checkJsApi方法判断是否支持onMenuShareTimelineonMenuShareAppMessage等方法。如果支持,那么表明当前页面是由分享进入的。示例代码如下:

wx.ready(function () {
  // 查询是否支持分享功能
  wx.checkJsApi({
    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'],
    success: function (res) {
      if (res.checkResult.onMenuShareTimeline || res.checkResult.onMenuShareAppMessage) {
        // 当前页面是由分享进入的
      }
    }
  });
});

在上述代码中,我们使用了wx.checkJsApi方法,并传入了一个包含jsApiList属性的对象作为参数。jsApiList属性是一个数组,它包含我们要查询的JS-SDK方法名称。在success回调函数中,如果onMenuShareTimelineonMenuShareAppMessage方法被支持,那么我们就可以认为当前页面是由分享进入的。

至此,我们成功地实现了微信中判断页面是否被分享成功的方法。

示例说明

下面分别是一个成功分享和失败分享的示例说明。

成功分享示例:

假设有一个网页,网址为https://example.com。用户在微信中点击分享按钮,并成功分享了该网页。

此时,用户朋友圈中的链接指向的是https://example.com。当用户的朋友打开该链接时,会进入到同样的网页。

在该网页中,我们可以添加如下代码:

wx.ready(function () {
  // 监听分享成功事件
  wx.onMenuShareTimeline({
    success: function () {
      alert('分享成功!');
    }
  });

  // 查询是否支持分享功能
  wx.checkJsApi({
    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'],
    success: function (res) {
      if (res.checkResult.onMenuShareTimeline || res.checkResult.onMenuShareAppMessage) {
        alert('当前页面是由分享进入的!');
      }
    }
  });
});

当用户的朋友打开链接进入该页面时,会首先弹出一个提示框,提示“当前页面是由分享进入的!”。此时,如果用户返回朋友圈,会看到刚刚分享的内容下方还会有一个提示“分享成功!”。

失败分享示例:

假设有一个网页,网址为https://example.com。用户在微信中点击分享按钮,并打算分享该网页,但是在弹出分享框之前,关闭了微信。

此时,用户朋友圈中不会有任何分享的内容。当用户的朋友在微信中搜索https://example.com并打开该链接时,会进入到同样的网页。

在该网页中,我们可以添加如下代码:

wx.ready(function () {
  // 监听分享成功事件
  wx.onMenuShareTimeline({
    success: function () {
      alert('分享成功!');
    }
  });

  // 查询是否支持分享功能
  wx.checkJsApi({
    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'],
    success: function (res) {
      if (res.checkResult.onMenuShareTimeline || res.checkResult.onMenuShareAppMessage) {
        alert('当前页面是由分享进入的!');
      } else {
        alert('当前页面不是由分享进入的!');
      }
    }
  });
});

在上述代码中,我们在wx.checkJsApi的回调函数中,添加了一个else语句,用于处理当分享失败时的情况。如果当前页面不是由分享进入的,会弹出一个提示框,提示“当前页面不是由分享进入的!”

本文标题为:JS实现微信里判断页面是否被分享成功的方法