在开始之前,首先需要了解一些基本知识和准备工作。
-
微信小程序开发环境的搭建
- 下载并安装微信开发者工具:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
- 注册一个微信小程序开发者账号:https://mp.weixin.qq.com/
-
项目准备
- 创建一个新的小程序项目
- 设计和准备好所需的页面和功能
接下来,我们将逐步实现一个简易的日程管理应用。为了保证代码的可读性,我将代码逐步分解到不同的文件中,方便组织和管理。
-
页面结构 在小程序中,每个页面都是由一个
.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' }); } });
现在,我们已经完成了首页的基本结构和功能。
- 创建
-
添加日程 下一步,我们将完成添加日程功能。创建
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(); } });
现在,我们已经完成了添加日程页面的基本结构和功能。
- 创建
-
日程列表 接下来,我们需要在首页显示日程列表,以便用户查看已保存的日程。
在
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); // 更新日程列表