uniapp监听页面变化
时间: 2025-01-31 08:04:22 浏览: 43
### 如何在 UniApp 中监听页面生命周期变化
#### 监听页面初始化 `onInit`
每当页面实例被创建时会触发此事件。开发者可以在该钩子内执行一些必要的初始化操作。
```javascript
export default {
onInit() {
console.log('页面已初始化');
}
}
```
[^2]
#### 监听页面加载 `onLoad`
当页面加载时调用,此时可以获取到传入的参数。这通常用于接收来自其他页面传递过来的数据并做相应处理。
```javascript
export default {
onLoad(option) {
console.log(`页面加载, 接收到参数: ${JSON.stringify(option)}`);
}
}
```
[^3]
#### 监听页面显示 `onShow`
每次页面出现在屏幕上都会触发这个回调函数,无论是首次访问还是从后台切换回来。
```javascript
export default {
onShow() {
console.log('页面显示');
}
}
```
[^4]
#### 监听页面隐藏 `onHide`
当页面即将移出视线范围之前会被调用,比如点击返回按钮或者跳转至另一个页面前。
```javascript
export default {
onHide() {
console.log('页面隐藏');
}
}
```
#### 错误捕获 `onError`
如果应用程序运行期间发生错误,则会触发此方法。这对于调试非常有用,可以帮助定位问题所在位置。
```javascript
export default {
onError(msg) {
console.error(`程序报错:${msg.message}`);
}
}
```
[^1]
#### 处理未捕捉的 Promise 拒绝 `onUnhandledRejection`
对于那些没有被捕获的 promise rejection 可以通过定义此类方法来进行统一管理。
```javascript
export default {
onUnhandledRejection(reason, promise) {
console.warn(`存在未处理的Promise拒绝:`, reason);
}
}
```
#### 页面不存在监听 `onPageNotFound`
当请求了一个不存在的路由地址时将会触发此事件处理器。
```javascript
export default {
onPageNotFound(res) {
console.log(`尝试打开未知路径:${res.path}`);
}
}
```
#### 主题变更通知 `onThemeChange`
随着设备设置更改而自动响应的主题模式转换可以通过这种方式来感知。
```javascript
export default {
onThemeChange(newSetting) {
const { theme } = newSetting;
console.log(`当前主题变更为:${theme === 'dark' ? '深色' : '浅色'}`);
}
}
```
阅读全文
相关推荐


















