问题:实现分享功能,一般有两种实现方式.一：在page中实现onShareAppMessage()方法，在当前页面的右上角会出现转发按钮；二：使用button组件,设置open-type='share’属性,接着在onShareAppMessage()方法中配置分享信息！这两种方式都要实现onShareAppMessage()方法,如果只是使用button,不实现onShareAppMessage()方法(因为onShareAppMessage()只能写在page中,在自定义组件中无效),点击分享button,也可以转发分享,但是却不能自定义转发内容,这样的转发一般是不能满足需求的！
很明显,自定义组件中实现分享功能的坑来了,onShareAppMessage()只是存在于page中的,在自定义组件中是无法回调的,先看看官方文档.
解决方案:虽然组件中无法回调onShareAppMessage()方法,但是page中可以回调啊.可是一个page中有可能有多个分享按钮,我怎么知道是哪个按钮的分享呢?但是可以在组件button中把需要的数据传出去(通过data-将需要的数据传出去.),在onShareAppMessage()方法获取传出来的数据,通过这些数据来判断是哪个button的分享,同时也可以获取到分享的内容.
自定义组件的wxml文件:
viewbuttonopen-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){letshareInfo=res.target.dataset.shareinfo;return{title:shareInfo.title,path:shareInfo.path,imageUrl:shareInfo.imageUrl}},看看debug的情况:
在page的onShareAppMessage()方法中,我们可以很轻松的获取到自定义组件分享button中传出来的数据,这样就可以非常简单的区别是哪个button的点击分享,以及分享所需要的自定义内容.但是这种方式还是有坑的,就是如果你想用微信小程序默认的截图,这是有坑的,这个截图不好控制.我这边用的分享图是从组件传过来的自己设计的图片,而不是小程序自动截图的图片.
