手机浏览器——微信JS-SDK微信分享新姿势

2023-09-28 13:17:17

移动端H5想要使用微信JS-SDK实现分享功能，我们需要用到微信分享的新姿势。传统的微信分享，需要用户点击右上角的微信分享功能，然后在分享对话框中选择“分享给好友”或者“分享到朋友圈”，这样才能完成分享。新的分享姿势，则可以直接通过点击分享按钮，在分享对话框中选择“分享给好友”或者“分享到朋友圈”，这样就能完成分享了。

新姿势的优点

新的微信分享姿势，可以为用户带来更好的体验，因为它省去了用户点击右上角微信分享功能的步骤，直接在分享对话框中提供了分享给好友和分享到朋友圈的选项。这样一来，用户就可以更方便地分享内容了。

新姿势的实现

要实现新的微信分享姿势，我们需要用到微信JS-SDK的“onMenuShareAppMessage”和“onMenuShareTimeline”这两个API。

“onMenuShareAppMessage”：用于分享给好友。
“onMenuShareTimeline”：用于分享到朋友圈。

我们可以在需要分享的页面上，使用这两个API来实现分享功能。

wx.onMenuShareAppMessage({
  title: '分享标题', // 分享标题
  desc: '分享', // 分享
  link: '分享链接', // 分享链接
  imgUrl: '分享图片', // 分享图片
  type: 'link', // 分享类型，music、video或link，不填默认为link
  dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
});

wx.onMenuShareTimeline({
  title: '分享标题', // 分享标题
  link: '分享链接', // 分享链接
  imgUrl: '分享图片', // 分享图片
});

在使用这两个API之前，我们需要先初始化微信JS-SDK。初始化微信JS-SDK的代码如下：

wx.config({
  debug: false, // 开启调试模式，调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: 'wx975766b241c6e85a', // 必填，公众号的唯一标识
  timestamp: 1414587457, // 必填，生成签名的时间戳
  nonceStr: 'Wm3WZYTPz0wzccnW', // 必填，生成签名的随机串
  signature: '9e60d428706b186a703535087c676a5e98c6d296', // 必填，签名，见附录1
  jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});