首页> 行业资讯> 小程序> 资讯详情

搭建一个简易个人记账小程序教程

2025-09-02 22:00:00 来自于应用公园

想管理自己的日常开销却找不到合适的工具？何不自己动手搭建一个专属的个人记账小程序！它不仅完全免费、没有广告，还能根据你的习惯灵活定制。本文将提供一份零基础的小程序搭建教程，手把手带你完成一个具备记账、列表展示功能的简易应用，无需服务器后台知识，轻松上手。

一、准备工作与环境搭建

1. 注册小程序账号：
访问微信公众平台，注册一个属于自己的小程序账号。如果你已有公众号，可直接在后台快速注册小程序。完成注册后，记录下你的`AppID`，这是项目的唯一标识。

2. 安装开发者工具：
下载并安装微信开发者工具。这是官方提供的集成开发环境（IDE），提供了代码编辑、调试、预览和上传的一站式服务。

3. 创建新项目：
打开开发者工具，选择“新建项目”，填入你的`AppID`，并勾选“不使用云服务”（注：我们后续会手动开启更简单的云开发功能）。选择一个合适的项目目录，即可进入开发界面。

二、项目结构与基础配置

新创建的项目会包含一些默认文件，我们主要关注以下核心部分：
- `app.json`：小程序的全局配置文件，用于设置页面路径、窗口样式等。
- `pages/index/index`：首页的目录，包含逻辑文件`.js`、样式文件`.wxss`、结构文件`.wxml`。

首先，我们在`app.json`中简单配置一下，增加一个即将创建的记账页面的路径。

```json
{
"pages": [
"pages/index/index",
"pages/addRecord/addRecord" // 新增的记账页面
],
"window": {
"navigationBarTitleText": "我的记账本"
}
}
```
保存后，开发者工具会自动帮我们创建`pages/addRecord`这个目录和必要的文件。

三、开启并使用云开发数据库

传统开发需要自建服务器和数据库，非常复杂。微信小程序提供了“云开发”功能，内置了数据库，让我们可以像操作前端对象一样读写数据。

1. 开通云开发：
在开发者工具顶部点击“云开发”按钮，按提示开通环境。开通后，你将在控制台获得一个数据库环境。

2. 初始化云开发：
在`app.js`的`App()`中初始化云开发。

```javascript
App({
onLaunch: function () {
wx.cloud.init({
env: '你的环境ID', // 在云开发控制台查看
traceUser: true,
})
}
})
```

3. 创建数据库集合：
在云开发控制台的数据库中，创建一个名为`records`的集合（Collection），用来存储我们的每一条记账记录。

四、编写核心功能页面

1. 记账页面 (`addRecord.wxml` & `addRecord.js`)

这个页面的目标是提供一个表单，让用户输入金额、选择类型、填写备注并保存。

WXML模板（部分代码）:
```html

选择类型：{{selectedType}}

保存

```

JS逻辑（部分代码）:
```javascript
Page({
data: {
amount: '',
type: '支出',
typeList: ['支出', '收入'],
note: ''
},
onAmountInput(e) { this.setData({ amount: e.detail.value }) },
onTypeChange(e) { this.setData({ type: this.data.typeList[e.detail.value] }) },
onNoteInput(e) { this.setData({ note: e.detail.value }) },

// 核心提交函数
async onSubmit() {
const { amount, type, note } = this.data;
if (!amount) { wx.showToast({ title: '请输入金额', icon: 'error' }); return; }

// 调用云数据库的添加接口
const db = wx.cloud.database();
db.collection('records').add({
data: {
amount: Number(amount),
type,
note,
date: new Date() // 自动记录当前时间
},
success: () => {
wx.showToast({ title: '保存成功' });
wx.navigateBack(); // 返回上一页
},
fail: err => { console.error('保存失败：', err) }
});
}
})
```

2. 首页列表 (`index.wxml` & `index.js`)

首页负责从云数据库拉取所有记账记录并以列表形式展示。

JS逻辑（部分代码）:
```javascript
Page({
data: {
recordList: [] // 用于存储获取到的账单列表
},
onLoad() {
this.getRecordList();
},
// 跳转到记账页
gotoAdd() {
wx.navigateTo({ url: '/pages/addRecord/addRecord' })
},
// 从云数据库获取数据
async getRecordList() {
const db = wx.cloud.database();
try {
const res = await db.collection('records').orderBy('date', 'desc').get();
this.setData({ recordList: res.data });
} catch (err) {
console.error('获取数据失败：', err);
}
}
})
```

五、预览与发布

完成以上步骤后，一个最基础的记账小程序就完成了！你可以在开发者工具中点击“预览”，用微信扫描二维码在手机上体验效果。

确认无误后，在开发者工具中点击“上传”，将代码提交到小程序后台。最后，登录微信公众平台，在后台提交审核，审核通过后，你的个人记账小程序就能正式对外发布了！

总结

通过本篇小程序搭建教程，你已经成功搭建个人记账小程序的核心功能。这个过程涵盖了小程序开发的基础流程：环境准备、页面创建、数据绑定以及最重要的云开发数据库的增删改查操作。你可以在此基础上继续扩展，比如增加图表分析、月度总结、预算设置等功能，让它变得更加强大和个性化。动手试试吧，享受创造的乐趣！