小程序实现的我的日记管理系统

我的日记微信小程序

本项目是一个简单的微信小程序，用于记录个人日记。它使用微信小程序的本地存储 wx.setStorageSync 和 wx.getStorageSync 来模拟用户数据和日记数据的持久化。

创作过程

1. 需求分析与规划:

   • 明确核心功能：用户注册登录、日记列表展示、日记详情查看、撰写/编辑/删除日记。
   • 技术选型：使用微信小程序原生语法，数据存储采用本地 Storage API 进行简化处理。
   • 页面规划：设计了登录页 (login)、日记列表页 (index)、写日记/编辑页 (write)、日记详情页 (detail)。

2. 项目初始化:

   • 创建小程序项目结构，包括 app.js, app.json, app.wxss。
   • 在 app.json 中注册所有页面路径和配置全局窗口样式。
   • 在 app.js 中定义了 globalData 用于存储当前用户信息，并在 onLaunch 中初始化了本地存储结构（users 和 diaries）。

3. 用户认证模块 (pages/login):

   • WXML: 设计了用户名、密码输入框，以及登录和注册按钮。
   • JS:
     • 实现了 handleLogin 方法：验证用户输入的凭据是否与本地存储中的 users 对象匹配。成功则记录 currentUser 到本地存储和 app.globalData，并跳转到日记列表页。
     • 实现了 handleRegister 方法：检查用户名是否已存在，不存在则将新用户（用户名和密码）存入 users 对象，并为该用户初始化空的日记数组。
     • onLoad 时检查是否已登录，若已登录则直接跳转到首页。
   • WXSS: 添加了登录页面的基本样式。

4. 日记列表模块 (pages/index):

   • WXML:
     • 展示当前用户的日记列表，每条日记显示标题、日期和内容摘要。
     • 提供"写新日记"按钮跳转到写日记页面。
     • 提供"退出登录"按钮。
     • 处理日记为空的提示状态。
   • JS:
     • onShow 生命周期函数：确保每次进入页面时都检查登录状态，未登录则重定向到登录页。加载当前用户的日记数据，并按时间倒序排列。
     • loadDiaries: 从本地存储中获取当前用户的日记，并处理摘要显示。
     • goToWritePage: 跳转到写日记页面。
     • goToDetailPage: 跳转到日记详情页，并传递日记 ID。
     • handleLogout: 清除登录状态并返回登录页。
   • WXSS: 设计了日记列表项、按钮和空状态的样式。

5. 写/编辑日记模块 (pages/write):

   • WXML: 提供标题输入框和内容多行文本输入域，以及保存按钮。
   • JS:
     • onLoad: 检查登录状态。通过页面参数 id 判断是新建日记还是编辑日记。如果是编辑，则加载对应日记内容。
     • loadDiaryForEdit: 根据日记 ID 加载日记数据到表单。
     • saveDiary:
       • 获取表单数据，进行非空校验。
       • 获取当前登录用户。
       • 如果是编辑模式，则更新现有日记；如果是新增模式，则创建新的日记对象（包含唯一 ID、标题、内容、格式化日期和时间戳）。
       • 将更新后的日记列表存回本地存储。
       • 提示用户保存成功并返回上一页。
     • formatDate: 工具函数，用于格式化日期显示。
   • WXSS: 为表单元素和保存按钮添加样式。

6. 日记详情模块 (pages/detail):

   • WXML: 展示选定日记的完整标题、日期和内容。提供"编辑日记"和"删除日记"按钮。
   • JS:
     • onLoad: 检查登录状态。获取传递过来的日记 ID。
     • onShow: 确保从编辑页返回时能刷新数据，重新加载日记详情。
     • loadDiaryDetail: 根据日记 ID 从本地存储中查找并显示日记的详细信息。若日记不存在则提示用户。
     • editDiary: 跳转到写日记页面，并传递当前日记 ID 以进入编辑模式。
     • deleteDiary: 弹出确认框，用户确认后从本地存储中删除该日记，并返回列表页。
   • WXSS: 设计了详情页面的文本展示样式和操作按钮样式。

