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

本文涉及的产品
函数计算FC,每月15万CU 3个月
简介: 快速学习小程序云开发和调试(一)

开发者学堂课程【小程序云开发速成 小程序云开发和调试(一)】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址: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 空间

image.png

开发时首先做一个切换空间的功能,使得在开发一个小程序时可以给它任意切换一个空间。

用 local 的空间,所有的小程序请求将会使用 localhost

但是此时本地并没有起一个云服务。

image.png

先起 dev-server,接着我们使用 ts 的方式运行云函数,再运行调试命令inspect-server命令运行好后返回 localhost 出现数据

image.png

该数据就是从云数据库中得到

image.png

在运行命令时会显示出一个调试的窗口,打开调试窗口对 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

用这个判断可以让云函数在开发时不需要部署就可以使用本地来运行

相关实践学习
【文生图】一键部署Stable Diffusion基于函数计算
本实验教你如何在函数计算FC上从零开始部署Stable Diffusion来进行AI绘画创作,开启AIGC盲盒。函数计算提供一定的免费额度供用户使用。本实验答疑钉钉群:29290019867
建立 Serverless 思维
本课程包括: Serverless 应用引擎的概念, 为开发者带来的实际价值, 以及让您了解常见的 Serverless 架构模式
相关文章
|
23天前
|
人工智能 小程序 IDE
【一步步开发AI运动小程序】九、姿态辅助调试桌面工具的使用
随着AI技术的发展,各大厂商推出的AI运动APP如“乐动力”、“天天跳绳”等,使云上运动会、线上健身等概念大热。本文将指导你如何利用“云智AI运动识别小程序插件”,在微信小程序中实现类似功能,包括工具搭建、服务启动及数据回传等步骤,助力开发者高效开发AI运动小程序。
【一步步开发AI运动小程序】九、姿态辅助调试桌面工具的使用
|
5月前
|
小程序 开发者
【微信小程序-原生开发】实用教程05-首页(含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片)
【微信小程序-原生开发】实用教程05-首页(含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片)
64 0
|
2月前
|
小程序 开发工具
微信小程序云开发的开通
微信小程序云开发的开通
56 0
微信小程序云开发的开通
|
4月前
|
存储 运维 小程序
后端开发零负担!揭秘支付宝小程序云开发的高效与安全,你的项目也能飞速上线?
【8月更文挑战第27天】支付宝小程序云开发是由阿里云提供的集成开发环境,助力开发者高效、安全地构建小程序后端服务,免去服务器搭建,显著提高开发效率并降低运维成本。它集成了云函数、云数据库及云存储等功能,便于快速搭建后端逻辑。例如,仅需简单几行代码即可创建HTTP接口或进行数据管理。这使得开发者能更专注于业务逻辑和用户体验优化,同时平台还提供了强大的安全保障措施,确保数据安全和用户隐私。无论对于初创团队还是成熟企业,支付宝小程序云开发都能有效提升产品迭代速度和市场竞争力。
95 1
|
4月前
|
存储 小程序 数据可视化
小程序开发问题之使用小程序云服务开发个人相册小程序如何解决
小程序开发问题之使用小程序云服务开发个人相册小程序如何解决
|
4月前
|
移动开发 开发框架 小程序
开发H5程序或者小程序的时候,后端Web API项目在IISExpress调试中使用IP地址,便于开发调试
开发H5程序或者小程序的时候,后端Web API项目在IISExpress调试中使用IP地址,便于开发调试
|
5月前
|
存储 小程序 API
【微信小程序-原生开发+云开发+TDesign】修改用户头像(含wx.chooseMedia,wx.cloud.uploadFile,wx.cloud.deleteFile的使用)
【微信小程序-原生开发+云开发+TDesign】修改用户头像(含wx.chooseMedia,wx.cloud.uploadFile,wx.cloud.deleteFile的使用)
92 0
【微信小程序-原生开发+云开发+TDesign】修改用户头像(含wx.chooseMedia,wx.cloud.uploadFile,wx.cloud.deleteFile的使用)
|
5月前
|
小程序 JavaScript 安全
【微信小程序-原生开发】转发给好友/群,分享到朋友圈(含单页模式访问云开发数据库的方法)
【微信小程序-原生开发】转发给好友/群,分享到朋友圈(含单页模式访问云开发数据库的方法)
201 0
|
5月前
|
存储 小程序 数据库
【微信小程序-原生开发】实用教程08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据,滚动公告栏
【微信小程序-原生开发】实用教程08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据,滚动公告栏
75 0
|
5月前
|
小程序 JavaScript 前端开发
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
173 0
下一篇
DataWorks