在前面的微信小程序实例中我们开发了体重记录等实用小程序，今天来尝试一个和生活消费紧密相关的 ——“每日记账小程序”。它能帮你随时记录收支情况，让每一笔花费都清晰可查。下面就跟着步骤，一步步构建这个小程序。体验一个开发者的快乐。
一、开发微信小程序的准备工作
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)，查看是否成功获取输入的金额，助力排查问题。
这个每日记账小程序涵盖了数据输入、本地存储等实用功能。你还能进一步优化，比如添加月度统计、图表展示消费占比等功能。快来动手试试，让自己记账更轻松吧！也体验一下开发者的快乐，
)
