uni-app onlaunch生命周期内navigateto跳转页面注意

发布于 1周前 作者 itying888 来自 Uni-App

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+版本,已在底层修复此问题,自动兼容冲突,无需开发者再写延时代码。

如果使用新版的开发者有类似问题,已经不是这个问题了,请另行开贴详细说明


1 回复

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);
    });
}

注意事项

  1. 异步操作:在 onLaunch 中进行页面跳转时,如果依赖于异步操作的结果(如检查用户登录状态),应确保异步操作完成后再进行跳转。

  2. 错误处理:对于异步操作,应添加错误处理逻辑,以防操作失败时应用崩溃或用户体验不佳。

  3. 避免同步阻塞:尽量避免在 onLaunch 中进行过多的同步阻塞操作,以免影响应用启动速度和用户体验。

  4. 跳转条件:确保跳转条件已经满足,比如检查目标页面是否存在,避免因为跳转目标不存在而导致应用异常。

回到顶部