【小程序开发实战】探秘小程序云开发(上篇)——云函数使用

1,317 阅读7分钟

「这是我参与11月更文挑战的第5天,活动详情查看:2021最后一次更文挑战

前言

前面已经介绍过小程序通用的本地化开发方法,但是对于一个真实的小程序,仅仅依靠本地静态数据是不够的,最起码需要有一个远端的数据源为小程序提供数据。另外,用户通过小程序输入的数据也需要远端存储起来,那么这就需要用到“云服务”这个东西了。

那么今天,就让我们一起探秘一下微信官方所提供的“云开发”能力。

云开发介绍

顾名思义,云开发就是微信在远端为我们提供好一个看不见摸不着的“云”。你只需要知道你可以从这个云获取数据,同时也可以向云传输数据。

云开发开通

那么要如何开通这项服务呢,我们点击下图中所指向的位置

image.png

打开后呈现下图所示内容

image.png

我们按照提示为我们的云环境起一个名字,然后进行开通。

云函数

顾名思义,云函数就是放在云端的函数,而函数则是用来处理逻辑的。那么让我们在云开发控制台创建一个基本的云函数。

image.png

接着,我们可以在小程序本地进行云函数逻辑的定义。首先需要在我们的小程序配置文件project.config.json中配置管理云函数所使用的目录。

配置方法就是在配置文件中增加一项名为cloudfunctionRoot的配置项,其值就是当前小程序内任意用于存放云函数的目录,比如我们取名叫cloudfunctions。然后我们创建名为cloudfunctions的目录,可以发现开发者工具就会自动识别到云函数所在的云开发环境,如下图。

image.png

云函数创建

接着,我们右键创建好的云函数目录,可以发现既可以切换云环境,也可以进行云函数的创建。那我们先来创建一个用于查询首页内容列表的函数getContentList,随后开发者工具会为我们自动创建好云函数包含的基本内容。

image.png

这就是云函数,只不过目前我们是在本地进行云函数逻辑的开发,它还没有被放到云端。可以理解为我们既在开发者工具中完成小程序的页面功能,同时也可以在开发者工具中完成后端逻辑的开发。

但云函数的优势在于,它是与小程序密切关联的,在云函数中我们可以访问到微信小程序生态的各种信息,比如用于标识使用小程序的用户ID等。

它们之间的关联建立在小程序对于云开发服务的开通,以及小程序配置文件中对于云函数目录的声明。

云函数编写

让我们开始第一个云函数的编写,我们的目标是这个函数能够为我们提供首页所展示的内容列表。那我们可以把之前写在首页中定义的数据搬过来即可。

image.png

image.png

那么这样就可以了吗?

没错,这样就可以了,这就已经完成了一个云函数的编写,它的功能就是返回我们的首页列表内容。

云函数调试

接着,我们需要调试一下这个云函数的功能是否能满足我们使用的要求。右键我们的云函数getContentList目录,然后选择开启云函数本地调试,然后会出现云函数的调试窗口如下图。

image.png

调试方式有两种,一种是我们在调试窗口自行输入调用这个云函数时传入的参数,然后进行调用,看云函数输出的返回值是否满足预期。

另一种则是通过开发者工具的小程序页面通过云函数API的方式进行调用,然后通过查看开发者工具的调试面板中对于云函数的请求结果以及小程序页面中真实获得的数据来判断云函数是否正常工作。

我们分别演示一下两种方式下的调试过程

手动触发

image.png

首先在请求方式中选择手动触发,然后在请求参数中填入调用该函数所传入的参数,因为这个云函数的功能目前是直接返回内容列表,所以我们的参数填什么都可以,因为云函数并没有对参数做解析处理。

然后我们点击调用,即可在云函数本地调试控制台看到云函数的执行结果。

image.png

模拟器触发

将请求方式改为模拟器触发。

image.png

模拟器指的就是开发者工具中我们本地启动的小程序,使用模拟器触发云函数的方式比较接近于小程序真实使用云函数的方式,所以我们需要在小程序代码中增加对于云能力的初始化逻辑,才能对云函数进行使用。

我们在小程序的初始化中增加云能力的初始化逻辑

image.png

这里需要指定云服务的环境ID,我们可以去到云开发控制台的设置中获取。

image.png

然后我们需要在小程序首页中增加云函数调用逻辑如下

image.png

这里我们使用了全局的wx对象调用我们初始化过的云服务,然后通过callFunction方法调用我们编写的云函数,name为指定的云函数名称,data为调用该云函数时传入的参数,success为调用云函数并成功后的返回。

如果云函数有过改动,我们需要重新右键云函数所在目录并选择开启云函数本地调试

然后我们重新编译开发者工具中的小程序,让其重新进行初始化逻辑完成云能力的初始化,以及首页对于云函数的调用。

这样我们就可以看到云函数的调用返回结果了,可以通过开发者工具调试器中Network面板查看所有的网络请求,其中Cloud标签下可以看到所有云函数的调用情况。同时我们还在首页的云函数调用返回结果中使用了console.log将结果打印到控制台,所以我们在调试器的Console标签下也可以看到云函数调用的结果输出。

image.png

这样我们就完成了使用模拟器进行云函数调用的调试。

接着,我们完善一下对于云函数执行结果的解析,让其返回的内容真正成为我们页面显示的数据。

image.png

可以看到,我们已经顺利地完成了小程序从云能力的初始化,到云函数的调用,以及云函数返回数据的解析,再到最后页面对于数据的显示整个流程。

总结

总结一下今天的内容,我们首先了解了云开发的概念,可能一开始理解起来会比较抽象,但经过实际使用后相信大家会建立初步的认识。然后我们通过一个实例,将原本小程序首页展示的数据是本地静态的改造为通过云函数调用获得,完成了首页列表数据服务的“上云”。

最后,我们复习一下关于小程序云开发的几个概念:

  • 云开发:通过远端看不见摸不着的云为本地进行服务
  • 云函数:部署在远端,用来处理逻辑的函数。但可以通过小程序开发者工具在本地进行逻辑的开发和调试
  • 云函数调试:有手动触发和模拟器触发两种方式,其中后者更接近于小程序对于云函数的真实使用方式

到此,我们对于小程序的云开发建立了初步的认识,后续我们将继续深入云开发的其他能力进行详细介绍。