【愚公系列】《微信小程序与云开发从入门到实践》050-使用云开发技术改造移动记事本应用

举报
愚公搬代码 发表于 2025/01/28 15:45:52 2025/01/28
【摘要】 标题详情作者简介愚公搬代码头衔华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主,阿里云签约作者,腾讯云优秀博主,腾讯云内容共创官,掘金优秀博主,亚马逊技领云博主,51CTO博客专家等。近期荣誉2022年度博客之星TOP2,2023年度博客之星TOP2,2022年华为云十佳博主,2023年华为云十佳博主,2024年华为云十佳...
标题 详情
作者简介 愚公搬代码
头衔 华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主,阿里云签约作者,腾讯云优秀博主,腾讯云内容共创官,掘金优秀博主,亚马逊技领云博主,51CTO博客专家等。
近期荣誉 2022年度博客之星TOP2,2023年度博客之星TOP2,2022年华为云十佳博主,2023年华为云十佳博主,2024年华为云十佳博主等。
博客内容 .NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎 👍点赞、✍评论、⭐收藏

🚀前言

在快速变化的移动互联网时代,记事本应用作为一种简单而实用的工具,已经成为人们生活和工作中不可或缺的一部分。然而,随着用户需求的不断提升,传统的本地记事本应用逐渐显露出数据同步、备份以及共享等方面的局限性。为了解决这些问题,云开发技术应运而生,它为我们提供了强大而灵活的解决方案,使得记事本应用的功能得以全面升级。

本文将深入探讨如何利用云开发技术对移动记事本应用进行改造。我们将介绍云开发的核心概念及其优势,包括云数据库、云存储、云函数等,帮助您理解如何将这些技术融入到记事本应用的架构中。通过实际案例,我们将展示如何实现数据的实时同步、多设备访问、内容备份和安全管理,从而提升用户体验和应用的整体性能。

🚀一、使用云开发技术改造移动记事本应用

在前面的章节中,曾编写了一个移动记事本的小应用,用来练习本地数据持久化相关接口的使用,其实,此记事本应用非常适合使用云开发来管理数据,本节通过云开发技术来改造此应用。

首先来改造存储部分,之前在新建记事时,是将数据序列化后存在本地,云数据库是可以直接存储对象的,因此序列化的步骤可以省略掉。在云开发控制台的云数据库模块中新建一个集合,命名为notes,将其权限设置为仅创建者可读写。

前文:https://codeboy.blog.csdn.net/article/details/142445414

🔎1.修改 newNote.js 实现新增记事功能

首先,在 newNote.js 文件中,修改和完善代码,实现添加记事的功能,并将数据保存到 云数据库 中。以下是修改后的代码:

newNote.js

// pages/note/newNote.js
Page({
  data: {
    title: "",  // 记事标题
    content: "",  // 记事内容
    id: ""  // 记事ID
  },

  // 页面加载时初始化数据
  onLoad: function (option) {
    this.setData(option);  // 设置页面传递的参数
    wx.cloud.init({
      env: 'cloud1-4ghg65i9b5531b77'  // 初始化云环境
    });

    // 获取云数据库引用
    const db = wx.cloud.database({
      env: 'cloud1-4ghg65i9b5531b77'  // 使用云环境ID
    });

    // 获取 'notes' 集合的引用
    this.data.notesCollection = db.collection('notes');
  },

  // 处理标题输入
  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
    }

    // 将数据保存到云数据库
    this.data.notesCollection.add({
      data: {
        title: this.data.title,
        content: this.data.content,
        date: this.data.id  // 使用时间戳作为日期
      },
      success: res => {
        wx.showToast({
          title: "保存成功"
        });
        setTimeout(() => {
          wx.navigateBack();  // 保存成功后返回上一页面
        }, 1000);
      }
    });
  }
});

核心改动

  • 通过 wx.cloud.init() 初始化云开发环境。
  • 获取云数据库引用,并将记事数据保存到 notes 集合。
  • 使用时间戳作为 id 来唯一标识每一条记事。
  • 在保存时,检查标题和内容不能为空,若为空则弹出提示。

🔎2.修改 myNote.js 实现读取云数据库中的记事

然后,修改 myNote.js 文件来实现从 云数据库 读取记事数据,并显示在页面中。以下是修改后的代码:

myNote.js

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

  // 页面加载时初始化云环境
  onLoad: function () {
    wx.cloud.init({
      env: 'cloud1-4ghg65i9b5531b77'  // 初始化云环境
    });

    // 获取云数据库引用
    const db = wx.cloud.database({
      env: 'cloud1-4ghg65i9b5531b77'  // 使用云环境ID
    });

    // 获取 'notes' 集合的引用
    this.data.notesCollection = db.collection('notes');
  },

  // 页面显示时读取记事数据
  onShow: function () {
    // 从云数据库中读取数据
    this.data.notesCollection.get({
      success: res => {
        let dataArray = [];  // 存储处理后的数据
        let oriData = res.data;  // 原始数据

        // 遍历原始数据并处理日期和内容
        oriData.forEach(element => {
          dataArray.push({
            id: element.date,
            date: new Date(parseInt(element.date)).toLocaleString(),  // 格式化日期
            title: element.title,
            content: element.content
          });
        });

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

  // 点击记事项跳转到编辑页面
  tapItem: function (e) {
    let index = e.currentTarget.dataset.index;
    wx.navigateTo({
      url: '/pages/note/newNote?title=' + this.data.notes[index].title + '&content=' + this.data.notes[index].content + "&id=" + this.data.notes[index].id
    });
  }
});

核心改动

  • 通过 wx.cloud.init() 初始化云环境,连接到云数据库。
  • onShow 方法中调用 this.data.notesCollection.get() 从云数据库获取所有记事。
  • 对从数据库获取的数据进行处理,将 date 转换为可读的日期格式,并将数据存储到 notes 数组中。
  • 在点击记事项时,使用 wx.navigateTo() 跳转到编辑页面,并传递记事的相关数据。

🔎3.总结与对比

通过以上修改,整个记事本应用从 本地存储 转向了 云开发数据库,实现了云端数据存储和管理,带来了以下优势:

  • 数据持久性:记事内容保存在云端,即使小程序关闭或者卸载,数据依然能得以保存。
  • 数据共享:不同设备可以共享相同的数据,用户在多个设备上都能看到相同的记事内容。
  • 云数据库管理:使用云数据库使得数据的存储、查询、管理更加高效和可靠。

相比之前的逻辑,云开发改造后的记事本不仅提升了数据存储的可用性和安全性,还能够支持更复杂的业务逻辑,比如数据的跨设备同步、云端备份等。

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。