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

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

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

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

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