Rongshi
Rongshi
  • 发布:2021-07-30 11:30
  • 更新:2022-01-07 17:33
  • 阅读:4225

打包APP 页面出现白屏最新解决方案

分类:uni-app

首先还是应该将tabbar页面用nvue编写,就不会出现这种问题了。
但是我的使用了过多组件,相当于要重构了。。。就放弃改为nvue了。下面是我根据之前版本的方法修改的,大概能解决大部分问题?

先贴原来用的方法,这个是在社区找到的,新版不能使用原因请看注释

function reloadCurrentPage(_self, isTab = true) {  
    // #ifdef APP-PLUS  
    if (plus.os.name === 'iOS') {  
        var route = _self.$scope.route  
        var data = _self.$scope.options && _self.$scope.options.data  
        var url = '/' + route  
        if (data) {  
            url = '/' + route + '?data=' + data  
        }  
        var isRecovery = true;  
        const query = uni.createSelectorQuery().in(_self);  
        //新版本这里在获取节点失败后不再调用boundingClientRect方法了  
        query.select('#containerId').boundingClientRect(data => {  
            isRecovery = false  
        }).exec();  
        setTimeout(() => {  
            if (isRecovery) {  
                if (isTab) {  
                    uni.reLaunch({  
                        url  
                    })  
                } else {  
                    uni.redirectTo({  
                        url  
                    })  
                }  
            }  
        }, 600)  
    }  
    // #endif  
}

然后我根据这个改了一版,在使用前需要以下条件
1、需要一个全局挂载的工具类,Vue.prototype.$utils = utils
2、在需要使用的页面(一般为tab页)最外层<view>需要设置为同一个class名称
3、在onshow方法调用
目前好像就tab页出现白屏比较严重,只需要在tabbar页使用应该就够了

let pageList = {};  
const utils = {  
    reloadCurrentPage: function(_self, isTab = true) {  
        // #ifdef APP-PLUS  
        var route = _self.$scope.route  
        var data = _self.$scope.options && _self.$scope.options.data  
        var url = '/' + route  
        if (data) {  
            url = '/' + route + '?data=' + data  
        }  
        var isRecovery = true;  
        let newTime = Date.now();  
        if (pageList[url]) {  
            const query = uni.createSelectorQuery().in(_self);  
            //这里select()中替换为自己的样式class名称  
            query.select('.container').fields({size:true}, data => {  
                isRecovery = false  
            }).exec();  
            setTimeout(() => {  
                if (isRecovery) {  
                    //如果获取不到节点  
                    //确保只刷新一次  
                    if (newTime - pageList[url] > 3000) {  
                        //超过3秒才重新刷新,这里设置几秒就行,目的是防止无限刷新  
                        //因为刷新后页面肯定会出来,但是立马再次调用该方法不一定能获取节点  
                        pageList[url] = newTime;  
                        if (isTab) {  
                            uni.reLaunch({  
                                url  
                            })  
                        } else {  
                            uni.redirectTo({  
                                url  
                            })  
                        }  
                    }  
                }  
            }, 600)  
        } else {  
            pageList[url] = newTime;  
        }  
        // if (plus.os.name === 'iOS') {  

        // }  
        // #endif  
    }  
}
1 关注 分享
9***@qq.com

要回复文章请先登录注册

1***@qq.com

1***@qq.com

大佬如何给dom添加containerId
2022-01-07 17:33
5***@qq.com

5***@qq.com

回复 qiki08 :
在onshow里调用方法的时候 加一个1s定时器,onload要比onshow要延迟1s左右
2021-09-23 17:10
qiki08

qiki08

回复 5***@qq.com :
请问有新贴了吗?
2021-09-23 17:03
5***@qq.com

5***@qq.com

回复 Rongshi :
https://ask.dcloud.net.cn/question/131038,你好,这个是我的使用方法和问题复现,可以看一下
2021-09-17 17:24
5***@qq.com

5***@qq.com

回复 Rongshi :
那我发个帖子吧 然后把视频和截图发里,稍等
2021-09-17 17:21
Rongshi

Rongshi (作者)

回复 5***@qq.com :
说一下你怎么用的,有截图什么的最好
2021-09-17 17:11
5***@qq.com

5***@qq.com

你好,使用这个方法之后,屏闪比较严重,如何解决?会连着刷新几次之后才恢复正常
2021-09-17 16:23
Rongshi

Rongshi (作者)

回复 少年时 :
_self就是this引用,搞过ios的应该好理解。这个相当于this.$scope.route 获取当前页面路由地址,具体this.$scope的你看一下vue和uni里面使用方式
2021-08-10 09:54
少年时

少年时

_self.$scope.route 这是个什么参数
2021-08-09 11:20
Rongshi

Rongshi (作者)

回复 9***@qq.com :
白屏原因是手机内存爆了后,webview回收导致的,可以多开大内存应用试一下
2021-08-04 13:44