uniapp的sendbeacon如何使用

我在使用uniapp的sendBeacon方法时遇到了问题，总是无法成功发送数据。具体表现为：调用sendBeacon后没有报错，但后端接收不到任何请求。我的代码如下：

plus.navigator.sendBeacon('https://example.com/api', { key: 'value' });

请问：

  1. 在uniapp中正确使用sendBeacon的完整流程是什么？
  2. 这个方法有哪些必须注意的限制条件？
  3. 为什么会出现无报错但后端收不到数据的情况？

开发环境：HBuilder X 3.6.11，测试平台为安卓真机。

2 回复

在uniapp中，sendBeacon用于异步发送少量数据到服务器，常用于页面卸载前的日志上报。

使用示例：

uni.reportAnalytics('event_name', {
  key: 'value'
});

或者使用uni.request，但sendBeacon在页面关闭时更可靠。注意uniapp对sendBeacon的支持可能有限，建议查看官方文档确认兼容性。


在 UniApp 中使用 sendBeacon 方法，主要用于在页面卸载（如关闭或刷新）时异步发送少量数据到服务器，确保数据可靠传输且不阻塞页面卸载。UniApp 基于 Vue.js，因此可以直接在 Vue 组件的生命周期钩子中使用浏览器的 navigator.sendBeacon API。

基本用法

sendBeacon 方法接受两个参数：

  • url：数据发送的目标 URL。
  • data（可选）：要发送的数据，可以是字符串、FormData、Blob 等类型。

代码示例

以下是一个在 UniApp 页面中使用的示例，假设在页面卸载时发送数据到服务器：

export default {
  data() {
    return {
      // 示例数据
      analyticsData: {
        event: 'page_unload',
        timestamp: Date.now(),
        userAgent: navigator.userAgent
      }
    };
  },
  mounted() {
    // 在页面加载时监听 beforeunload 事件（适用于浏览器环境）
    window.addEventListener('beforeunload', this.sendData);
  },
  beforeDestroy() {
    // 移除事件监听，避免内存泄漏
    window.removeEventListener('beforeunload', this.sendData);
  },
  methods: {
    sendData() {
      // 将数据转换为字符串（sendBeacon 支持字符串、FormData 等）
      const data = JSON.stringify(this.analyticsData);
      
      // 使用 sendBeacon 发送数据
      const success = navigator.sendBeacon('https://yourserver.com/collect', data);
      
      if (success) {
        console.log('数据发送成功');
      } else {
        console.error('数据发送失败');
        // 可备选方案：使用同步 XMLHttpRequest 或 localStorage 暂存
      }
    }
  }
};

注意事项

  1. UniApp 环境兼容性：sendBeacon 是浏览器 API，在 UniApp 的 H5 环境中可用，但在小程序或 App 端可能不支持（小程序需使用其自有 API，如 wx.request）。建议通过条件编译处理不同平台：

    // #ifdef H5
navigator.sendBeacon(url, data);
// #endif

  2. 数据格式：服务器需支持接收数据（如设置 Content-Type 为 application/json）。如果发送 FormData，服务器需解析表单数据。

  3. 异步特性：sendBeacon 是异步的，不阻塞页面卸载，但无法获取响应结果。确保数据轻量（通常限制为 64KB）。

  4. 备选方案：如果 sendBeacon 失败（返回 false），可考虑使用 localStorage 暂存数据，下次页面加载时重发。

总结

在 UniApp 的 H5 环境中，直接使用 navigator.sendBeacon 实现页面卸载时的数据上报。注意平台差异，并处理可能的数据发送失败情况。

回到顶部