E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

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

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序分享,微信小程序自定义组件内分享功能
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