🚀前言

在快节奏的生活中，记事本成为了人们记录灵感、待办事项和生活琐事的重要工具。随着小程序的兴起，开发一个移动记事本小程序不仅方便了用户的日常使用，也为开发者提供了一个锻炼技能的绝佳机会。通过小程序，我们能够将简单的记事功能与丰富的用户体验结合起来，让用户随时随地记录下重要的想法和任务。

在本篇文章中，我们将带您一步步实现一个功能完善的移动记事本小程序。我们将从小程序的基本结构入手，详细讲解如何实现记事的增、删、改、查功能，并介绍数据持久化的方法，以确保用户的记事内容不会丢失。此外，我们还将探讨如何优化用户界面，使其更加友好和直观。

🚀一、开发一个移动记事本小程序

本节将运用前面所学的数据持久化技术来编写一个实战小程序应用–移动记事本。在平时生活和工作中，我们都会有各种各样的待办事项、心情感悟、理财账单等需要随时记录，本小程序实例就是提供了这样一个简单的功能，可随时创建记事或查阅和修改自己的记事。简单设计应用有3个页面，除了应用主页外，还有一个新建记事的页面和查看我的记事的页面。

🔎1.开发应用主页

🦋1.1 项目文件结构

在小程序的 pages 文件夹下，新建一个名为 note 的文件夹，所有与记事本相关的页面都将创建在这个文件夹下。

文件结构：

🦋1.2 noteList.wxml - 主页布局

noteList.wxml 文件用来实现记事本的主页，页面包含两个功能模块，分别为“我的记事”和“新建记事”。

<!--pages/note/noteList.wxml-->
<view class="body">
    <view class="title">移动记事本</view>
    <view class="item"  bindtap="tapItem" data-index="0">
        🏠 - 我的记事 
    </view>
    <view class="item" bindtap="tapItem" data-index="1">
        🆕 - 新建记事 
    </view>
</view>

• 说明：
  • 页面包含一个标题 <view class="title">移动记事本</view>。
  • 有两个按钮，分别对应“我的记事”和“新建记事”，通过 bindtap="tapItem" 绑定点击事件，data-index 用来区分按钮的索引。

🦋1.3 noteList.wxss - 主页样式

noteList.wxss 文件用于给主页添加样式。这里使用了 Flexbox 布局使页面元素居中对齐，并对每个模块进行样式定义。

/* pages/note/noteList.wxss */

.body {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 40px;
}

.title {
    font-size: 30px;
    font-weight: bold;
}

.item {
    width: 100%;
    background-color: #68fa0785;
    height: 100px;
    margin-top: 40px;
    border-radius: 10px;
    box-shadow: 5px 5px 5px #e7e7e7;
    font-size: 20px;
    text-align: center;
    line-height: 100px;
    color: purple;
}

• 样式说明：
  • .body：使用 flex 布局，将所有子元素按垂直方向排列。
  • .title：设置了背景色、字体大小、字体加粗以及边框圆角等样式，并居中显示文本。
  • .item：每个按钮的样式，居中对齐，设置紫色文本和适当的字体大小。

🦋1.4 noteList.js - 主页跳转逻辑

在 noteList.js 中实现点击按钮后跳转到相应的页面逻辑。根据按钮的 data-index 来判断跳转的目标页面。

// pages/note/noteList.js
Page({
  tapItem: function(e) {
    console.log(e.target.dataset.index);  // 打印点击按钮的索引
    if (e.target.dataset.index == "0") {
      // 跳转到 我的记事 页面
      wx.navigateTo({
        url: './myNote'
      });
    } else {
      // 跳转到 新建记事 页面
      wx.navigateTo({
        url: './newNote'
      });
    }
  }
});

• 功能说明：
  • tapItem 函数通过 e.target.dataset.index 获取被点击按钮的索引值。
  • 如果索引值为 0，则跳转到“我的记事”页面 (myNote)，否则跳转到“新建记事”页面 (newNote)。

🦋1.5 页面跳转后的效果

• 运行当前的代码后，主页界面包含两个按钮：
  • 我的记事：点击后跳转到 myNote 页面。
  • 新建记事：点击后跳转到 newNote 页面。

根据需要，你可以进一步调整页面的布局方式或者修改按钮的文本和样式。下图展示了当前的页面效果。

🔎2.“新建记事”页面的开发

🦋2.1 目标

在“新建记事”页面中，用户可以输入记事的标题和内容，并将其保存到本地存储中。此应用使用 wx.setStorageSync() 来进行本地存储。

🦋2.2 清理本地存储

在实现这个功能之前，需要确保不会影响之前的测试数据。如果之前的示例工程有存储过数据，建议清理微信开发者工具中的 Storage 数据。操作步骤如下：

