更新记录

1.0.1（2025-10-31）下载此版本

1.收支记录

核心：快速添加收入/支出，金额、分类、账户、时间、备注。
特色：支持负数和正数快速切换（解决退款、倒贴等场景）。
优化：自定义常用模板，一键记账。

2、统计分析 1.时间维度分析

支持按年、月、周、日及自定义时间范围查看数据。 2.图表可视化
饼图：分类占比分析（支出/收入）。
条形图/柱状图：不同时间段的金额对比（同比、环比）。
折线图：趋势分析（支出/收入/净资产变化趋势）

3，预算管理 1.总体预算：设置月度、年度总预算。 2.分类预算：为不同支出分类（如餐饮、交通）设置独立预算。

4，资产管理 1.账户类型：现金、储蓄卡、信用卡、支付宝、微信钱包、储值卡（饭卡、购物卡）、投资账户、债务账户等。 2.统一视图：仪表盘首页清晰展示净资产、各账户余额。 3.多币种支持：添加账户时可选择币种，根据汇率自动折算为基准货币计算总资产。 4.账户管理：支持账户的开启、归档、隐藏（不计入总资产）。

5，多账本 1.多账本：创建不同账本用于不同场景（如：家庭账本、旅行账本、生意账本）。

平台兼容性

uni-app(3.8.0)

Vue2	Vue2插件版本	Vue3	Chrome	Safari	app-vue	app-vue插件版本	app-nvue	Android	iOS	鸿蒙
√	1.0.1	-	√	-	√	1.0.1	-	-	-	-

微信小程序	微信小程序插件版本	支付宝小程序	抖音小程序	百度小程序	快手小程序	京东小程序	鸿蒙元服务	QQ小程序	飞书小程序	快应用-华为	快应用-联盟
√	1.0.1	-	-	-	-	-	-	-	-	-	-

其他

多语言	暗黑模式	宽屏模式
×	×	√

07FLY-BOOKKEEP 记账小程序使用说明

项目概述

07FLY-BOOKKEEP 是一个基于 uni-app 开发的多平台记账小程序，支持微信小程序和 H5 网页端。项目采用 Vue.js 2.7 框架，集成了完整的财务管理功能，能够满足个人及小团队的收支记录、账本管理、预算跟踪、统计分析等核心需求，具备良好的跨平台兼容性和易用性。

技术栈

框架: uni-app + Vue.js 2.7
UI 组件: @dcloudio/uni-ui
构建工具: Vue CLI 4.5
支持平台: 微信小程序、H5 网页

功能模块

1. 核心功能

账本管理: 多账本支持，可设置默认账本，账本切换自动同步数据
收支记录: 支持收入、支出分类记录，自定义分类标签，关联时间、金额、备注信息
预算管理: 月度 / 年度预算设置，实时进度跟踪，剩余预算及日均消费计算
统计分析: 收支趋势图表、分类占比分析、月度 / 年度数据对比
资产管理: 多账户资产整合与管理

2. 辅助工具

房贷计算器: 支持贷款金额、还款期限、利率参数计算，生成还款计划
汇率换算: 多币种实时汇率获取与转换
税费计算: 个人所得税精准计算
存储计划: 定期存款收益测算

3. 用户系统

注册登录: 支持账号密码登录、微信授权登录双模式
个人中心: 头像修改、密码重置、消息通知管理
数据同步: 云端数据存储与多端同步

项目结构

base-bookkeep-uniapp/

├── api/                    # API接口模块

│   ├── user.js            # 用户相关API（登录、注册、个人信息）

│   ├── books.js           # 账本管理API（创建、切换、查询）

│   ├── record.js          # 收支记录API（新增、编辑、删除、查询）

│   ├── budget.js          # 预算管理API（设置、查询、统计）

│   └── ...                # 其他功能模块API

├── pages/                  # 页面组件

│   ├── dashboard/         # 首页仪表板（数据概览）

│   ├── record/            # 账单管理（收支记录增删改查）

│   ├── statistics/        # 统计分析（图表展示、数据筛选）

│   ├── member/            # 会员中心（个人信息、设置）

│   ├── books/             # 账本管理（账本创建、切换）

│   ├── budget/            # 预算管理（预算设置、进度查看）

│   ├── assets/            # 资产管理（账户管理、资产统计）

│   └── tools/             # 工具页面（计算器、换算器合集）

├── components/            # 公共组件（复用UI组件、功能组件）

├── store/                 # 状态管理（全局数据存储、状态共享）

├── static/                # 静态资源（图片、图标、静态配置）

└── common/                # 公共工具（工具函数、常量定义、全局配置）

安装与运行

环境要求

Node.js 14+（推荐 14.17.x 或 16.x 版本）
npm 6+ 或 yarn 1.22+

安装依赖

\# 使用npm安装

npm install

\# 或使用yarn安装（推荐，速度更快）

yarn install

开发运行

\# 微信小程序开发环境（实时热更新）

npm run dev:mp-weixin

\# H5网页开发环境（浏览器预览）

