自己开发小程序备忘录，记录生活的独特方式

慕青 . 发布于 2025-04-23 08:31:32 104 浏览

在快节奏的现代生活中，我们常常会忘记一些重要的事情，无论是会议安排、生日提醒还是日常琐事，而一款属于自己的小程序备忘录，就像是一个贴心的小秘书，时刻提醒着我们生活中的点点滴滴，就让我们一起来探索如何开发一款独特的小程序备忘录,为生活增添一份有序与便捷。

开发前的准备

开发小程序备忘录，首先需要具备一定的编程基础，如果你熟悉微信小程序开发框架，那再好不过了，若还不熟悉，也无需担心，官方文档提供了详细的教程，跟着一步步学习,就能快速上手。

我们要明确自己对小程序备忘录的功能需求，它需要能够记录文字信息，方便我们随时写下待办事项、想法等；要有提醒功能，可以设置具体的时间，到点提醒我们；还能支持分类管理,让不同类型的备忘录一目了然。

搭建小程序框架

创建项目 打开微信开发者工具，点击“新建项目”，在弹出的对话框中，填写项目名称、选择项目目录，并选择小程序模板，这里我们选择基础模板，它提供了一个简洁的小程序结构,方便我们后续进行修改和扩展。

页面布局 小程序的页面布局主要通过 WXML（WeiXin Markup Language）和 WXSS（WeiXin Style Sheets）来实现。

在 pages 目录下创建 memo 文件夹，用于存放与备忘录相关的页面文件，在 memo 文件夹中创建 index.wxml 文件，这是页面的结构文件，我们可以创建一个简单的列表结构，用于展示所有的备忘录：

<view class="container">
<block wx:for="{{memos}}" wx:key="id">
<view class="memo-item">
 <view class="memo-title">{{item.title}}</view>
 <view class="memo-content">{{item.content}}</view>
 <view class="memo-time">{{item.time}}</view>
</view>
</block>
</view>

接着创建 index.wxss 文件，用于定义页面的样式，比如给备忘录列表项添加一些间距和背景色：

.container {
padding: 20rpx;
}
.memo-item {
background-color: #fff;
border-radius: 10rpx;
padding: 20rpx;
margin-bottom: 20rpx;
}
.memo-title {
font-size: 24rpx;
font-weight: bold;
margin-bottom: 10rpx;
}
.memo-content {
font-size: 20rpx;
color: #666;
}
.memo-time {
font-size: 16rpx;
color: #999;
}

逻辑处理 页面的逻辑处理通过 JavaScript 来实现，在 memo 文件夹中创建 index.js 文件，这里我们需要定义一些数据来模拟备忘录列表，并实现添加、删除等功能。

Page({
data: {
 memos: [
   { id: 1, title: '会议', content: '下午 3 点部门会议', time: '2023-10-10 15:00:00' },
   { id: 2, title: '购物', content: '买生活用品', time: '2023-10-11 10:00:00' }
 ]
},
addMemo() {
 // 这里可以添加逻辑来跳转到添加备忘录页面并获取数据，然后更新列表
 const newMemo = {
   id: Date.now(),
   title: '新事项',
   content: '这是新添加的备忘录内容',
   time: new Date().toISOString()
 };
 this.setData({
   memos: [...this.data.memos, newMemo]
 });
},
deleteMemo(e) {
 const id = e.currentTarget.dataset.id;
 this.setData({
   memos: this.data.memos.filter(memo => memo.id!== id)
 });
}
});

然后在 index.wxml 文件中添加按钮来触发这些功能：

<view class="container">
<block wx:for="{{memos}}" wx:key="id">
 <view class="memo-item">
   <view class="memo-title">{{item.title}}</view>
   <view class="memo-content">{{item.content}}</view>
   <view class="memo-time">{{item.time}}</view>
   <button bindtap="deleteMemo" data-id="{{item.id}}">删除</button>
 </view>
</block>
<button bindtap="addMemo">添加新备忘录</button>
</view>

添加提醒功能

使用定时器 为了实现提醒功能，我们可以利用 JavaScript 的定时器，在添加备忘录时，记录下提醒时间，然后通过定时器在提醒时间到达时触发提醒，修改 addMemo 方法：

addMemo() {
// 这里可以添加逻辑来跳转到添加备忘录页面并获取数据，然后更新列表
const newMemo = {
 id: Date.now(), '新事项',
 content: '这是新添加的备忘录内容',
 time: new Date().toISOString(),
 reminderTime: null // 初始化提醒时间为 null
};
// 这里可以添加逻辑来选择提醒时间，假设选择后 newMemo.reminderTime 被赋值
if (newMemo.reminderTime) {
 const now = new Date();
 const reminderDiff = new Date(newMemo.reminderTime) - now;
 if (reminderDiff > 0) {
   setTimeout(() => {
     wx.showToast({
       title: '提醒：' + newMemo.content,
       icon: 'none'
     });
   }, reminderDiff);
 }
}
this.setData({
 memos: [...this.data.memos, newMemo]
});
}

云函数辅助 如果想要更精确的提醒功能，比如在小程序关闭时也能收到提醒，可以借助云函数，通过云函数在服务器端监听提醒时间，当时间到达时，利用微信的推送服务给用户发送提醒，这里涉及到云函数的创建、部署以及与小程序的交互,需要按照微信官方文档进行详细配置和代码编写。

优化与完善

界面优化 可以进一步美化小程序的界面，比如添加一些动画效果，让备忘录的添加和删除更加流畅，也可以添加搜索功能,方便快速查找特定的备忘录。
数据存储 将备忘录数据存储在本地缓存或者云数据库中，这样即使小程序卸载再重新安装，数据也不会丢失，利用微信小程序提供的 wx.setStorageSync 和 wx.getStorageSync 方法进行本地缓存操作,或者使用云数据库进行更灵活的数据管理。

开发一款自己的小程序备忘录，不仅能满足我们个性化的需求，还能在这个过程中提升自己的编程能力，当我们看着一个个记录在小程序里的事项，有条不紊地完成它们时，会感受到一种掌控生活的成就感😃，让这款独特的小程序备忘录成为我们生活中不可或缺的好帮手，记录下每一个重要的瞬间和待办事项，让生活更加有序、精彩🌈。

自己开发小程序备忘录