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时又发起了网络请求获取启动图,这两个异步操作叠加导致页面渲染延迟。

优化建议:

  1. 减少App.vue初始化负担
onLaunch: function() {
  // 移除这里的系统信息获取,移至需要使用的页面
  // 或者使用同步方法uni.getSystemInfoSync()
}
  1. 优化loading页面
  • 将网络请求改为本地缓存,避免每次启动都请求
  • 设置请求超时时间,避免长时间等待
  • 使用预加载或骨架屏
  1. 配置原生splashscreen: 在manifest.json中配置原生启动图,覆盖白屏期:
"app-plus": {
  "splashscreen": {
    "autoclose": false,
    "waiting": true,
    "delay": 0
  }
}
回到顶部