7. 全局样式与辅助:

   • app.wxss: 定义了全局容器、按钮、输入框等通用样式。
   • 使用了 wx.showToast 和 wx.showModal 进行用户交互提示。
   • 导航跳转主要使用 wx.navigateTo, wx.redirectTo, wx.navigateBack。

8. README.md 编写:

   • 记录了项目的创作过程、功能介绍、运行方式和文件结构。

功能介绍

本"我的日记"微信小程序主要包含以下功能：

1. 用户注册：

   • 用户可以通过输入未注册的用户名和密码进行注册。
   • 注册成功后，用户信息将保存在本地存储中。

2. 用户登录：

   • 已注册用户可以使用用户名和密码进行登录。
   • 登录成功后，用户身份将被记录，并可以访问其个人日记。
   • 小程序会记住登录状态，下次打开时若已登录则直接进入日记列表。

3. 查询我的日记列表 (首页)：

   • 登录后，用户可以看到自己创建的所有日记列表。
   • 日记列表按创建/修改时间的倒序排列。
   • 每条日记在列表中会显示标题、日期和部分内容摘要。
   • 如果用户没有任何日记，会显示提示信息。
   • 提供"退出登录"功能。

4. 查看日记详情：

   • 用户可以点击列表中的任意一篇日记，进入详情页面查看完整内容。
   • 详情页会显示日记的完整标题、创建/修改日期和全部正文。

5. 写日记/编辑日记：

   • 用户可以通过首页的"写新日记"按钮进入写日记页面。
   • 在写日记页面，用户可以输入日记的标题和内容。
   • 用户也可以从日记详情页点击"编辑日记"按钮，对现有日记进行修改。
   • 标题和内容不能为空。
   • 保存后，日记会自动更新或添加到用户的日记列表中。

6. 删除日记：

   • 在日记详情页面，用户可以选择"删除日记"。
   • 删除前会有确认提示，防止误操作。
   • 删除后，日记将从用户的日记列表中移除。

数据存储说明： 为了简化演示，本小程序所有用户数据（用户名、密码）和日记数据均存储在微信小程序的**本地缓存 (Local Storage)**中。这意味着：

• 数据仅保存在用户当前使用的设备上。
• 清除小程序缓存或卸载小程序会导致数据丢失。
• 不涉及后端服务器和数据库，无法实现多设备同步。 在实际生产项目中，应使用云数据库（如微信云开发、腾讯云、阿里云等）或自建后端服务来管理用户数据和日记信息，以确保数据的安全性和持久性。

如何运行

1. 下载并安装微信开发者工具。
2. 克隆或下载本项目代码。
3. 在微信开发者工具中导入项目，选择项目根目录。
4. 如果本地没有 project.config.json 文件，开发者工具可能会提示你输入 AppID。你可以点击"测试号"按钮，开发者工具会自动填入一个测试 AppID。
5. 编译并预览。

文件结构

my-diary-miniprogram/ ├── app.js # 小程序逻辑 ├── app.json # 小程序公共配置 ├── app.wxss # 小程序公共样式表 ├── project.config.json # 项目配置文件 (通常由开发者工具生成) ├── sitemap.json # 页面索引配置文件 (通常由开发者工具生成) ├── pages/ │ ├── login/ # 登录/注册页面 │ │ ├── login.js │ │ ├── login.json │ │ ├── login.wxml │ │ └── login.wxss │ ├── index/ # 日记列表页面 (首页) │ │ ├── index.js │ │ ├── index.json │ │ ├── index.wxml │ │ └── index.wxss │ ├── detail/ # 日记详情页面 │ │ ├── detail.js │ │ ├── detail.json │ │ ├── detail.wxml │ │ └── detail.wxss │ └── write/ # 写日记页面 │ ├── write.js │ ├── write.json │ ├── write.wxml │ └── write.wxss └── README.md # 项目说明文件