DCloud_UNI_CHB
DCloud_UNI_CHB
  • 发布:2019-01-29 17:04
  • 更新:2023-10-13 16:31
  • 阅读:120003

uni-app 启动界面(splash)参数配置说明 | 启动慢的原因

分类:uni-app

此文档将不再维护,请参考新文档:https://uniapp.dcloud.io/tutorial/app-splashscreen

HBuilderX 1.6.0 版本之后,新增是否等待首页渲染完毕后再关闭启动界面(splash)的配置,App引擎会自动检测首页渲染,若未渲染则不关闭splash,避免显示白屏,提升用户体验。

可在manifest.json文件中进行配置,支持以下三种关闭启动界面(splash)策略:

  • 首页渲染完毕后自动关闭启动界面
  • 首页加载完成后自动关闭启动界面
  • 代码控制关闭启动界面

首页渲染完毕后自动关闭启动界面

打开项目的manifest.json文件,在“App启动界面配置”中的“启动界面选项”下勾选“等待首页渲染完毕后再关闭Splash图”:

源码视图
切换到源码视图界面,在 "app-plus"->"splashscreen" 节点设置 alwaysShowBeforeRender 属性值为 true

    "app-plus" : {  
        "splashscreen" : {  
            "alwaysShowBeforeRender" : true  
        }  
        //...  
    }

提示:

  • App启动时,App引擎自动检测首页渲染情况,若首页未渲染(白屏),则不关闭splash;检测到首页渲染完成则关闭splash;
  • 若启动时间超过10秒,则不管首页是否白屏,都会自动关闭splash

首页加载完成后自动关闭启动界面

打开项目的manifest.json文件,在“App启动界面配置”中的“启动界面选项”下去掉勾选“等待首页渲染完毕后再关闭Splash图”:

源码视图
切换到源码视图界面,在 "app-plus"->"splashscreen" 节点设置 alwaysShowBeforeRender 属性值为 false

    "app-plus" : {  
        "splashscreen" : {  
            "alwaysShowBeforeRender" : false  
        }  
        //...  
    }

提示:
首页加载完成后关闭启动界面,此时首页可能没有完成渲染,在部分设备可能会闪一下白屏(不推荐)

代码控制关闭启动界面

启动界面不会自动关闭,需要开发者在代码中调用plus.navigator.closeSplashscreen()关闭启动界面。
需在“源码视图”中同时设置 alwaysShowBeforeRender 和 autoClose 属性值为 false

源码视图
切换到源码视图界面,在 "app-plus"->"splashscreen" 节点设置如下:

    "app-plus" : {  
        "splashscreen" : {  
            "alwaysShowBeforeRender" : false,  
            "autoclose": false  
        }  
        //...  
    }

提示:
不会自动关闭启动界面,需开发者根据业务逻辑在合适的时机调用 plus.navigator.closeSplashscreen() 关闭启动界面

另,如果uni-app不是v3编译器,请升级为v3,可以大幅提升启动速度:https://ask.dcloud.net.cn/article/36599

5 关注 分享
Trust 银少 5***@qq.com 1***@qq.com 2***@qq.com

要回复文章请先登录注册

尼卡路西

尼卡路西

回复 2***@qq.com :
确实有这个bug,其他页面会显示到启动界面的上面,然后再消失,真是无语
2023-10-13 16:31
9***@qq.com

9***@qq.com

有没有人知道等待首页渲染完毕是指什么 首页的逻辑会执行吗 或者说是会执行哪些生命周期呢
2022-11-10 11:17
2***@qq.com

2***@qq.com

自定义启动图有没有详细步骤啊 为什么自定义启动图之后 会出现底部有tabbar啊 我启动页不是tabbar页面啊
2021-12-09 18:48
i***@igojo.cn

i***@igojo.cn

无效啊,没用
2021-07-05 18:01
9***@qq.com

9***@qq.com

回复 cheihcheung :
兄弟,你这个方法害人呀。这样会导致,返回的时候直接退出APP
2021-05-08 01:24
腾讯CEO马化腾

腾讯CEO马化腾

回复 cheihcheung :
兄弟 没用啊 还是有这个loading
2021-04-30 16:47
1***@163.com

1***@163.com

启动界面会先覆盖某些手机的原生按钮https://static.dingtalk.com/media/lADPDiQ3OS3PnvbNCSTNBDg_1080_2340.jpg_720x720q90g.jpg?bizType=im
2021-04-12 16:40
1***@qq.com

1***@qq.com

iOS版本用过一段时间,就启动不了了,有没有相关经验可以传授一下
2021-03-18 15:20
d***@liangsuan.com

d***@liangsuan.com

回复 cheihcheung :
安卓可以,但是IOS版本延迟后原生状态栏返回键失效,不知道为什么。
2021-03-11 16:52
cheihcheung

cheihcheung

delay没效果!用我这个方式进行亲测,100%可用,而且这1秒中还可以预加载开屏广告
//延迟进入
setTimeout(()=>{
const app = new Vue({
...App,store
})
app.$mount()
},1000)
// #endif
2021-01-22 22:38