在 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');
}
}
}
通过上述方案,可覆盖页面销毁和小程序关闭两种场景。建议在真机环境下测试不同操作(如直接关闭小程序、返回桌面、页面跳转等)对生命周期的触发影响。