119 lines
3.0 KiB
Plaintext
119 lines
3.0 KiB
Plaintext
===========================================
|
|
快速修改代码 - 添加设备配置按钮
|
|
===========================================
|
|
|
|
📍 修改位置 1: 模板部分（约第 7-16 行）
|
|
-------------------------------------------
|
|
找到 <view class="header"> 部分，修改为：
|
|
|
|
<!-- 头部 -->
|
|
<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 行之后）
|
|
-------------------------------------------
|
|
在 methods: { } 中添加：
|
|
|
|
/**
|
|
* 打开设备配置页面
|
|
*/
|
|
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: 样式部分（约第 1900 行之后）
|
|
-------------------------------------------
|
|
在 <style> 中添加：
|
|
|
|
/* 设备配置图标 */
|
|
.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. methods 中添加了 openDeviceConfig() 方法
|
|
□ 3. 样式中添加了图标样式
|
|
□ 4. 保存文件
|
|
□ 5. 检查语法错误
|
|
|
|
|
|
===========================================
|
|
🚀 打包和部署
|
|
===========================================
|
|
|
|
1. 打包 uni-app:
|
|
发行 → H5-Web → 发行到H5
|
|
|
|
2. 复制文件:
|
|
从: smart-home-app\unpackage\dist\build\h5
|
|
到: Smarthome_android\app\src\main\assets\web
|
|
|
|
3. Build Android 应用:
|
|
Build → Rebuild Project
|
|
|
|
|
|
===========================================
|
|
🎯 使用方法
|
|
===========================================
|
|
|
|
1. 打开应用
|
|
2. 看到首页右上角有 ⚙️ 图标
|
|
3. 点击图标
|
|
4. 打开 mDNS 设备发现界面
|
|
5. 扫描并选择 ESP32 设备
|
|
6. 配置保存，返回首页
|
|
|
|
|
|
===========================================
|
|
💡 提示
|
|
===========================================
|
|
|
|
这个方案和 demo 项目一样：
|
|
- demo: 登录界面有"连接ESP32"按钮
|
|
- 你的: 首页有"⚙️"设备配置按钮
|
|
|
|
点击按钮 → 打开 mDNS 扫描 → 选择设备 → 保存配置
|
|
|
|
简单、直接、有效！
|
|
===========================================
|