前言
使用uniapp打包成App后,调试的时候,发现ios应用切换后台一段时间后,再次打开页面白屏,只显示tabBar. 官方有对这个问题的描述,说uniapp会自动处理这种问题.
白屏原因
- wkwebview的app（uni-app和wap2app在iOS上默认就是wkwebview），内存不足时，单个wkwebview会崩溃。也就是所谓的应用还在，而页面白屏。
这个问题在所有使用wkwebview的应用都会出现，比如微信的公众号网页里也存在。在微信小程序里，它做了一个自动恢复手段，可以让jscore存储数据状态，崩溃的wkwebview自动恢复。所以在遇到问题时，会白一下然后恢复渲染。
官方解决方案
- uni-app因为引入了独立的jscore处理数据状态，jscore不会崩溃，所以官方采用了和微信小程序一致的策略，补充自动的白屏恢复能力。
- uni-app中也可以使用nvue来避免这个问题，nvue页面不会出现内存不足引发的白屏崩溃。
我使用的是uniapp vue3 + TS开发,方案一并没有自动处理白屏的问题.方案二还要大量修改原码,毕竟nvue对css写法有大量限制.
我的解决方案
一.封装函数
export const reLoadPage = function (className: string) {
/* #ifdef APP-PLUS */
uni.getSystemInfo({
success: (res) => {
if (res.platform == 'ios') {
const query = uni.createSelectorQuery().in(undefined) as any;
const pathPath = '/' + query._page.route
var isRecovery = true;
query
.select(className)
.boundingClientRect((data: any) => {
isRecovery = false;
})
.exec();
var timer: any = setTimeout(() => {
if (isRecovery) {
uni.reLaunch({
url: pathPath
})
clearTimeout(timer);
timer = null;
}
}, 500)
}
},
})
/* #endif */
}
二.使用
可以在各个页面最外层添加一个
class,我这里class名字为container,在页面的onShow方法中调用上面定义的reLoadPage函数,将类名写进入
注意事项
类名的写法: 类选择器.类名一定不能忘如果你最外层加的是
id, 那需要写成#id名字
<template>
<view class="container">
//视图...
</view>
</template>
<script lang="ts" setup>
import { reLoadPage } from '@/utils/reLoadPage';
import { onShow } from "@dcloudio/uni-app"
onShow(() => {
reLoadPage('.container')
})
</script>
总结
我这里在最外层不写id,是因为id不能重复.还要给每个页面想个id名字-----其实就是懒 哈哈
理论上每个页面都可以添加reLoadPage函数, 我只在tabbar页面添加的, 还是因为懒
如果这篇文章对你有帮助,或者有疑问欢迎留言讨论
