uni-app onShareAppMessage被重复执行

发布于 1周前 作者 sinazl 来自 Uni-App

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次

image image

项目信息 详情
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win11
HBuilderX类型 Alpha
HBuilderX版本号 4.26
第三方开发者工具版本号 4.26
基础库版本号 3.51
项目创建方式 HBuilderX

3 回复

mixin生命周期函数不会覆盖,会依次全部触发。 建议mixin 一个 methods里面的方法,methods里面的方法是覆盖操作


无法解决我的问题 需要全局onShareAppMessage,在部分vue页面需要覆盖onShareAppMessage方法进行定制开发,但是触发两次的问题会导致后台逻辑bug,有好的办法吗?

在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是在页面的生命周期函数中动态添加的,确保它只被添加一次。例如,避免在onLoadonReady等生命周期函数中重复添加。

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,以及如何避免其被重复执行的一些常见方法。根据你的具体情况,检查并调整代码,以确保分享功能的正常运行。

回到顶部