通过给 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}`
}
},
按钮样式