79 lines
1.5 KiB
Vue
79 lines
1.5 KiB
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> |