quickstart.md 14.2 KB
Newer Older
雪洛's avatar
雪洛 已提交
1 2
## 创建uniCloud项目
  
W
wanganxp 已提交
3
  -[HBuilderX 2.5.8+](https://www.dcloud.io/hbuilderx.html) 新建项目,选择uni-app项目,并勾选`启用uniCloud`
W
wanganxp 已提交
4
  - 在右侧选择服务供应商
雪洛's avatar
雪洛 已提交
5 6 7

![创建uniCloud项目](https://img.cdn.aliyun.dcloud.net.cn/uni-app/uniCloud/create-project.png)

W
wanganxp 已提交
8 9
  - 对于老的uni-app项目,也可以对项目点右键,菜单中选择“创建uniCloud云开发环境”
  - 新建uni-app项目的模板中,有一个`Hello uniCloud`项目模板,演示了各种云函数的使用。
雪洛's avatar
雪洛 已提交
10

W
wanganxp 已提交
11
  uniCloud云开发环境创建成功后,项目根目录下会有一个带有云图标的特殊目录,名为“cloudfunctions”。(即便是cli创建的项目,云函数目录也在项目的根目录下,而不是src下)
雪洛's avatar
雪洛 已提交
12
  
雪洛's avatar
雪洛 已提交
13
  非uni-app项目也可以通过使用[云函数Url化](uniCloud/http.md)来享受云函数的带来的便利。
雪洛's avatar
雪洛 已提交
14

W
wanganxp 已提交
15 16
## 创建和绑定服务空间

W
wanganxp 已提交
17
项目环境建好后,需要为这个项目选择一个服务空间。如果开发者账户没有实名认证,首先需要实名认证(这是法定要求,也是阿里云、腾讯云等云服务商的要求)。
W
wanganxp 已提交
18

雪洛's avatar
雪洛 已提交
19
一个开发者可以拥有多个服务空间,每个服务空间都是一个独立的serverless云环境,不同服务空间之间的云函数、数据库、存储都是隔离的。
雪洛's avatar
雪洛 已提交
20

W
wanganxp 已提交
21
注:目前腾讯云仅提供一个服务空间。阿里云无限制
W
wanganxp 已提交
22

W
wanganxp 已提交
23 24
服务空间和手机端项目是多对多绑定关系。同账号下,一个项目可以关联到多个服务空间。一个服务空间也可以被多个项目访问。

W
wanganxp 已提交
25
  - 在云函数目录`cloudfunctions`右键菜单创建服务空间,会打开web控制台[https://unicloud.dcloud.net.cn](https://unicloud.dcloud.net.cn) 进行创建
雪洛's avatar
雪洛 已提交
26 27 28

![创建服务空间](https://img.cdn.aliyun.dcloud.net.cn/uni-app/uniCloud/create-space.png)

W
wanganxp 已提交
29
  - 创建好服务空间后,对目录`cloudfunctions`点右键,菜单中点击`选择云服务空间`,绑定你之前创建的服务空间。
W
wanganxp 已提交
30
  
雪洛's avatar
雪洛 已提交
31 32
**说明**

W
wanganxp 已提交
33 34
- 如果未进行实名认证,会跳转至实名认证页面进行实名认证,等待实名认证审核之后可以开通服务空间。若腾讯云实名认证提示身份证下已创建过多账户,则需要在腾讯云官网注销不用的账户。
- 创建服务空间可能需要几十秒的时间,可以在web控制台查看是否创建完成。
W
wanganxp 已提交
35
- 一个应用,可以在[dev.dcloud.net.cn](https://dev.dcloud.net.cn)设置协作者(选择应用->设置项目成员),实现多人共同使用一个云服务空间。(需 HBuilderX 2.5.9+)
雪洛's avatar
雪洛 已提交
36

W
wanganxp 已提交
37
## 创建云函数
雪洛's avatar
雪洛 已提交
38

W
wanganxp 已提交
39
`uniCloud`项目创建并绑定服务空间后,开发者可以在`cloudfunctions`目录右键创建云函数。
雪洛's avatar
雪洛 已提交
40
![新建云函数](https://img.cdn.aliyun.dcloud.net.cn/uni-app/uniCloud/unicloud-02.png)
雪洛's avatar
雪洛 已提交
41

W
wanganxp 已提交
42
创建后会以云函数名称为名生成一个特殊目录,该目录下自动生成index.js,是该云函数的入口文件,不可改名。如果该云函数还需要引入其他js,可在index.js入口文件中引用。
W
wanganxp 已提交
43

雪洛's avatar
雪洛 已提交
44 45
**注意**

W
wanganxp 已提交
46
- 不同项目使用同一个服务空间时,不可使用同名云函数,可以在uniCloud的web控制台手动删除重名云函数释放函数名。
W
wanganxp 已提交
47
- 在HBuilderX创建云函数时,如果新云函数与服务器上已存在同名云函数,会用新函数覆盖。
雪洛's avatar
雪洛 已提交
48 49
- 单个云函数大小限制为10M(包含node_modules)

W
wanganxp 已提交
50
## 编写云函数
W
wanganxp 已提交
51
云函数的语法,是在普通的Node.js基础上补充了uniCloud的专用API。可参考API开发文档编写,也可以直接新建项目时选择`hello uniCloud`模板体验。
W
wanganxp 已提交
52 53 54

HBuilderX为uniCloud开发提供了良好的语法提示和转到定义支持,对于代码中的API,选中并按下F1,也可以直接查看相应的文档。

W
wanganxp 已提交
55 56 57 58 59 60 61 62 63 64 65 66 67
如下为一个云函数示例
```javascript
'use strict';
const db = uniCloud.database()
exports.main = async (event, context) => {
	//event为客户端上传的参数
	const collection = db.collection('unicloud-test') // 获取表'unicloud-test'的集合对象
	const res = await collection.limit(10).get() // 获取表中的10条数据,结果为json格式
	return res // 返回json给客户端
};

```

雪洛's avatar
雪洛 已提交
68
## 运行和调试云函数@rundebug
雪洛's avatar
雪洛 已提交
69

雪洛's avatar
雪洛 已提交
70
编写云函数后,在项目管理器里右键点击该云函数的目录,在弹出菜单中可选择“上传部署云函数”、“上传并运行测试云函数”。前者仅完成部署,后者会在部署后同时运行,并打印日志出来。自2.8.1版本起HBuilderX支持云函数本地运行。如下图所示:
雪洛's avatar
雪洛 已提交
71

雪洛's avatar
雪洛 已提交
72
![](https://img.cdn.aliyun.dcloud.net.cn/uni-app/uniCloud/uniCloud-run-function.png)
W
wanganxp 已提交
73

雪洛's avatar
雪洛 已提交
74
在云函数对应的目录右键可以配置运行测试参数,如下图,选择之后会生成一个形如`${函数名}.param.json`的文件,此文件内容会在云函数`上传并运行`时作为参数传入云函数内。详细用法可参考:[配置运行测试参数](https://uniapp.dcloud.net.cn/uniCloud/quickstart?id=runparam)
雪洛's avatar
雪洛 已提交
75

W
wanganxp 已提交
76
在云函数编辑器里,按`Ctrl+r`运行快捷键,或点工具栏的运行,还会直接看到上传并运行云函数的快捷指令。`Ctrl+r`然后回车或选`0`,即可高效的在控制台看到运行结果和日志输出。
W
wanganxp 已提交
77

W
wanganxp 已提交
78
云函数目前无法断点debug,只能打印`console.log`看日志。
W
wanganxp 已提交
79

雪洛's avatar
雪洛 已提交
80 81
![](https://img.cdn.aliyun.dcloud.net.cn/uni-app/uniCloud/uniCloud-run-function-2.png)

雪洛's avatar
雪洛 已提交
82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127
## 本地运行云函数@runlocal

自2.8.1版本起HBuilderX支持云函数本地运行,调试云函数更加方便快捷。此外还可以方便批量导入数据及文件,不再受云函数超时限制(云函数上传文件到云存储只有腾讯云支持)。

**目前只支持本地运行,本地调试还在开发中**

#### 使用方式

在要本地运行的云函数上右键选择本地运行

- 如果没有安装本地运行插件,按照提示安装即可
- 如需配置运行参数请参考[配置运行测试参数](https://uniapp.dcloud.net.cn/uniCloud/quickstart?id=runparam)

![](https://img.cdn.aliyun.dcloud.net.cn/uni-app/uniCloud/uniCloud-local-1.jpg)

#### 注意事项

**时区问题**

云函数内使用的时区是utc+0,本地运行时使用的是本机时间。在使用时间戳时两者没有差异,但如果要获取年、月、日、小时要注意时区的差异。

以下方式可以获取指定时区的年、月、日、小时,可以参考一下

```js
// 获取偏移后的Date对象,例如utc+x时offset就传x
function getOffsetDate (offset) {
  return new Date(
    Date.now() + (new Date().getTimezoneOffset() + (offset || 0) * 60) * 60000
  )
}

// 获取utc+8的小时数
const hour = getOffsetDate(8).getHours()

// 获取时间戳无需使用此方式utc+0时间戳是与utc+8时间戳一致的
```

**数据与存储**

请务必注意云函数在本地运行时依然是连接的云端数据库与存储

**Nodejs版本**

服务空间所使用的nodejs版本为8.9,本地运行时使用的本地nodejs可能与服务空间的nodejs版本并不一致,在本地测试之后部署到云端也务必测试一下兼容性。


雪洛's avatar
雪洛 已提交
128
## 运行云函数时配置运行测试参数@runparam
W
wanganxp 已提交
129 130 131 132 133 134 135

在云函数的上传运行菜单或右键菜单中,有`配置运行测试参数`的功能。

可以打开一个json,配置运行参数。配置该json后,运行云函数时会将该json作为云函数调用的上行参数处理,可以在云函数中接收到参数。

![](https://img.cdn.aliyun.dcloud.net.cn/uni-app/uniCloud/uniCloud-run-function-1.png)

雪洛's avatar
雪洛 已提交
136 137
在云函数目录右键运行云函数,也可以在云函数编辑器里,按`Ctrl+r`运行快捷键,或点工具栏的运行

雪洛's avatar
雪洛 已提交
138
![](https://img.cdn.aliyun.dcloud.net.cn/uni-app/uniCloud/run-function-with-param-1.jpg)
雪洛's avatar
雪洛 已提交
139 140 141

此时云函数运行会携带所配置的运行参数

雪洛's avatar
雪洛 已提交
142
![](https://img.cdn.aliyun.dcloud.net.cn/uni-app/uniCloud/run-function-with-param-2.jpg)
雪洛's avatar
雪洛 已提交
143

雪洛's avatar
雪洛 已提交
144 145 146 147 148 149 150 151 152 153 154 155 156 157 158
**模拟客户端类型**

如果需要模拟客户端类型可以在运行参数内添加clientInfo字段

```
{
  "otherParam": "***",
  "clientInfo":{
    CLIENT_SDK_VERSION: "1.0.0"
    OS: "ios" // 系统类型 ios、android
    PLATFORM: "h5" // 客户端类型 app-plus、h5、mp-weixin、mp-alipay等
  }
}
```

W
wanganxp 已提交
159
## 手机端调用云函数
W
wanganxp 已提交
160
在uni-app的前端代码中,通过`uniCloud.callFunction`方法调用云函数。详见[callFunction文档](https://uniapp.dcloud.io/uniCloud/functions?id=callfunction)
W
wanganxp 已提交
161

W
wanganxp 已提交
162
如下代码中,调用了名为`test`的云函数,并发送了`data`的json数据作为上行参数。
W
wanganxp 已提交
163
```javascript
W
wanganxp 已提交
164
// promise方式
W
wanganxp 已提交
165
uniCloud.callFunction({
W
wanganxp 已提交
166 167 168 169 170 171 172 173 174 175 176 177 178
    name: 'test',
    data: { a: 1 }
  })
  .then(res => {});

// callback方式
uniCloud.callFunction({
	name: 'test',
	data: { a: 1 },
	success(){},
	fail(){},
	complete(){}
});
W
wanganxp 已提交
179 180
```

雪洛's avatar
雪洛 已提交
181 182
## 手机端看日志

W
wanganxp 已提交
183
uni-app运行在HBuilderX内置浏览器和App环境时,在HBuilderX的控制台中,除了可以看普通手机端日志外,还可以直接看到云端的云函数里打印的console.log日志。
雪洛's avatar
雪洛 已提交
184

W
wanganxp 已提交
185
**示例**
雪洛's avatar
雪洛 已提交
186 187 188

所执行云函数代码

W
wanganxp 已提交
189
```javascript
雪洛's avatar
雪洛 已提交
190 191 192 193 194 195 196 197 198 199 200
'use strict';
exports.main = async (event, context) => {
	console.log('------------');
	console.log('云函数日志输出');
	console.log('------------');
	return {
		action: 'log demo'
	}
};
```

雪洛's avatar
雪洛 已提交
201
H5端HBuilderX内置浏览器输出云函数日志,如下图所示(注意:日志在HBuilderX控制台输出):
雪洛's avatar
雪洛 已提交
202

雪洛's avatar
雪洛 已提交
203
![](https://img.cdn.aliyun.dcloud.net.cn/uni-app/uniCloud/uniCloud-function-log-h5.jpg)
雪洛's avatar
雪洛 已提交
204

W
wanganxp 已提交
205
App端真机调试输出云函数日志,如下图所示:
W
wanganxp 已提交
206

W
wanganxp 已提交
207
![](https://img.cdn.aliyun.dcloud.net.cn/uni-app/uniCloud/uniCloud-function-log.png)
W
wanganxp 已提交
208

雪洛's avatar
雪洛 已提交
209

W
wanganxp 已提交
210
- 如运行到小程序开发工具或外部浏览器,仅能在这些软件的调试控制台查看本地日志,不包含云函数里的console.log。
雪洛's avatar
雪洛 已提交
211

W
wanganxp 已提交
212
uniCloud的[web控制台](https://unicloud.dcloud.net.cn/)可以查看线上云函数的所有运行日志,而不仅仅是开发时的运行日志。
雪洛's avatar
雪洛 已提交
213 214


W
wanganxp 已提交
215
## 小程序中使用uniCloud的白名单配置
雪洛's avatar
雪洛 已提交
216

W
wanganxp 已提交
217 218 219 220 221
各家小程序平台,均要求在小程序管理后台配置小程序应用的联网服务器域名,否则无法联网。

使用uniCloud后,开发者将不再需要自己购买、备案域名,直接将uniCloud的域名填写在小程序管理后台即可。

根据下表,在小程序管理后台设置request合法域名、uploadFile合法域名(如没有上传文件业务,可不设置)。下表的域名均为阿里云或腾讯云自有域名,并非DCloud所属域名。
雪洛's avatar
雪洛 已提交
222

雪洛's avatar
雪洛 已提交
223 224 225 226
|服务提供商	|request合法域名			|uploadFile合法域名					|download合法域名|
|:-:		|:-:						|:-:								|:-:|
|阿里云		|api.bspapp.com				|bsppub.oss-cn-shanghai.aliyuncs.com|需要从云存储下载文件的时候才需要配置,不同服务空间域名不同,可以在web控制台查看文件详情里面看到|
|腾讯云		|tcb-api.tencentcloudapi.com|cos.ap-shanghai.myqcloud.com		|需要从云存储下载文件的时候才需要配置,不同服务空间域名不同,可以在web控制台查看文件详情里面看到|
雪洛's avatar
雪洛 已提交
227

雪洛's avatar
雪洛 已提交
228

W
wanganxp 已提交
229 230
小程序开发工具的真机预览功能,必须添加上述域名白名单,否则无法调用云函数。模拟器的PC端预览、真机调试不受此影响。

雪洛's avatar
雪洛 已提交
231 232 233 234 235
使用腾讯云作为服务供应商时,开发调试期间(在HBuilderX内点击运行)会访问DCloud服务器获取云函数运行日志,可以在开发调试期间忽略域名检查。发行(在HBuilderX内点击发行)之后会直接请求腾讯云服务器访问云函数。使用腾讯云运行期间访问云函数速度会慢于发行,原因有以下两点:

- 获取日志需要从管理端调用云函数,速度比sdk直接调用慢。
- 访问DCloud服务器也有时间损耗。

雪洛's avatar
雪洛 已提交
236
**2.7.13-alpha已对此流程进行优化,和阿里云一样由客户端直接调用云函数。**
雪洛's avatar
雪洛 已提交
237

W
wanganxp 已提交
238
## H5中使用uniCloud的跨域处理@useinh5
雪洛's avatar
雪洛 已提交
239

W
wanganxp 已提交
240
H5前端js访问云函数,涉及跨域问题,导致前端js无法连接云函数服务器。处理方式如下:。
W
wanganxp 已提交
241

W
wanganxp 已提交
242
- 运行到H5端时,使用HBuilderX内置浏览器,可以忽略跨域问题(mac版需2.5.10+)。
雪洛's avatar
雪洛 已提交
243

W
wanganxp 已提交
244
- 发行到H5端时,需要在uniCloud后台操作,绑定安全域名,否则会因为跨域问题而无法访问。(在`cloudfunctions`目录右键可打开uniCloud后台)
雪洛's avatar
雪洛 已提交
245 246 247

**uniCloud后台配置安全域名:**

雪洛's avatar
雪洛 已提交
248
![](https://img.cdn.aliyun.dcloud.net.cn/uni-app/uniCloud/uniCloud-add-domain.png)
雪洛's avatar
雪洛 已提交
249

W
wanganxp 已提交
250
- 如果运行时,想使用外部浏览器运行,方案如下:
雪洛's avatar
雪洛 已提交
251
  * 方式1:在uniCloud web控制台绑定测试期的地址为安全域名,如配置:localhost:8080、192.168.0.1:8080(建议直接使用内置浏览器测试)
W
wanganxp 已提交
252 253
  * 方式2:在外部浏览器安装跨域插件,详见:[https://ask.dcloud.net.cn/article/35267](https://ask.dcloud.net.cn/article/35267)。要跨域的地址,详见上述文档中小程序配置安全域名章节。

雪洛's avatar
雪洛 已提交
254 255 256 257 258
## cli项目中使用uniCloud

如果要在cli项目中使用uniCloud,可以参考以下步骤

1. 将cli项目导入`HBuilderX`
W
wanganxp 已提交
259
2. 在项目根目录(src同级)创建`cloudfunctions-aliyun`或者`cloudfunctions-tcb`目录
雪洛's avatar
雪洛 已提交
260 261 262 263 264 265 266
3. 打开`src/manifest.json`,在`基础配置-->uni-app应用标示`处点击`重新获取`
4. 在步骤2创建的目录右键关联服务空间
5. 完成

**注意**

- 运行与发行只能使用HBuilderX的菜单,不可使用`package.json`内的命令
雪洛's avatar
雪洛 已提交
267
- 如果HBuilderX菜单运行不能满足需求可以考虑自行初始化服务空间[服务空间初始化](uniCloud/init.md)
W
wanganxp 已提交
268 269 270

**H5前端页面部署问题**

雪洛's avatar
雪洛 已提交
271
uniCloud已支持前端页面部署,在HBuilderX中点发行菜单,生成H5,将生成的前端文件部署在uniCloud的前端网页托管内即可[详情参考](uniCloud/hosting.md)
W
wanganxp 已提交
272

雪洛's avatar
雪洛 已提交
273
需要注意的是你仍在[uniCloud web控制台](https://unicloud.dcloud.net.cn) 配置H5安全域名。
雪洛's avatar
雪洛 已提交
274

W
wanganxp 已提交
275
**m3w.cn二级域名申请**
W
wanganxp 已提交
276

W
wanganxp 已提交
277
若为新冠抗疫需紧急上线H5,来不及注册域名,可申请使用DCloud提供的m3w.cn的二级域名,示例:[hellounicloud.m3w.cn](https://hellounicloud.m3w.cn) 。此时请使用你注册DCloud账户的邮箱向service@dcloud.io发邮件申请,提供你的appid、计划使用的二级域名名称、解析的ip地址、应用的使用用途。
雪洛's avatar
雪洛 已提交
278

W
wanganxp 已提交
279
如果不发布H5,则不需要自己申请或准备域名。App和小程序里直接调用云函数即可,无需域名。
W
wanganxp 已提交
280

雪洛's avatar
雪洛 已提交
281

W
wanganxp 已提交
282 283
**Tips**
- web控制台网址:[https://unicloud.dcloud.net.cn](https://unicloud.dcloud.net.cn),在HX中对云函数目录点右键,或者在帮助菜单中,均有入口链接。
W
wanganxp 已提交
284
- 虽然uni-app支持vscode等其他ide开发,但因为uniCloud对安全性要求极高,仅支持使用HBuilderX开发。