微信小程序云开发快速入门

拼搏现实的明天。 2023-10-14 08:35 19阅读 0赞

### 什么是云开发？ ###

云开发是可以帮助我们快速成为全栈的一种后端云服务，采用的是Serverless的架构。开发者无须搭建服务器，可直接使用其中的云数据库、云存储、云函数等云服务基础功能。

那么这个时候你可能会想，这和现在的传统开发模式有什么区别呢？下面通过现实生活中盖房子的过程来了解传统开发模式与云开发模式的区别。

如果传统方式来盖房子需要6步：  
1）将房子的地基打好，设计整理结构。（后端云服务基础架构）  
2）打地梁，地梁也是决定房子是否稳固的关键。（搭建云数据库）  
3）主体的砌筑，将房子的基本结构盖好。（搭建云存储）  
4）在步屋内填上土，砸夯，将地面砸实。（搭建云函数）  
5）在屋顶铺上水泥，封实。（提供静态托管和扩展能力）  
6）装修成自己喜欢的风格。（编写业务需求逻辑代码）

而云开发模式只有一步，即装修成自己喜欢的风格。可以看到图1-1展示的是传统开发需要管理的基础资源与云开发需要管理的基础资源的对比，可以帮助我们更清晰的了解两者之间的差距。

![f9cf0202307271118001472.png][]

图1-1 传统开发需要管理的基础资源VS云开发需要管理的基础资源

就这一步即可。云开发提供完整的后端云服务，提供数据库、存储、函数、静态托管等基础能力，以及扩展能力，无须管理基础架构。相比较传统的开发模式，云开发至少可节省50%的人力成本、交付效率提升70%。

#### 云开发模式调整 ####

在此之前我们需要把原来码仔备忘录项目改成云开发项目，所以需要先把项目从项目管理中先删除。（如果是直接新建的云开发项目可以忽略这一步）

首先，先进入小程序项目管理页面：

![a1f7b202307271118224821.png][]

然后点击右上角「管理」按钮进入该页面的管理状态。

![2c868202307271118349620.png][]

然后选中你之前的单机版本勾选进行删除即可。

![59f67202307271118457997.png][]

接下来我们在导入项目界面对云开发进行勾选即可。

![b4e61202307271118555640.png][]

这个时候进入我们会发现小程序开发工具自动给我们生成了一套云开发Demo，我们先直接处理掉。

![a14e8202307271119056346.png][]

![1dab2202307271140236819.png][]

![1e8c0202307271119137542.png][]

意思就是找不到小程序云开Demo代码的里面的一些模块，这个不用理会直接先把Demo代码全部删除。

![02617202307271119224871.png][]

删除后我们就可以看到正常的页面渲染了。

![cf411202307271119314729.png][]

回到正常状态下，我们接下来要改造的就是数据操作这块的业务。

#### 数据缓存改造云开发 ####

在改造之前我们先要梳理思路。

1.  首先我们先通过之前学习过抽象方法。
2.  把所有和数据操作相关的方法都抽取到一个js类里面，这样便于维护。
3.  将所有的方法替换成云数据库的操作函数。

##### 抽象数据操作API #####

我们在根目录下面新增 api 的文件夹，然后在其文件夹下面新增一个 memo.js 用于存放所有备忘录的操作API。

![782e8202307271119468540.png][]

梳理下有哪些方法：

1.  获取备忘录列表
2.  获取备忘录详情
3.  新增备忘录信息
4.  删除备忘录信息
5.  修改备忘录信息

先给相关的方法取好函数名称，然后进行导出声明。  
memo.js 完整代码

![3c53f202307271138124393.png][]

首先我们来实现获取备忘录列表，在列表页面 onShow 函数中会被调用。

![6c892202307271132413221.png][]

在这个时候setData是页面操作函数，所以我们要抽象的部分是：

![3953d202307271132507074.png][]

接下来我们就把这段代码放在memo.js里面去。

> memo.js 关于 getMemoList 的代码片段

![fd710202307271133053889.png][]

然后替换成列表页面的调用，先引入memo的获取 getMemoList 函数。  
list.js 头部引入代码片段

![ec80920230727113321184.png][]

引入后在 onShow 函数中使用  
在 onShow 所有代码片段

