从痛点到产品：uni-app x + HarmonyOS打造房产投资管理系统全记录

📖 目录

• 项目背景：从房东的痛点说起
• 为什么选择uni-app x + HarmonyOS
• 系统架构设计：四大模块协同作战
• 核心功能实现：18个页面的血泪史
• HarmonyOS适配的三大挑战与解决方案
• 数据同步机制：让数据流动起来
• 性能优化：从卡顿到丝滑
• UI/UX设计：商务风格的视觉语言
• 踩坑经验：那些让我头秃的Bug
• 开发工具与调试技巧
• 未来规划与展望
• 总结与感悟

项目背景：从房东的痛点说起 {#项目背景}

故事的开始

2024年初，我在苏州购入了第二套投资房产，准备出租。作为一个程序员房东，我自然而然地想用科技手段来管理我的资产。然而现实很骨感：

痛点一：信息管理混乱

• Excel表格记录房产信息，版本管理困难
• 租户资料散落在微信聊天记录里
• 合同文档放在电脑、手机、云盘多个地方
• 想查个租客电话号码都要翻半天

痛点二：财务统计困难

• 每月收租日期记不住，经常漏收
• 水电费、物业费、维修费记录混乱
• 年底算投资回报率要拿出计算器算半天
• 不知道哪套房子最赚钱，哪套在亏损

痛点三：决策缺乏数据支撑

• 出租率是多少？不清楚
• 平均租金水平？凭感觉
• 租客流失率？没统计过
• 要不要继续投资？拍脑袋决定

市场调研

我研究了市面上的房产管理软件：

结论：没有一款软件能完美满足我的需求！

需求分析

作为开发者，我决定自己动手。经过两周的需求梳理，我列出了核心功能：

必备功能（MVP）：

• ✅ 房产档案管理（地址、面积、价格）
• ✅ 房间状态管理（空置/已租/维修）
• ✅ 租户信息管理（联系方式、合同期限）
• ✅ 收租记录管理（租金、水电费）
• ✅ 财务收支记录（收入、支出分类）
• ✅ 数据统计分析（出租率、投资回报率）

进阶功能（Nice to have）：

• 🔄 收租日提醒
• 📊 数据可视化图表
• 📱 移动端随时查看
• 🔒 数据本地存储（隐私安全）
• 🎨 专业的商务风格UI

目标用户画像

张先生，38岁，IT行业，苏州

• 持有3套房产用于投资
• 工作繁忙，希望高效管理
• 重视数据隐私，不愿上传云端
• 需要专业的数据支撑投资决策

• 🛠️ 为什么选择uni-app x + HarmonyOS {#技术选型}

技术选型的纠结过程

作为一个全栈开发者，我面临着技术选型的"幸福烦恼"。让我列出当时的思考过程：

方案一：原生开发（HarmonyOS + Swift/Kotlin）

优势：

• ✅ 性能最佳，用户体验极致
• ✅ 可以使用平台最新特性
• ✅ 没有框架限制

劣势：

• ❌ 开发成本高（三端分别开发）
• ❌ 维护困难（代码量 x3）
• ❌ 学习成本高（多种语言）
• ❌ 时间成本无法接受（个人项目）

结论： 🚫 虽然性能最好，但对个人开发者不现实

方案二：React Native

优势：

• ✅ 生态成熟，社区活跃
• ✅ 组件库丰富
• ✅ 跨平台能力强

劣势：

• ❌ 对HarmonyOS支持有限
• ❌ 包体积较大（基础包10MB+）
• ❌ 性能相对较差
• ❌ 需要学习React生态

结论： 🤔 可行，但HarmonyOS支持是短板

方案三：Flutter

优势：

• ✅ 性能优秀（接近原生）
• ✅ UI组件精美
• ✅ 热重载提升效率

劣势：

• ❌ Dart语言学习成本
• ❌ 包体积大（基础包15MB+）
• ❌ HarmonyOS支持需要额外适配
• ❌ 对前端开发者不够友好

结论： 🤔 性能好，但学习成本高

方案四：uni-app x（最终选择）✨

优势：

• ✅ 原生性能：基于原生渲染，性能接近原生
• ✅ TypeScript支持：类型安全，开发体验好
• ✅ 一次开发，三端运行：iOS、Android、HarmonyOS
• ✅ Vue生态：前端开发者无缝上手
• ✅ 官方HarmonyOS支持：DCloud官方适配
• ✅ 包体积小：基础包仅5MB
• ✅ 开发效率高：热重载+组件化

劣势：

• ⚠️ 生态相对较新（但在快速完善）
• ⚠️ 部分高级特性需要等待

结论： 🎉 综合考虑，uni-app x是最佳选择！

为什么HarmonyOS是未来趋势？

作为开发者，我深信HarmonyOS代表着移动生态的未来：

1. 国产化浪潮：信创政策推动，政企市场潜力巨大
2. 技术创新：分布式能力、原子化服务让人眼前一亮
3. 生态建设：华为全力推进，开发者红利期
4. 市场份额：2024年国内份额已突破20%，增长迅猛
5. 开发者友好：完善的文档、活跃的社区

我的判断：提前布局HarmonyOS，就是抓住下一个技术红利！

最终技术栈

经过一周的调研和demo测试，我确定了技术栈：

核心技术明细：

• 前端框架：uni-app x (基于Vue 3)
• 编程语言：TypeScript (主要) + UTS (平台特性)
• 样式方案：SCSS + CSS Variables（主题系统）
• 数据库：HarmonyOS relationalStore (SQLite)
• 状态管理：Composition API + Reactive
• 数据请求：uni.request + Promise
• 本地存储：uni.storage (配置) + relationalStore (业务数据)

• UI组件：uni-ui + 自定义组件库

  🏗️ 系统架构设计：四大模块协同作战 {#架构设计}

整体架构图

系统采用分层架构 + 模块化设计：

核心数据模型（ER图）

数据关联关系是整个系统的灵魂！ 我花了三天时间设计数据模型，确保数据关联的合理性和扩展性。

设计亮点：

1. property_id + room_id 双重关联：既支持房产级统计，也支持房间级追踪
2. 自动同步机制：收租记录→财务记录的自动创建
3. 状态联动：租户状态→房间状态的自动更新
4. 数据溯源：通过description字段记录数据来源

项目目录结构

房产投资管理系统/  
│  
├── pages/                          # 页面目录（18个页面）  
│   ├── index/                      # 首页模块  
│   │   └── index.vue              # 首页（数据总览）  
│   │  
│   ├── property/                   # 房产管理模块  
│   │   ├── list.vue               # 房产列表  
│   │   ├── add.vue                # 添加/编辑房产  
│   │   └── detail.vue             # 房产详情  
│   │  
│   ├── rental/                     # 租赁管理模块  
│   │   ├── room-list.vue          # 房间列表  
│   │   ├── room-add.vue           # 添加/编辑房间  
│   │   ├── room-detail.vue        # 房间详情  
│   │   ├── tenant-list.vue        # 租户列表  
│   │   ├── tenant-add.vue         # 添加/编辑租户  
│   │   ├── tenant-detail.vue      # 租户详情  
│   │   ├── rent-collection.vue    # 收租记录列表  
│   │   └── rent-add.vue           # 添加收租记录  
│   │  
│   ├── finance/                    # 财务管理模块  
│   │   ├── list.vue               # 财务记录列表  
│   │   └── add.vue                # 添加财务记录  
│   │  
│   └── stats/                      # 统计分析模块  
│       └── index.vue              # 数据统计页  
│  
├── uni_modules/                    # 插件模块  
│   └── test-relationalStore/      # 数据库封装  
│       └── utssdk/  
│           └── app-harmony/  
│               └── index.uts      # HarmonyOS数据库适配  
│  
├── static/                         # 静态资源  
│   ├── logo.png                   # 应用图标  
│   ├── 我的资产.png                # Tab图标  
│   ├── 房产.png  
│   ├── 财务.png  
│   └── 统计.png  
│  
├── uni.scss                        # 全局样式变量  
├── App.vue                         # 应用入口  
├── pages.json                      # 页面配置  
├── manifest.json                   # 应用配置  
└── project_analysis.md             # 项目开发文档

设计原则：

• 模块化：按功能模块划分目录
• 复用性：list-add-detail的标准页面结构
• 可维护性：清晰的命名和目录层级

💎 核心功能实现：18个页面的血泪史 {#核心功能}

功能模块一：房产管理 - 资产的数字化档案

1.1 房产列表页（pages/property/list.vue）

功能需求：

• 展示所有房产列表
• 显示总资产价值
• 支持房产的增删改查

核心代码：总资产价值计算

// 计算总资产价值  
computed: {  
    totalValue() {  
        const total = this.propertyList.reduce((sum, item) => {  
            // 优先使用当前估值，否则使用购买价格  
            const currentValue = parseFloat(item.current_value) || 0;  
            const purchasePrice = parseFloat(item.purchase_price) || 0;  
            const propertyValue = currentValue || purchasePrice;  

            console.log(`房产 ${item.address}:   
                current_value=${item.current_value}(${typeof item.current_value}),   
                purchase_price=${item.purchase_price}(${typeof item.purchase_price}),   
                使用价值=${propertyValue}`);  

            return sum + propertyValue;  
        }, 0);  

        console.log('总资产价值计算结果:', total);  
        return total;  
    }  
}

踩坑记录1：资产价值计算错误

问题现象：
总资产显示为"100200300"而不是"600"（三套房各200万）

原因分析：
数据库查询时用getString获取价格字段，导致数值以字符串形式返回。JavaScript的+操作符对字符串执行拼接而非数学加法。

解决方案：
在数据库转换函数中，数值类型字段使用getDouble而非getString

// ❌ 错误写法  
function convertResultSetToPropertyArray(resultSet) {  
    record.purchase_price = resultSet.getString(  
        resultSet.getColumnIndex('purchase_price')  
    ); // 返回字符串  
}  

// ✅ 正确写法  
function convertResultSetToPropertyArray(resultSet) {  
    record.purchase_price = resultSet.getDouble(  
        resultSet.getColumnIndex('purchase_price')  
    ); // 返回数值  
}

经验总结：

• ✅ 整数/小数字段：用getDouble()
• ✅ 文本/ID字段：用getString()
• ✅ 在computed中加console.log调试
• ✅ 前端再用parseFloat兜底确保类型正确

1.2 添加房产页（pages/property/add.vue）

功能需求：

• 录入房产基本信息
• 表单验证
• 数据持久化

核心代码：表单验证

validateForm() {  
    // 地址验证  
    if (!this.formData.address || this.formData.address.trim() === '') {  
        uni.showToast({  
            title: '请输入房产地址',  
            icon: 'none'  
        });  
        return false;  
    }  

    // 面积验证  
    if (!this.formData.area || parseFloat(this.formData.area) <= 0) {  
        uni.showToast({  
            title: '请输入有效的房产面积',  
            icon: 'none'  
        });  
        return false;  
    }  

    // 价格验证  
    if (!this.formData.purchase_price ||   
        parseFloat(this.formData.purchase_price) <= 0) {  
        uni.showToast({  
            title: '请输入有效的购买价格',  
            icon: 'none'  
        });  
        return false;  
    }  

    return true;  
}

设计亮点：

• 实时验证：输入时即时反馈
• 友好提示：明确告知用户错误原因
• 数据类型转换：字符串→数值的安全转换

功能模块二：租赁管理 - 最复杂的业务逻辑

2.1 房间管理：7种房型 x 4种付款方式 = 28种组合

功能需求：

• 支持7种房型（单间、一室一厅、两室一厅...）
• 支持4种付款方式（押一付一、押一付三...）
• 自定义每月收租日（1-31号）
• 房间状态管理（空置/已租/维修中）

核心代码：房间类型映射

// 房型映射  
getRoomTypeText(type) {  
    const typeMap = {  
        'single': '单间',  
        '1b1b': '一室一厅',  
        '2b1b': '两室一厅',  
        '2b2b': '两室两厅',  
        '3b1b': '三室一厅',  
        '3b2b': '三室两厅',  
        '4b2b': '四室两厅'  
    };  
    return typeMap[type] || type;  
}  

// 付款方式映射  
getPaymentModeText(mode) {  
    const modeMap = {  
        'monthly': '押一付一',  
        'quarterly': '押一付三',  
        'half_yearly': '半年付',  
        'yearly': '年付'  
    };  
    return modeMap[mode] || mode;  
}

踩坑记录2：收租日选择器无法显示全部31天

问题现象：
HarmonyOS的<picker>组件只能显示有限的选项，无法展示完整的31天选择。

解决方案：自定义Grid布局选择器

<template>  
    <!-- 自定义模态框 -->  
    <view class="rent-day-modal" v-if="showRentDayModal" @click="cancelRentDay">  
        <view class="modal-content" @click.stop>  
            <view class="modal-header">  
                <text class="modal-title">选择每月收租日</text>  
            </view>  

            <!-- 7x5 Grid布局显示31天 -->  
            <view class="day-grid">  
                <view class="day-item"   
                      v-for="day in 31"   
                      :key="day"  
                      :class="{ selected: selectedRentDay === day }"  
                      @click="selectRentDay(day)">  
                    <text class="day-text">{{ day }}</text>  
                </view>  
            </view>  

            <view class="modal-footer">  
                <button class="cancel-btn" @click="cancelRentDay">取消</button>  
                <button class="confirm-btn" @click="confirmRentDay">确定</button>  
            </view>  
        </view>  
    </view>  
</template>  

<style lang="scss">  
.day-grid {  
    display: grid;  
    grid-template-columns: repeat(7, 1fr); // 7列布局，展示31天  
    gap: 12rpx;  
    padding: 20rpx;  
}  

.day-item {  
    aspect-ratio: 1; // 保持正方形  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    border-radius: 8rpx;  
    background: #F5F5F5;  
    transition: all 0.2s;  

    &.selected {  
        background: $primary-blue;  
        color: #FFFFFF;  
        transform: scale(1.1);  
    }  

    &:active {  
        opacity: 0.7;  
    }  
}  
</style>

经验总结：
当原生组件无法满足需求时，果断自定义实现。Grid布局非常适合日历、选择器等场景。

2.2 租户管理：隐私保护与数据联动

功能需求：

• 租户信息录入（姓名、电话、身份证）
• 身份证号脱敏显示
• 租户状态与房间状态联动
• 合同期限管理

核心代码：身份证号脱敏

// 身份证号脱敏处理  
maskIdCard(idCard) {  
    if (!idCard || idCard.length < 8) return idCard;  
    // 显示前4位和后4位，中间用*替代  
    const start = idCard.substring(0, 4);  
    const end = idCard.substring(idCard.length - 4);  
    const middle = '*'.repeat(idCard.length - 8);  
    return `${start}${middle}${end}`;  
}  

// 使用示例  
computed: {  
    maskedIdCard() {  
        return this.maskIdCard(this.tenant.id_card);  
        // 输入：510123199001011234  
        // 输出：5101**********1234  
    }  
}

踩坑记录3：租户状态判断不准确

问题现象：
主页快捷操作"添加租户"，明明房间没有租户，却提示"房间已有租户"。

错误逻辑：依赖房间status字段

// ❌ 不准确的判断  
if (room.status === 'rented') {  
    uni.showToast({ title: '房间已有租户' });  
}

根本原因：
房间状态字段可能因为各种原因（删除租户时未更新、数据异常等）导致状态不准确。

正确方案：查询实际租户数据

// ✅ 准确的判断：查询数据库  
checkRoomTenants(room) {  
    uni.queryWithConditions('tenants',   
        `room_id = ${room.id} AND status = 'active'`)  
        .then(tenants => {  
            console.log(`房间 ${room.room_number} 的租户查询结果:`,   
                tenants?.length || 0, '个活跃租户');  

            if (tenants && tenants.length > 0) {  
                // 确实有租户  
                uni.showModal({  
                    title: '房间已有租户',  
                    content: `该房间已有${tenants.length}位租户，是否查看？`,  
                    success: (res) => {  
                        if (res.confirm) {  
                            uni.navigateTo({  
                                url: `/pages/rental/tenant-list?roomId=${room.id}`  
                            });  
                        }  
                    }  
                });  
            } else {  
                // 房间确实空置，可以添加租户  
                uni.navigateTo({  
                    url: `/pages/rental/tenant-add?roomId=${room.id}`  
                });  
            }  
        })  
        .catch(err => {  
            console.error('查询房间租户失败:', err);  
            uni.showToast({  
                title: '查询租户信息失败',  
                icon: 'error'  
            });  
        });  
}

设计原则：

关键业务逻辑，永远基于实际数据查询，而非缓存状态！

租户删除后的房间状态联动

// 删除租户时，自动更新房间状态  
performDelete() {  
    const roomId = this.tenant.room_id;  

    uni.deleteData('tenants', `id = ${this.tenantId}`)  
        .then(() => {  
            // 删除成功后，检查房间是否还有其他租户  
            return this.updateRoomStatus(roomId);  
        })  
        .then(() => {  
            uni.showToast({  
                title: '删除成功，即将返回',  
                icon: 'success'  
            });  
            setTimeout(() => {  
                uni.navigateBack();  
            }, 800);  
        });  
}  

// 智能更新房间状态  
updateRoomStatus(roomId) {  
    if (!roomId) return Promise.resolve();  

    // 查询该房间是否还有活跃租户  
    return uni.queryWithConditions('tenants', `room_id = ${roomId}`)  
        .then(tenants => {  
            const hasActiveTenant = tenants &&   
                tenants.some(tenant => tenant.status === 'active');  

            // 根据实际情况更新房间状态  
            const newStatus = hasActiveTenant ? 'rented' : 'vacant';  

            return uni.updateData('rooms', {  
                status: newStatus,  
                updated_at: new Date().toISOString()  
            }, `id = ${roomId}`);  
        })  
        .then(() => {  
            console.log('房间状态更新成功');  
        })  
        .catch(err => {  
            console.error('房间状态更新失败:', err);  
        });  
}

2.3 收租记录管理：自动化是关键

功能需求：

• 记录每次收租情况
• 区分租金和水电费
• 支持多种支付方式
• 自动创建财务记录

核心代码：收租记录保存与财务同步

saveRentCollection() {  
    if (!this.validateForm()) {  
        return;  
    }  

    const collectionData = {  
        tenant_id: parseInt(this.formData.tenant_id),  
        collection_date: this.formData.collection_date,  
        rent_amount: parseFloat(this.formData.rent_amount) || 0,  
        utility_amount: parseFloat(this.formData.utility_amount) || 0,  
        total_amount: this.totalAmount,  
        payment_method: this.formData.payment_method || 'cash',  
        status: this.formData.status || 'pending',  
        notes: this.formData.notes || null,  
        updated_at: new Date().toISOString()  
    };  

    // 保存收租记录  
    uni.insertData('rent_collections', collectionData)  
        .then(() => {  
            // 🔥 核心：如果收租状态为已收租，自动创建财务记录  
            if (collectionData.status === 'collected') {  
                return this.createFinancialRecord(collectionData);  
            }  
            return Promise.resolve();  
        })  
        .then(() => {  
            uni.showToast({  
                title: '收租记录添加成功',  
                icon: 'success'  
            });  
            setTimeout(() => {  
                uni.navigateBack();  
            }, 800);  
        })  
        .catch(err => {  
            console.error('收租记录保存失败:', err);  
            uni.showToast({  
                title: '保存失败，请重试',  
                icon: 'error'  
            });  
        });  
}  

// 创建对应的财务记录（核心同步逻辑）  
createFinancialRecord(collectionData) {  
    return new Promise((resolve, reject) => {  
        // 1. 查询租户信息  
        uni.queryWithConditions('tenants', `id = ${collectionData.tenant_id}`)  
            .then(tenantResults => {  
                if (!tenantResults || tenantResults.length === 0) {  
                    console.warn('未找到租户信息，跳过财务记录创建');  
                    return resolve();  
                }  

                const tenant = tenantResults[0];  

                // 2. 查询房间信息（获取property_id）  
                return uni.queryWithConditions('rooms', `id = ${tenant.room_id}`)  
                    .then(roomResults => {  
                        if (!roomResults || roomResults.length === 0) {  
                            console.warn('未找到房间信息，跳过财务记录创建');  
                            return resolve();  
                        }  

                        const room = roomResults[0];  

                        // 3. 创建财务记录  
                        const financialData = {  
                            property_id: room.property_id,  
                            room_id: room.id,  // 🔥 关键：关联房间  
                            type: 'income',  
                            category: 'rent',  
                            amount: collectionData.total_amount,  
                            description: `${tenant.name}租金收入 - ${room.room_number}号房`,  
                            record_date: collectionData.collection_date,  
                            created_at: new Date().toISOString()  
                        };  

                        return uni.insertData('financial_records', financialData);  
                    });  
            })  
            .then(() => {  
                console.log('财务记录创建成功');  
                resolve();  
            })  
            .catch(err => {  
                console.error('财务记录创建失败:', err);  
                resolve(); // 不阻断主流程  
            });  
    });  
}

设计亮点：

1. 自动化同步：收租后自动创建财务记录，无需手动二次录入
2. 数据溯源：通过description字段清晰标识收入来源
3. 三级关联：租户→房间→房产，确保数据完整性
4. 容错机制：财务记录失败不影响收租记录保存

功能模块三：财务管理 - 数据的统一中心

3.1 财务记录：收支一目了然

功能需求：

• 记录所有收入支出
• 支持房间级别关联
• 分类管理（租金、押金、维修等）
• 数据统计分析

踩坑记录4：财务记录与租金管理数据不同步

问题现象：

• 在财务页面添加租金收入，租金管理中看不到
• 在租金管理添加收入，有时财务记录中不显示

根本原因：
财务记录表缺少room_id字段，无法建立房间级别的数据关联。

解决方案：增强数据库结构

// 1. 修改financial_records表结构，添加room_id字段  
let columnList = [  
    { 'name': 'id', 'type': 'integer', 'nullable': false, 'primary': true },  
    { 'name': 'property_id', 'type': 'integer', 'nullable': true },  
    { 'name': 'room_id', 'type': 'integer', 'nullable': true },  // 🔥 新增  
    { 'name': 'type', 'type': 'text', 'nullable': false },  
    { 'name': 'category', 'type': 'text', 'nullable': false },  
    { 'name': 'amount', 'type': 'real', 'nullable': false },  
    { 'name': 'description', 'type': 'text', 'nullable': true },  
    { 'name': 'record_date', 'type': 'text', 'nullable': false },  
    { 'name': 'created_at', 'type': 'text', 'nullable': true }  
];  

// 2. 修改数据转换函数  
function convertResultSetToFinancialArray(resultSet) {  
    // ...  
    record.property_id = resultSet.getString(resultSet.getColumnIndex('property_id'));  
    record.room_id = resultSet.getString(resultSet.getColumnIndex('room_id')); // 🔥 新增  
    record.amount = resultSet.getDouble(resultSet.getColumnIndex('amount')); // 🔥 改为getDouble  
    // ...  
}

功能增强：财务记录添加房间选择

<template>  
    <!-- 房产选择 -->  
    <view class="field-group">  
        <text class="field-label">所属房产 *</text>  
        <view @click="showPropertyPicker">  
            <text>{{ formData.property_address || '请选择房产' }}</text>  
        </view>  
    </view>  

    <!-- 🔥 新增：房间选择（选择房产后动态显示） -->  
    <view class="field-group"   
          v-if="formData.property_id && roomList.length > 0">  
        <text class="field-label">所属房间</text>  
        <view @click="showRoomPicker">  
            <text>{{ formData.room_number ?   
                `${formData.room_number}号房` : '请选择房间(可选)' }}</text>  
        </view>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            formData: {  
                property_id: null,  
                room_id: null,      // 🔥 新增  
                room_number: '',    // 🔥 新增  
                // ...  
            },  
            roomList: []           // 🔥 新增  
        }  
    },  

    methods: {  
        // 房产选择后，自动加载房间列表  
        handlePropertySelected(property) {  
            this.formData.property_id = property.id;  
            this.formData.property_address = property.address;  

            // 清空之前的房间选择  
            this.formData.room_id = null;  
            this.formData.room_number = '';  

            // 🔥 加载该房产的房间列表  
            this.loadRoomList(property.id);  
        },  

        loadRoomList(propertyId) {  
            if (!propertyId) {  
                this.roomList = [];  
                return;  
            }  

            uni.queryWithConditions('rooms', `property_id = ${propertyId}`)  
                .then(results => {  
                    console.log('房间列表查询成功:', results?.length || 0, '个房间');  
                    this.roomList = results || [];  
                })  
                .catch(err => {  
                    console.error('房间列表查询失败:', err);  
                    this.roomList = [];  
                });  
        },  

        showRoomPicker() {  
            if (this.roomList.length === 0) {  
                uni.showToast({  
                    title: '该房产暂无房间',  
                    icon: 'none'  
                });  
                return;  
            }  

            const roomNameList = this.roomList.map(room =>   
                `${room.room_number}号房 (${room.monthly_rent}元/月)`);  

            uni.showActionSheet({  
                itemList: roomNameList,  
                success: (res) => {  
                    const selectedRoom = this.roomList[res.tapIndex];  
                    this.formData.room_id = selectedRoom.id;  
                    this.formData.room_number = selectedRoom.room_number;  
                }  
            });  
        }  
    }  
}  
</script>

功能模块四：数据统计 - 让数字说话

4.1 首页数据总览：一眼看懂经营状况

功能需求：

• 总资产价值展示
• 本月收益分析
• 租赁管理概览
• 快捷操作入口

核心代码：营业收入计算

踩坑记录5：主页营业收入不包含财务记录

问题现象：
在财务页面添加的收入，主页营业收入不显示。

错误逻辑：分离计算

// ❌ 错误：分离计算导致遗漏  
monthlyTotalIncome() {  
    return this.monthlyRentIncome + this.monthlyNonRentIncome;  
}  

monthlyRentIncome() {  
    // 只从rent_collections表计算  
    return this.rentCollections  
        .filter(r => r.status === 'collected')  
        .reduce((sum, r) => sum + parseFloat(r.total_amount || 0), 0);  
}  

monthlyNonRentIncome() {  
    // 从financial_records表计算，但排除了租金  
    return this.getMonthlyRecords('income')  
        .filter(r => r.category !== 'rent')  
        .reduce((sum, r) => sum + parseFloat(r.amount || 0), 0);  
}

问题分析：

• 直接在财务页面添加的租金收入被排除了
• 数据来源不统一，导致统计不完整

正确方案：统一数据源

// ✅ 正确：所有收入统一从financial_records计算  
monthlyTotalIncome() {  
    return this.monthlyIncome; // 统一数据源  
}  

monthlyIncome() {  
    // 财务记录中当月所有收入之和  
    return this.getMonthlyRecords('income').reduce((sum, record) => {  
        return sum + parseFloat(record.amount || 0);  
    }, 0);  
}  

getMonthlyRecords(type) {  
    const now = new Date();  
    const currentMonth = now.toISOString().slice(0, 7); // YYYY-MM  

    return this.financialRecords.filter(record =>  
        record.type === type &&  
        record.record_date &&  
        record.record_date.startsWith(currentMonth)  
    );  
}

架构优化总结：

• ✅ 财务记录表是唯一的收入统计数据源
• ✅ 收租记录表仅用于收租流程管理
• ✅ 收租记录自动创建财务记录，实现数据同步
• ✅ 统计计算全部基于financial_records表，避免遗漏

4.2 统计分析页：深度数据洞察

功能需求：

• 房产收益排行
• 支出分析
• 租赁分析（出租率、租金收入占比）
• 租户分析

核心代码：出租率计算

computed: {  
    // 总房间数  
    totalRooms() {  
        return this.roomList.length;  
    },  

    // 已出租房间数  
    rentedRooms() {  
        return this.roomList.filter(room => room.status === 'rented').length;  
    },  

    // 房间出租率  
    roomOccupancyRate() {  
        if (this.totalRooms === 0) return 0;  
        return ((this.rentedRooms / this.totalRooms) * 100).toFixed(1);  
    },  

    // 租金收入占总收入比例  
    rentIncomePercentage() {  
        if (this.totalIncomeAmount === 0) return 0;  
        return ((this.rentIncomeAmount / this.totalIncomeAmount) * 100).toFixed(1);  
    },  

    // 平均租金水平  
    averageMonthlyRent() {  
        if (this.roomList.length === 0) return 0;  
        const totalRent = this.roomList.reduce((sum, room) =>   
            sum + parseFloat(room.monthly_rent || 0), 0);  
        return (totalRent / this.roomList.length).toFixed(0);  
    }  
}

🔧 HarmonyOS适配的三大挑战与解决方案 {#harmonyos适配}

挑战一：Picker组件的兼容性问题

问题场景：
在租金记录页面，选择租户时使用<picker>组件，当有多个租户时点击无响应。

问题代码：

<!-- ❌ 在HarmonyOS上有问题 -->  
<picker :range="tenantList"   
        range-key="name"  
        @change="onTenantChange">  
    <view>{{ selectedTenant?.name || '请选择租户' }}</view>  
</picker>

根本原因：
HarmonyOS的picker组件在动态数据绑定和复杂对象数组处理上存在兼容性问题。

解决方案：使用uni.showActionSheet替代

// ✅ 完美兼容的方案  
showTenantPicker() {  
    if (this.tenantList.length === 0) {  
        uni.showToast({  
            title: '暂无租户',  
            icon: 'none'  
        });  
        return;  
    }  

    const tenantNames = this.tenantList.map(t => t.name);  

    uni.showActionSheet({  
        itemList: tenantNames,  
        success: (res) => {  
            if (!res.cancel) {  
                const selectedTenant = this.tenantList[res.tapIndex];  
                this.formData.tenant_id = selectedTenant.id;  
                this.selectedTenantText = selectedTenant.name;  
                this.selectedTenant = selectedTenant;  

                uni.showToast({  
                    title: `已选择: ${selectedTenant.name}`,  
                    icon: 'success'  
                });  
            }  
        },  
        fail: (err) => {  
            console.log('用户取消选择或出错:', err);  
        }  
    });  
}

HTML改造：

<!-- ✅ 使用点击事件触发 -->  
<view class="picker-wrapper" @click="showTenantPicker">  
    <text class="picker-value">  
        {{ selectedTenantText || '请选择租户' }}  
    </text>  
    <text class="picker-arrow">👤</text>  
</view>

经验总结：

在HarmonyOS开发中，涉及复杂数据的选择器，优先考虑uni.showActionSheet或自定义组件。

挑战二：ResultSet数据类型转换陷阱

问题场景：
总资产计算时，100万+200万+300万 = "100200300"

问题代码：

// ❌ 错误：所有字段都用getString  
function convertResultSetToFinancialArray(resultSet) {  
    const result = [];  
    resultSet.goToFirstRow();  

    for (let i = 0; i < count; i++) {  
        let record = {};  
        record.id = resultSet.getString(resultSet.getColumnIndex('id'));  
        record.property_id = resultSet.getString(resultSet.getColumnIndex('property_id'));  
        record.amount = resultSet.getString(resultSet.getColumnIndex('amount')); // ❌ 金额变成字符串  
        // ...  
        result[i] = record;  
        resultSet.goToNextRow();  
    }  
    return result;  
}

问题分析：

// JavaScript的+操作符行为  
"100" + "200" + "300" = "100200300"  // ❌ 字符串拼接  
100 + 200 + 300 = 600                 // ✅ 数值相加

正确方案：严格区分数据类型

// ✅ 正确：根据字段类型选择方法  
function convertResultSetToFinancialArray(resultSet) {  
    const result = [];  
    resultSet.goToFirstRow();  

    for (let i = 0; i < count; i++) {  
        let record = {};  
        record.id = resultSet.getString(resultSet.getColumnIndex('id'));          // 文本  
        record.property_id = resultSet.getString(resultSet.getColumnIndex('property_id')); // ID  
        record.room_id = resultSet.getString(resultSet.getColumnIndex('room_id'));         // ID  
        record.type = resultSet.getString(resultSet.getColumnIndex('type'));              // 文本  
        record.category = resultSet.getString(resultSet.getColumnIndex('category'));      // 文本  
        record.amount = resultSet.getDouble(resultSet.getColumnIndex('amount'));          // ✅ 数值  
        record.description = resultSet.getString(resultSet.getColumnIndex('description'));// 文本  
        record.record_date = resultSet.getString(resultSet.getColumnIndex('record_date'));// 日期  
        record.created_at = resultSet.getString(resultSet.getColumnIndex('created_at'));  // 日期  

        result[i] = record;  
        resultSet.goToNextRow();  
    }  
    return result;  
}

最佳实践规范：

// ResultSet数据类型选择指南  
const TYPE_MAPPING = {  
    // 文本类型  
    'text': 'getString',  
    'varchar': 'getString',  

    // 数值类型  
    'integer': 'getLong',     // 整数  
    'real': 'getDouble',      // 小数  
    'numeric': 'getDouble',   // 数值  

    // 特殊类型  
    'blob': 'getBlob',        // 二进制  
    'boolean': 'getLong',     // 布尔值（0/1）  

    // 日期类型（通常存为text）  
    'datetime': 'getString',  // 日期时间  
    'date': 'getString'       // 日期  
};

调试技巧：

// 添加类型检查日志  
computed: {  
    totalValue() {  
        const total = this.propertyList.reduce((sum, item) => {  
            const value = parseFloat(item.current_value) || 0;  

            // 🔥 调试日志  
            console.log(`房产: ${item.address}`);  
            console.log(`  current_value: ${item.current_value} (${typeof item.current_value})`);  
            console.log(`  转换后: ${value} (${typeof value})`);  

            return sum + value;  
        }, 0);  

        console.log(`总资产: ${total} (${typeof total})`);  
        return total;  
    }  
}

挑战三：生命周期与数据初始化

问题场景：
收租记录列表页面不停打印"收租记录表创建成功"，数据加载重复执行。

问题代码：

// ❌ 错误：onLoad和onShow都初始化表  
export default {  
    onLoad(options) {  
        this.initTable();  // 创建表  
        this.loadData();   // 加载数据  
    },  

    onShow() {  
        this.initTable();  // 又创建一次表！  
        this.loadData();   // 又加载一次数据！  
    }  
}

问题分析：

• 每次页面显示都重新初始化表
• 导致重复的数据库操作
• 日志输出混乱，影响调试

正确方案：明确生命周期职责

// ✅ 正确：职责分离  
export default {  
    data() {  
        return {  
            isTableInit: false,  // 表初始化标记  
            propertyId: null,  
            dataList: []  
        }  
    },  

    onLoad(options) {  
        // 1. 获取路由参数  
        this.propertyId = options.propertyId;  

        // 2. 首次加载：初始化表 + 加载数据  
        this.initializeOnce();  
    },  

    onShow() {  
        // 3. 后续显示：仅刷新数据  
        if (this.isTableInit) {  
            this.refreshData();  
        }  
    },  

    methods: {  
        // 首次初始化（只执行一次）  
        async initializeOnce() {  
            if (this.isTableInit) return;  

            try {  
                // 初始化表结构  
                await this.initTable();  
                this.isTableInit = true;  
                console.log('表初始化完成');  

                // 加载初始数据  
                await this.loadData();  
            } catch (err) {  
                console.error('初始化失败:', err);  
            }  
        },  

        // 刷新数据（不重新初始化表）  
        async refreshData() {  
            try {  
                await this.loadDataList();  
                console.log('数据刷新完成');  
            } catch (err) {  
                console.error('数据刷新失败:', err);  
            }  
        },  

        // 初始化表结构  
        initTable() {  
            return uni.createTable('rent_collections', columnList)  
                .then(() => {  
                    console.log('收租记录表创建成功');  
                })  
                .catch(err => {  
                    // createTable会在表已存在时报错，这是正常的  
                    console.log('表已存在或创建失败:', err);  
                });  
        },  

        // 加载完整数据  
        async loadData() {  
            await Promise.all([  
                this.loadTenantMap(),    // 先加载依赖数据  
                this.loadRoomMap()  
            ]);  
            await this.loadDataList();   // 再加载主数据  
        },  

        // 仅加载列表数据  
        loadDataList() {  
            return uni.queryWithConditions('rent_collections', '')  
                .then(results => {  
                    this.dataList = results || [];  
                })  
                .catch(err => {  
                    console.error('数据加载失败:', err);  
                    this.dataList = [];  
                });  
        }  
    }  
}

生命周期最佳实践：

页面首次加载 → onLoad  
    ├─ 初始化表结构 (once)  
    ├─ 加载依赖数据 (once)  
    └─ 加载主数据  

页面再次显示 → onShow    
    └─ 仅刷新数据（不重新初始化）

🔄 数据同步机制：让数据流动起来 {#数据同步}

数据同步是整个系统的核心挑战。我设计了三层同步机制：

同步层级一：收租记录 → 财务记录

触发条件： 收租状态为"已收租"

// 自动同步流程  
收租记录保存 (status='collected')  
    ↓  
查询租户信息 (获取租户名称)  
    ↓  
查询房间信息 (获取房间号、房产ID)  
    ↓    
创建财务记录 (income, category='rent')  
    ↓  
完成同步

同步层级二：租户状态 → 房间状态

触发条件： 添加/删除租户，租户状态变更

// 状态联动逻辑  
租户操作完成  
    ↓  
查询该房间所有租户  
    ↓  
检查是否存在活跃租户 (status='active')  
    ↓  
更新房间状态  
    ├─ 有活跃租户 → status='rented'  
    └─ 无活跃租户 → status='vacant'

同步层级三：房间选择 → 数据联动

触发条件： 财务记录选择房产

// 级联加载流程  
选择房产  
    ↓  
清空之前的房间选择  
    ↓  
查询该房产的所有房间  
    ↓  
展示房间选择器（可选）  
    ↓  
选择房间后关联room_id

⚡ 性能优化：从卡顿到丝滑 {#性能优化}

优化一：Computed Property 缓存计算

问题： 在模板中直接调用方法导致重复计算

<!-- ❌ 错误：每次渲染都重新计算 -->  
<text>{{ getTotalAssets() }}</text>  
<text>{{ getTotalAssets() }}</text>  <!-- 又计算一次 -->

优化： 使用计算属性缓存结果

// ✅ 优化：使用computed缓存  
computed: {  
    totalAssets() {  
        return this.propertyList.reduce((sum, p) =>   
            sum + (parseFloat(p.current_value) || 0), 0);  
    }  
}

<!-- ✅ 多次使用，只计算一次 -->  
<text>{{ totalAssets }}</text>  
<text>{{ totalAssets }}</text>  <!-- 使用缓存值 -->

优化二：数据加载策略

问题： 首页加载慢，等待时间长

原因分析：

// ❌ 串行加载，总耗时 = 每个接口耗时之和  
loadData() {  
    this.loadProperties();      // 100ms  
    this.loadFinancials();      // 150ms  
    this.loadRooms();           // 120ms  
    this.loadTenants();         // 100ms  
    // 总耗时: 470ms  
}

优化方案： 并行加载

// ✅ 并行加载，总耗时 = 最慢的接口耗时  
async loadData() {  
    try {  
        await Promise.all([  
            this.loadProperties(),   // ┐  
            this.loadFinancials(),   // ├─ 并行执行  
            this.loadRooms(),        // ┤  
            this.loadTenants()       // ┘  
        ]);  
        // 总耗时: 150ms（最慢的接口）  

        // 依赖数据的后续处理  
        this.processData();  
    } catch (err) {  
        console.error('数据加载失败:', err);  
    }  
}

性能对比：

• 串行加载：470ms
• 并行加载：150ms
• 性能提升：68% 🚀

优化三：避免不必要的数据库操作

问题： onShow时重复初始化表

优化： 使用标志位控制

data() {  
    return {  
        isTableInit: false  // 🔥 标志位  
    }  
},  

methods: {  
    initTable() {  
        if (this.isTableInit) {  
            console.log('表已初始化，跳过');  
            return Promise.resolve();  
        }  

        return uni.createTable(...)  
            .then(() => {  
                this.isTableInit = true;  
                console.log('表初始化完成');  
            });  
    }  
}

优化四：列表渲染优化

使用v-for时添加唯一key

<!-- ❌ 没有key，Vue无法高效更新 -->  
<view v-for="item in list">  
    {{ item.name }}  
</view>  

<!-- ✅ 有key，Vue可以精确复用 -->  
<view v-for="item in list" :key="item.id">  
    {{ item.name }}  
</view>

避免在v-for中使用v-if

<!-- ❌ 性能差：先渲染再过滤 -->  
<view v-for="item in list" :key="item.id" v-if="item.status === 'active'">  
    {{ item.name }}  
</view>  

<!-- ✅ 性能好：先过滤再渲染 -->  
<view v-for="item in activeList" :key="item.id">  
    {{ item.name }}  
</view>  

<script>  
computed: {  
    activeList() {  
        return this.list.filter(item => item.status === 'active');  
    }  
}  
</script>

🎨 UI/UX设计：商务风格的视觉语言 {#uiux设计}

设计理念

作为一款专业的房产管理工具，UI设计遵循以下原则：

1. 商务专业：渐变、阴影、卡片化设计
2. 信息清晰：合理的视觉层级和间距
3. 操作便捷：大按钮、明确反馈
4. 数据可视：数字大、图标辅助

SCSS变量系统

// uni.scss - 全局设计token  

// ===== 颜色系统 =====  
// 主色  
$primary-blue: #3B82F6;  
$primary-dark: #2563EB;  

// 功能色  
$income-text: #10B981;      // 收入绿  
$income-bg: rgba(16, 185, 129, 0.1);  
$expense-text: #EF4444;     // 支出红  
$expense-bg: rgba(239, 68, 68, 0.1);  

// 文本色  
$text-primary: #1E293B;     // 主要文本  
$text-secondary: #64748B;   // 次要文本  
$text-tertiary: #94A3B8;    // 辅助文本  

// 背景色  
$bg-primary: #FFFFFF;  
$bg-secondary: #F8FAFC;  

// ===== 间距系统 =====  
$spacing-xs: 8rpx;  
$spacing-sm: 12rpx;  
$spacing-md: 16rpx;  
$spacing-lg: 24rpx;  
$spacing-xl: 32rpx;  
$spacing-xxl: 48rpx;  

// ===== 圆角系统 =====  
$radius-small: 8rpx;  
$radius-medium: 12rpx;  
$radius-large: 16rpx;  
$radius-pill: 999rpx;  

// ===== 阴影系统 =====  
$shadow-card: 0 8rpx 32rpx rgba(15, 23, 42, 0.08),   
              0 4rpx 16rpx rgba(15, 23, 42, 0.04);  

// ===== 字体系统 =====  
$font-size-caption: 22rpx;    // 说明文字  
$font-size-body: 28rpx;       // 正文  
$font-size-subhead: 30rpx;    // 副标题  
$font-size-headline: 32rpx;   // 标题  
$font-size-title: 40rpx;      // 大标题

卡片设计模式

// 统一的卡片样式  
.info-card {  
    background: linear-gradient(135deg, #FFFFFF 0%, #F8F9FA 100%);  
    border-radius: $radius-large;  
    padding: $spacing-xl;  
    box-shadow: $shadow-card;  
    border: 1rpx solid rgba(255, 255, 255, 0.8);  
    transition: all 0.3s ease;  

    &:active {  
        transform: translateY(2rpx);  
        box-shadow: 0 4rpx 16rpx rgba(15, 23, 42, 0.06);  
    }  
}

数据展示设计

大数字设计：

<view class="data-showcase">  
    <text class="data-number">¥{{ formatLargeNumber(2380000) }}</text>  
    <text class="data-label">总资产价值</text>  
</view>  

<style lang="scss">  
.data-number {  
    font-size: 56rpx;      // 大号字体  
    font-weight: 700;      // 粗体  
    color: $text-primary;  
    line-height: 1.2;  
    letter-spacing: -0.5rpx; // 紧凑间距  
}  

.data-label {  
    font-size: $font-size-body;  
    color: $text-secondary;  
    margin-top: $spacing-xs;  
}  
</style>

收支颜色区分：

.income-color {  
    color: $income-text; // 绿色  
}  

.expense-color {  
    color: $expense-text; // 红色  
}

用户体验细节

1. 操作反馈优化

// 成功反馈  
uni.showToast({  
    title: '添加成功，即将返回',  // 明确告知用户  
    icon: 'success'  
});  

setTimeout(() => {  
    uni.navigateBack();  
}, 800);  // 800ms刚好够看到提示

2. 空状态设计

<view class="empty-state" v-if="dataList.length === 0">  
    <text class="empty-icon">🏠</text>  
    <text class="empty-title">暂无数据</text>  
    <text class="empty-subtitle">点击右上角按钮添加</text>  
</view>

3. 加载状态

<view class="loading-state" v-if="isLoading">  
    <text class="loading-icon">⏳</text>  
    <text class="loading-text">加载中...</text>  
</view>

🐛 踩坑经验：那些让我头秃的Bug {#踩坑经验}

Bug 1: 字符串拼接陷阱

现象： 100 + 200 + 300 = "100200300"

原因： 数据库返回字符串类型

解决： getDouble + parseFloat双保险

耗时： 2小时

Bug 2: Picker组件失效

现象： 选择租户时点击无反应

原因： HarmonyOS picker兼容问题

解决： 改用uni.showActionSheet

耗时： 3小时

Bug 3: 数据重复加载

现象： 不停打印"表创建成功"

原因： onLoad和onShow都初始化表

解决： 生命周期职责分离

耗时： 1小时

Bug 4: 房间状态误判

现象： 明明没租户却提示"已有租户"

原因： 依赖status字段而非实际数据

解决： 查询数据库确认

耗时： 1.5小时

Bug 5: 收入统计遗漏

现象： 财务页面添加的收入不计入统计

原因： 分离计算逻辑导致遗漏

解决： 统一数据源（financial_records）

耗时： 2小时

Bug 6: 收租日选择不全

现象： 只能选择部分日期

原因： Picker组件限制

解决： Grid布局自定义选择器

耗时： 4小时

总结：调试时间约占开发时间的30% 😅

🔨 开发工具与调试技巧 {#开发工具}

HBuilder X 实用功能

1. 真机调试：实时预览，快速定位问题
2. 代码提示：TypeScript类型提示
3. 条件编译：处理平台差异

// #ifdef APP-HARMONY  
// HarmonyOS专属代码  
// #endif  

// #ifdef APP-IOS  
// iOS专属代码  
// #endif

调试技巧总结

1. Console.log大法

// 关键位置添加日志  
console.log('=== 数据加载开始 ===');  
console.log('查询条件:', condition);  
console.log('查询结果:', results);  
console.log('=== 数据加载完成 ===');

2. 类型检查

console.log(`金额: ${amount}, 类型: ${typeof amount}`);

3. 生命周期追踪

onLoad() { console.log('⬇️ onLoad'); }  
onShow() { console.log('👁️ onShow'); }  
onHide() { console.log('🙈 onHide'); }

4. 数据快照

console.log('数据快照:', JSON.stringify(data, null, 2));

🚀 未来规划与展望 {#未来规划}

v1.1.0 - 功能增强（开发中）

• [ ] 合同到期提醒功能
• [ ] 收租日提醒（推送通知）
• [ ] 数据导出（Excel格式）
• [ ] 云同步备份

v1.2.0 - 数据可视化（规划中）

• [ ] 收益趋势图表（折线图）
• [ ] 房产价值变化（柱状图）
• [ ] 租客分布分析（饼图）
• [ ] 年度投资报告

v1.3.0 - 智能化（未来愿景）

• [ ] AI租金定价建议
• [ ] 空置期预测
• [ ] 智能收租提醒
• [ ] 租客画像分析

v2.0.0 - 多平台扩展

• [ ] iOS版本发布
• [ ] Android版本发布
• [ ] Web管理后台
• [ ] 数据云同步

💭 总结与感悟 {#总结}

开发历程回顾

开发阶段：

阶段一：需求分析 + 技术选型  
阶段二：数据库设计 + 架构搭建  
阶段三：核心功能开发（房产、租赁）  
阶段四：财务统计模块  
阶段五：HarmonyOS适配调试  
阶段六：UI优化 + Bug修复

代码统计：

• 总代码量：10000+ 行
• 页面数量：18个
• 组件数量：30+个
• 数据表：5个核心表

技术收获

1. 深入理解HarmonyOS生态

从零开始学习HarmonyOS的relationalStore数据库，从陌生到熟悉，从踩坑到总结最佳实践。

2. 掌握uni-app x开发

• Composition API的使用
• 生命周期管理
• 数据响应式原理
• 跨平台适配技巧

3. 数据库设计能力

学会设计合理的数据关联关系，理解数据一致性的重要性。

4. 性能优化思维

从用户体验出发，优化加载速度、减少重复计算、提升交互流畅度。

思维成长

1. 用户思维

不仅是开发者，更是用户。每个功能都从实际需求出发，而非为了技术而技术。

2. 架构思维

先设计数据模型，再设计功能模块。好的架构是成功的一半。

3. 工程思维

代码质量、可维护性、可扩展性同样重要。写代码不仅是为了实现功能，更是为了长期维护。

4. 问题解决思维

遇到问题不慌张，系统分析、逐步排查、总结经验。

给开发者的建议

1. 技术选型要慎重

选择适合自己的技术栈，不要盲目追新。uni-app x + HarmonyOS对我来说是最佳选择。

2. 数据库设计要花时间

数据模型设计好了，后续开发事半功倍。不要急于写代码。

3. 用户体验无小事

800ms的延迟优化、身份证脱敏、空状态提示...这些细节决定产品质量。

4. 持续迭代比一次完美更重要

先实现MVP，再逐步完善。不要追求一次性做到完美。

5. 记录踩坑经验

每个Bug都是成长的机会。记录下来，帮助自己也帮助别人。

写在最后

这个项目从构思到完成，经历了无数次的推翻重来、代码重构、问题调试。但当看到一个功能完整、数据准确、体验流畅的应用在HarmonyOS上运行时，所有的努力都值得了。

uni-app x + HarmonyOS Next 的组合，让我既能享受跨平台开发的便利，又能获得原生应用的性能。虽然过程中遇到了很多适配问题，但每个问题的解决都让我对HarmonyOS生态有了更深的理解。

HarmonyOS代表着未来，提前布局就是抓住机遇。感谢DCloud提供的强大框架，感谢HarmonyOS提供的优秀平台。

让我们一起，星光不负，码向未来！ 🚀