一、 简介

接入微信分享后，可以自定义“发送给朋友”和“分享到朋友圈”卡片样式，自定义信息包括：链接缩略图、标题、描述、跳转链接，开发调试时推荐使用官方微信开发者工具，更多内容请参考官方文档。
请注意，只能由用户发起分享行为，不要有诱导分享等违规行为，对于诱导分享行为将永久回收公众号接口权限

二、 详细步骤

使用前请先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。可参考示例项目wx-client查看更详细示例代码

2.1 引入官方JS-SDK

在需要调用JS接口的页面引入官方JS-SDK文件，推荐前往官方文档拿最新版，以下为示例

  1. <script src=https://res.wx.qq.com/open/js/jweixin-1.6.0.js></script>

2.2 加载网页分享签名

请注意，每个H5页面都需要分别加载一次微信分享签名，SPA单页应用如果使用hash 模式比较简单。如不清楚页面跳转后是否需要重新加载，可观察url变化，如页面跳转时仅#后面部分变更则不需要每次重新加载。

  1. http.get('/wx/wxAuth/getShareSignature',null,{
  2.   headers:{ // 后端接口通过header中的wx-client-href识别需加载微信分享的页面
  3.      'wx-client-href':location.href 
  4.   }
  5. }).then((res) => {
  6.   if (res.code != 200) {
  7.     return
  8.   }
  9.   setShareConfig(res.data); //下一步中的方法
  10. });

2.3 通过config接口注入权限验证配置

  1. function setShareConfig(shareSignature) {
  2.     wx.config({
  3.         debug: false,
  4.         appId: shareSignature.appId,
  5.         timestamp: shareSignature.wxTimestamp,
  6.         nonceStr: shareSignature.wxNoncestr,
  7.         signature: shareSignature.wxSignature,
  8.         jsApiList: [
  9.             'checkJsApi',
  10.             'onMenuShareTimeline',
  11.             'onMenuShareAppMessage']
  12.     });
  13. }

2.4 配置微信分享信息

  1. wx.onMenuShareTimeline({ //分享到朋友圈
  2.     title: '', // 分享标题
  3.     link: location.href, // 分享链接
  4.     imgUrl: '', // 分享图标
  5. });
  6. wx.onMenuShareAppMessage({ //发送给好友
  7.     title: '', // 分享标题
  8.     desc: '', // 分享描述
  9.     link: location.href, // 分享链接
  10.     imgUrl: '', // 分享图标
  11. });