• 打开微信开发者工具的调试器，找到 Storage 栏。
• 选中不需要的测试数据，点击右侧的叉号删除即可。

🦋2.3 newNote.wxml - 页面布局

在 note 文件夹下新建一个名为 newNote 的页面。页面包含两个输入框和一个保存按钮，分别用于输入记事标题、记事内容并保存。

<!-- pages/note/newNote.wxml -->
<view class="body">
  <input class="title" type="text" placeholder="请输入记事标题" bindinput="titleInput" value="{{title}}"/>
  <textarea class="content" placeholder="请输入记事内容" bindinput="contentInput" value="{{content}}"></textarea>
  <view class="save" bindtap="save">保存记事</view>
</view>

• 布局说明：
  • <input> 用于输入记事标题，绑定了 titleInput 事件。
  • <textarea> 用于输入记事内容，绑定了 contentInput 事件。
  • <view class="save"> 是一个保存按钮，绑定了 save 事件。

🦋2.4 newNote.wxss - 页面样式

newNote.wxss 文件用来定义页面的样式，确保输入框和按钮布局良好，并且界面整洁。

/* pages/note/newNote.wxss */
page {
  height: 100%;
}

.body {
  margin: 15px;
  height: calc(100vh - 30px);
}

.title {
  font-size: 30px;
  height: 40px;
  font-style: italic;
  border-bottom: #e1e1e1 1px solid;
}

.content {
  margin-top: 20px;
  font-style: italic;
  background-color: yellow;
  width: calc(100% - 20px);
  padding: 10px;
  height: calc(100vh - 190px);
  border-radius: 15px;
  box-shadow: 5px 5px 5px #e7e7e7;
}

.save {
  width: calc(100% - 20px);
  margin-top: 20px;
  background-color: orange;
  height: 30px;
  padding: 10px;
  text-align: center;
  border-radius: 10px;
  color: white;
  font-size: 20px;
  line-height: 30px;
}

• 样式说明：
  • .body：为页面主体设置了边距和高度，使其适应屏幕。
  • .title：设置了记事标题输入框的样式，字体斜体，并添加了底部边框。
  • .content：设置了记事内容的输入框样式，背景色为黄色，并且具有圆角和阴影效果。
  • .save：保存按钮的样式，橙色背景，白色文字，居中对齐。

🦋2.5 newNote.js - 页面逻辑

newNote.js 文件包含页面逻辑代码，实现了用户输入的内容保存到本地存储，并返回上一级页面。

// pages/note/newNote.js
Page({
  data: {
    title: "",  // 记事标题
    content: "",  // 记事内容
    id: ""  // 存储记录的唯一标识
  },

  onLoad: function (option) {
    this.setData(option);  // 可接收参数进行初始化
  },

  titleInput: function (e) {
    this.setData({ title: e.detail.value });  // 获取输入框中的标题值
  },

  contentInput: function (e) {
    this.setData({ content: e.detail.value });  // 获取输入框中的内容值
  },

  save: function () {
    // 如果标题和内容都为空，弹出提示
    if (this.data.title.length == 0 && this.data.content.length == 0) {
      wx.showToast({
        title: '标题和内容不能为空',
        icon: 'error'
      });
      return;
    }

    // 如果没有ID，则为该记事创建一个唯一的ID
    if (this.data.id.length == 0) {
      this.data.id = String(Date.now());  // 使用当前时间戳作为ID
    }

    // 将记事数据保存到本地存储
    wx.setStorageSync(this.data.id, JSON.stringify({
      title: this.data.title,
      content: this.data.content
    }));

    // 提示保存成功
    wx.showToast({
      title: '保存成功',
    });

    // 1秒后返回到上一个页面
    setTimeout(() => {
      wx.navigateBack();
    }, 1000);
  }
});

• 逻辑说明：
  • titleInput 和 contentInput：通过 bindinput 事件，将用户在输入框中输入的内容实时绑定到 title 和 content 数据中。
  • save：在保存按钮点击时：
    • 检查标题和内容是否为空，如果为空，则弹出提示。
    • 如果记事没有 ID，则通过当前的时间戳生成一个唯一 ID。
    • 使用 wx.setStorageSync() 将记事标题和内容保存到本地存储。这里使用 JSON.stringify() 将数据转换为字符串进行存储。
    • 显示保存成功的提示，1秒后自动返回到上一页面。

🦋2.6 运行效果

• 效果说明：页面包含两个输入框和一个保存按钮。当用户输入标题和内容后，点击保存按钮，记事将被保存到本地存储，并弹出“保存成功”的提示。之后，页面会自动返回到上一级页面。

运行代码后，页面效果如图所示。

🔎3.“我的记事”页面的开发

🦋3.1 目标

