首頁> 行業資訊> 小程序> 資訊詳情

搭建一個簡易個人記賬小程序教程

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);
}
}
})
```

五、預覽與發布

完成以上步驟后，一個最基礎的記賬小程序就完成了！你可以在開發者工具中點擊“預覽”，用微信掃描二維碼在手機上體驗效果。

確認無誤后，在開發者工具中點擊“上傳”，將代碼提交到小程序后臺。最后，登錄微信公眾平臺，在后臺提交審核，審核通過后，你的個人記賬小程序就能正式對外發布了！

總結

通過本篇小程序搭建教程，你已經成功搭建個人記賬小程序的核心功能。這個過程涵蓋了小程序開發的基礎流程：環境準備、頁面創建、數據綁定以及最重要的云開發數據庫的增刪改查操作。你可以在此基礎上繼續擴展，比如增加圖表分析、月度總結、預算設置等功能，讓它變得更加強大和個性化。動手試試吧，享受創造的樂趣！