开发者学堂课程【小程序云开发速成: 小程序云开发和调试(一)】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/300/detail/3505
小程序云开发和调试(一)
内容介绍
一、CLI 工具
二、给小程序增加 serverless 能力
三、云函数的调试
四、云函数的部署
五、增、删、改常见案例在云函数里如何写代码
六、总结
第一部分我们先来看一个小程序 todo 的 demo,该 demo 没有数据库的功能,只是一个静态的 demo,如何给一个静态的 demo 加入 serverless 的能力。
一、CLI 工具
先来介绍 CLI 工 具,该工具可以根据小程序进行预览上传等的操作,后期主要学习与云相关的操作。
功能列表:
分类 |
说明 |
命令 |
配置 |
工具初始化配置 |
alipaydev config set |
|
展示工具配置信息 |
alipaydev config list |
小程序 |
小程序列表 |
alipaydev mini list |
|
小程序预览 |
alipaydev mini preview |
|
小程序上传 |
alipaydev mini upload |
|
demo下载 |
alipaydev mini demo |
云开发 |
云服务空间列表 |
alipaydev cloud space list |
|
空间下的云函数列表 |
alipaydev cloud function list |
|
启动本地云函数运行环境 |
alipaydev cloud function dev |
|
上传云函数 |
alipaydev cloud function deploy |
|
下载云函数 |
alipaydev cloud function download |
密钥 |
密钥生成 |
alipaydev key create |
|
密钥匹配检测 |
alipaydev key match |
|
密钥转换 |
alipaydev key convert |
全局安装:
npm install alipay-dev-g
二、给小程序增加 serverless 能力
先要给小程序加上项目配置:
{
“cloud”:{
“type”:”mpServerless”
},
“miniprogramRoot”:”client”,
“component2”:true
}
三、云函数的调试
一个小程序一般会创建三个空间:开发时用dev空间;测试时用 test 空间;生产时用 prod 空间
开发时首先做一个切换空间的功能,使得在开发一个小程序时可以给它任意切换一个空间。
先用 local 的空间,所有的小程序请求将会使用 localhost
但是此时本地并没有起一个云服务。
先起 dev-server,接着我们使用 ts 的方式运行云函数,再运行调试命令inspect-server
。命令运行好后返回 localhost 出现数据
该数据就是从云数据库中得到
在运行命令时会显示出一个调试的窗口,打开调试窗口对 js 代码进行调试:
如果 chrome 打开调试地址无响应,打开 chrome//inspect/,点击 Node 开发工具即可。
调试完成后可以看到云函数代码,这样云函数就实现了本地调试的功。,我们可以设置一个断点,然后数据库返回给客户端,但是由于设置了断点前端会超时所以必须重启。
Todo list 的主要功能是增、删、改,例如增加一条记录:睡觉,todoapp 中就会显示出,并且云数据库中也增加了记录。
若想要在云函数中增加一些功能或者调试一些功能,比如切换空间:
切换空间需要一定的管理员权限,调试代码:在 config.ts 中有个配置,注释掉’2088702946325998’,再来点击切换就无法进行切换。此时需要在 admin.js 中获取用户的 userId,查看userid是否在可切换空间列表中,目前列表是空的则会返回 false 说明没有权限切换空间
新增功能的运用,例如增加一条记录:晚饭
打开 to do list 云函数
克隆 github 代码进行小程序的开发和调试:
cd client & npm install
cd server & npm install
克隆下来之后在客户端里安装 npm 包,小程序里就会有切换空间的功能。
取消刚才配置中的注释,进行切换 test 空间,切换页面后进行重启小程序,就可以测试空间看到没有数据。(因为此时云数据库中没有数据)。
可以在测试空间里增加一条数据:测试,达到可以任意切换空间的目的,对于小程序的开发,测试和上线都比较方便,不同空间的数据是相互独立不会影响的。
那么切换空间的代码如何做呢?
在 todos.js 中用到 onTitleClick,调用 changeCloudSpace 的函数。该函数在 serverless.js 中有定义:
async function changeCloudSpaceService(){
//判断用户当前是否有权限
const canChange = await invokeFunction({
name:”admin”,
url:”space/change”
}).catch(() => false);
if (!canChange) return;
const spaces = [“重启小程序”,”dev”,”test”,”prod”]
If (my.isIDE) {
spaces.splice(1,0,””local);
}
my.showActionSheet({
title:”选择小程序Serverless空间”,
items:spaces,
success:res => {
//重启小程序
if (res.index ==0){
my.reLaunch({
url:`/${getCurrentPages()[0].route}`
});
return;
}
那么 serverlessInit 如何去识别小程序当前在什么空间呢?根据取一个缓存,如果没有缓存则默认当前是在生产空间:
export function serverlessInit(){
//默认生产空间
const env=
my.getStorageSync({
key:”cloud_space”
}).data || “prod”;
const endpoint=
env===”local”?”http://localhost:3636”:”https://api.bspapp.com”
用这个判断可以让云函数在开发时不需要部署就可以使用本地来运行