首頁(yè)> 行業(yè)資訊> 小程序> 資訊詳情

搭建一個(gè)簡(jiǎn)易個(gè)人記賬小程序教程

2025-09-02 22:00:00 來(lái)自于應(yīng)用公園

想管理自己的日常開銷卻找不到合適的工具？何不自己動(dòng)手搭建一個(gè)專屬的個(gè)人記賬小程序！它不僅完全免費(fèi)、沒有廣告，還能根據(jù)你的習(xí)慣靈活定制。本文將提供一份零基礎(chǔ)的小程序搭建教程，手把手帶你完成一個(gè)具備記賬、列表展示功能的簡(jiǎn)易應(yīng)用，無(wú)需服務(wù)器后臺(tái)知識(shí)，輕松上手。

一、準(zhǔn)備工作與環(huán)境搭建

1. 注冊(cè)小程序賬號(hào)：
訪問微信公眾平臺(tái)，注冊(cè)一個(gè)屬于自己的小程序賬號(hào)。如果你已有公眾號(hào)，可直接在后臺(tái)快速注冊(cè)小程序。完成注冊(cè)后，記錄下你的`AppID`，這是項(xiàng)目的唯一標(biāo)識(shí)。

2. 安裝開發(fā)者工具：
下載并安裝微信開發(fā)者工具。這是官方提供的集成開發(fā)環(huán)境（IDE），提供了代碼編輯、調(diào)試、預(yù)覽和上傳的一站式服務(wù)。

3. 創(chuàng)建新項(xiàng)目：
打開開發(fā)者工具，選擇“新建項(xiàng)目”，填入你的`AppID`，并勾選“不使用云服務(wù)”（注：我們后續(xù)會(huì)手動(dòng)開啟更簡(jiǎn)單的云開發(fā)功能）。選擇一個(gè)合適的項(xiàng)目目錄，即可進(jìn)入開發(fā)界面。

二、項(xiàng)目結(jié)構(gòu)與基礎(chǔ)配置

新創(chuàng)建的項(xiàng)目會(huì)包含一些默認(rèn)文件，我們主要關(guān)注以下核心部分：
- `app.json`：小程序的全局配置文件，用于設(shè)置頁(yè)面路徑、窗口樣式等。
- `pages/index/index`：首頁(yè)的目錄，包含邏輯文件`.js`、樣式文件`.wxss`、結(jié)構(gòu)文件`.wxml`。

首先，我們?cè)赻app.json`中簡(jiǎn)單配置一下，增加一個(gè)即將創(chuàng)建的記賬頁(yè)面的路徑。

```json
{
"pages": [
"pages/index/index",
"pages/addRecord/addRecord" // 新增的記賬頁(yè)面
],
"window": {
"navigationBarTitleText": "我的記賬本"
}
}
```
保存后，開發(fā)者工具會(huì)自動(dòng)幫我們創(chuàng)建`pages/addRecord`這個(gè)目錄和必要的文件。

三、開啟并使用云開發(fā)數(shù)據(jù)庫(kù)

傳統(tǒng)開發(fā)需要自建服務(wù)器和數(shù)據(jù)庫(kù)，非常復(fù)雜。微信小程序提供了“云開發(fā)”功能，內(nèi)置了數(shù)據(jù)庫(kù)，讓我們可以像操作前端對(duì)象一樣讀寫數(shù)據(jù)。

1. 開通云開發(fā)：
在開發(fā)者工具頂部點(diǎn)擊“云開發(fā)”按鈕，按提示開通環(huán)境。開通后，你將在控制臺(tái)獲得一個(gè)數(shù)據(jù)庫(kù)環(huán)境。

2. 初始化云開發(fā)：
在`app.js`的`App()`中初始化云開發(fā)。

```javascript
App({
onLaunch: function () {
wx.cloud.init({
env: '你的環(huán)境ID', // 在云開發(fā)控制臺(tái)查看
traceUser: true,
})
}
})
```

3. 創(chuàng)建數(shù)據(jù)庫(kù)集合：
在云開發(fā)控制臺(tái)的數(shù)據(jù)庫(kù)中，創(chuàng)建一個(gè)名為`records`的集合（Collection），用來(lái)存儲(chǔ)我們的每一條記賬記錄。

四、編寫核心功能頁(yè)面

1. 記賬頁(yè)面 (`addRecord.wxml` & `addRecord.js`)

這個(gè)頁(yè)面的目標(biāo)是提供一個(gè)表單，讓用戶輸入金額、選擇類型、填寫備注并保存。

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 }) },

// 核心提交函數(shù)
async onSubmit() {
const { amount, type, note } = this.data;
if (!amount) { wx.showToast({ title: '請(qǐng)輸入金額', icon: 'error' }); return; }

// 調(diào)用云數(shù)據(jù)庫(kù)的添加接口
const db = wx.cloud.database();
db.collection('records').add({
data: {
amount: Number(amount),
type,
note,
date: new Date() // 自動(dòng)記錄當(dāng)前時(shí)間
},
success: () => {
wx.showToast({ title: '保存成功' });
wx.navigateBack(); // 返回上一頁(yè)
},
fail: err => { console.error('保存失?。?, err) }
});
}
})
```

2. 首頁(yè)列表 (`index.wxml` & `index.js`)

首頁(yè)負(fù)責(zé)從云數(shù)據(jù)庫(kù)拉取所有記賬記錄并以列表形式展示。

JS邏輯（部分代碼）:
```javascript
Page({
data: {
recordList: [] // 用于存儲(chǔ)獲取到的賬單列表
},
onLoad() {
this.getRecordList();
},
// 跳轉(zhuǎn)到記賬頁(yè)
gotoAdd() {
wx.navigateTo({ url: '/pages/addRecord/addRecord' })
},
// 從云數(shù)據(jù)庫(kù)獲取數(shù)據(jù)
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('獲取數(shù)據(jù)失敗：', err);
}
}
})
```

五、預(yù)覽與發(fā)布

完成以上步驟后，一個(gè)最基礎(chǔ)的記賬小程序就完成了！你可以在開發(fā)者工具中點(diǎn)擊“預(yù)覽”，用微信掃描二維碼在手機(jī)上體驗(yàn)效果。

確認(rèn)無(wú)誤后，在開發(fā)者工具中點(diǎn)擊“上傳”，將代碼提交到小程序后臺(tái)。最后，登錄微信公眾平臺(tái)，在后臺(tái)提交審核，審核通過后，你的個(gè)人記賬小程序就能正式對(duì)外發(fā)布了！

總結(jié)

通過本篇小程序搭建教程，你已經(jīng)成功搭建個(gè)人記賬小程序的核心功能。這個(gè)過程涵蓋了小程序開發(fā)的基礎(chǔ)流程：環(huán)境準(zhǔn)備、頁(yè)面創(chuàng)建、數(shù)據(jù)綁定以及最重要的云開發(fā)數(shù)據(jù)庫(kù)的增刪改查操作。你可以在此基礎(chǔ)上繼續(xù)擴(kuò)展，比如增加圖表分析、月度總結(jié)、預(yù)算設(shè)置等功能，讓它變得更加強(qiáng)大和個(gè)性化。動(dòng)手試試吧，享受創(chuàng)造的樂趣！