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

微信小程九龙坡区E企盈小程序序自定义组件内分享功能

业务需要:  在自定义组件中有一个分享按钮 , 实现分享功能 .问题: 实现分享功能 , 一般有两种实现方式 . 一 : 在page中实现onShareAppMessage()方法,在当前页面的右上角会出现转发按钮 ; 二: 使用button组件 , 设置open-type=’shar开通LED灯泡小程序电话:4006-838-530e’属性 , 接着在onShareAppMessage()方法中配置分享信息 !这两种方式都要实现onShareAppMessage()方法 , 如果只是使用button , 不实现onShareAppMessage()方法 (因为onShareAppMessage()只能写在page中 , 在自定义组件中无效) , 点击分享button, 也可以转发分享 , 但是却不能自定义转发内容 , 这样的转发一般是不能满足需求的!很明显 , 自定义组件中实现分享功能的坑来了  , onShareAppMessage()只是存在于page中的 , 在自定义组件中是无法回调的 , 先看看官方文档.解决方案 : 虽然组件中无法回调onShareAppMessage()方法 , 但是page中可以回调啊 . 可是一个page中有可能有多个分享按钮 , 我怎么知道是哪个按钮的分享呢 ?开通水质维护小程序电话:4006-838-530  但是可以在组件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 :  /**   * 用户点击右上角分享  开通搬家纸箱小程序电话:4006-838-530 */  onShareAppMessage: function (res) {    let shareInfo = res.target.dataset.shareinfo;    return {      title: shareInfo.title,      path: shareInfo.path,      imageUrl: shareInfo.imageUrl    }  },

看看debug的情况:在page的onShareAppMessage()方法中 , 我们可以很轻松的获取到自定义组件分享button中传出来的数据 , 这样就可以非常简单的区别是哪个button的点击分享 , 以及分享所需要的自定义内容 .但是这种方式还是有坑的 , 就是如果你想用微信小程序默认的截图 , 这是有坑的 , 这个截图不好控制 .我这边用的分享图是从组件传过来的自己设计的图片 , 而不是小程序自动截图的图片 .

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程九龙坡区E企盈小程序序自定义组件内分享功能
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

模王系统开发

联系我们升级日志

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

支付宝扫一扫打赏

微信扫一扫打赏