业务需要: 在自定义组件中有一个分享按钮 , 实现分享功能 .
问题: 实现分享功能 , 一般有两种实现方式 . 一 ： 在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的点击分享 , 以及分享所需要的自定义内容 .
但是这种方式还是有坑的 , 就是如果你想用微信小程序默认的截图 , 这是有坑的 , 这个截图不好控制 .
我这边用的分享图是从组件传过来的自己设计的图片 , 而不是小程序自动截图的图片 .
