139 lines
3.5 KiB
Vue
139 lines
3.5 KiB
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> |