返回

微信H5卡片式分享：H5页面传播，一网打尽！

前端

一、微信H5卡片式分享的原理

微信H5卡片式分享是一种基于微信平台的分享方式，它允许用户通过微信分享H5页面，并以卡片的形式展示在微信聊天窗口中。当用户点击卡片时，即可跳转至H5页面。这种分享方式非常方便，且可以有效提升H5页面的传播率。

二、微信H5卡片式分享的操作步骤

  1. 获取微信分享参数

首先，您需要获取微信分享参数，以便在H5页面中调用微信的分享功能。您可以使用微信官方提供的JS-SDK来获取这些参数。具体步骤如下：

  • 在H5页面中引入微信JS-SDK：
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
  • 调用微信JS-SDK的 wx.config() 方法来获取分享参数：
wx.config({
  debug: false, // 开启调试模式，调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过alert弹出，在iOS 6.0以上才有效果，在其它设备上不会有提示
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '', // 必填，签名，见附录1
  jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
  • 调用微信JS-SDK的 wx.ready() 方法来监听微信JS-SDK的加载情况：
wx.ready(function () {
  // 这里可以调用微信JS-SDK的分享功能
});
  1. 配置微信分享参数

获取到微信分享参数后，您需要将其配置到H5页面中，以便在用户分享页面时能够正确显示。具体步骤如下：

  • 调用微信JS-SDK的 wx.onMenuShareTimeline() 方法来配置分享到朋友圈的参数：
wx.onMenuShareTimeline({
  title: '', // 分享标题
  link: '', // 分享链接
  imgUrl: '', // 分享图标
  success: function () {
    // 分享成功后的回调函数
  },
  cancel: function () {
    // 分享取消后的回调函数
  }
});
  • 调用微信JS-SDK的 wx.onMenuShareAppMessage() 方法来配置分享到微信好友的参数：
wx.onMenuShareAppMessage({
  title: '', // 分享标题
  desc: '', // 分享
  link: '', // 分享链接
  imgUrl: '', // 分享图标
  success: function () {
    // 分享成功后的回调函数
  },
  cancel: function () {
    // 分享取消后的回调函数
  }
});
  1. 调用微信分享功能

配置好微信分享参数后，您就可以调用微信JS-SDK的 wx.shareAppMessage() 方法或 wx.shareTimeline() 方法来分享H5页面了。具体步骤如下：

  • 调用微信JS-SDK的 wx.shareAppMessage() 方法来分享到微信好友：
wx.shareAppMessage({
  title: '', // 分享标题
  desc: '', // 分享
  link: '', // 分享链接
  imgUrl: '', // 分享图标
  success: function () {
    // 分享成功后的回调函数
  },
  cancel: function () {
    // 分享取消后的回调函数
  }
});
  • 调用微信JS-SDK的 wx.shareTimeline() 方法来分享到朋友圈：
wx.shareTimeline({
  title: '', // 分享标题
  link: '', // 分享链接
  imgUrl: '', // 分享图标
  success: function () {
    // 分享成功后的回调函数
  },
  cancel: function () {
    // 分享取消后的回调函数
  }
});

三、微信H5卡片式分享的注意事项

在使用微信H5卡片式分享时，需要注意以下几点：

  • 微信分享参数需要在微信JS-SDK加载完成后才能获取，因此您需要在调用微信JS-SDK的 wx.config() 方法后才能调用微信JS-SDK的分享功能。
  • 微信分享参数需要与H5页面的内容相匹配，否则分享时可能会出现错误。
  • 微信分享参数中的 link 字段必须是绝对路径，否则分享时可能会出现错误。
  • 微信分享参数中的 imgUrl 字段必须是图片的完整路径，否则分享时可能会出现错误。
  • 微信分享参数中的 title 和 desc 字段不能超过一定的长度，否则分享时可能会被截断。