337 lines
7.1 KiB
Markdown
337 lines
7.1 KiB
Markdown
|
# ✅ 正确的修改方案 - 添加设备配置按钮
|
|||
|
|
|
|||
|
|
## 🎯 问题分析
|
|||
|
|
|
|||
|
|
你说得对！demo 项目是在**登录界面**添加了一个 **"连接 ESP32"** 按钮：
|
|||
|
|
|
|||
|
|
```java
|
|||
|
|
// LoginActivity.java 第 106-113 行
|
|||
|
|
if (btnEsp32Connect != null) {
|
|||
|
|
btnEsp32Connect.setOnClickListener(new View.OnClickListener() {
|
|||
|
|
@Override
|
|||
|
|
public void onClick(View v) {
|
|||
|
|
startActivity(new Intent(LoginActivity.this, DeviceDiscoveryMdnsActivity.class));
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**你的 uni-app 也需要一个按钮来打开设备发现！**
|
|||
|
|
|
|||
|
|
## 🔧 正确的修改方案
|
|||
|
|
|
|||
|
|
### 方案 A: 在首页添加"设备配置"按钮（推荐）
|
|||
|
|
|
|||
|
|
在 `pages/index/index.vue` 的顶部添加一个设备配置按钮。
|
|||
|
|
|
|||
|
|
#### 1. 修改模板部分
|
|||
|
|
|
|||
|
|
找到 `<template>` 中的头部区域（约第 7-16 行），修改为：
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<!-- 头部 -->
|
|||
|
|
<view class="header">
|
|||
|
|
<view class="header-left">
|
|||
|
|
<text class="title">{{$t('appTitle')}}</text>
|
|||
|
|
<text class="subtitle">{{$t('appSubtitle')}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="header-right">
|
|||
|
|
<!-- 新增：设备配置按钮 -->
|
|||
|
|
<text class="device-config-icon" @click="openDeviceConfig">⚙️</text>
|
|||
|
|
<text class="msg-icon">🔔</text>
|
|||
|
|
<view v-if="unreadCount > 0" class="badge">{{unreadCount}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 2. 添加方法
|
|||
|
|
|
|||
|
|
在 `methods` 中添加（约第 235 行之后）：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
/**
|
|||
|
|
* 打开设备配置页面
|
|||
|
|
*/
|
|||
|
|
openDeviceConfig() {
|
|||
|
|
console.log('🔧 打开设备配置')
|
|||
|
|
|
|||
|
|
// 检查是否在Android环境
|
|||
|
|
if (typeof window !== 'undefined' && window.Android && window.Android.openDeviceDiscovery) {
|
|||
|
|
// 使用Android原生设备发现
|
|||
|
|
console.log('🔍 打开Android原生设备发现')
|
|||
|
|
window.Android.openDeviceDiscovery()
|
|||
|
|
} else {
|
|||
|
|
// 使用Web版本或显示提示
|
|||
|
|
console.log('⚠️ Android原生设备发现不可用')
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请在Android应用中使用',
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2000
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 3. 添加样式
|
|||
|
|
|
|||
|
|
在 `<style>` 中添加（约第 1900 行之后）：
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
/* 设备配置图标 */
|
|||
|
|
.device-config-icon {
|
|||
|
|
font-size: 44rpx;
|
|||
|
|
margin-right: 24rpx;
|
|||
|
|
padding: 8rpx;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: transform 0.2s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.device-config-icon:active {
|
|||
|
|
transform: scale(0.9);
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 方案 B: 添加独立的设备配置页面（可选）
|
|||
|
|
|
|||
|
|
如果你想要一个专门的设备配置页面，可以创建 `pages/device-config/device-config.vue`：
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<template>
|
|||
|
|
<view class="container">
|
|||
|
|
<view class="header">
|
|||
|
|
<text class="title">设备配置</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="config-card">
|
|||
|
|
<view class="config-item" v-if="deviceConfigured">
|
|||
|
|
<text class="config-label">设备地址:</text>
|
|||
|
|
<text class="config-value">{{ deviceHost }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="config-item" v-if="deviceConfigured">
|
|||
|
|
<text class="config-label">设备名称:</text>
|
|||
|
|
<text class="config-value">{{ deviceName }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="config-status" v-if="!deviceConfigured">
|
|||
|
|
<text class="status-text">⚠️ 设备未配置</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="button-group">
|
|||
|
|
<button class="btn-primary" @click="openDeviceDiscovery">
|
|||
|
|
🔍 扫描设备
|
|||
|
|
</button>
|
|||
|
|
<button class="btn-secondary" @click="clearDeviceConfig" v-if="deviceConfigured">
|
|||
|
|
🗑️ 清除配置
|
|||
|
|
</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
deviceConfigured: false,
|
|||
|
|
deviceHost: '',
|
|||
|
|
deviceName: ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
this.checkDeviceConfig()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
checkDeviceConfig() {
|
|||
|
|
if (window.Android && window.Android.getDeviceConfig) {
|
|||
|
|
try {
|
|||
|
|
const configStr = window.Android.getDeviceConfig()
|
|||
|
|
const config = JSON.parse(configStr)
|
|||
|
|
|
|||
|
|
if (config.configured) {
|
|||
|
|
this.deviceConfigured = true
|
|||
|
|
this.deviceHost = config.host
|
|||
|
|
this.deviceName = config.deviceName || '未知设备'
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('获取设备配置失败:', error)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
openDeviceDiscovery() {
|
|||
|
|
if (window.Android && window.Android.openDeviceDiscovery) {
|
|||
|
|
window.Android.openDeviceDiscovery()
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请在Android应用中使用',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
clearDeviceConfig() {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '确认清除',
|
|||
|
|
content: '确定要清除设备配置吗？',
|
|||
|
|
success: (res) => {
|
|||
|
|
if (res.confirm && window.Android && window.Android.clearDeviceConfig) {
|
|||
|
|
window.Android.clearDeviceConfig()
|
|||
|
|
this.deviceConfigured = false
|
|||
|
|
this.deviceHost = ''
|
|||
|
|
this.deviceName = ''
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.container {
|
|||
|
|
padding: 40rpx;
|
|||
|
|
}
|
|||
|
|
.header {
|
|||
|
|
margin-bottom: 40rpx;
|
|||
|
|
}
|
|||
|
|
.title {
|
|||
|
|
font-size: 48rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
.config-card {
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
padding: 40rpx;
|
|||
|
|
margin-bottom: 40rpx;
|
|||
|
|
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
|
|||
|
|
}
|
|||
|
|
.config-item {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
}
|
|||
|
|
.config-label {
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
.config-value {
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
.config-status {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 40rpx;
|
|||
|
|
}
|
|||
|
|
.status-text {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #ff9800;
|
|||
|
|
}
|
|||
|
|
.button-group {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 24rpx;
|
|||
|
|
}
|
|||
|
|
.btn-primary, .btn-secondary {
|
|||
|
|
padding: 28rpx;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
.btn-primary {
|
|||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
.btn-secondary {
|
|||
|
|
background: #f0f0f0;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 🚀 推荐的简单方案
|
|||
|
|
|
|||
|
|
**最简单的方法：在首页添加一个设备配置图标**
|
|||
|
|
|
|||
|
|
### 完整修改步骤：
|
|||
|
|
|
|||
|
|
#### 1. 修改 `pages/index/index.vue` 模板
|
|||
|
|
|
|||
|
|
找到头部区域（约第 7-16 行）：
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<!-- 头部 -->
|
|||
|
|
<view class="header">
|
|||
|
|
<view class="header-left">
|
|||
|
|
<text class="title">{{$t('appTitle')}}</text>
|
|||
|
|
<text class="subtitle">{{$t('appSubtitle')}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="header-right">
|
|||
|
|
<!-- 新增：设备配置按钮 -->
|
|||
|
|
<text class="device-config-icon" @click="openDeviceConfig">⚙️</text>
|
|||
|
|
<text class="msg-icon">🔔</text>
|
|||
|
|
<view v-if="unreadCount > 0" class="badge">{{unreadCount}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 2. 添加方法
|
|||
|
|
|
|||
|
|
在 `methods` 中添加：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
/**
|
|||
|
|
* 打开设备配置页面
|
|||
|
|
*/
|
|||
|
|
openDeviceConfig() {
|
|||
|
|
console.log('🔧 打开设备配置')
|
|||
|
|
|
|||
|
|
if (typeof window !== 'undefined' && window.Android && window.Android.openDeviceDiscovery) {
|
|||
|
|
window.Android.openDeviceDiscovery()
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请在Android应用中使用',
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2000
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 3. 添加样式
|
|||
|
|
|
|||
|
|
在 `<style>` 中添加：
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
.device-config-icon {
|
|||
|
|
font-size: 44rpx;
|
|||
|
|
margin-right: 24rpx;
|
|||
|
|
padding: 8rpx;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: transform 0.2s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.device-config-icon:active {
|
|||
|
|
transform: scale(0.9);
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 📋 修改完成后
|
|||
|
|
|
|||
|
|
1. **保存文件**
|
|||
|
|
2. **打包 uni-app**
|
|||
|
|
```
|
|||
|
|
发行 → H5-Web → 发行到H5
|
|||
|
|
```
|
|||
|
|
3. **替换 web 文件夹**
|
|||
|
|
4. **重新 Build Android 应用**
|
|||
|
|
|
|||
|
|
## 🎯 使用方法
|
|||
|
|
|
|||
|
|
用户打开应用后：
|
|||
|
|
1. 看到首页右上角有一个 **⚙️ 图标**
|
|||
|
|
2. 点击图标
|
|||
|
|
3. 打开 mDNS 设备发现界面
|
|||
|
|
4. 扫描并选择 ESP32 设备
|
|||
|
|
5. 配置保存
|
|||
|
|
6. 返回首页，正常使用
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
**这个方案更简单、更符合 demo 项目的设计！** 🎉
|