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

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

image.png

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

image.png

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

自定义组件的wxml文件:

        <button class="share" open-type="share" data-shareInfo="{{shareModel}}">
          <view class="icon flex-row flex-center">
            <text class="xh-iconfont xh-icon-fenxiang_2"></text>
          </view>
        </button>

image.png

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

Component({
  /**
   * 组件的属性列表
   */
  properties: {},

  /**
   * 组件的初始数据
   */
  data: {
    // 分享好友
    shareModel: {
      title:'自定义组件分享title',
      path:'pages/test/test',
      imageUrl:'',
      fromButton:'one'
    }
  }
})

使用自定义组件的page :

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

看看debug的情况:

image.png

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

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