在写uniapp时当需要用到HTML页面,其中有用到 <web-view> 来完成目的,但是有个问题是:加载页面会出现1到2秒左右的白屏,那就让人感到体验感很差了。
一、问题猜测分析(个人分析)
可能是网速或框架的问题,还有是加载HTML页面时会先把一些css、js等文件先加载,然后才会渲染页面,这样一来加载就会慢下来了。
二、解决方法
1: 把一些js文件放到里,尽量减少加载时间;
2: 在跳转时用一个遮罩层把白屏给覆盖掉,加个加载中的样式来减少冲突感
用subNVue来写个遮罩层:mask.nvue
<template>
<view class="content">
</view>
</template>
<script>
export default {
data() {
return {
}
},
onReady() {
// #ifdef APP-PLUS
uni.showLoading({
title: '加载中...',
mask: true
});
setTimeout(()=>{
uni.hideLoading();
},3000)
// #endif
},
}
</script>
<style>
.content {
width: 842rpx;
height: 500rpx;
background-color: #000C3B;
}
</style>
web-view页面:
<template>
<view class="content">
<view class="video_list">
<web-view :src="url" @message="handleMessage"></web-view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
url: '',
}
},
onReady() {
// #ifdef APP-PLUS
this.subnvue_open();
setTimeout(()=>{
this.subnvue_close();
},3000);
// #endif
},
onLoad(option) {
this.subnvue_open();
setTimeout(()=>{
this.subnvue_close();
},3000)
setTimeout(()=>{
switch(option.type) {
case 'daily':
this.url = '/hybrid/html/daily.html';
break;
}
},600)
},
onUnload() {
uni.$off('mask');//移除监听配置的原生子窗体
},
methods: {
handleMessage(evt) {
console.log('接收到的消息:' + JSON.stringify(evt.detail.data));
},
//打开配置的原生子窗体
subnvue_open() {
const subNVue = uni.getSubNVueById('mask'); //通过id获取nvue子窗体
subNVue.show('', 300, function(){
// 打开后进行一些操作...
});
},
//关闭配置的原生子窗体
subnvue_close() {
const subNVue = uni.getSubNVueById('mask'); //通过id获取nvue子窗体
subNVue.hide('',300);
},
}
}
</script>
<style>
.content {
background-color: #000C3B;
}
</style>
目前这个方法有时还会出现瞬间的白屏出来,不是很好。有不对或者可以改正的地方欢迎留言指教。有其他解决方法也可以说一下啊!