? ? ? ? ? 在前面的微信小程序實例中我們開發了體重記錄等實用小程序，今天來嘗試一個和生活消費緊密相關的 ——“每日記賬小程序”。它能幫你隨時記錄收支情況，讓每一筆花費都清晰可查。下面就跟著步驟，一步步構建這個小程序。?體驗一個開發者的快樂。

一、開發微信小程序的準備工作?

1. 微信小程序開發工具準備?

? ? ? ? ? 請確保使用最新版本的微信開發者工具。若尚未安裝，請訪問微信公眾平臺(https://mp.weixin.qq.com/)，在頁面底部"下載"區域選擇適合您操作系統的安裝包進行安裝。已安裝的用戶請打開工具檢查更新，以確保開發環境運行順暢。

2.? 賬號準備?

? ? ? ? 如果僅用于學習和小程序開發練習，使用開發者工具的"體驗模式"創建項目即可。這種模式無需注冊小程序賬號，直接點擊開發者工具中的"體驗模式"按鈕就能快速開始項目開發，非常適合新手入門和功能測試。

當需要正式上線小程序時，則必須完成以下完整流程：

首先訪問微信公眾平臺（https://mp.weixin.qq.com/），注冊小程序賬號

完成賬號注冊后，登錄小程序后臺管理界面

在左側導航欄中找到"開發"菜單，進入"開發設置"頁面

在基本設置區域可以查看到該小程序的AppID（小程序ID），這是一串18位的數字和字母組合，形如：wx123456789abcdefg

復制這組AppID，在創建新項目時粘貼到對應的輸入框中

確保項目目錄與AppID匹配，這樣才能正常進行后續的代碼上傳和審核發布流程

二、創建每日記賬小程序項目?

? ? ? ? ? ? ? 打開微信開發者工具，點擊 “新建項目”。在彈出窗口中，填寫項目名稱（如 “我的日常賬本”），選擇合適的項目存放目錄。有 AppID 就填入，沒有則勾選 “不使用云服務” 并選擇 “體驗模式”，點擊 “新建”，項目框架就搭建好了。?

? ? ? ? ? ?重點：項目目錄里，pages文件夾存放各頁面代碼，app.js是小程序邏輯入口，app.json用于配置頁面路徑和窗口樣式，app.wxss負責全局樣式設置，這些都是開發中常用的文件。?

三、構建每日記賬小程序頁面?

? ? ? ? ? ? 我們開發的每日記賬小程序，主要有一個頁面，能實現輸入金額、選擇收支類型和消費類別、填寫備注，點擊保存后展示記賬記錄等功能。?

?1. 創建頁面文件?

在pages文件夾上右鍵，選擇 “新建 Page”，命名為dailyAccount，系統會自動生成dailyAccount.js、dailyAccount.json、dailyAccount.wxml、dailyAccount.wxss四個文件，分別對應頁面的邏輯、配置、結構和樣式。?

2. 編寫頁面結構

<view class="container"><view class="input-item"><text class="label">金額（元）：</text><input type="number" placeholder="請輸入金額" bindinput="inputAmount"></input></view><view class="input-item"><text class="label">收支類型：</text><picker mode="selector" range="{{typeList}}" bindchange="changeType"><view class="picker-view">{{selectedType}}</view></picker></view><view class="input-item"><text class="label">消費類別：</text><picker mode="selector" range="{{categoryList}}" bindchange="changeCategory"><view class="picker-view">{{selectedCategory}}</view></picker></view><view class="input-item"><text class="label">備注：</text><input placeholder="可選" bindinput="inputRemark"></input></view><button bindtap="saveAccount">保存記錄</button><view class="record-title" wx:if="{{accountList.length > 0}}">記賬記錄</view><view class="record-item" wx:for="{{accountList}}" wx:key="index"><text class="{{item.type === '支出' ? 'expense' : 'income'}}">{{item.type}}：{{item.amount}}元</text><text>類別：{{item.category}}</text><text>備注：{{item.remark || '無'}}</text><text>時間：{{item.time}}</text></view>
</view>

?

? ? ? ? 這段代碼構建了頁面基本結構。input-item包含金額輸入框、收支類型選擇器、消費類別選擇器和備注輸入框；saveAccount綁定保存按鈕點擊事件；下方用于展示記賬記錄，收支類型用不同顏色區分，有記錄時才顯示 “記賬記錄” 標題。?

3. 編寫頁面樣式

.container {padding: 20px;
}.input-item {display: flex;align-items: center;margin-bottom: 20px;
}.label {width: 100px;font-size: 15px;
}input {flex: 1;height: 40px;border: 1px solid #eee;border-radius: 4px;padding-left: 10px;
}.picker-view {flex: 1;height: 40px;line-height: 40px;border: 1px solid #eee;border-radius: 4px;padding-left: 10px;
}button {width: 100%;height: 45px;background-color: #1677ff;color: white;border: none;border-radius: 4px;margin-bottom: 25px;
}.record-title {font-size: 17px;font-weight: bold;margin: 15px 0;color: #333;
}.record-item {border: 1px solid #f0f0f0;border-radius: 6px;padding: 12px;margin-bottom: 10px;
}.expense {color: #f5222d;
}.income {color: #52c41a;
}

這些樣式讓頁面布局更合理美觀，設置了輸入區域、按鈕、記錄列表等元素的樣式，收支類型用不同顏色區分，增強視覺效果。?

4. 編寫頁面邏輯

Page({data: {amount: '',typeList: ['支出', '收入'],selectedType: '支出',categoryList: ['餐飲', '交通', '購物', '工資', '其他'],selectedCategory: '餐飲',remark: '',accountList: []},onLoad: function () {// 從本地存儲獲取記賬記錄const records = wx.getStorageSync('accountRecords');if (records) {this.setData({accountList: records});}},inputAmount: function (e) {this.setData({amount: e.detail.value});},changeType: function (e) {const index = e.detail.value;this.setData({selectedType: this.data.typeList[index]});},changeCategory: function (e) {const index = e.detail.value;this.setData({selectedCategory: this.data.categoryList[index]});},inputRemark: function (e) {this.setData({remark: e.detail.value});},saveAccount: function () {if (!this.data.amount || this.data.amount <= 0) {wx.showToast({title: '請輸入有效金額',icon: 'none'});return;}// 獲取當前時間const date = new Date();const time = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;const newRecord = {amount: this.data.amount,type: this.data.selectedType,category: this.data.selectedCategory,remark: this.data.remark,time: time};// 添加新記錄到列表const newList = [newRecord, ...this.data.accountList];this.setData({accountList: newList,amount: '',remark: ''});// 保存到本地存儲wx.setStorageSync('accountRecords', newList);wx.showToast({title: '記錄成功',icon: 'success'});}
});

? ? ? ? ?在data中定義了金額、收支類型、消費類別等數據。onLoad方法從本地存儲獲取歷史記錄；inputAmount獲取輸入金額；changeType和changeCategory處理類型和類別的選擇；inputRemark獲取備注信息；saveAccount驗證輸入后保存記錄，更新本地存儲并顯示提示。?

四、運行與調試?

? ? ? ? 完成代碼后，點擊微信開發者工具的 “編譯” 按鈕，模擬器中就會顯示這個每日記賬小程序。輸入金額、選擇收支類型和類別、填寫備注，點擊 “保存記錄”，就能看到記錄被添加到列表中。?

? ? ? ? ?若運行出現問題，可通過右側調試面板查看報錯信息。比如在saveAccount方法中添加console.log(this.data.amount)，查看是否成功獲取輸入的金額，助力排查問題。?

? ? ? ? ? ?這個每日記賬小程序涵蓋了數據輸入、本地存儲等實用功能。你還能進一步優化，比如添加月度統計、圖表展示消費占比等功能。快來動手試試，讓自己記賬更輕松吧！也體驗一下開發者的快樂，

?