关于vue.js:uniapp设置动态入口

在做我的项目的时候遇到一个这样的需要:首次启动app时展现的是登陆页,在登陆过后,第二次启动app时展现的首页。简略的说就是依据不同的场景须要展现不同的页面。

起初我的想法是在app启动时判断场景,从而生成不同的路由,或者说通过代码去批改mainfest.json里的入口文件配置。然而很遗憾uni-app并不反对这种做法。

咱们能做的只能是固定入口文件,在app启动时判断场景而后再跳转到相应的页面。

App.vue:

onLaunch: function() {

    // 判断登陆状态
    const userInfo = uni.getStorageSync('USER_INFO')

    if(userInfo) { // 有登陆状态
        uni.switchTab({
            url: 'pages/chat/sessions/sessions'
        })
    }else { // 未登陆
        uni.reLaunch({
            url: 'pages/login/login',
        })
    }

}

然而这种做法会呈现一个问题:app启动时onLaunch办法和页面渲染时同时进行的,也就是说咱们逻辑判断还没完结的时候就曾经进入到固定的入口文件中开始渲染页面了,待到逻辑判断完结再跳转到相应的页面,这种体验十分不好。

解决办法:

通过缩短启动页停留时间,等到onLaunch办法执行结束之后再敞开启动页,这样就不会呈现页面闪动和跳转的痕迹。

mainfest.json:设置启动页敞开形式为手动

"splashscreen" : {
    "alwaysShowBeforeRender" : false,
    "waiting" : false,
    "autoclose" : false, // 设置为手动敞开启动图
    "delay" : 0
}

App.vue

// 判断登陆状态
const userInfo = uni.getStorageSync('USER_INFO')

if(userInfo) { // 有登陆状态
    plus.navigator.closeSplashscreen()
}else { // 未登陆
    uni.reLaunch({
        url: 'pages/login/login',
        success() {
            // 手动敞开启动页(因为App.onLaunch办法和页面渲染是同时进行的,只有通过缩短启动页的办法能力防止页面闪动)
            plus.navigator.closeSplashscreen()
        }
    })
}

以上,完满解决,亲测无效。

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理