承接上篇整体架构与功能设计，本篇先展示记账页模块记账&预算页页面落地效果，后续结合项目实测，分享开发全流程踩坑问题、新增功能迭代、逻辑 Bug 修复与统计模块复杂规则优化，所有问题均来自自用场景真实测试，解决方案可直接复用。

一、展示记账页模块记账&预算页页面落地效果

二、开发全程踩坑复盘 & 逻辑优化

在上篇基础功能篇中，我完整拆解了个人记账本模块的整体架构、四大核心页面功能、双轨预算体系与全维度数据复盘逻辑。看似完整闭环的功能体系，在真机落地、数据联调、多场景适配的过程中，暴露了大量前端开发典型问题。

记账模块作为整个个人管理小程序中数据联动最复杂、计算逻辑最密集、精度要求最高的核心模块，底层数据计算、预算逻辑联动、页面交互适配的 BUG 最多，也是个人自研项目最容易踩坑的地方。

本篇优先复盘记账主页、预算设置页两大高频使用页面遇到的各类问题，完整还原问题现象、排查思路、修复方案，为同类型小程序开发提供可直接复用的避坑经验。

1、前端浮点运算精度丢失问题

这是所有前端数值类项目的通用经典 BUG，也是记账模块最先暴露、影响最直观的核心问题。

在项目初期开发完成后，我发现整个模块所有数值展示、运算场景都存在小数点位多余浮动误差。无论是记账页面的金额计算、内置计算器的运算结果，还是主页的收支结余统计数据，都会随机出现多位无效小数。

问题具体现象

日常简单的加减运算会出现精度错乱，例如正常计算 7.1+8.9，理论结果应为精准的 16，但程序运算后会出现 16.0000000001 这类多余浮点尾数。同时页面所有动态渲染的金额、结余、预算数值，都会随机展示多余两位及以上无效小数，页面数据展示极其不规整，严重影响记账数据的准确性和观感。

排查与修复过程

初期我误以为是页面渲染问题，仅在 WXML 视图层对展示数据做小数格式化处理，但修复后发现治标不治本。浮点精度问题根源在 JS 底层计算逻辑，仅修改页面展示无法修复运算过程中的误差，计算、赋值、数据联动环节依然会产生精度偏差。

最终解决方案：放弃视图层单一修复方式，对项目内所有计算逻辑、数据赋值、页面渲染公式统一增加保留两位小数的格式化规则。在每一次收支计算、结余统计、预算消耗、计算器运算的逻辑末端，统一做精度截断处理，从数据计算根源杜绝浮点冗余问题，彻底解决了所有金额数据的浮动误差 BUG。

2、收支结余计算公式正负值逻辑颠倒

完成浮点精度修复后，主页预算剩余、收支结余的核心统计逻辑又出现了逻辑定义错误，导致财务数据展示完全不符合设计预期。

问题具体现象

按照产品设计逻辑：账户盈余展示正数、账户亏损超支展示负数。但原始代码的统计公式逻辑颠倒，出现了完全相反的展示效果：账目亏损超支时，剩余预算、结余金额展示为正数；账目有结余盈利时，反而展示为负数，完全误导消费数据判断。

排查与修复过程

经过逐行核对收支统计、预算抵扣、结余核算的嵌套公式，定位问题根源为总收入、总支出的加减运算逻辑写反，正负判定规则完全倒置。

我重新梳理了整套结余核算逻辑，重构主页预算盈余、账户结余的核心计算公式，统一匹配「盈余为正、超支为负」的产品定义，修复后首页财务核心数据展示精准、逻辑自洽。

3、记账主页内置计算器功能故障

记账主页搭载的嵌入式计算器，是提升日常记账效率的核心功能之一，初期版本存在运算逻辑缺陷。

原始版本仅能识别输入内容，无法完成四则运算，无论输入加减乘除组合公式，最终都只会返回首个输入数字，计算器完全失去计算作用。我重新改写计算器运算逻辑与解析公式，支持完整的加、减、乘、除四则运算，能够精准算出最终结果，实现内置计算器的预期功能，不用跳转外部工具，进一步提升记账操作效率。

4、收支分类功能多轮迭代与 BUG 修复

收支分类是记账的基础模块，我结合使用体验先后做多轮样式、交互、权限的优化调整，期间也遇到不少功能卡点。

