微信小程序button分享或转发功能（自定义button样式）

最新推荐文章于 2024-08-01 15:20:05 发布

info987623

最新推荐文章于 2024-08-01 15:20:05 发布

阅读量2.8k

点赞数 3

分类专栏：微信小程序

本文链接：https://blog.csdn.net/qq_28098919/article/details/118345175

版权

微信小程序专栏收录该内容

11 篇文章 0 订阅

订阅专栏

通过给 button 组件设置属性open-type=“share”，可以在用户点击按钮后触发 Page.onShareAppMessage 事件，如果当前页面没有定义此事件，则点击后无效果。相关组件：button
wxml：

   <view class="share" bindtap="share" >
     <image src="/static/img/icon_share02@2x.png"></image>
     <button open-type='share' data-id="{{course.id}}" data-title="{{course.title}}"></button>
    </view>

wxss:


.share { 
  width: 48rpx;height: 48rpx;
  position: absolute;
  right: 7px;
  z-index: 99;
  top: 6px;
  
} 
.share image {
  width: 48rpx;height: 48rpx;
}
.share text {
  color: #fff;  
}

.share button {
  height: 100%;
  width: 100%;
  opacity: 0;
  z-index: 999;
  position: absolute;
  right: -24px;
  width: 10rpx;
  top: 1px;
}
.share image{width: 48rpx;height: 48rpx;}

js：

  onShareAppMessage(res) {
    let id = res.target.dataset.id;
    return {
      title:res.target.dataset.title,
      path: `/pages/article/detail/detail?id=${id}`
    }
},