当前位置：首页 > news >正文

微信小程序入门实例_____从零开始开发一个每天记账的微信小程序

news 2025/7/16 8:41:06

在前面的微信小程序实例中我们开发了体重记录等实用小程序，今天来尝试一个和生活消费紧密相关的 ——“每日记账小程序”。它能帮你随时记录收支情况，让每一笔花费都清晰可查。下面就跟着步骤，一步步构建这个小程序。体验一个开发者的快乐。

一、开发微信小程序的准备工作

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验证输入后保存记录，更新本地存储并显示提示。