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

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

news 2025/7/16 7:20:03

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

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

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)，查看是否成功获取输入的金额，助力排查问题。​

           这个每日记账小程序涵盖了数据输入、本地存储等实用功能。你还能进一步优化，比如添加月度统计、图表展示消费占比等功能。快来动手试试，让自己记账更轻松吧！也体验一下开发者的快乐，

 

http://www.xdnf.cn/news/1126261.html

相关文章：

  • 【GPIO】从STM32F103入门GPIO寄存器
  • 153.在 Vue 3 中使用 OpenLayers + Cesium 实现 2D/3D 地图切换效果
  • 淘宝扭蛋机小程序开发：重构电商娱乐化体验的新范式
  • Kruskal重构树
  • Linux操作系统从入门到实战（九）Linux开发工具（中）自动化构建-make/Makefile知识讲解
  • 12.6 Google黑科技GShard：6000亿参数MoE模型如何突破显存限制？
  • 导出内存溢出案例分析
  • 学习秒杀系统-实现秒杀功能（商品列表，商品详情，基本秒杀功能实现，订单详情）
  • JavaScript认识+JQuery的依赖引用
  • ethers.js-8-bigNmber和callstatic模拟
  • 2025年最新香港站群服务器租用价格参考
  • 探索阿里云ESA：开启边缘安全加速新时代
  • 基于Ruoyi和PostgreSQL的统一POI分类后台管理实战
  • 论文阅读：arxiv 2025 A Survey on Data Contamination for Large Language Models
  • 从12kW到800V，AI服务器电源架构变革下，功率器件如何解题？
  • redisson 设置了过期时间，会自动续期吗
  • 【网络安全】大型语言模型（LLMs）及其应用的红队演练指南
  • 经典排序算法之希尔排序
  • docker 方式gost代理搭建以及代理链实施
  • HTTP常见误区
  • 具身智能零碎知识点（六）：VAE 核心解密：重参数化技巧（Reparameterization Trick）到底在干啥？
  • 第二章 OB 存储引擎高级技术
  • JavaScript进阶篇——第四章 解构赋值（完全版）
  • IT岗位任职资格体系及发展通道——研发岗位任职资格标准体系
  • 进程探秘：从 PCB 到 fork 的核心原理之旅
  • 从零开始的云计算生活——第三十二天，四面楚歌，HAProxy负载均衡
  • 测试tcpdump，分析tcp协议
  • JAVA学习笔记 使用notepad++开发JAVA-003
  • Bootstrap-HTML（七）Bootstrap在线图标的引用方法
  • SELinux 详细解析