smart-home/smart-home-app/uni-app修改指南.md

📝 uni-app 修改指南 - 集成 Android 设备配置检查

🎯 目标

让 uni-app 在启动时：

1. 检查 Android 设备是否已配置
2. 如果未配置 → 打开 mDNS 扫描，阻止页面继续加载
3. 如果已配置 → 正常加载数据

✅ 当前代码分析

你的 pages/index/index.vue 已经有以下代码：

async onLoad() {
    this.isPageActive = true
    
    // ✅ 检查Android原生设备配置
    if (this.checkAndroidDeviceConfig()) {
        console.log('✅ 使用Android原生SDK')
        this.setupAndroidCallbacks()
    } else {
        // 🔧 自动诊断和修复设备配置冲突
        await this.diagnoseAndFixDeviceConfig()
        
        // 检查是否需要设备发现
        await this.checkDeviceDiscovery()
    }
    
    this.loadData()  // ⚠️ 问题：即使设备未配置，也会继续加载
    this.loadKitchenAlarmHistory()
    this.startAlarmTimer()
}

🔧 需要修改的地方

修改 1: 优化 checkAndroidDeviceConfig() 方法

位置：pages/index/index.vue 第 243-267 行

当前代码：

checkAndroidDeviceConfig() {
    if (typeof window !== 'undefined' && window.Android && window.Android.getDeviceConfig) {
        try {
            const configStr = window.Android.getDeviceConfig()
            const config = JSON.parse(configStr)
            
            if (config.configured && config.host) {
                console.log('✅ Android设备已配置:', config.host)
                this.androidDeviceConfig = config
                return true
            } else {
                console.log('❌ Android设备未配置，需要发现设备')
                this.openAndroidDeviceDiscovery()  // ⚠️ 打开后立即返回
                return false
            }
        } catch (error) {
            console.error('❌ 解析Android设备配置失败:', error)
            return false
        }
    }
    return false
}

修改为：

checkAndroidDeviceConfig() {
    // 检查是否在Android环境且有原生SDK
    if (typeof window !== 'undefined' && window.Android && window.Android.getDeviceConfig) {
        try {
            const configStr = window.Android.getDeviceConfig()
            const config = JSON.parse(configStr)
            
            if (config.configured && config.host) {
                console.log('✅ Android设备已配置:', config.host)
                // 保存配置供后续使用
                this.androidDeviceConfig = config
                this.isAndroidConfigured = true  // 新增：标记已配置
                return true
            } else {
                console.log('❌ Android设备未配置，需要发现设备')
                this.isAndroidConfigured = false  // 新增：标记未配置
                // 打开设备发现页面
                this.openAndroidDeviceDiscovery()
                return false
            }
        } catch (error) {
            console.error('❌ 解析Android设备配置失败:', error)
            this.isAndroidConfigured = false
            return false
        }
    }
    // 不在Android环境，使用Web版本
    this.isAndroidConfigured = null  // null表示不在Android环境
    return false
}

修改 2: 添加 isAndroidConfigured 数据属性

位置：pages/index/index.vue 的 data() 部分

在 data() 中添加：

data() {
    return {
        // ... 其他数据 ...
        
        // 新增：Android设备配置状态
        isAndroidConfigured: null,  // null=未检查, true=已配置, false=未配置
        androidDeviceConfig: null,  // Android设备配置信息
        
        // ... 其他数据 ...
    }
}

修改 3: 优化 onLoad() 方法

位置：pages/index/index.vue 第 185-206 行

当前代码：

async onLoad() {
    this.isPageActive = true
    
    if (this.checkAndroidDeviceConfig()) {
        console.log('✅ 使用Android原生SDK')
        this.setupAndroidCallbacks()
    } else {
        await this.diagnoseAndFixDeviceConfig()
        await this.checkDeviceDiscovery()
    }
    
    this.loadData()
    this.loadKitchenAlarmHistory()
    this.startAlarmTimer()
}

修改为：

async onLoad() {
    this.isPageActive = true
    
    // ✅ 检查Android原生设备配置
    const isConfigured = this.checkAndroidDeviceConfig()
    
    if (isConfigured) {
        // Android设备已配置，使用原生SDK
        console.log('✅ 使用Android原生SDK')
        this.setupAndroidCallbacks()
        
        // 继续加载数据
        this.loadData()
        this.loadKitchenAlarmHistory()
        this.startAlarmTimer()
    } else if (this.isAndroidConfigured === false) {
        // Android设备未配置，已打开设备发现页面
        console.log('⏸️ 等待用户配置设备...')
        // ⚠️ 不加载数据，等待用户配置设备后返回
        // 用户配置完成后，会触发 onShow() 重新加载
    } else {
        // 不在Android环境，使用Web版本
        console.log('🌐 使用Web版本')
        await this.diagnoseAndFixDeviceConfig()
        await this.checkDeviceDiscovery()
        
        // 继续加载数据
        this.loadData()
        this.loadKitchenAlarmHistory()
        this.startAlarmTimer()
    }
}

