小程序云开发和调试 | 学习笔记

开发者学堂课程【如何实现小程序云开发：小程序云开发和调试】学习笔记，与课程紧密连接，让用户快速学习知识。

课程地址：https://developer.aliyun.com/learning/course/750/detail/13219

小程序云开发和调试

内容介绍：

一.云函数调试

二.云函数部署

三.增删改查代码

四.给小程序增加 Serverless 能力

一.云函数调试

首先看一个小程序云 todos 的 Demo,这个 Demo 没有数据库的功能，是静止的Demo。

CLI 工具:

可以针对小程序进行预览上传的操作和云相关的操作。下载安装：npm install alipay-dev -g。

首先给小程序项目添加项目配置，其中有个属性 mpserverless。一般小程序会创建三个空间：dev、test、prod,在开发时使用 dev 空间，测试使用 test 空间，生成使用 prod 空间。在开发时，做一个切换空间的功能，好处是在开发小程序时可以给小程序任意的切换空间。先用 localhost 空间，小程序所有请求都会走 localhost。运行一个调试命令

可以看到数据，数据是从云数据库中获取的。

让其中一条数据未完成，刷新结果为未完成。

运行命令时，有一个调试窗口，打开调试窗口，用 js 代码进行调试。如果调试窗口打不开，可以打开 cherom://inspect/,可以看到云函数代码。设置一个断点，实现了一个云函数调试的功能。

获取数据之后，返回客户端，设置断点之后，前端会超时，未响应，重启去掉断点。todos 功能是增删改，比如增加一条记录，在控制台云数据库中会增加一条记录。

假设增加或调试功能比如切换空间，需要一定的管理权限。打开配置文件 config.ts,将数据取消，将无法切换。调试打开 admin.ts 文件，加入断点，获取用户 userId,查看userId 是否在可切换空间的权限列表中，列表为空返回 false,无权限切换空间。新增功能，云函数有两个，一个为管理权限，一个为 todos，运行有一个create 任务，前端数据未完成。调试技巧，将 gethome 代码克隆之后，可以进行小程序的调试和开发。克隆之后有两件事情需要完成：第一件是客户端中安装 npm 包（cd client & npm install）,因为有两个代码，一个为客户端代码，一个是 server 代码。安装完成之后，小程序中会有一个切换空间的能力。

比如切换 dev 空间，切换之后页面未刷新，重启小程序。切换 test 空间，测试空间无数据，因为数据库中测试空间无数据，可以在测试空间中添加数据。在小程序中能够任意切换空间，对小程序开发测试较为方便。不同的空间数据相互独立，不会影响其他空间。切换空间是用户点击之后，调用云函数，在 todos代码中写了一个彩蛋 onTicleClick(),

点击标题是有一个 changeCloudSpace,判断用户是否能够切换空间，不能切换空间无效果，能够切换空间会产生切换空间的能力。serverless 取一个缓存，如无缓存为默认生产空间，空间缓存在 Storage 中。获取之后，判断是否为local 环境

不进行判断，云函数每次都需要进行部署，如果写为 localhost，云函数可以不需要进行部署也能够实现。一旦切换为 local 之后，后续所有请求都会变为 localhost,由于本地存在一个监听云服务，会将所有请求转至localhost,可以在本地写入代码之后立马生成。

二.云函数部署

直接使用 alipaydev 命令部署,可以通过文档查看云函数部署命令，可以上传云函数，参数有 appID、空间 ID、名称以及小程序代码目录地址。

写好代码之后可一键部署，首先会将代码打包，编译至 functions 目录 index 文件再上传，在包中提示云函数部署成功。

部署成功之后，在控制台云函数可以查看。为了验证是否部署成功，可以修改代码，测试空间部署完成之后，将小程序切换测试空间，localhost 断开，需要重启localhost，可以看到返回结果，证明部署成功。

ts 有许多优点，可以依赖三方包，可以将不同云函数打包，部署打包编译后的代码。新建一个云函数，在 package. json 中添加一个云函数 demo,一键部署，成功之后，可在控制台云函数查看。

三.增删改查代码

首先切换 local 环境，启动 inspect。第一个功能为获取列表并展示，在 todo.ts中修改代码，启动 dev,就完成了列表获取。一般使用 todo 类，有一个获取列表 getList（），将 todo 所有列表查出并返回给客户端。

更新记录，将服务写好，找到 ID，更新 completed 状态，可以修改状态。新增首先将服务写入类中，insertOne 新增一条记录。一个云函数可以写多个功能，可以使云函数维护量较小，一个云函数可以是一类功能的集合，前端通过不同参数调用不同的服务。

比如调用todo 云函数，修改状态，调用 todo 云函数中更新的方法，将改后的状态传入，每一条记录都有 MongoDB 自动创建的唯一索引。

新增数据在 add-todo.ts中，可以获取用户的值，调用 todo 云函数中 create 服务。todo/list 中无删除功能。

四.给小程序增加 Serverless 能力

1.下载工具 CLI

下载之后有一些配置，文档中有对应教学视频，可以下载查看。配置需要修改为自己的小程序配置。

2.在项目中新建配置文件，使用配置文件将客户端代码放入一个子文件夹中，标识一个项目 mpserverless。

3.云函数本地调试

alipaydev cloud function dev -i 2021001136614025 -p functions/ --inspect

4.云函数脚手架

https://github.com/douzi8/mp-serverless