小程序云开发入门(4)

1,393 阅读6分钟

这是我参与8月更文挑战的第8天,活动详情查看:8月更文挑战

上篇小程序云开发入门(3)已经介绍了关于小程序云开发的miniprogram文件夹,本篇将主要介绍cloudfunctions这个核心文件夹。

cloudfunctions 目录介绍

cloudfunctions 文件夹图标里有朵小云,表示这就是云函数根目录,表示这里是存放云函数的地方,也就是相当于我们进行数据存储、进行数据添加、删除、修改等操作的地方。

该文件夹里包含一个 quickstartFunctions 文件夹是云开发的快速启动指引。

什么是云函数?

云函数也是一个 js 文件,以函数的形式运行后端代码来响应事件以及调用其他服务。它的运行环境是Node.js,支持多种编程语言,最为推荐的就是JavaScript。

比如删除一条数据,我们需要从前端界面点击删除按钮发起请求,调用到云函数去处理数据,找到该条数据并把它从删除,抛出删除成功,这样我们前端的页面上就可以知道「这条数据已经被我们删除了,存储数据的数据库中已经没有这条数据了」。

此外,由于云开发是基于微信提供的服务,所以能够直接访问到一些微信对外提供的一些方法,比如微信登录、分享朋友圈、等等我们直接就能够调用到。

云函数的开发环境

云开发所使用的的服务端环境是Node.js,npm是Node包管理器,通过npm,可以方便的安装云开发所需要的依赖包。

下载地址: Node.js下载地址

大家可以根据电脑的操作系统下载相应的Node.js安装包并安装(安装时不要修改安装目录,啥也别管直接next安装即可)。打开电脑终端(Windows电脑为cmd命令提示符,Mac电脑为终端Terminal),然后逐行输入并按Enter执行下面的代码:

node --version
npm --version

如果显示v12.18.4和6.14.6(可能版本号会有所不同),标识你的Node.js环境已经安装成功。

创建云函数

cloudfunctions目录的位置,单击鼠标右键,会弹出上图中的框,选择「新建 Node.js 云函数」,起个名字比如 login,敲下回车也就是按下 enter 键后,会自动生成一个云开发的函数文件夹。

9.png

该文件夹包含三个文件 config.json,index.js,packge.json。

index.js, 是云函数最主要的文件,里面写的就是我们的接口函数。 也就是说,我们在这里对数据库存储的数据做处理(比如修改一条记录),处理完后再把最新的处理过的结果抛出返回。这样子我们前端页面交互调用到这个方法时,就能得到更新后的最新数据了。

config.json,配置文件,刚才提到我们可以用云函数很容易地调用到微信对外开放的一些 API 接口,但是你得按照它要求的格式来调用。 这里的话,就是我们需要在config.json中声明一下,我要调用微信的 xx 方法了,然后在index.js中才能去用这个 xx 方法。

package.json,配置第三方依赖库的,和config.json用法很像,不过这个更复杂一点,因为是想用别人的第三方的库,所以你得先把它下载下来。

云函数的调试

选择需要调试的云函数文件夹目录位置,右键单击,会弹出如上图所示的框,选择「开启云函数本地调试」,会打开一个新的窗口,即云函数调试界面。

9.png

右侧的「请求方式」分为两种,分别是模拟器触发手动触发

1. 手动触发

需要我们手动点击本地调试窗口右下角的「调用」按钮,完成云函数的调用。实际我们经常会用到的是「请求参数」,在这里模拟前端页面传过来的数据,这样点击调用的时候,执行云函数就能在event对象中拿到你设置的值。 比如在云函数login文件夹index.js中加一句console.log(event),在调用该函数的时候,把event对象打印出来,看看它的值是什么,有没有拿到我们设置的值。

91.png

点击手动触发,设置请求参数,点击调用后,可以在调试器中看到返回的结果。

92.png

9.png

2. 模拟器触发

模拟器触发,也就是我们通过从小程序页面的交互来完成云函数的调用。将云函数本地调试方法改为 模拟器调试。

91.png

我们直接用现有的例子来看一看是怎么用的。这里我们使用首页中云函数下方的获取openid的例子。首先找到其对应的页面为 "pages/getOpenId/index",找到之后,根据 bindtap="getOpenId" 在对应的index.js中找到对应的方法:

9.png

然后点击 获取OpenId,就可以看到云函数本地调试的情况。

91.png

部署并上传云函数

cloudfunctions里放的是云函数,miniprogram放的是小程序的页面,这并不是一成不变的,最好是让放小程序页面的文件夹以及放云函数的文件夹处于平级关系且都在项目的根目录下,便于管理。也就是说你也可以修改这些文件夹的名称,这取决于项目配置文件project.config.json里的如下配置项:

"miniprogramRoot": "miniprogram/",
"cloudfunctionRoot": "cloudfunctions/",

部署并上传云函数,使用鼠标右键功能,比如login,方法如下:

  1. 右键云函数目录,选择在终端中打开,输入npm install命令下载依赖文件;
  2. 然后再右键云函数目录,点击“创建并部署:所有文件
  3. 在云开发控制台–云函数–云函数列表查看云函数是否部署成功。

npm包管理器与依赖

为什么要在云函数目录执行npm install,而不是其他地方?这是因为npm install会下载云函数目录下的配置文件package.json里的dependencies,它表示的是当前云函数需要依赖的模块。package.json在哪里,就在哪里执行npm install,没有package.json,没有dependencies,就没法下载啊。

执行npm install命令下载的依赖模块会放在node_modules文件夹里,大家可以在执行了npm install命令之后,在电脑里打开查看一下node_modules文件夹里下载了哪些模块。

总结

这篇文章到这里就结束了,主要介绍了云开发相关的功能,云函数编写基础,包括如何进行调试,从前端页面到云函数的交互等。

后面文章更新应该会更加偏向实践了,要去实践,不断的用到,在练习中会记住的更深刻~

最后,创作不易,点个赞鼓励一下吧