H5页面内实现分享给微信好友功能

注意：目前是无法在公众号的H5页面内自定义分享按钮的，只能通过点击公众号H5页面右上角的【···】，选择【发送给好友】来进行分享。

一、JS-SDK

要实现此功能使用JS-SDK：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62

二、在微信公众平台 -- “公众号设置”的“功能设置”里填写“JS接口安全域名”。

三、引入JS文件

四、步骤三：通过config接口注入权限验证配置

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

注意：

1、这里的 timestamp、nonceStr、signature 要在服务端生成。

2、生成signature时，需要用到 jsapi_ticket，获取jsapi_ticket时，需要用到access_token，这里的access_token 与微信登录时的access_token 不同，要注意。

生成signature：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62

获取access_token: https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html

五、自定义“分享给朋友”及“分享到QQ”按钮的分享内容

wx.updateAppMessageShareData({ 
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: '', // 分享图标
    success: function () {
      // 设置成功
    }
  })

这里的link就是你希望微信好友点击后打开的页面url。

wx.updateAppMessageShareData 方法需要在点击右上角三个点分享给好友之前调用，以准备好分享信息卡片中的文案、图标、url。