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

34次阅读

共计 984 个字符,预计需要花费 3 分钟才能阅读完成。

在做我的项目的时候遇到一个这样的需要: 首次启动 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()}
    })
}

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

正文完
 0