使用微信小程序开发制作一个简易的日程管理应用

在开始之前，首先需要了解一些基本知识和准备工作。

1. 微信小程序开发环境的搭建

   • 下载并安装微信开发者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
   • 注册一个微信小程序开发者账号：https://mp.weixin.qq.com/

2. 项目准备

   • 创建一个新的小程序项目
   • 设计和准备好所需的页面和功能

接下来，我们将逐步实现一个简易的日程管理应用。为了保证代码的可读性，我将代码逐步分解到不同的文件中，方便组织和管理。

1. 页面结构 在小程序中，每个页面都是由一个 .json、一个 .wxml、一个 .wxss 和一个 .js 文件组成。我们先创建一个首页 index，用于显示日程列表。

   • 创建 index.json，设置页面的配置信息：

   {
     "navigationBarTitleText": "日程管理"
   }
   

   • 创建 index.wxml，编写页面的结构和样式：

   <view class="container">
     <view class="header">日程列表</view>
     <view class="schedule-list">
       <!-- 这里将显示日程列表 -->
     </view>
     <button class="add-btn" bindtap="addSchedule">添加日程</button>
   </view>
   

   • 创建 index.wxss，设置页面的样式：

   .container {
     display: flex;
     flex-direction: column;
     align-items: center;
     margin-top: 10px;
   }
   
   .header {
     font-size: 20px;
     margin-bottom: 10px;
   }
   
   .schedule-list {
     width: 100%;
   }
   
   .add-btn {
     width: 200px;
     height: 40px;
     background-color: #1296db;
     color: #fff;
     border-radius: 4px;
     margin-top: 10px;
   }
   

   • 创建 index.js，编写页面的逻辑：

   Page({
     data: {
       schedules: [] // 日程列表数据
     },
   
     onLoad: function() {
       // 页面加载时，从本地存储中获取日程数据并更新到页面显示
       const schedules = wx.getStorageSync('schedules') || [];
       this.setData({
         schedules: schedules
       });
     },
   
     addSchedule: function() {
       // 点击“添加日程”按钮时，跳转到添加日程页面
       wx.navigateTo({
         url: '../add/edit'
       });
     }
   });
   

   现在，我们已经完成了首页的基本结构和功能。

2. 添加日程 下一步，我们将完成添加日程功能。创建 add/edit 页面用于添加或编辑日程。

   • 创建 add/edit.json，设置页面的配置信息：

   {
     "navigationBarTitleText": "添加日程"
   }
   

   • 创建 add/edit.wxml，编写页面的结构和样式：

   <view class="container">
     <view class="form-item">
       <text class="label">日程标题</text>
       <input class="input" placeholder="请输入日程标题" bindinput="handleInputChange" />
     </view>
     <view class="form-item">
       <text class="label">日程时间</text>
       <picker mode="date" bindchange="handleDateChange">
         <view class="picker">
           {{selectedDate}}
         </view>
       </picker>
     </view>
     <view class="form-item">
       <text class="label">日程内容</text>
       <textarea class="textarea" placeholder="请输入日程内容" bindinput="handleInputChange"></textarea>
     </view>
     <button class="save-btn" bindtap="saveSchedule">保存</button>
   </view>
   

   • 创建 add/edit.wxss，设置页面的样式：

   .container {
     display: flex;
     flex-direction: column;
     align-items: center;
     margin-top: 10px;
   }
   
   .form-item {
     display: flex;
     flex-direction: row;
     align-items: center;
     margin-bottom: 10px;
   }
   
   .label {
     width: 80px;
     text-align: right;
     margin-right: 10px;
   }
   
   .input {
     flex: 1;
     height: 30px;
     border: 1px solid #999;
     border-radius: 4px;
     padding: 2px 4px;
   }
   
   .picker {
     flex: 1;
     height: 30px;
     border: 1px solid #999;
     border-radius: 4px;
     padding: 2px 4px;
     display: flex;
     align-items: center;
   }
   
   .textarea {
     flex: 1;
     height: 100px;
     border: 1px solid #999;
     border-radius: 4px;
     padding: 4px;
   }
   
   .save-btn {
     width: 200px;
     height: 40px;
     background-color: #1296db;
     color: #fff;
     border-radius: 4px;
     margin-top: 10px;
   }
   

   • 创建 add/edit.js，编写页面的逻辑：

   Page({
     data: {
       title: '',         // 日程标题
       selectedDate: '',  // 选择的日程日期
       content: ''        // 日程内容
     },
   
     handleInputChange: function(e) {
       // 监听输入框和文本域的输入事件，并更新数据
       const value = e.detail.value;
       const key = e.currentTarget.dataset.key;
   
       this.setData({
         [key]: value
       });
     },
   
     handleDateChange: function(e) {
       // 监听日期选择器的值改变事件，并更新数据
       const value = e.detail.value;
   
       this.setData({
         selectedDate: value
       });
     },
   
     saveSchedule: function() {
       // 点击“保存”按钮时，将日程数据保存到本地存储中，并返回首页
       const schedules = wx.getStorageSync('schedules') || [];
   
       // 创建一个新的日程对象
       const schedule = {
         id: Date.now(),           // 以当前时间戳作为 ID
         title: this.data.title,
         date: this.data.selectedDate,
         content: this.data.content
       };
   
       // 将新日程添加到日程列表中
       schedules.push(schedule);
   
       // 更新日程列表到本地存储
       wx.setStorageSync('schedules', schedules);
   
       // 返回首页
       wx.navigateBack();
     }
   });
   

   现在，我们已经完成了添加日程页面的基本结构和功能。

3. 日程列表 接下来，我们需要在首页显示日程列表，以便用户查看已保存的日程。

   在 index.wxml 文件中，我们需要添加一个 block 组件来循环渲染日程列表数据：

   <block wx:for="{{schedules}}" wx:for-item="schedule" wx:key="id">
     <view class="schedule-item">
       <view class="title">{{schedule.title}}</view>
       <view class="date">{{schedule.date}}</view>
       <view class="content">{{schedule.content}}</view>
     </view>
   </block>
   

   在 index.wxss 文件中，添加日程列表项的样式：

   .schedule-item {
     border: 1px solid #ddd;
     border-radius: 4px;
     padding: 8px;
     margin-bottom: 10px;
   }
   
   .title {
     font-size: 18px;
     font-weight: bold;
     margin-bottom: 6px;
   }
   
   .date {
     font-size: 14px;
     color: #999;
     margin-bottom: 6px;
   }
   
   .content {
     font-size: 16px;
   }
   

   然后，在 index.js 中，添加删除日程的功能：

   Page({
     ...
   
     deleteSchedule: function(e) {
       // 点击日程列表项的删除按钮时的事件处理函数
       const id = e.currentTarget.dataset.id;
       const schedules = this.data.schedules;
   
       // 根据日程的 ID 过滤掉要删除的日程项
       const newSchedules = schedules.filter(schedule => schedule.id !== id);
   
       // 更新日程列表