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

<template>
	<view>
		<web-view v-if="urlAvailable" :src="url"></web-view>
		<view v-else class="error-container">
			<text class="error-text">无法访问目标地址，请检查网络连接</text>
			<button type="primary" @tap="retryConnection">重试</button>
		</view>
	</view>
</template>

<script>
	import { write } from '@/uni_modules/yk-log'
	export default {
		data() {
			return {
				url: 'http://192.168.100.201',
				urlAvailable: false,
				logMessages: [] // 用于收集日志
			};
		},
		onLoad(options) {
			this.addLog('🏠 home1页面开始加载')
			console.log('📄 home1 onLoad 执行', options)
			this.initWebView()
		},
		onReady() {
			this.addLog('✅ home1页面准备就绪')
			console.log('✅ home1 onReady 执行')
		},
		onShow() {
			this.addLog('👀 home1页面显示')
			console.log('✅ home1 onShow 执行')
		},
		onHide() {
			this.addLog('🔚 home1页面隐藏')
			console.log('🔚 home1 onHide 执行')
		},
		onUnload() {
			this.addLog('🗑️ home1页面卸载')
			console.log('🗑️ home1 onUnload 执行')
		},
		onError(err) {
			this.addLog('💥 home1页面错误: ' + err)
			console.error('💥 home1页面错误:', err)
		},
		methods: {
			addLog(message) {
				const timestamp = new Date().toLocaleTimeString()
				this.logMessages.push(`[${timestamp}] ${message}`)
				console.log(message)
				write(message)
			},
			async initWebView() {
				this.addLog('🌐 开始初始化WebView')
				this.addLog(`🔗 检查URL可达性: ${this.url}`)
				
				// 检查URL是否可达
				const isReachable = await this.checkUrlReachability(this.url)
				
				if (isReachable) {
					this.urlAvailable = true
					this.addLog('✅ URL可达，加载WebView')
				} else {
					this.urlAvailable = false
					this.addLog('❌ URL不可达，显示错误页面')
				}
							
				// 监听网络状态变化
				uni.onNetworkStatusChange((res) => {
					this.addLog(`📶 网络状态变化: ${res.isConnected ? '已连接' : '未连接'}`)
					if (res.isConnected) {
						this.retryConnection()
					}
				})
			},
			// 检查URL可达性
			checkUrlReachability(url) {
				return new Promise((resolve) => {
					// 方法1: 使用uni.request检查
					uni.request({
						url: url,
						method: 'GET',
						timeout: 5000,
						success: (res) => {
							this.addLog(`✅ URL检查成功，状态码: ${res.statusCode}`)
							resolve(res.statusCode < 400) // 状态码小于400认为可达
						},
						fail: (err) => {
							if (err.errMsg && err.errMsg.includes('request:fail')) {
							  this.addLog('❌ 网络请求失败')
							  resolve(false)
							} else {
							  // 其他错误（包括CORS）认为URL基本可达
							  this.addLog(`⚠️ URL可能可达，但有CORS限制: ${err.errMsg}`)
							  resolve(true)
							}
						}
					})
				})
			},
			// 重试连接
			async retryConnection() {
				this.addLog('🔄 尝试重新连接')
				const isReachable = await this.checkUrlReachability(this.url)
				this.urlAvailable = isReachable
				
				if (isReachable) {
					this.addLog('✅ 重新连接成功')
					uni.showToast({
						title: '连接成功',
						icon: 'success'
					})
				} else {
					this.addLog('❌ 重新连接失败')
					uni.showToast({
						title: '连接失败',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style scoped>
.error-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
}
.error-text {
	font-size: 20px;
	line-height: 24px;
	color: #999;
	margin-bottom: 20px;
}
</style>