项目场景:
最近封装了一个组件,本来想在组件中实现分享转发功能,结果发现组件不支持分享转发写法,后来想到了通过自定义事件来实现分享。
在微信小程序中,组件与页面之间的数据传递可以通过自定义事件来实现。组件可以触发一个自定义事件,并将要传递的数据作为事件的参数。页面可以监听这个自定义事件,并在事件处理函数中获取到这些数据。
1. 在组件中触发自定义事件
在组件的 saveshareinfo 方法中,首先获取到要分享的数据,然后使用 this.triggerEvent 方法来触发一个自定义事件,并将要分享的数据作为事件的参数:
组件内的html
<button data-cid="{{item}}" catchtap="saveshareinfo" class="share-btn" open-type='share' style="width: 100%;"></button>
组件js
saveshareinfo: function (e) {
const sharedata = e.currentTarget.dataset.cid;
this.setData({
currentShareItem: e.currentTarget.dataset.cid
});
// 触发一个自定义事件,将要分享的数据传递给页面
this.triggerEvent('share', this.data.currentShareItem);
}
2. 在页面中监听自定义事件
提示:这里填写问题的分析:
在页面中,你需要在组件的标签中添加一个 bind:share=“handleShare” 属性,以便监听这个自定义事件:
<my-videolist bind:share="handleShare" newsList="{{shortvideonews}}"></my-videolist>
3. 在页面中处理自定义事件
在页面的 handleShare 方法中,你可以通过 e.detail 获取到组件传递过来的数据,并将其保存到页面的数据中:
handleShare: function (e) {
// 保存要分享的数据
this.setData({
shareVdData: e.detail
});
}
4. 在页面中处理分享
在页面的 onShareAppMessage 方法中,你可以使用 handleShare 方法中保存的数据来构造分享的内容:
onShareAppMessage: function () {
var data = this.data.shareVdData;
var encurl = encodeURIComponent(data.link_content);
var url1 = `/pages/webview/webview?url=${encurl}`;
return {
imageUrl: data.img, // 图片 URL
title: data.title, // 分享的标题
path: url1, // 分享的路径
success: function (res) {
// 分享成功的回调函数
console.log('分享成功');
},
fail: function (res) {
// 分享失败的回调函数
console.log('分享失败');
}
};
}