微信公众号JSSDK 自定义分享

前端

2023-11-16 15:27:52

大家好！前段时间，我在开发的公众号里加入了一个自定义分享的功能。今天，我在这里分享一下代码和开发中遇到的问题，帮助大家避免踩坑。

1.微信公众号开发需要登录才能获取appid

微信公众号开发需要先登录才能获取appid。我在这里分享的代码只包含分享部分，授权采用静默授权，后台提供的接口，我这里只负责调用。

2.代码放在需要分享的页面

需要分享出去的页面就要把代码放在那个页面。我的分享出去的页面不包含在公众号里。

3.参考微信JSSDK接口文档

开发前建议大家先参考微信JSSDK接口文档，里面有详细的开发指引。

接下来，我将介绍在微信公众号中使用JSSDK实现自定义分享的具体步骤。

1.在微信公众平台上注册并配置应用

首先，需要在微信公众平台上注册并配置一个应用。在配置应用时，需要填写应用名称、应用、应用图标等信息。同时，还需要设置应用的权限，以便于应用能够使用微信JSSDK的接口。

2.获取微信JSSDK签名

在使用微信JSSDK接口之前，需要先获取微信JSSDK签名。微信JSSDK签名是用于验证请求合法性的凭证，是通过使用微信提供的签名算法生成的。

3.在页面中引入微信JSSDK

获取到微信JSSDK签名后，就可以在页面中引入微信JSSDK。引入微信JSSDK的代码如下：

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

4.使用微信JSSDK接口实现自定义分享

引入微信JSSDK后，就可以使用微信JSSDK接口实现自定义分享了。实现自定义分享的代码如下：

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

wx.ready(function () {
  //分享到朋友圈
  wx.onMenuShareTimeline({
    title: '分享标题', // 分享标题
    link: '分享链接', // 分享链接
    imgUrl: '分享图标', // 分享图标
    success: function () {
      // 用户确认分享后执行的回调函数
    },
    cancel: function () {
      // 用户取消分享后执行的回调函数
    }
  });

  //分享给朋友
  wx.onMenuShareAppMessage({
    title: '分享标题', // 分享标题
    desc: '分享', // 分享描述
    link: '分享链接', // 分享链接
    imgUrl: '分享图标', // 分享图标
    type: 'link', // 分享类型,music、video或link，不填默认为link
    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
    success: function () {
      // 用户确认分享后执行的回调函数
    },
    cancel: function () {
      // 用户取消分享后执行的回调函数
    }
  });

  //分享到QQ
  wx.onMenuShareQQ({
    title: '分享标题', // 分享标题
    desc: '分享描述', // 分享描述
    link: '分享链接', // 分享链接
    imgUrl: '分享图标', // 分享图标
    success: function () {
      // 用户确认分享后执行的回调函数
    },
    cancel: function () {
      // 用户取消分享后执行的回调函数
    }
  });

  //分享到腾讯微博
  wx.onMenuShareWeibo({
    title: '分享标题', // 分享标题
    desc: '分享描述', // 分享描述
    link: '分享链接', // 分享链接
    imgUrl: '分享图标', // 分享图标
    success: function () {
      // 用户确认分享后执行的回调函数
    },
    cancel: function () {
      // 用户取消分享后执行的回调函数
    }
  });
});