在之前的基础上，除了实现新建记事的功能外，还需要展示本地已保存的记事列表，并且支持点击进入修改页面。每个记事的唯一标识是其时间戳，这一标识被用于存储数据。

🦋3.2 新建 myNote 页面

myNote 页面用于展示本地存储的所有记事列表。每个记事显示标题和创建日期，用户可以点击进入修改该记事的页面。

🦋3.3 myNote.wxml - 页面布局

在 myNote.wxml 中，我们使用 wx:for 来循环展示所有已保存的记事，并使用 bindtap 事件响应点击操作。

<!-- pages/note/myNote.wxml -->
<view class="body">
  <view class="item" wx:for="{{notes}}" bindtap="tapItem" data-index="{{index}}">
    <view class="title">{{item.title}}</view>
    <view class="date">{{item.date}}</view>
  </view>
</view>

• 布局说明：
  • wx:for="{{notes}}"：循环展示 notes 数组中的所有记事。
  • 每个记事包括 title（记事标题）和 date（记事的创建日期）。

🦋3.4 myNote.wxss - 页面样式

myNote.wxss 文件用于定义记事列表的样式。

/* pages/note/myNote.wxss */
.body {
  margin: 15px;
}

.item {
  background-color: orange;
  height: 60px;
  border-radius: 10px;
  margin-top: 25px;
}

.title {
  font-size: 20px;
  font-weight: bold;
  margin-left: 10px;
  margin-right: 10px;
  max-lines: 1; /* 仅显示一行 */
}

.date {
  font-size: 14px;
  margin-left: 10px;
  margin-right: 10px;
  color: gray;
  font-style: italic;
}

• 样式说明：
  • .item：每个记事的外观，橙色背景，圆角和一定的间距。
  • .title：标题字体加粗，字号为20px，左右有间距。
  • .date：日期字体较小，并且使用灰色和斜体显示。

🦋3.5 myNote.js - 页面逻辑

myNote.js 文件负责读取本地存储中的所有记事，并展示它们。同时，点击某个记事后，跳转到新建记事页面，以便进行修改。

// pages/note/myNote.js
Page({
  data: {
    notes: []  // 存储所有记事的数组
  },

  onShow: function () {
    // 获取所有本地存储的 key
    let allKeys = wx.getStorageInfoSync().keys;
    let dataArray = [];

    // 遍历所有缓存的 key，读取每个记事
    allKeys.forEach(element => {
      let item = JSON.parse(wx.getStorageSync(element));  // 读取并解析存储的记事数据
      dataArray.push({
        id: element,  // 使用时间戳作为 id
        date: new Date(parseInt(element)).toLocaleString(),  // 格式化日期
        title: item.title,
        content: item.content
      });
    });

    // 更新数据
    this.setData({
      notes: dataArray
    });
  },

  tapItem: function (e) {
    // 获取点击的记事索引
    let index = e.currentTarget.dataset.index;
    
    // 跳转到修改页面，传递记事数据
    wx.navigateTo({
      url: './newNote?title=' + this.data.notes[index].title +
           '&content=' + this.data.notes[index].content +
           '&id=' + this.data.notes[index].id
    });
  }
});

• 逻辑说明：
  • onShow：页面显示时，调用 wx.getStorageInfoSync() 获取所有存储的 key，并通过遍历读取每个记事的数据。
    • 使用 JSON.parse(wx.getStorageSync(element)) 解析存储的记事内容。
    • 使用 new Date(parseInt(element)).toLocaleString() 格式化记事的时间戳为日期字符串。
  • tapItem：当用户点击某个记事时，使用 wx.navigateTo 跳转到修改页面 newNote，并将选中的记事数据（标题、内容、ID）通过 URL 参数传递过去。

🦋3.6 完整的功能说明

• 展示记事列表：在 myNote 页面，所有本地存储的记事会以列表的形式展示，每个记事显示标题和创建日期。
• 修改记事：点击某个记事后，会跳转到 newNote 页面，在该页面用户可以修改记事内容。修改后的记事会重新保存到本地存储中。
• 本地存储管理：记事的数据通过时间戳作为 key 保存在本地存储中。每个记事对象包含 title（标题）和 content（内容）。

🦋3.7 存在的潜在问题

• 数据丢失：目前使用本地存储 (Storage) 存储记事数据，其容量有限，并且如果用户清空了存储或者更换设备，之前的数据会丢失。
• 扩展性：对于大规模数据，微信小程序的本地存储并不适合做长期保存，且其存储量有限。

🦋3.8 后续改进：云开发

• 云开发解决方案：考虑到本地存储的局限性，可以将记事数据存储到云端，这样数据能够跨设备同步，不会因设备更换或本地存储清空而丢失。后续章节会介绍如何结合云开发来实现这些功能，提升应用的稳定性和可扩展性。