uniapp ＜web-view＞页面跳转出现白屏解决方法_uniapp webview页面白屏问题

在写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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

目前这个方法有时还会出现瞬间的白屏出来，不是很好。有不对或者可以改正的地方欢迎留言指教。有其他解决方法也可以说一下啊！