uni-app onlaunch生命周期内navigateto跳转页面注意
uni-app onlaunch生命周期内navigateto跳转页面注意
在onlaunch生命周期内进行页面的跳转,需要注意:可能会和pages.json内配置的第一个页面跳转时机冲突。
造成的错误是手机端页面白屏,控制台报错:
11:47:40.766 Mon May 20 2019 11:47:45 GMT+0800 (CST) Page route 错误(system error)
11:47:40.786 navigateTo with an already exist webviewId 1
11:47:40.806 undefined
11:47:41.006 Expected updated data but get first rendering data at uniapp://ready:182
11:47:41.028 webviewScriptError
11:47:41.046 Expected updated data but get first rendering data
11:47:41.066 Error: Expected updated data but get first rendering data
11:47:41.086 at F (uniapp://ready:182:679403)
11:47:41.106 at uniapp://ready:182:681248
11:47:41.126 at Array.forEach (native)
11:47:41.155 at uniapp://ready:182:681228
11:47:41.187 at window.dispatchGenerateFunc (file:///storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/HBuilder/www/__uniappview.html:40:30)
此时需要延迟做跳转处理。
由于性能优化,HBuilderX 1.9.8和HBuilderX1.9.4的执行时机有所不同。一些在HBuilderX 1.9.4下无需延时的代码,在升级到HBuilderX 1.9.8报错。先请延迟处理。
在HBuilderX 1.9.9+版本,已在底层修复此问题,自动兼容冲突,无需开发者再写延时代码。
如果使用新版的开发者有类似问题,已经不是这个问题了,请另行开贴详细说明
在 uni-app
中,onLaunch
生命周期是应用启动时自动执行的函数,通常用于执行一些全局的初始化操作。在 onLaunch
生命周期内进行页面跳转(如使用 navigateTo
)需要注意一些事项,比如避免因为跳转操作导致应用启动流程被打断,或者确保跳转条件已经满足。
下面是一个在 onLaunch
中使用 navigateTo
跳转的代码示例,同时会包含一些注意事项的处理方式:
// main.js 或 app.js
export default {
onLaunch: function () {
// 假设我们有一个异步操作,比如检查用户登录状态
checkUserLoginStatus().then(isLoggedIn => {
if (isLoggedIn) {
// 用户已登录,跳转到首页
uni.navigateTo({
url: '/pages/home/home'
});
} else {
// 用户未登录,跳转到登录页
uni.navigateTo({
url: '/pages/login/login'
});
}
}).catch(error => {
console.error('检查用户登录状态失败:', error);
// 处理错误,比如显示错误提示
uni.showToast({
title: '检查登录状态失败',
icon: 'none'
});
// 可以选择跳转到默认页面或保持在当前页面
// uni.navigateTo({ url: '/pages/error/error' });
});
// 注意:不要在 onLaunch 中进行过多的同步阻塞操作,
// 以免影响应用启动速度和用户体验。
// 如果需要在应用启动时立即执行某些操作(不依赖于异步结果),
// 可以将它们放在 onLaunch 的同步代码块中。
},
// 其他生命周期函数...
};
// 假设的异步函数,用于检查用户登录状态
function checkUserLoginStatus() {
return new Promise((resolve, reject) => {
// 模拟异步操作,比如从服务器获取登录状态
setTimeout(() => {
const isLoggedIn = true; // 这里应该根据实际情况获取登录状态
resolve(isLoggedIn);
}, 1000);
});
}
注意事项
-
异步操作:在
onLaunch
中进行页面跳转时,如果依赖于异步操作的结果(如检查用户登录状态),应确保异步操作完成后再进行跳转。 -
错误处理:对于异步操作,应添加错误处理逻辑,以防操作失败时应用崩溃或用户体验不佳。
-
避免同步阻塞:尽量避免在
onLaunch
中进行过多的同步阻塞操作,以免影响应用启动速度和用户体验。 -
跳转条件:确保跳转条件已经满足,比如检查目标页面是否存在,避免因为跳转目标不存在而导致应用异常。