uni-app onShareAppMessage被重复执行
uni-app onShareAppMessage被重复执行
示例代码:
Vue.mixin({
async onShareAppMessage() {
let data = getUserInfo();
console.log(data, "Vue.mixin");
// 路径/applet/share/addShare
let res = await addShare({
beCurrentId: null,
userId: data.id,
shareRoute: "",
openId: data.openId,
});
console.log(`/pages/home/index?id=${res.data}`);
return {
title: "", // 默认为小程序名称
path: `/pages/home/index?id=${res.data}`, // 默认为当前页面路径
imageUrl: `${baseImage}share/homeShare.png`, // 默认为当前页面的截图
};
},
//开启朋友圈分享 限定安卓
// onShareTimeline() {},
}); async onShareAppMessage() {
let data = getUserInfo();
console.log(data, "首页onShareAppMessage");
// 路径/applet/share/addShare
let res = await addShare({
beCurrentId: null,
userId: data.id,
shareRoute: "",
openId: data.openId,
});
console.log(`/pages/home/index?id=${res.data}`);
// C:\project\static\images\planningIcon
return {
title: "", // 默认为小程序名称
path: `/pages/home/index?id=${res.data}`, // 默认为当前页面路径
imageUrl: `${baseImage}share/homeShare.png`, // 默认为当前页面的截图
};
},
操作步骤:
Vue.mixin中 调用onShareAppMessage,在页面中也写了onShareAppMessage,后理论上Vue.mixin中的onShareAppMessage会被覆盖
但是实际测试执行了2次
预期结果:
执行一次
实际结果:
执行一次
bug描述:
Vue.mixin中 调用onShareAppMessage,在页面中也写了onShareAppMessage,后理论上Vue.mixin中的onShareAppMessage会被覆盖
但是实际测试执行了2次
项目信息 | 详情 |
---|---|
产品分类 | uniapp/小程序/微信 |
PC开发环境操作系统 | Windows |
PC开发环境操作系统版本号 | win11 |
HBuilderX类型 | Alpha |
HBuilderX版本号 | 4.26 |
第三方开发者工具版本号 | 4.26 |
基础库版本号 | 3.51 |
项目创建方式 | HBuilderX |
mixin生命周期函数不会覆盖,会依次全部触发。
建议mixin 一个 methods里面的方法,methods里面的方法是覆盖操作
在uni-app开发中,onShareAppMessage
函数用于定义页面或应用的分享行为。如果你发现onShareAppMessage
被重复执行,通常可能是由于页面生命周期管理不当或者事件绑定问题导致的。以下是一些常见的场景和相应的代码案例,帮助你排查和解决这一问题。
1. 确保onShareAppMessage
只在需要时定义
首先,确保onShareAppMessage
只在需要分享的页面定义,且定义位置正确。通常,这个函数应该定义在页面的methods
对象中。
export default {
methods: {
onShareAppMessage() {
return {
title: '分享标题',
path: '/pages/sharePage/sharePage',
imageUrl: '/static/share-image.png'
};
}
}
}
2. 检查页面生命周期函数
如果onShareAppMessage
是在页面的生命周期函数中动态添加的,确保它只被添加一次。例如,避免在onLoad
或onReady
等生命周期函数中重复添加。
export default {
onLoad() {
// 错误的做法:每次页面加载都重新绑定,可能导致重复执行
// this.$mp.page.onShareAppMessage = this.customShare;
},
methods: {
customShare() {
return {
title: '动态绑定的分享标题',
path: '/pages/dynamicShare/dynamicShare'
};
}
}
}
3. 检查全局事件监听
如果使用了全局事件监听器来管理分享功能,确保事件监听器只被添加一次。使用uni.offShareAppMessage
在不需要时移除监听器。
// 添加全局分享监听器
uni.onShareAppMessage(function (res) {
return {
title: '全局分享的标题',
path: '/pages/globalShare/globalShare'
};
});
// 在适当的时候移除监听器,避免重复执行
// uni.offShareAppMessage(functionRef); // 注意:这里的functionRef应该是之前添加的监听器函数引用
4. 使用Vuex或全局状态管理
如果你的应用使用了Vuex或全局状态管理来控制分享逻辑,确保状态更新逻辑正确,避免不必要的重复触发。
// 假设有一个全局状态管理分享配置
// store.state.shareConfig = { enabled: true, title: '配置分享的标题' };
export default {
computed: {
shareConfig() {
return this.$store.state.shareConfig;
}
},
methods: {
onShareAppMessage() {
if (this.shareConfig.enabled) {
return {
title: this.shareConfig.title,
path: '/pages/configuredShare/configuredShare'
};
}
return false; // 禁用分享
}
}
}
以上代码案例展示了如何正确设置和使用onShareAppMessage
,以及如何避免其被重复执行的一些常见方法。根据你的具体情况,检查并调整代码,以确保分享功能的正常运行。