uniapp 开发企业微信小程序时，如何在当前页面真正销毁前或者关闭小程序前调用一个api接口

最新推荐文章于 2025-06-02 09:36:55 发布

疯狂的沙粒

最新推荐文章于 2025-06-02 09:36:55 发布

阅读量1.1k

点赞数 15

分类专栏：默认专栏(前端) 文章标签：小程序 uni-app 微信小程序

本文链接：https://blog.csdn.net/huang3513/article/details/148306073

版权

默认专栏(前端) 专栏收录该内容

40 篇文章

订阅专栏

在 UniApp 开发企业微信小程序时，若需在页面销毁或小程序关闭前调用 API 接口，需结合页面生命周期和应用生命周期实现。以下是具体实现方案及注意事项：

一、在页面销毁前调用 API（页面级）

通过页面生命周期钩子 onUnload 触发销毁前的操作，这是页面卸载的最后时机：

export default {
  onUnload() {
    // 调用销毁前的 API
    this.cleanupBeforeDestroy();
  },
  methods: {
    async cleanupBeforeDestroy() {
      try {
        await uni.request({
          url: '***你的API地址',
          method: 'POST',
          data: { action: 'log_close_event' }
        });
        console.log('销毁前接口调用成功');
      } catch (error) {
        console.error('接口调用失败:', error);
      }
    }
  }
}

二、在小程序关闭前调用 API（应用级）

通过应用生命周期钩子 onHide 监听小程序进入后台（包括关闭、切换应用等操作），此时可执行清理逻辑：

// App.vue
export default {
  onHide() {
    // 统一处理全局关闭事件
    this.globalCleanup();
  },
  methods: {
    async globalCleanup() {
      if (this.isEnterpriseWechat) { // 判断企业微信环境
        await uni.request({
          url: '***你的全局API地址',
          method: 'POST',
          data: { event: 'app_close' }
        });
      }
    }
  }
}

三、增强可靠性的技巧

同步请求优先
使用 uni.request 的 async/await 确保请求发送，但需注意：小程序关闭时可能强制终止未完成的异步任务，建议接口设计为快速响应的轻量级请求。
双保险策略
同时监听 onUnload（页面级）和 onHide（应用级），覆盖以下场景：
- 页面跳转销毁 → 触发 onUnload
- 小程序完全关闭 → 触发 onHide（应用级）

环境判断
企业微信环境下可能需要特殊处理：

// 判断是否在企业微信中运行
const isEnterpriseWechat = uni.getSystemInfoSync().environment === 'wxwork';

四、注意事项

生命周期执行顺序
小程序关闭时，先触发页面级 onUnload，再触发应用级 onHide。若需避免重复调用 API，可通过状态标识控制。

请求超时设置
添加超时逻辑防止阻塞销毁过程：

uni.request({
  timeout: 3000, // 3秒超时
  // ...
});

敏感操作限制
企业微信可能限制关闭前的网络请求，需在真机测试验证接口可行性。

完整代码示例

// 页面逻辑
export default {
  data() {
    return {
      isApiCalled: false // 防止重复调用
    }
  },
  onUnload() {
    if (!this.isApiCalled) {
      this.callDestoryApi('page_unload');
      this.isApiCalled = true;
    }
  },
  methods: {
    async callDestoryApi(eventType) {
      try {
        await uni.request({
          url: 'https://api.example.com/log',
          method: 'POST',
          data: { event_type: eventType },
          timeout: 2000
        });
      } catch (e) {
        console.error('埋点失败:', e);
      }
    }
  }
}

// App.vue 应用级逻辑
export default {
  onHide() {
    if (uni.getSystemInfoSync().environment === 'wxwork') {
      this.callDestoryApi('app_hide');
    }
  }
}