Uniapp项目中onShow和onHide的区别

1. 触发时机

1.1 onShow

• 触发时机：小程序从后台进入前台显示时触发。

• 具体场景：

  • 用户从其他应用切换回小程序。
  • 用户从手机桌面打开小程序。
  • 用户从微信发现页面打开小程序。

• 触发频率：每次小程序从后台进入前台时都会触发。

1.2 onHide

• 触发时机：小程序从前台进入后台时触发。

• 具体场景：

  • 用户点击手机的“返回”按钮，小程序被切换到后台。
  • 用户从小程序切换到其他应用。
  • 用户从小程序切换到手机桌面。

• 触发频率：每次小程序从前台进入后台时都会触发。

2. 用途

2.1 onShow

• 主要用途：

  • 恢复状态：恢复页面的状态，例如重新加载数据或恢复用户操作。
  • 更新数据：从服务器获取最新的数据，更新页面内容。
  • 恢复动画：如果页面有动画效果，可以在 onShow 中重新启动动画。
  • 处理通知：处理在后台期间收到的通知，例如消息推送。

• 示例代码：

App({
    onShow: function (options) {
        console.log('小程序进入前台');
        // 检查是否有新的消息推送
        if (options.scene === 'new_message') {
            this.updateMessages();
        }
        // 重新加载数据
        this.loadData();
    },
    updateMessages: function () {
        // 更新消息列表
    },
    loadData: function () {
        // 从服务器加载最新数据
    }
});

2.2 onHide

• 主要用途：

  • 清理资源：释放不需要的资源，例如停止计时器、关闭网络请求等。
  • 暂停操作：暂停一些不需要在后台运行的操作，例如暂停视频播放、暂停动画等。
  • 保存状态：保存当前页面的状态，以便在 onShow 时恢复。

• 示例代码：

App({
    onHide: function () {
        console.log('小程序进入后台');
        // 停止视频播放
        this.stopVideo();
        // 清理计时器
        clearInterval(this.timer);
    },
    stopVideo: function () {
        // 停止视频播放
    }
});

3. 参数

3.1 onShow

• 参数：onShow 函数接收一个参数 options，包含小程序启动时的参数。

  • options.path：页面路径。
  • options.query：页面路径参数。
  • options.scene：场景值，例如通过分享卡片打开小程序时的场景值。

• 示例代码：

App({
    onShow: function (options) {
        console.log('小程序进入前台', options);
        if (options.scene === 'share') {
            console.log('通过分享卡片打开小程序');
        }
    }
});

3.2 onHide

• 参数：onHide 函数不接收任何参数。

4. 使用场景

4.1 onShow

• 场景 1：用户从后台切换回小程序，需要更新页面数据。

  • 示例：用户在后台期间有新的消息推送，需要在 onShow 中更新消息列表。

• 场景 2：用户从其他应用切换回小程序，需要恢复页面状态。

  • 示例：用户在后台期间进行了某些操作，需要在 onShow 中恢复这些操作的状态。

4.2 onHide

• 场景 1：用户切换到其他应用，需要暂停一些操作。

  • 示例：用户切换到其他应用时，暂停视频播放，避免浪费资源。

• 场景 2：用户切换到其他应用，需要清理一些资源。

  • 示例：用户切换到其他应用时，清理计时器，避免计时器在后台继续运行。

5. 总结

• onShow：用于处理小程序从后台进入前台时的逻辑，适合恢复状态、更新数据、处理通知等。
• onHide：用于处理小程序从前台进入后台时的逻辑，适合清理资源、暂停操作、保存状态等。