tv-pro/uni_modules/yykj-tv/pages/home/home1.vue

<template>
	<view>
		<web-view :src="url" @onPostMessage="onMessage" @error="onWebViewError"></web-view>
		<view v-if="loading" class="loading">页面加载中...</view>
		<view v-if="loadError" class="error">
			页面加载失败
			<button @tap="retryLoad">重新加载</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: '',
				originalUrl: 'http://192.168.100.201',
				loading: true,
				loadError: false
			};
		},
		onLoad(options) {
			this.initWebView()
		},
		methods: {
			initWebView() {
				this.loading = true
				this.loadError = false
				
				const timestamp = new Date().getTime()
				this.url = `${this.originalUrl}?timestamp=${timestamp}`
				
				// 设置超时检测
				setTimeout(() => {
					if (this.loading) {
						this.loading = false
						this.loadError = true
					}
				}, 10000) // 10秒超时
				
				uni.onNetworkStatusChange((res) => {
					if (res.isConnected && this.loadError) {
						this.retryLoad()
					}
				})
			},
			
			onWebViewError(e) {
				console.error('WebView加载错误:', e)
				this.loading = false
				this.loadError = true
			},
			
			onMessage(e) {
				// WebView内部发送的消息，可以用于确认页面加载完成
				this.loading = false
				this.loadError = false
			},
			
			retryLoad() {
				this.initWebView()
			}
		},
		onUnload() {
			uni.offNetworkStatusChange()
		}
	}
</script>

<style>
.loading, .error {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	z-index: 9999;
}
</style>