npm run dev:h5

生产构建

\# 微信小程序生产构建（优化代码、压缩资源）

npm run build:mp-weixin

\# H5网页生产构建（生成可部署的静态文件）

npm run build:h5

配置说明

1. 项目核心配置

配置文件	作用说明
`manifest.json`	应用全局配置，包含小程序 AppID、H5 代理设置、应用名称、图标等基础信息
`pages.json`	页面路由配置、tabBar 导航配置、页面窗口样式（标题栏、导航栏）等
`vue.config.js`	Vue 构建配置，可自定义 webpack 规则、设置环境变量、配置资源别名等

2. API 代理配置

项目通过代理转发 API 请求，避免跨域问题，配置位于manifest.json中：

"proxy": {

 "/portalmember": {

   "target": "https://jz.demo.07fly.net", // 目标API服务器地址

   "changeOrigin": true, // 开启跨域请求头修改

   "secure": false // 忽略HTTPS证书验证（开发环境适用）

 },

 "/api": {

   "target": "https://jz.demo.07fly.net",

   "changeOrigin": true,

   "secure": false

 }

}

开发环境下，所有以/portalmember或/api开头的请求，都会自动转发到目标服务器。

核心功能使用指南

1. 账本管理

创建账本：进入「账本管理」页面，点击「新增账本」，输入账本名称、选择币种（默认 CNY），完成创建。
设置默认账本：在账本列表中，点击目标账本的「设为默认」，接口会将该账本is_default字段设为 1，后续操作默认关联该账本。
账本切换：在底部 tabBar 或账本列表中切换账本，系统会自动同步当前账本的收支记录、预算数据。

2. 收支记录

新增记录：进入「记账」页面，选择「收入」（类型 1）或「支出」（类型 - 1），输入金额、选择分类（支持自定义分类）、填写备注、选择交易时间，点击「确认」完成记录。
编辑 / 删除记录：在「账单列表」中，长按目标记录，选择「编辑」修改信息或「删除」移除记录。
分类管理：进入「设置 - 分类管理」，可新增、编辑、删除收支分类，自定义分类名称和图标。

3. 预算管理

设置预算：进入「预算」页面，选择「月度预算」或「年度预算」，输入目标金额，点击「保存」完成设置。
查看进度：预算页面实时展示已用金额、剩余金额、预算使用率，以及日均消费建议。
预算调整：点击已设置的预算金额，可修改预算目标，系统会实时更新进度数据。

4. 统计分析

数据筛选：在「统计」页面，可选择时间范围（日 / 周 / 月 / 年）、账本，筛选目标数据。
图表查看：支持收支趋势折线图、分类占比环形图、月度对比柱状图，点击图表可查看详细数据。
数据导出：部分版本支持统计数据导出为 Excel，点击「导出」按钮即可生成文件。

数据格式说明

登录返回格式（核心数据）

{

code: 1, // 1=成功，其他为错误码

msg: "操作成功", // 操作提示信息

data: {

     access\_token: "xxx", // 接口访问令牌

   user\_token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...", // 用户身份令牌

   userinfo: {

     id: 121, // 用户ID

     username: "KK000010", // 用户名

     avatar: "https://xxx.com/avatar.jpg", // 头像地址

     mobile: "138\*\*\*\*1234" // 绑定手机号（脱敏）

     // ...其他用户扩展信息

   }

 }

}

账本列表返回格式

{

 code: 1,

 msg: "操作成功",

 data: \[

   {

     id: 25, // 账本ID

     name: "默认账本", // 账本名称

     is\_default: 1, // 是否默认账本（1=是，0=否）

     currency: "CNY", // 币种

     balance: 1250.80, // 账本余额

     create\_time: "2024-01-15 10:30:00", // 创建时间

     update\_time: "2024-05-20 16:45:00" // 最后更新时间

     // ...其他账本扩展信息

   }

 ]

}

收支记录返回格式

{

 code: 1,

 msg: "操作成功",

 data: {

   list: \[

     {

       id: 1001, // 记录ID

       book\_id: 25, // 所属账本ID

       type: -1, // 类型（-1=支出，1=收入）

       category\_id: 5, // 分类ID

       category\_name: "餐饮", // 分类名称

       amount: 88.50, // 金额

       remark: "午餐外卖", // 备注

       create\_time: "2024-05-20 12:30:00", // 交易时间

       account\_id: 3, // 支付账户ID

       account\_name: "微信支付" // 支付账户名称

       // ...其他记录扩展信息

     }

   ],

   total: 120, // 总记录数

   page: 1, // 当前页码

   page\_size: 20 // 每页条数

 }

}

开发注意事项

1. 页面导航规范

普通页面跳转：使用 uni.navigateTo({ url: '/pages/xxx/xxx' })，保留当前页面，可返回。
tabBar 页面切换：使用 uni.switchTab({ url: '/pages/xxx/xxx' })，关闭其他非 tabBar 页面。
页面重定向：使用 uni.redirectTo({ url: '/pages/xxx/xxx' })，关闭当前页面，跳转到目标页面（不支持 tabBar 页面）。
页面返回：使用 uni.navigateBack({ delta: 1 })，返回上一级页面，delta 为返回层级。

