uniclound云开发(三 云函数的使用)

uniclound云开发(三 云函数的使用)

这里我们可以先看一下总结一下整个云函数部分的使用:其实是分为以下这样子的!

1、云函数的建立

这里我们先了解一下多人云函数开发的时候应该如何使用

右键点击unicloud文件夹,点打开unicloud web控制台可以打开云函数空间,在空间中,最下面有一个成员管理,可以加人进来多人开发

之前我们的云函数直接使用的官方的,接下来我们就新建一个云函数,然后尝试进行调用,这里主要存储首页轮播图的部分,接下来我们就建立一个管理轮播图的函数空间homebanner

新建一个homebanner云函数

然后我们就可以看到这个

2、云函数的本地使用

上面就是系统为我们搭建的云函数,接下来我们试着在函数之中默认返回一下我们首页的banner图数据,然后调用我们云函数在首页部分实现调用和访问我们的云函数!

👉 这里我们先改造一下我们的云函数返回一个1 试试

👉 所以这里我们的homebanner 下的index.js文件就可以写成:

js 复制代码
'use strict';
exports.main = async (event, context) => {
	//event为客户端上传的参数
	console.log('event : ', event)
	
	//返回数据给客户端
	// return event
	return '我是云函数返回的数据部分!';
};

接下来就是操作数据库,这里我们先使用传统方式来操作数据库,然后后面我们尝试操云函数通过JQL操作数据库。

  • 云函数通过传统方式操作数据库

uni-app的前端代码,不再执行uni.request联网,而是通过uniCloud.callFunction调用云函数

👉 这里我们调用查询一下

js 复制代码
onMounted(()=>{
    initBanner();// 加载轮播图
})

// 初始化Banner图以及banner图的管理
function initBanner() {
    console.log('初始化Banner图以及banner图的管理');
    // promise方式
    uniCloud.callFunction({
            name: 'homebanner',
            data: {
                    a: 1
            }
    })
    .then(res => {
            console.log(res);
    });
}

这边我们已经可以看到函数调用成功并且成功的

然后看一下我们的返回结果可以看出来本地我们调用然后已经返回的部分

3、云函数的线上使用

上面我们已经实现了云函数在本地部分的调用和使用,接下来我们便在线上尝试一下使用。

👉 在云函数空间之中的云数据库部分添加数据表,在这里我们添加一个数据

这里一定一定要注意:``

js 复制代码
{
    "pageurl":"/",
    "imgurl": "https: //img95.699pic.com/xsj/0p/p9/z8.jpg%21/fw/700/watermark/url/L3hzai93YXRlcl9kZXRhaWwyLnBuZw/align/southeast"
}

确认以后就可以在控制台看到!

接下来我们就去把本地的云函数调用写成线上的刚刚建立的数据库,这里有点像是Node里面的Express的作用感觉!

👉 这里我们的homebanner 下的index.js文件就可以写成:

js 复制代码
'use strict';
// 连接云数据库
const db = uniCloud.database()
exports.main = async (event, context) => {
  // 获取 `user` 集合的引用
  const collection = db.collection('homebanner');
  // 读
  let res = await collection.get()
 
  return res
};
  • 然后我们运行一下,这里再次报了同样的错误,看了一下还是我没有设置不校验本地https的原因
js 复制代码
http://127.0.0.1:7000 不在以下 request 合法域名列表中,请参考文档:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html

这里我们已经可以看到请求的部分已经成功了!

👉 这里我们可以右键然后选择一下上传云函数,然后在HubildX之中把之前连接本地的部分连接成线上云函数部分,然后再次运行,这里可以看到云函数已经运行成功了!

这边我们再次运行,选择连接云函数的部分,然后可以看到项目已经可以正常连接我们的线上的云函数部分数据库了

看看返回的参数,这里可以看到,除了砸门的一个头部信息以外,我们已经可以正常拿到我们的参数了!

👉 在我们的线上数据库部分:后台再次增加一个轮播图增加一个数据,然后确认! 这里已经可以看到我们的数据已经在后台增加成功了,去页面看看就可以!

这边刷新一下,可以看到我们的页面已经正常可以拿到了!

查询一下已经ok!

相关推荐
2501_91592143几秒前
iOS 开发者工具推荐,构建从调试到性能优化的多维度生产力工具链(2025 深度工程向)
android·ios·性能优化·小程序·uni-app·iphone·webview
yqcoder4 分钟前
在 scss 中,&>div 作用
前端·css·scss
小马哥编程11 分钟前
这个variables.scss文件中$menuText:#bfcbd9;:export {menuText: $menuText; }的语法符合要求吗
前端·css·scss
宋辰月12 分钟前
zustand
前端·javascript·html
z***I39414 分钟前
JavaScript原型链
开发语言·前端·javascript
JinSo27 分钟前
Ultracite:为 AI 时代打造的零配置代码规范工具
前端·javascript·github
ZEGO即构开发者29 分钟前
WebRTC 实战:用即构 SDK 搭建 Web 端 1v1 视频通话(含完整流程与 Demo)
前端·音视频·webrtc
詹姆斯bind31 分钟前
基于Div contenteditable 属性 实现一个 “只读” 标签编辑器
vue.js·编辑器·contenteditable
爆浆麻花1 小时前
为什么有些人边框不用border属性
前端·css
uhakadotcom1 小时前
Next.js 从入门到精通(1):项目架构与 App Router—— 文件系统路由与目录结构全解析
前端·面试·github