云函数基本概念
云函数即在云端(服务器端)运行的函数。
从 HBuilderX 3.4起,新增了云函数的扩展版,云对象。
开发者无需购买、搭建服务器,只需编写代码并部署到云端即可在客户端(App/Web/小程序等)调用,同时云函数之间也可互相调用。
一个云函数的写法与一个在本地定义的 JavaScript
方法无异,代码运行在云端 Node.js
中。当云函数被客户端调用时,定义的代码会被放在 Node.js
运行环境中执行。
开发者可以如在 Node.js
环境中使用 JavaScript
一样在云函数中进行网络请求等操作,也可以使用 node_modules。
但 DCloud提供了 uniCloud对象 内置在云函数/云对象中,开发者使用更多的是 uniCloud 的 api,不了解 node 不影响开发。
HBuilderX 3.0起版本,在uniCloud/cloudfunctions
目录右键创建云函数,如下:
在HBuilderX 3.4起,上述界面更新为 新建云函数/云对象。
云对象本质是对云函数的一种封装,可以对象化的方式使用云服务。
HBuilderX 3.0之前版本,项目下没有uniCloud
目录,直接在cloudfunctions
目录上右键、新建云函数
云函数修改后,可以本地运行。只有上传到云端,方可在云端生效。
更多云函数介绍参考规范。
云函数使用示例
运行 Hello uniCloud 源码
Hello uniCloud 的源码地址:hello uniCloud - DCloud 插件市场
-
在 HBuilderX 新建项目界面,选择uni-app项目,选择 Hello uniCloud 项目模板。
- 初次体验推荐阿里云,因为腾讯云的开户流程更复杂。
- 推荐使用vue3版本,因为编译速度更快。但注意不支持低版本Android。
-
HBuilderX 会在项目创建后弹出 uniCloud初始化向导,根据向导部署
- 按照法律要求,开通云服务器需实名认证,如未认证请根据提示完成
- 创建一个服务空间,创建完成后回到向导刷新列表,选择这个服务空间(创建服务空间可能需要几十秒的时间,可以在web控制台查看是否创建完成。)
- 按照向导提示,将hello uniCloud项目下的云函数、数据库schema上传部署到服务空间,并执行db_init初始化数据库
说明
- 第一次创建腾讯云服务空间时会为用户创建腾讯云账号并跳转到腾讯云实名界面,等待实名认证审核之后可以开通服务空间。若腾讯云实名认证提示身份证下已创建过多账户,则需要在腾讯云官网注销不用的账户。
- 阿里云每个账号可以有一个开发者版免费空间,此空间资源较少仅能用于测试开发。腾讯云无免费空间。
- 首次创建支付宝云时,需前往uniCloud控制台开通支付宝云服务空间,开通服务空间时需使用支付宝扫码授权开通支付宝云服务。
-
运行 hello uniCloud项目
- 在运行菜单运行项目,浏览器、app、小程序均可。uniCloud项目是云端一体的,运行前端后控制台会同时出现前端和云端的控制台。
#开发自己的第一个uniCloud项目
- 创建uniCloud项目
HBuilderX中新建项目,选择uni-app项目,并勾选启用uniCloud
,在右侧选择服务供应商(支付宝云、阿里云、腾讯云)
项目名称随意,比如 firstunicloud
- 关联服务空间
一个开发者可以拥有多个服务空间,每个服务空间都是一个独立的serverless云环境,不同服务空间之间的云函数、数据库、存储都是隔离的。
对项目根目录uniCloud
点右键选择关联云服务空间
,绑定之前创建的服务空间,或者新建一个服务空间。
- 创建云函数/云对象
uniCloud
项目创建并绑定服务空间后,开发者可以创建云函数(云对象是云函数的一种,云函数可泛指普通云函数和云对象)。
在uniCloud/cloudfunctions
目录右键创建云函数/云对象
- 创建云函数后,生成一个目录,该目录下自动生成index.js,是该云函数的入口文件,不可改名。
- 创建云对象后,生成一个目录,该目录下自动生成index.obj.js,是该云对象的入口文件,不可改名。
如果该云函数/云对象还需要引入其他js,可在index.js入口文件中引用。
初学者,建议从云对象学起,比云函数更加简单直观。
在本教程中,我们创建一个云对象名为 helloco。
- 给云对象编写方法
打开index.obj.js,我们为它添加一个 sum 方法,逻辑就是接收传入a和b2个参数,返回求和结果。
module.exports = {
sum(a, b) {
// 此处省略a和b的有效性校验
return a + b
}
}
复制代码
- 在前端调用云对象
在项目首页,pages/index/index.vue 里,添加一个按钮,点击后执行异步方法sum。
js 中 import 这个 helloco 对象,调用它的 sum 方法
<template>
<view class="content">
<button @click="testco()">请求云对象的方法</button>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
async testco() { // 注意异步
const helloco = uniCloud.importObject('helloco') // 导入云对象
try {
const res = await helloco.sum(1,2) //导入云对象后就可以直接调用该对象的sum方法了,注意使用异步await
console.log(res) // 结果是3
} catch (e) {
console.log(e)
}
}
}
}
</script>
复制代码
- 运行
将项目运行到浏览器或其他平台,点页面上的按钮,控制台会打印结果:3
HBuilderX自带一个云函数本地运行环境,运行项目时也默认选择 连接本地云函数。可以在底部控制台中的前端控制台右上角进行切换。
可以对helloco云对象点右键上传到uniCloud服务空间,然后在前端控制台右上角切换为 连接云端云函数,那么此时客户端连接的就是真正的现网uniCloud服务器了。
关于运行调试,有单独文档,详见
- 小结
到此为止,你已经开发了第一个 first uniCloud 项目,完成了客户端和服务器的第一次交互。
这个云对象只做了一个求和运算,实际开发中不需要在服务器求和,前端就可以求和。服务器应该做更复杂的事情。
但你可以通过这个示例感知uniCloud的开发,其实非常简单。尤其是云对象,打破了服务器做接口传json给前端的传统,让云端服务对象化,让服务器代码像写前端js一样、清晰。
接下来,建议通读文档,进一步学习掌握uniCloud。
#cli项目中使用uniCloud
如果要在cli项目中使用uniCloud,可以参考以下步骤
- 将cli项目导入
HBuilderX
- 如果没有appid的话,需要打开
src/manifest.json
,在基础配置-->uni-app应用标识
处点击重新获取
- 在项目根目录(src同级)点右键创建uniCloud云开发环境
- 对uniCloud目录点右键关联服务空间
- 完成
注意
- 运行与发行云函数只能使用HBuilderX的菜单,不可使用
package.json
内的命令 - 如果HBuilderX菜单运行不能满足需求可以考虑自行初始化服务空间服务空间初始化
- 虽然uni-app支持vscode等其他ide开发,但因为uniCloud对安全性要求极高,仅支持使用HBuilderX开发
- HBuilderX 也支持 cli。详见