app.vue 到page.json第一个页面之间会有3-4秒的白屏延迟 uni-app 并且page.json中也只配置了一个页面
app.vue 到page.json第一个页面之间会有3-4秒的白屏延迟 uni-app 并且page.json中也只配置了一个页面
示例代码:
devEco studio 版本是 5.1.1 release
操作步骤:
多次测试出现一样的情况
预期结果:
1秒内延迟
实际结果:
多次测试还是有3-4秒白屏
bug描述:
App.vue代码:
export default {
onLaunch: function() {
uni.getSystemInfo({
success: function(res) {
const screenWidth = res.screenWidth; // 屏幕宽度
uni.setStorageSync('screenWidth', `?image_process=resize,w_${screenWidth}`);
},
fail: function(error) {
console.log('获取系统信息失败', error);
}
});
// plus.navigator.closeSplashscreen();
// //应用初始化完成触发(只触发一次)
// const token = uni.getStorageSync('user_token'); //获取token
// if (token) {
// //存在则关闭启动页进入首页
// plus.navigator.closeSplashscreen();
// } else {
// //不存在则跳转至登录页
// uni.reLaunch({
// url: "/pages/login_dl/login_dl",
// success: () => {
// plus.navigator.closeSplashscreen();
// }
// })
// }
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
loading页面代码
export default {
data() {
return {
seconds: 3,
img: '',
timer: null,
w: 0,
h: 0
}
},
onShow() {
if (this.seconds <= 0) {
this.Ontg()
}
},
onLoad() {
this.Onget()
var _this = this
// 监听是否有网络
var CALLBACK = function (res) {
if (res.networkType === "none") {
console.log("当前无网络");
} else {
console.log("当前网络正常");
clearInterval(this.timer)
//_this.Onget()
}
}
uni.offNetworkStatusChange(CALLBACK)
uni.onNetworkStatusChange(CALLBACK);
},
onUnload() {
clearInterval(this.timer)
},
methods: {
Onget() {
this.request({
url: '/souce/app_lodimg',
method: 'GET',
}).then(res => {
this.img = res.msg[0];
this.w = uni.getSystemInfoSync().screenWidth * 2;
this.h = uni.getSystemInfoSync().screenHeight * 2;
this.seconds = 3
this.timer = setInterval(() => {
this.seconds--
if (this.seconds <= 0) {
clearInterval(this.timer)
uni.switchTab({
url: '/pages/index/index'
})
return
}
}, 1000)
}, err => { })
},
Ontg() {
clearInterval(this.timer)
uni.reLaunch({
url: "/pages/index/index",
success: () => {
plus.navigator.closeSplashscreen();
}
})
}
}
}
page.json 代码:
{
"easycom": {
"autoscan": true,
"custom": {
"^u--(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
"^up-(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
"^u-([^-].*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue"
}
},
"pages": [
{
"path": "pages/loading/loading",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"height": "50px",
"fontSize": "10px",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "static/tabBar/icon_1.png",
"selectedIconPath": "static/tabBar/icon_1.png",
"text": "首页"
}, {
"pagePath": "pages/vehicle/vehicle",
"iconPath": "static/vehicle/gwc.png",
"selectedIconPath": "static/vehicle/gwc.png",
"text": "购物车"
}, {
"pagePath": "pages/my/my",
"iconPath": "static/tabBar/icon_2.png",
"selectedIconPath": "static/tabBar/icon_2.png",
"text": "我的"
}]
},
"uniIdRouter": {}
}

更多关于app.vue 到page.json第一个页面之间会有3-4秒的白屏延迟 uni-app 并且page.json中也只配置了一个页面的实战教程也可以访问 https://www.itying.com/category-93-b0.html
2 回复
我定位了,是你的 css 太大了,你观察你的 unpackages/dist/dev/.app-harmony/app.css 体积非常大,影响了页面初始化。你看下如何做裁剪,大部分 css 应该是不必要的。
更多关于app.vue 到page.json第一个页面之间会有3-4秒的白屏延迟 uni-app 并且page.json中也只配置了一个页面的实战教程也可以访问 https://www.itying.com/category-93-b0.html
白屏延迟的主要原因是App.vue的onLaunch中执行了uni.getSystemInfo异步操作,同时在loading页面onLoad时又发起了网络请求获取启动图,这两个异步操作叠加导致页面渲染延迟。
优化建议:
- 减少App.vue初始化负担:
onLaunch: function() {
// 移除这里的系统信息获取,移至需要使用的页面
// 或者使用同步方法uni.getSystemInfoSync()
}
- 优化loading页面:
- 将网络请求改为本地缓存,避免每次启动都请求
- 设置请求超时时间,避免长时间等待
- 使用预加载或骨架屏
- 配置原生splashscreen: 在manifest.json中配置原生启动图,覆盖白屏期:
"app-plus": {
"splashscreen": {
"autoclose": false,
"waiting": true,
"delay": 0
}
}