![701bd202307271133313579.png][]

采取同样的方式，我们可以把之前的获取详情、删除、修改都抽象到 memo.js 中：  
memo.js 所有代码

![77ddb202307271138491596.png][]

在相应业务场景进行调用，调用之前都要先引入方法才行。由于引入代码相对重复，下面就不贴引入代码了，只贴使用代码。

删除代码方法调用：  
list.js 中 del 函数所有代码

![27ce020230727113349464.png][]

查看备忘录详情调用：  
edit.js 中 onLoad 函数所有代码

![cd54b202307271133594772.png][]

新增和删除方法调用：  
edit.js 中 save 函数中的关于保存和修改的代码片段

![5ba61202307271134119380.png][]

到这里我们就完成了第一步，先抽取数据操作对象，然后我们要进行云数据库到操作了。

#### 操作云数据库 ####

##### 初始化数据库 #####

首先我们先进入云开发控制台。

![a1dc0202307271120312319.png][]

然后选中「数据库」。

云开发提供了一个 JSON 数据库，顾名思义，数据库中的每条记录都是一个 JSON 格式的对象。一个数据库可以有多个集合（相当于关系型数据中的表），集合可看做一个 JSON 数组，数组中的每个对象就是一条记录，记录的格式是 JSON 对象。

![9de04202307271120419248.png][]

我们会发现没有可用的集合，再次新建一个集合 memo，用于存放备忘录数据。

![dc1b9202307271120513123.png][]

##### 新增一条数据 #####

我们先手动新增一条测试数据看看，点击「添加记录」。

![18f39202307271121009958.png][]

![e3655202307271134265548.png][]

我们用以上测试数据添加进去

![aa610202307271121127561.png][]

除此之外我们可以看到可以添加多种不同类型的数据，云开发数据库提供以下几种数据类型：

*  String：字符串
 *  Number：数字
 *  Object：对象
 *  Array：数组
 *  Bool：布尔值
 *  Date：时间
 *  Geo：多种地理位置类型
 *  Null

我们先默认都用 string 类型的数据，新增完成之后就可以做memo集合中看到一条数据了。

![94c01202307271121258093.png][]

数据表已经有数据了，那么我们怎么获取？

##### 获取数据库数据 #####

我们回到小程序编辑台，对我们的获取数据方法进行下改造。

![5c339202307271134379568.png][]

这个是获取本地的数据方法，下面是获取数据库方法

![bd699202307271134475113.png][]

当我们去列表页面进行调用的时候发现报错：

![9a166202307271121414021.png][]

原来是在此之前还需要进行云API的初始化。  
那么现在问题来了，我们后续会遇到大量的调用云API，那么都需要一开始初始化，并且这个初始化只需要一次，这个时候初始化我们应该在哪里进行调用呢？  
当一个函数应用一开始就需要调用的时候并且只需要调用一次，我们可以在app.js的 onLaunch 生命周期中调用。  
app.js 的 onLaunch 函数代码片段

![ebc0820230727113456881.png][]

接下来在看调用看看，在这里告诉大家一个调试技巧，使用调试器中的Network面板，然后选中Cloud标签进行过滤，在这里我们就可以刚才调用API请求。

![62ef9202307271121577173.png][]

先看看请求状态，从状态来看是成功的请求。

![a1eb0202307271122105973.png][]

然后我们再来看看返回的数据：

![a9d72202307271122191189.png][]

明明有一条数据，为什么获取不到呢？  
因为云开发数据库集合读取权限问题。默认我们新建的集合读取权限是仅创建则可以读写，第一条测试数据是我们手动录入的，所以没有创建者，默认权限于是就读取不到。  
我们可以来到云开发控制面板，然后找到 数据库=> 数据权限。

![84c91202307271122287273.png][]

我们把权限从「仅创建者可读写」修改为「所有用户可读，仅创建者可读写」试试看。修改完成之后再次调用获取方法，看到返回结果中出现了这条测试数据。

![e67bf202307271122374093.png][]

虽然数据出来了，但是我们会发现还有一个错误日志。

![fef99202307271122464795.png][]

具体代码块：

![00eb2202307271122559727.png][]

