小程序分享配置

需求背景

小程序接入兑吧积分商城活动中，会涉及到活动转发（分享）好友拉新，或者助力参与的需求场景，因此在小程序对接兑吧活动时，会涉及到小程序的自定义分享功能。

分享实现

分享数据

分享数据包含分享标题，分享链接和分享图片等信息，这些信息有兑吧活动页面输出，通过特定分享接口传给开发者小程序实现分享转发。

分享流程

1.使用<web-view>标签嵌入兑吧活动页，并使用 bindmessage 属性接收 h5 传递的消息，分享所需的数据都会通过此方法接收 处理，参考文档:[微信小程序开发手册]

<web-view src="http://www.duiba.com.cn" bindmessage="eventHandler"></web-view>

2.定义并实现 eventHandler 方法，用来接收消息并完成分享的自定义设置：

var eventHandler = function(e) {
var data = e.detail;
// 从此处获取h5传递过来的消息，并将数据保存
}

3.通过小程序onShareAppMessage接口，自定义分享设置，参考文档: [微信小程序开发手册]

Page({
onShareAppMessage: function(res) {
// return eventHandler接收到的分享参数
return {
title: '自定义转发标题',
path: '/page/user?id=123'
};
}
});

4.兑吧h5在渲染完成后通过wx.miniProgram.postMessage向小程序传递消息，消息中包含分享所需的参数，格式为:

wx.miniProgram.postMessage({
     data: {
               title: '', // 标题
               desc: '', // 描述
               imgUrl: '', // 图片
               link: '' // 链接
            }
   });

特别注意：1.兑吧H5页面需要引入微信jssdk的版本要在1.3.2以上 引入就是文件如下：

<script
  type="text/javascript"
  src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"
></script>

2.postMessage执行多次的情况下，获取到的e.detail.data会是一个数组队列，开发者在处理分享数据的时候，要获取队列的最后一次推送的数据。 参考代码

eventHandler: function (e) {
    var h5Data =  e.detail.data;  //当用户点击这个h5页面的分享时获取分享信息
    this.ShareInfo.shareTitle=h5Data[h5Data.length-1].title;
    this.ShareInfo.link = h5Data[h5Data.length-1].link;
    this.ShareInfo.imgUrl=h5Data[h5Data.length-1].imgUrl;
}