2. 数据存储规范

本地存储：使用 uni.setStorageSync('key', value) 存储，uni.getStorageSync('key') 获取，适用于 token、用户信息、当前账本 ID 等高频访问数据。
全局状态：通过 store 管理，适用于跨页面共享的动态数据（如账本列表、未读消息数）。
临时数据：页面内通过 data 或 computed 存储，仅当前页面有效。

3. API 调用规范

所有 API 请求统一封装在api目录下，按功能模块拆分文件。
API 返回格式统一为 { code, msg, data }，仅在code=1时表示请求成功。
错误处理：统一在catch块中处理网络错误、接口错误，提示用户友好信息（如uni.showToast({ title: res.msg || '操作失败' })）。
请求头：需携带Authorization令牌（登录后获取的user_token），部分接口需指定book_id（当前账本 ID）。

4. 样式与适配规范

单位：统一使用 rpx（响应式像素），适配不同屏幕尺寸（1rpx = 屏幕宽度 / 750）。
主色调：#07C160（绿色），辅助色：#F5F5F5（背景灰）、#FF6B6B（警告红），避免随意新增颜色。
组件：优先使用uni-ui组件库，保证跨平台一致性，自定义组件需放在components目录，统一注册使用。

部署说明

微信小程序部署

准备工作：在微信公众平台注册小程序账号，获取 AppID（需已完成实名认证）。
配置修改：打开manifest.json，在「微信小程序配置」中填写获取的 AppID。
构建上传：执行npm run build:mp-weixin，生成dist/dev/mp-weixin目录；打开微信开发者工具，导入该目录，填写项目名称和 AppID，点击「上传」，选择版本号和更新说明。
审核发布：在微信公众平台「版本管理」中，提交上传的版本进行审核，审核通过后即可发布上线。

H5 部署

构建打包：执行npm run build:h5，生成dist/build/h5目录（包含 HTML、CSS、JS 等静态文件）。
服务器配置：准备支持 HTTPS 的 Web 服务器（如 Nginx、Apache），将dist/build/h5目录下的所有文件上传至服务器根目录。
Nginx 配置示例（避免路由刷新 404）：

server {

   listen 443 ssl;

   server\_name your-domain.com; # 你的域名

   ssl\_certificate /path/to/ssl/cert.pem; # SSL证书路径

   ssl\_certificate\_key /path/to/ssl/key.pem; # SSL密钥路径

   root /path/to/dist/build/h5; # 静态文件目录

   index index.html;

   \# 解决路由刷新404问题

   location / {

       try\_files \$uri \$uri/ /index.html;

   }

}

访问测试：配置完成后，通过https://your-domain.com访问 H5 页面，验证功能正常即可。

常见问题排查

1. 网络请求失败

检查manifest.json中的代理配置是否正确，目标服务器是否可访问。
微信小程序开发环境需配置「不校验合法域名」（开发者工具→详情→本地设置）。
生产环境需在微信公众平台「开发→服务器域名」中添加 API 服务器域名。
查看控制台 Network 面板，确认请求 URL、请求头是否正确，是否返回 404/500 等错误码。

2. 页面白屏

检查pages.json中路由配置是否正确，页面路径是否与实际文件路径一致。
查看控制台 Console 面板，是否有语法错误、组件引入失败等报错信息。
确认依赖包已安装完整（删除node_modules目录，重新执行npm install）。
微信小程序开发环境可尝试「清除缓存→全部清除」，重新编译项目。

3. 数据不同步

检查本地存储的user_token是否过期（过期需重新登录）。
确认当前账本 ID（book_id）是否正确，是否与接口请求中的book_id一致。
查看 API 返回的data字段是否为空，检查接口参数是否完整（如时间范围、账本 ID）。
尝试「下拉刷新」或「重新进入页面」，触发数据重新请求。

4. 样式错乱

确认是否使用 rpx 单位，避免混合使用 px（固定像素）导致适配问题。
检查是否引入全局样式污染，自定义样式需添加作用域（scoped）。
微信小程序和 H5 的样式差异需通过条件编译处理（如/* #ifdef MP-WEIXIN */ ... /* #endif */）。

技术支持

项目文档：查看项目根目录的README.md文件，获取更详细的开发说明。
问题反馈：通过 GitHub Issues 提交问题，需附带控制台报错信息、操作步骤、环境版本。
更新日志：关注项目CHANGELOG.md文件，了解版本更新内容和兼容性说明。
二次开发：如需扩展功能，可基于现有api、pages、components目录结构进行开发，保持代码规范一致。

开源地址：

https://gitee.com/07fly/bookkeep

项目中包括了后台代码，前端代码，如果您对源码&技术感兴趣，请点赞+收藏+转发+关注，大家的支持是我分享最大的动力！！！

日常生活记账小程序项目（记账App+小程序） 记账App 记账小程序 记账项目