微信小程序自定义组件内分享功能

业务需要: 在自定义组件中有一个分享按钮 , 实现分享功能 .

问题: 实现分享功能 , 一般有两种实现方式 . 一 ： 在page中实现onShareAppMessage()方法，在当前页面的右上角会出现转发按钮 ； 二： 使用button组件 , 设置open-type='share’属性 , 接着在onShareAppMessage()方法中配置分享信息 ！
这两种方式都要实现onShareAppMessage()方法 , 如果只是使用button , 不实现onShareAppMessage()方法 (因为onShareAppMessage()只能写在page中 , 在自定义组件中无效) , 点击分享button, 也可以转发分享 , 但是却不能自定义转发内容 , 这样的转发一般是不能满足需求的！

很明显 , 自定义组件中实现分享功能的坑来了 , onShareAppMessage()只是存在于page中的 , 在自定义组件中是无法回调的 , 先看看官方文档.

---

解决方案 : 虽然组件中无法回调onShareAppMessage()方法 , 但是page中可以回调啊 . 可是一个page中有可能有多个分享按钮 , 我怎么知道是哪个按钮的分享呢 ? 但是可以在组件button中把需要的数据传出去(通过data- 将需要的数据传出去.) , 在onShareAppMessage()方法获取传出来的数据 , 通过这些数据来判断是哪个button的分享 , 同时也可以获取到分享的内容 .

自定义组件的wxml文件:

<view class="container">
  <button open-type="share" size="mini" plain="{{true}}" data-shareInfo="{{shareModel}}">
    组件中分享按钮one
  </button>
</view>

shareInfo就是自定义组件传出去的数据 , 在使用自定义组件的page中获取 , 先看下自定义组件js文件中shareInfo的数据:

  data: {
    shareModel:{
      title:'自定义组件分享title',
      path:'pages/test/test',
      imageUrl:'../../images/my/study.png',
      fromButton:'one'
    }
  },

使用自定义组件的page :

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function (res) {
    let shareInfo = res.target.dataset.shareinfo;
    return {
      title: shareInfo.title,
      path: shareInfo.path,
      imageUrl: shareInfo.imageUrl
    }
  },

看看debug的情况:

在page的onShareAppMessage()方法中 , 我们可以很轻松的获取到自定义组件分享button中传出来的数据 , 这样就可以非常简单的区别是哪个button的点击分享 , 以及分享所需要的自定义内容 .

但是这种方式还是有坑的 , 就是如果你想用微信小程序默认的截图 , 这是有坑的 , 这个截图不好控制 .
我这边用的分享图是从组件传过来的自己设计的图片 , 而不是小程序自动截图的图片 .