修改 4: 优化 onShow() 方法

位置：pages/index/index.vue 第 207-217 行

当前代码：

onShow() {
    this.isPageActive = true
    this.loadData()
    this.fetchAlarmHistory(true)
    this.loadKitchenAlarmHistory()
    this.startAlarmTimer()
}

修改为：

onShow() {
    this.isPageActive = true
    
    // 如果是从设备发现页面返回，重新检查配置
    if (this.isAndroidConfigured === false && window.Android) {
        console.log('🔄 从设备发现返回，重新检查配置')
        const isConfigured = this.checkAndroidDeviceConfig()
        
        if (isConfigured) {
            // 设备已配置，设置回调并加载数据
            this.setupAndroidCallbacks()
            this.loadData()
            this.loadKitchenAlarmHistory()
            this.startAlarmTimer()
        } else {
            // 仍未配置，不加载数据
            console.log('⏸️ 设备仍未配置')
            return
        }
    } else {
        // 正常的页面显示，重新加载数据
        this.loadData()
        this.fetchAlarmHistory(true)
        this.loadKitchenAlarmHistory()
        this.startAlarmTimer()
    }
}

📋 完整修改清单

1. 在 data() 中添加：

isAndroidConfigured: null,
androidDeviceConfig: null,

2. 修改 checkAndroidDeviceConfig() 方法

• 添加 this.isAndroidConfigured 状态标记
• 返回前设置状态

3. 修改 onLoad() 方法

• 根据 isAndroidConfigured 状态决定是否加载数据
• 如果未配置，不加载数据

4. 修改 onShow() 方法

• 检查是否从设备发现返回
• 如果是，重新检查配置并加载数据

🚀 打包步骤

1. 修改代码

按照上面的指南修改 pages/index/index.vue 文件。

2. 检查修改

确保以下内容正确：

• ✅ data() 中添加了新属性
• ✅ checkAndroidDeviceConfig() 设置了状态
• ✅ onLoad() 根据状态加载数据
• ✅ onShow() 处理了返回逻辑

3. 打包 uni-app

在 HBuilderX 中：

发行 → H5-Web → 发行到H5

或使用命令行：

cd D:\XinJiaPo\Firefly_code\smart-home\smart-home-app
npm run build:h5

4. 复制文件

打包完成后，文件在：

D:\XinJiaPo\Firefly_code\smart-home\smart-home-app\unpackage\dist\build\h5

复制到 Android 项目：

复制所有文件到：
D:\XinJiaPo\Firefly_code\smart-home\Smarthome_android\Smarthome_android\app\src\main\assets\web

5. 重新 Build Android 应用

在 Android Studio 中：

Build → Rebuild Project

🎯 预期行为

首次使用（设备未配置）：

1. 应用启动
   ↓
2. 加载 index.vue
   ↓
3. onLoad() 执行
   ↓
4. checkAndroidDeviceConfig() → 返回 false
   ↓
5. isAndroidConfigured = false
   ↓
6. 打开 mDNS 设备发现页面
   ↓
7. ⏸️ 不加载数据，等待用户配置
   ↓
8. 用户在 mDNS 界面选择设备
   ↓
9. 设备配置保存
   ↓
10. 返回 index 页面
   ↓
11. onShow() 执行
   ↓
12. 重新检查配置 → 已配置
   ↓
13. ✅ 加载数据，显示内容

再次使用（设备已配置）：

1. 应用启动
   ↓
2. 加载 index.vue
   ↓
3. onLoad() 执行
   ↓
4. checkAndroidDeviceConfig() → 返回 true
   ↓
5. isAndroidConfigured = true
   ↓
6. 设置 Android 回调
   ↓
7. ✅ 直接加载数据，显示内容

⚠️ 注意事项

1. 备份原文件

   复制 pages/index/index.vue 为 index.vue.backup
   

2. 仔细检查语法

   • 确保所有括号匹配
   • 确保逗号正确
   • 确保缩进一致

3. 测试打包

   • 打包前先在浏览器中测试
   • 确保没有语法错误

4. 保留旧的 web 文件夹

   重命名 app/src/main/assets/web 为 web.backup
   

🔍 调试技巧

如果打包后有问题，在 Chrome 中调试：

chrome://inspect

查看 Console 日志：

• ✅ Android设备已配置 → 配置成功
• ❌ Android设备未配置 → 需要配置
• ⏸️ 等待用户配置设备 → 已打开设备发现

---

准备好了吗？ 🚀

按照这个指南仔细修改，一次成功！