更新记录

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

1.收支记录

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

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

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

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

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

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

平台兼容性

其他

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

FLY-BASE 记账小程序使用说明

项目概述

FLY-BASE 是一个基于 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目录，统一注册使用。

部署说明

微信小程序部署

  1. 准备工作：在微信公众平台注册小程序账号，获取 AppID（需已完成实名认证）。

  2. 配置修改：打开manifest.json，在「微信小程序配置」中填写获取的 AppID。

  3. 构建上传：执行npm run build:mp-weixin，生成dist/dev/mp-weixin目录；打开微信开发者工具，导入该目录，填写项目名称和 AppID，点击「上传」，选择版本号和更新说明。

  4. 审核发布：在微信公众平台「版本管理」中，提交上传的版本进行审核，审核通过后即可发布上线。

H5 部署

  1. 构建打包：执行npm run build:h5，生成dist/build/h5目录（包含 HTML、CSS、JS 等静态文件）。

  2. 服务器配置：准备支持 HTTPS 的 Web 服务器（如 Nginx、Apache），将dist/build/h5目录下的所有文件上传至服务器根目录。

  3. 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;

    }

}
  1. 访问测试：配置完成后，通过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目录结构进行开发，保持代码规范一致。

（注：文档部分内容可能由 AI 生成）

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

插件不采集任何数据

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉

暂无用户评论。