1. 分类布局样式优化

项目早期分类采用大类嵌套小类的展示形式，层级较多，页面下拉滑动路径过长，视觉观感繁琐，精致度不足。结合使用场景与视觉设计需求，我将布局改为 多行多列方格样式，以规整小方格统一展示所有分类，布局紧凑、直观清爽，操作选择也更加便捷。

2. 新建分类图标展示异常

支持用户自主新增分类是个性化定制的重要功能，但初期新增分类后，自定义图标无法正常渲染，分类栏中仅会展示系统默认图标，自定义设置失效。经过核对图标绑定、数据读取逻辑，修正对应计算与渲染规则，确保新建分类的图标可以正常加载显示。

3. 分类排序交互优化

分类管理页面原本仅支持逐点上下挪动条目，操作繁琐、体验生硬。为提升灵活性，我重构排序交互逻辑，改为长按滑动排序模式，用户可自由拖拽调整分类排列顺序，操作流畅自然。

4. 分类编辑与隐藏权限划分

针对分类管理权限做精细化规则设计：系统默认自带的基础分类，仅支持隐藏操作，不允许直接删除，避免核心分类被误删导致账目数据异常；而用户后续手动新增的自定义分类，开放完整的编辑、删除、隐藏权限。通过区分不同类型分类的操作权限，在灵活度与数据安全性之间做到平衡。

5、首页页面滑动体验异常

记账主页内容元素较多，初期页面滚动滑动手感怪异，滑动不顺畅，日常浏览、翻查账单时体验较差。我针对页面滚动属性、布局结构进行调整，优化滚动逻辑与样式参数，修复滑动异常问题，让页面滑动手感变得自然流畅，提升整体使用舒适度。

6、月 / 年双预算数据混存，无法独立展示保存

本项目核心亮点之一是月度预算 + 年度预算双轨管控体系，但初期开发完成后，双预算体系完全失效，存在数据共用、互相覆盖的严重 BUG。

问题具体现象

原始代码中月度预算与年度预算复用同一套数据存储逻辑，系统无法区分两类预算数据。最终导致全局所有预算展示页面，要么全部加载年度预算数据，要么全部加载月度预算数据，无法实现月、年预算独立保存、独立展示、独立统计，双轨预算管控的设计完全形同虚设。

排查与修复过程

问题核心原因是数据存储维度单一，未对月、年预算做字段隔离。我重新拆分了预算数据的存储逻辑，为月度预算、年度预算搭建两套独立的数据保存、读取、渲染链路，彻底隔离两类预算数据，实现月度精细管控、年度全局统筹的数据互不干扰，完美落地双轨预算设计。

7、仅支持当月预算配置，无法跨月自定义预算

基础双预算逻辑修复后，月度预算的时间维度适配依然存在重大体验缺陷，无法满足提前规划、回溯修改历史预算的真实场景。

问题具体现象

初期版本的月度预算仅锁定当前自然月，系统强制跟随系统时间，仅能编辑、设置当月预算。如果需要提前设置五六月的未来预算，或回溯修改过往月份预算，必须等到对应月份才能操作，极度限制预算规划的灵活性，不符合个人财务前置规划的使用场景。

排查与修复过程

为解决该痛点，我对预算页面做了功能迭代升级：在月度预算页面顶部新增月份切换 Tab 栏，支持自由切换全年 12 个自然月。同时重构每个月份的预算存储逻辑，实现十二个月份预算数据独立存档、互不覆盖。

优化后可随时自定义任意历史月份、未来月份的分类预算额度，每个月份的消费分类预算一一对应，彻底解决跨月预算配置限制，实现全年预算自由规划。

三、本篇小结

本篇主要复盘了记账本模块中记账主页、预算设置页出现的各类问题，涵盖浮点运算精度、计算公式逻辑、内置工具、分类管理、页面交互、双预算数据存储、跨月预算配置等多个方向。

这类问题一部分属于前端通用的数值计算坑点，一部分是页面交互、功能设计迭代中产生的体验问题。经过逐一排查与修复，两大核心页面的功能准确性、操作流畅度、灵活度都得到全面提升。

后续将继续分享数据分析页、新增账单汇总页的真机适配、图表渲染、统计维度错乱等问题与优化方案，欢迎持续关注。