【愚公系列】《微信小程序与云开发从入门到实践》050-使用云开发技术改造移动记事本应用
标题 | 详情 |
---|---|
作者简介 | 愚公搬代码 |
头衔 | 华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,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.总结与对比
通过以上修改,整个记事本应用从 本地存储 转向了 云开发数据库,实现了云端数据存储和管理,带来了以下优势:
- 数据持久性:记事内容保存在云端,即使小程序关闭或者卸载,数据依然能得以保存。
- 数据共享:不同设备可以共享相同的数据,用户在多个设备上都能看到相同的记事内容。
- 云数据库管理:使用云数据库使得数据的存储、查询、管理更加高效和可靠。
相比之前的逻辑,云开发改造后的记事本不仅提升了数据存储的可用性和安全性,还能够支持更复杂的业务逻辑,比如数据的跨设备同步、云端备份等。
- 点赞
- 收藏
- 关注作者
评论(0)