用uni-app轻松开发记账小程序，开启便捷财务管理之旅

紫翠 . 发布于 2025-06-03 14:28:52 74 浏览

在当今数字化时代,便捷的财务管理对于每个人来说都至关重要，记账小程序作为一种简单而实用的工具，可以帮助我们更好地记录收支情况，规划预算，实现财务自由，而uni-app作为一款强大的跨平台开发框架，为我们开发记账小程序提供了便捷的途径，本文将详细介绍如何使用uni-app开发一款记账小程序。

uni-app简介

uni-app是一个使用Vue.js进行跨平台开发的框架，它可以同时编译出微信小程序、支付宝小程序、百度小程序、字节跳动小程序、QQ小程序、H5、APP等多个平台的应用，这意味着我们只需要编写一套代码，就可以在多个平台上运行，大大节省了开发时间和成本。

开发环境搭建

安装Node.js：我们需要安装Node.js，它是uni-app开发的基础环境，可以从Node.js官方网站下载适合自己操作系统的安装包进行安装。
安装uni-app CLI：在安装好Node.js后，我们可以使用npm全局安装uni-app CLI，打开命令行终端，执行以下命令：
```
npm install -g @vue/cli @vue/cli-init @dcloudio/uni-cli
```

创建项目：安装完成后，我们可以使用uni-app CLI创建一个新的项目，在命令行终端中执行以下命令：

uni init my-accounting-app

这将创建一个名为my-accounting-app的新项目，项目结构如下：

my-accounting-app
├── pages
│   ├── index
│   │   ├── index.vue
│   │   └── index.json
│   │   └── index.wxml
│   │   └── index.wxss
│   └──...
├── static
├── uni.scss
├── main.js
├── App.vue
└── pages.json

功能设计

首页：展示今日收支概况，包括总收入、总支出、余额等信息，可以使用图表（如柱状图或折线图）直观地展示收支趋势。
记账页面：支持添加新的收支记录，包括记录时间、金额、类型（收入或支出）、备注等信息，可以通过下拉框选择收支类型，提供一些常用的类型选项，如餐饮、购物、交通等。
分类统计页面：按收支类型进行分类统计，展示每种类型的总收入、总支出以及占比情况，可以使用饼图展示各类别的占比。
设置页面：可以设置记账周期（如按日、周、月）、预算金额等参数，提供预算提醒功能，当支出接近预算时发出提醒。

页面开发

首页：
- 在pages/index/index.vue文件中编写首页代码，使用Vue的模板语法展示今日收支概况信息，并嵌入图表组件（如使用echarts）来展示收支趋势。
```
<template>
<view class="container">
  <view class="summary">
    <text>今日总收入：{{ totalIncome }}</text>
    <text>今日总支出：{{ totalExpense }}</text>
    <text>余额：{{ balance }}</text>
  </view>
  <view class="chart">
    
  </view>
</view>
</template>
```
```
记账页面：
- 在pages/record/record.vue文件中编写记账页面代码，使用表单组件收集用户输入的收支记录信息，并提供提交按钮。
```
<template>
<view class="container">
  <form @submit="submitRecord">
    <view class="form-item">
      <label>记录时间</label>
      <uni-datetime-picker type="datetime" :value="recordTime" @change="handleTimeChange"></uni-datetime-picker>
    </view>
    <view class="form-item">
      <label>金额</label>
      <input type="number" v-model="recordAmount" placeholder="请输入金额">
    </view>
    <view class="form-item">
      <label>类型</label>
      <uni-select v-model="recordType" :options="types"> </uni-select>
    </view>
    <view class="form-item">
      <label>备注</label>
      <input type="text" v-model="recordRemark" placeholder="请输入备注">
    </view>
    <button type="submit">提交记录</button>
  </form>
</view>
</template>
```
```
分类统计页面：
- 在pages/category/category.vue文件中编写分类统计页面代码，使用echarts饼图组件展示各类别的收支占比情况。
```
<template>
<view class="container">
  <view class="chart">
    
  </view>
</view>
</template>
```
```
设置页面：
- 在pages/settings/settings.vue文件中编写设置页面代码，使用表单组件收集用户设置的记账周期、预算金额等信息，并提供保存按钮。
```
<template>
<view class="container">
  <form @submit="submitSettings">
    <view class="form-item">
      <label>记账周期</label>
      <uni-radio-group v-model="accountingPeriod">
        <uni-radio label="日">日</uni-radio>
        <uni-radio label="周">周</uni-radio>
        <uni-radio label="月">月</uni-radio>
      </uni-radio-group>
    </view>
    <view class="form-item">
      <label>预算金额</label>
      <input type="number" v-model="budgetAmount" placeholder="请输入预算金额">
    </view>
    <button type="submit">保存设置</button>
  </form>
</view>
</template>
```
```

数据存储

在实际开发中,我们可以选择将数据存储在本地存储（如localStorage或sessionStorage）或后端数据库（如MySQL、MongoDB等）中，这里以本地存储为例，展示如何在记账小程序中进行数据的存储和读取。

保存记录：在记账页面的submitRecord方法中，将记录保存到本地存储。

submitRecord(e) {
  e.preventDefault();
  const records = JSON.parse(localStorage.getItem('records')) || [];
  records.push({
    time: this.recordTime,
    amount: this.recordAmount,
    type: this.recordType,
    remark: this.recordRemark
  });
  localStorage.setItem('records', JSON.stringify(records));
  console.log('提交记录:', this.recordTime, this.recordAmount, this.recordType, this.recordRemark);
}

读取记录：在首页的fetchData方法中，从本地存储读取今日收支数据并计算。

fetchData() {
  const records = JSON.parse(localStorage.getItem('records')) || [];
  let totalIncome = 0;
  let totalExpense = 0;
  records.forEach(record => {
    if (record.type === '收入') {
      totalIncome += record.amount;
    } else {
      totalExpense += record.amount;
    }
  });
  this.totalIncome = totalIncome;
  this.totalExpense = totalExpense;
  this.balance = totalIncome - totalExpense;
}