120 lines
2.6 KiB
Vue
120 lines
2.6 KiB
Vue
<template>
|
|
<view class="bridge-container">
|
|
<!-- 桥接状态指示器 -->
|
|
<view class="status-indicator" :class="{ connected: isConnected }">
|
|
<text class="status-text">{{ isConnected ? '已连接' : '未连接' }}</text>
|
|
</view>
|
|
|
|
<!-- 调试信息 -->
|
|
<view v-if="showDebug" class="debug-panel">
|
|
<text class="debug-title">调试信息</text>
|
|
<text class="debug-item">当前URL: {{ currentUrl }}</text>
|
|
<text class="debug-item">连接状态: {{ isConnected ? '已连接' : '未连接' }}</text>
|
|
<text class="debug-item">消息计数: {{ messageCount }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import config from '../config.js';
|
|
|
|
export default {
|
|
name: 'WebViewBridge',
|
|
props: {
|
|
showDebug: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
isConnected: false,
|
|
currentUrl: '',
|
|
messageCount: 0
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initBridge();
|
|
},
|
|
methods: {
|
|
initBridge() {
|
|
this.currentUrl = config.webConfig.mainUrl;
|
|
this.checkConnection();
|
|
},
|
|
|
|
checkConnection() {
|
|
// 检查桥接连接状态
|
|
if (window.uniAppBridge) {
|
|
this.isConnected = true;
|
|
} else {
|
|
this.isConnected = false;
|
|
}
|
|
},
|
|
|
|
// 发送消息到网页
|
|
sendMessage(type, data) {
|
|
if (this.isConnected) {
|
|
this.messageCount++;
|
|
window.uniAppBridge.postMessage(type, data);
|
|
}
|
|
},
|
|
|
|
// 获取用户信息
|
|
getUserInfo() {
|
|
this.sendMessage('getUserInfo', {});
|
|
},
|
|
|
|
// 获取设备信息
|
|
getDeviceInfo() {
|
|
this.sendMessage('getDeviceInfo', {});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.bridge-container {
|
|
padding: 10px;
|
|
}
|
|
|
|
.status-indicator {
|
|
display: inline-block;
|
|
padding: 5px 10px;
|
|
border-radius: 15px;
|
|
background-color: #ff6b6b;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.status-indicator.connected {
|
|
background-color: #51cf66;
|
|
}
|
|
|
|
.status-text {
|
|
color: white;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.debug-panel {
|
|
margin-top: 10px;
|
|
padding: 10px;
|
|
background-color: #f8f9fa;
|
|
border-radius: 5px;
|
|
border: 1px solid #dee2e6;
|
|
}
|
|
|
|
.debug-title {
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
color: #495057;
|
|
margin-bottom: 5px;
|
|
display: block;
|
|
}
|
|
|
|
.debug-item {
|
|
font-size: 12px;
|
|
color: #6c757d;
|
|
display: block;
|
|
margin-bottom: 3px;
|
|
}
|
|
</style> |