原因：在没有使用云API之前我们使用的缓存操作API是同步操作返回了具体数据，而修改后的获取数据方法是异步函数，没有给到数据到列表页面进行使用。最终导致list数据对象为空，list的length自然就出现了undefined的错误提示。

从数据库获取数据除了可以用以上的实现 success 方法，同样还支持可以用 Promise 风格调用：  
可以简单理解成将包裹的回调函数调用方式改成了链式调用的回调函数

![8f553202307271135102375.png][]

基于 Promise 风格调用，我们可以将函数拆解成两部分。接下来再改造一下，传递数据的部分代码：

1.将查询代码在 getMemoList 完成

![6fb93202307271135244593.png][]

2.将查询结果在列表页面进行列表渲染

![cba9f202307271135359024.png][]

这样我们就成功的将数据库的数据显示出来了

![7473c202307271123157335.png][]

接下来，我们就来把所有方法进行云API的实现。

##### 查看数据详情 #####

在这里我们就不能用index下标来，通常与后端交互我们都会采用ID来进行查询，每条数据都会生成一个ID字段，字段名称为\_id。

![19b7620230727112327362.png][]

![e0887202307271142282107.png][]

![a9194202307271131058492.png][]

获取id进行页面传递

![92128202307271136021843.png][]

查询方法改造，由于通过id查询是非常常用的方法，所以云API直接有个doc方法传入id即可查询：  
memo.js 中 getMemoInfo 函数代码

![533eb202307271136111713.png][]

查询方法调用：  
edit.js 中 onLoad 函数代码

![0cac4202307271136209062.png][]

##### 新增备忘录数据 #####

新增方法改造：  
memo.js 中 addMemoInfo 函数

![0b2fb20230727113629407.png][]

调用方法：  
edit.js 中 save 函数新增逻辑代码片段

![7f1b8202307271136406222.png][]

新增成功后会返回新增数据的id信息。

![3d072202307271123576487.png][]

然后在数据库当中就可以看到新增的数据了。

![d2ec6202307271124076802.png][]

![5c01c202307271142489687.png][]

![ba8a4202307271124196589.png][]

然后在看下列表返回的数据，只有自己新增的那条数据了。

![e7e16202307271124282584.png][]

##### 修改备忘录数据 #####

修改方法改造：  
memo.js 中 updateMemoInfo 函数。

![e4a6f202307271136505664.png][]

之前修改的逻辑是采用的删除之后再新增做的“假”修改，这次我们直接采用修改方法。  
edit.js 中 save 函数修改逻辑代码片段

![fdd22202307271136585575.png][]

返回结果中的 updated 是代表修改成功数据的数量

![ec921202307271124445665.png][]

##### 删除备忘录数据 #####

删除方法改造：  
memo.js 中 deleteMemoInfo 函数

![dc1a6202307271137078113.png][]

调用方法：  
list.js 中 del 函数

![761b4202307271137218586.png][]

在这里要注意的是删除之后还需要调用查询所有数据方法对列表更新。

![50bf9202307271125036092.png][]

返回值 removed 为删除数量。

### 总结 ###

在本小节我们使用云API在小程序端操作了云数据库，学习了以下函数：

*  使用 get() 进行了数据库的查询
 *  使用 add() 进行了数据添加
 *  使用 update() 进行了数据修改
 *  使用 remove() 进行了数据删除

在这里我们就已经完成了使用云数据库来存储备忘录数据。

