# 公众号h5自定义分享

这两天做一个公众号抽奖页面，运营要求设置分享增加次数，这就要拿到微信分享事件的回调。查了下相关文章，需要用到微信JS-SDK。

# 后端工作

在微信公众平台设置接口安全域名
后端通过代码请求微信接口获取access-token参数，以此access-token参数再次请求微信接口获取jsapi-ticket，并将获取的jsapi-ticket进行加密、校验与其他的参数封装成接口供前端调用。

# 前端工作

页面引入微信JS-SDK文件。

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

通过后端提供的接口获取配置参数。向服务端传递当前路径url，返回appid，timestamp，noncestr，signature。

这里要传递当前页面url，否则会返回报错invalid signature。查看相关文章发现还有因为url的query和hash参数导致错误的，最好用location.href.split('#')[0]。

执行wx.config方法进行配置。

wx.config({
  debug: false,
  appId: res.data.d.appid,   
  timestamp: res.data.d.timestamp,
  nonceStr: res.data.d.noncestr,
  signature: res.data.d.signature,
  jsApiList: [
    'checkJsApi',
    'onMenuShareAppMessage',
    'onMenuShareTimeline',
  ]
});

这里要注意服务器生成的appid等参数都是小写，config参数的key是大写。

开发阶段开启debug，各个wx方法执行结果会以alert形式显示。

jsApiList要填写要调用的方法。

在wx.ready中设置分享事件。

wx.ready(function () {
  wx.checkJsApi({
    jsApiList: [
      'onMenuShareAppMessage',
      'onMenuShareTimeline',
    ]
  });
  /*分享给朋友*/
  wx.onMenuShareAppMessage({
    title: shareOption.title,
    desc: shareOption.desc,
    link: shareOption.link,
    imgUrl: shareOption.imgUrl,
    success: function () {
      // 用户确认分享后执行的回调函数
    },
    cancel: function () {
      // 用户取消分享后执行的回调函数
    }
  });
  /*分享给朋友圈*/
  wx.onMenuShareTimeline({
    title: shareOption.title,
    link: shareOption.link,
    imgUrl: shareOption.imgUrl,
    success: function () {
      // 用户确认分享后执行的回调函数
    },
    cancel: function () {
      // 用户取消分享后执行的回调函数
    }
  });
});

这里link和imgUrl要用绝对路径。之前用相对路径，分享一直不显示自定义的配置。

当用户点击右上角进行分享，可以在成功回调设置发送请求抽奖次数+1。

# 问题

测试阶段发现ios分享显示正常，安卓分享出去不显示图片。上网查找相关问题，有人说把png改成jpg还是不行。有人说是协议的问题，把图片路径的协议从http改成https，发现图片可正常分享显示。
测试服换到线上服务区，发现报错，原因是线上服强制转https，而很多资源引用的是http，设置关闭转https后可正常加载。另外分享自定义配置无效，发现是安全域名未配置线上域名。
分享到朋友圈成功回调，发送ajax报错，在微信开发工具测试正常。引入vconsole调试，发现ajax请求未发出，status=0。查看相关文章，发现快速切换页面，导致快速多次发起ajax请求，就会出现这种情况。尝试在请求失败再一次发起请求，成功。改为回调中setTimeout延迟请求，也成功。
微信JS-SDK官方文档说这两个接口即将失效，建议使用两个新的接口。但是新的接口回调失败。

# 其他

在微信环境配置开发工具可以分享给微信。在其他浏览器中分享需要调用浏览器自身接口，可以用nativeShare.js这个第三方库实现。