一、创建uniCloud项目
在 HBuilderX
新建项目界面,选择 uni-app项目
,输入项目名称,选择默认模板即可,根据个人需要选择 vue
版本,并勾选 启用uniCloud
,在右侧选择服务供应商(支付宝云、阿里云、腾讯云)(开通云服务器需实名认证),点击创建。
关联服务空间
对于新建时勾选 启用uniCloud
的项目,对项目根目录 uniCloud
点右键选择关联云服务空间,绑定之前创建的服务空间,或者新建一个服务空间。
如果新建时没有勾选 启用uniCloud
的项目,也不要慌,还可以抢救一下,在项目名称上面右键 创建uniCloud开发环境
,选择服务供应商即可,然后对项目根目录 uniCloud
点右键选择关联云服务空间,绑定之前创建的服务空间,或者新建一个服务空间。
二、认识云函数
callFunction方式云函数,也称之为普通云函数。
uni-app的前端代码,不再执行 uni.request
联网,而是通过 uniCloud.callFunction
调用云函数。
这里只是简单的介绍一下,方便后面的距离使用,更多详情可以参考云函数。
uniCloud.callFunction
可以在uni-app前端执行,也可以在uniCloud云函数中执行。也就是前端和云端都可以调用另一个云函数。
callFunction
方法的参数和返回值如下:
uniCloud.callFunction
需要一个json对象作为参数,其中包含2个字段
字段 | 类型 | 必填 | 说明 |
---|---|---|---|
name | String | 是 | 云函数名称 |
data | Object | 否 | 客户端需要传递的参数 |
返回json
字段 | 类型 | 说明 |
---|---|---|
result | Object | 云函数中代码return的返回结果 |
requestId | String | 云函数请求序列号,用于错误排查,可以在uniCloud web控制台的云函数日志中查到 |
header | Object | 服务器header信息 |
errCode | Number或String | 服务器错误码 |
success | bool | 执行是否成功 |
创建第一个云函数
uniCloud
项目创建并绑定服务空间后,开发者可以创建云函数(云对象是云函数的一种,云函数可泛指普通云函数和云对象)。
在 uniCloud/cloudfunctions
目录右键创建云函数/云对象,创建一个求和的云函数 sumFun
创建云函数后,生成一个目录,该目录下自动生成index.js,是该云函数的入口文件,不可改名。
'use strict';
exports.main = async (event, context) => {//event为客户端上传的参数let c = event.a + event.breturn {errCode: 0,errMsg: '',sum: c} // 通过return返回结果给客户端
}
在前端调用云函数
在项目首页,pages/index/index.vue
里,添加一个按钮,点击后执行方法getSumFun
,效果如下:
<template><view class="content"><button style="margin: 20px 0;" @click="getSumFun()" type="primary">求和</button><text>结果: {{sum}}</text></view>
</template><script>
export default {data() {return {sum: 0}},methods: {getSumFun() {// 客户端发起调用云函数sumFun,并传入data数据uniCloud.callFunction({name: 'sumFun',data: {a: 1,b: 2}}).then((res) => {console.log(res.result)this.sum = res.result.sum}).catch((err) => {console.error(err)})}}
}
</script><style>
</style>
选中云函数,右键,可以选择上次部署
、运行-本地云函数
、上传并运行
等。运行项目时也默认选择连接本地云函数
。可以在底部控制台中的前端控制台右上角进行切换。可以对sumFun
云函数点右键上传到uniCloud服务空间,然后在前端控制台右上角切换为连接云端云函数
,那么此时客户端连接的就是真正的现网uniCloud服务器了,更详细可参考运行与调试。