[f9cf0202307271118001472.png]: https://img-blog.csdnimg.cn/img_convert/b3334844d4a985d8e14f1782f5dd663b.png
[a1f7b202307271118224821.png]: https://img-blog.csdnimg.cn/img_convert/40876520f3c70b3766ce9aade82bc200.png
[2c868202307271118349620.png]: https://img-blog.csdnimg.cn/img_convert/3a6a84d200baa2625bd4154a829228e0.png
[59f67202307271118457997.png]: https://img-blog.csdnimg.cn/img_convert/cb18b179487abee9f654247e49e3ab4a.png
[b4e61202307271118555640.png]: https://img-blog.csdnimg.cn/img_convert/eaa28618645d0fc644cc0349b52cf3a0.png
[a14e8202307271119056346.png]: https://img-blog.csdnimg.cn/img_convert/d0a89c14503390c5e852a96e5456bc10.png
[1dab2202307271140236819.png]: https://img-blog.csdnimg.cn/img_convert/38ba6d08e7c93a188d64ee6356885c07.png
[1e8c0202307271119137542.png]: https://img-blog.csdnimg.cn/img_convert/77697ab8fe70924c74538340c77fbfeb.png
[02617202307271119224871.png]: https://img-blog.csdnimg.cn/img_convert/407dffc199c5acba7002ee07e68c471a.png
[cf411202307271119314729.png]: https://img-blog.csdnimg.cn/img_convert/529d10343c78d952a57b38371f260619.png
[782e8202307271119468540.png]: https://img-blog.csdnimg.cn/img_convert/98cc0ddf62762a02c0dae0843f861d6b.png
[3c53f202307271138124393.png]: https://img-blog.csdnimg.cn/img_convert/b4347747d8e0a9c27af9547618fb8176.png
[6c892202307271132413221.png]: https://img-blog.csdnimg.cn/img_convert/863d5170077f635f3036e3d007357099.png
[3953d202307271132507074.png]: https://img-blog.csdnimg.cn/img_convert/95cd134ed0168a43bfca2d8d56b58383.png
[fd710202307271133053889.png]: https://img-blog.csdnimg.cn/img_convert/c6c57fffeea8c1cd4d609fed15363d45.png
[ec80920230727113321184.png]: https://img-blog.csdnimg.cn/img_convert/ff26534c6330c49d33878ab419fbff99.png
[701bd202307271133313579.png]: https://img-blog.csdnimg.cn/img_convert/fa42671c01e7547df29a597967ac7be5.png
[77ddb202307271138491596.png]: https://img-blog.csdnimg.cn/img_convert/e0d81947baa5a62fdd8a4d1fa092c6eb.png
[27ce020230727113349464.png]: https://img-blog.csdnimg.cn/img_convert/51b326180435147200624ef4647befec.png
[cd54b202307271133594772.png]: https://img-blog.csdnimg.cn/img_convert/c942d829194439bf3616b30257516d3d.png
[5ba61202307271134119380.png]: https://img-blog.csdnimg.cn/img_convert/16b9ca145f51243f65f34cb2227c4c54.png
[a1dc0202307271120312319.png]: https://img-blog.csdnimg.cn/img_convert/1884f51876b64afd4079d5da78c1e98a.png
[9de04202307271120419248.png]: https://img-blog.csdnimg.cn/img_convert/ab9101b0ec21c93cceb59b386fb3fcd3.png
[dc1b9202307271120513123.png]: https://img-blog.csdnimg.cn/img_convert/f88b389c760c1ba92ca33a22f915ec34.png
[18f39202307271121009958.png]: https://img-blog.csdnimg.cn/img_convert/9c97f01829e248eb48a824809616cbcf.png
[e3655202307271134265548.png]: https://img-blog.csdnimg.cn/img_convert/61b1023ef328ffec11e0d14cec156896.png
[aa610202307271121127561.png]: https://img-blog.csdnimg.cn/img_convert/bed488d4d48b913dd268fa98f1a4b7a4.png
[94c01202307271121258093.png]: https://img-blog.csdnimg.cn/img_convert/aa2a6c3d3afa78c3f06a8d23ff066878.png
[5c339202307271134379568.png]: https://img-blog.csdnimg.cn/img_convert/45ccc50de12a28c5fabd69ab96f21ed0.png
[bd699202307271134475113.png]: https://img-blog.csdnimg.cn/img_convert/6236431c5a3722064b2d33731fcb5784.png
[9a166202307271121414021.png]: https://img-blog.csdnimg.cn/img_convert/90553df074651be14a1c9a3737e6fe8d.png
[ebc0820230727113456881.png]: https://img-blog.csdnimg.cn/img_convert/bae61e32f7346685285deca5030a2846.png
[62ef9202307271121577173.png]: https://img-blog.csdnimg.cn/img_convert/723d6abfe066a99b54f2c1bb66b22f96.png
[a1eb0202307271122105973.png]: https://img-blog.csdnimg.cn/img_convert/51d154fbedd31dc2d37b5e17ff1e85c0.png
[a9d72202307271122191189.png]: https://img-blog.csdnimg.cn/img_convert/f955d6579e8316ba740acc499d18c534.png
[84c91202307271122287273.png]: https://img-blog.csdnimg.cn/img_convert/ab4f60a5b39e333dcbd8dfd5c91fe962.png
[e67bf202307271122374093.png]: https://img-blog.csdnimg.cn/img_convert/bc4b3fef36c67053f3e04e652c81533e.png
[fef99202307271122464795.png]: https://img-blog.csdnimg.cn/img_convert/bcbeff6387ba9e809eec53e26ec67baa.png
[00eb2202307271122559727.png]: https://img-blog.csdnimg.cn/img_convert/73f99e48c3cb03c0eebb68abfa0e1c12.png
[8f553202307271135102375.png]: https://img-blog.csdnimg.cn/img_convert/ace787ed6acbefb039fbefa074c0dd38.png
[6fb93202307271135244593.png]: https://img-blog.csdnimg.cn/img_convert/093cb2c990b3ffadc89257363337b01c.png
[cba9f202307271135359024.png]: https://img-blog.csdnimg.cn/img_convert/2b6068a000e380cfa09ba8954101af69.png
[7473c202307271123157335.png]: https://img-blog.csdnimg.cn/img_convert/9ff8de6b2b5e689662cfd7b50974e126.png
[19b7620230727112327362.png]: https://img-blog.csdnimg.cn/img_convert/76d203729b3291810f3dd002bf4c2a7e.png
[e0887202307271142282107.png]: https://img-blog.csdnimg.cn/img_convert/c4f7487660f29998d14465f65e8c15bc.png
[a9194202307271131058492.png]: https://img-blog.csdnimg.cn/img_convert/9639bb04822005c24984db748af8b237.png
[92128202307271136021843.png]: https://img-blog.csdnimg.cn/img_convert/741ed79267a58446da51b13e6e958bcd.png
[533eb202307271136111713.png]: https://img-blog.csdnimg.cn/img_convert/215074a309327de341d7518024229319.png
[0cac4202307271136209062.png]: https://img-blog.csdnimg.cn/img_convert/e83dbf7d000503737a3852c2f1ddbfa4.png
[0b2fb20230727113629407.png]: https://img-blog.csdnimg.cn/img_convert/02191e200f73f2d1d7351de157d4de35.png
[7f1b8202307271136406222.png]: https://img-blog.csdnimg.cn/img_convert/3780d6684330fb7894a7e210f04addde.png
[3d072202307271123576487.png]: https://img-blog.csdnimg.cn/img_convert/b66cc3fddfbfe2466f39837a930d69b1.png
[d2ec6202307271124076802.png]: https://img-blog.csdnimg.cn/img_convert/298ec314946fc191af889841481d6547.png
[5c01c202307271142489687.png]: https://img-blog.csdnimg.cn/img_convert/91bf66e9301b1d313645422d5eec943c.png
[ba8a4202307271124196589.png]: https://img-blog.csdnimg.cn/img_convert/bb76438aeae6feba4a75e6a54ebd1745.png
[e7e16202307271124282584.png]: https://img-blog.csdnimg.cn/img_convert/c2c4accb711f79118528128af1961cd3.png
[e4a6f202307271136505664.png]: https://img-blog.csdnimg.cn/img_convert/86064a4515e0bdb127262b8b59980eec.png
[fdd22202307271136585575.png]: https://img-blog.csdnimg.cn/img_convert/cb8825d49d60a9bbe7e87b9ea65da5e7.png
[ec921202307271124445665.png]: https://img-blog.csdnimg.cn/img_convert/05e38c7557f7ac5826c04028892aa06d.png
[dc1a6202307271137078113.png]: https://img-blog.csdnimg.cn/img_convert/8570f99481bcf4ce953689314fb8e0b6.png
[761b4202307271137218586.png]: https://img-blog.csdnimg.cn/img_convert/0b7a0f284bf0e763ca9a1cca1187bbc5.png
[50bf9202307271125036092.png]: https://img-blog.csdnimg.cn/img_convert/00b25b53b35226f486c1f5f0587c11c2.png