quickstart.md 11.7 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`目录右键创建云函数。
W
wanganxp 已提交
40
![新建云函数](http://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 71
编写云函数后,在项目管理器里右键点击该云函数的目录,在弹出菜单中可选择“上传部署云函数”、“上传并运行测试云函数”。如下图所示:

W
wanganxp 已提交
72 73
前者仅完成部署,后者会在部署后同时运行,并打印日志出来。

雪洛's avatar
雪洛 已提交
74 75
在云函数对应的目录右键可以配置运行测试参数,如下图,选择之后会生成一个形如`${函数名}.param.json`的文件,此文件内容会在云函数`上传并运行`时作为参数传入云函数内。

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

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

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

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

W
wanganxp 已提交
84 85 86 87 88 89 90 91
**运行云函数时配置运行测试参数**

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

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

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

雪洛's avatar
雪洛 已提交
92 93 94 95 96 97 98 99
在云函数目录右键运行云函数,也可以在云函数编辑器里,按`Ctrl+r`运行快捷键,或点工具栏的运行

![](http://img.cdn.aliyun.dcloud.net.cn/uni-app/uniCloud/run-function-with-param-1.jpg)

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

![](http://img.cdn.aliyun.dcloud.net.cn/uni-app/uniCloud/run-function-with-param-2.jpg)

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

W
wanganxp 已提交
103
如下代码中,调用了名为`test`的云函数,并发送了`data`的json数据作为上行参数。
W
wanganxp 已提交
104
```javascript
W
wanganxp 已提交
105
// promise方式
W
wanganxp 已提交
106
uniCloud.callFunction({
W
wanganxp 已提交
107 108 109 110 111 112 113 114 115 116 117 118 119
    name: 'test',
    data: { a: 1 }
  })
  .then(res => {});

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

雪洛's avatar
雪洛 已提交
122 123
## 手机端看日志

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

W
wanganxp 已提交
126
**示例**
雪洛's avatar
雪洛 已提交
127 128 129

所执行云函数代码

W
wanganxp 已提交
130
```javascript
雪洛's avatar
雪洛 已提交
131 132 133 134 135 136 137 138 139 140 141
'use strict';
exports.main = async (event, context) => {
	console.log('------------');
	console.log('云函数日志输出');
	console.log('------------');
	return {
		action: 'log demo'
	}
};
```

W
wanganxp 已提交
142
H5端HBuilderX内置浏览器输出云函数日志,如下图所示:
雪洛's avatar
雪洛 已提交
143

W
wanganxp 已提交
144
<!-- 这里缺少内置浏览器的截图 -->
雪洛's avatar
雪洛 已提交
145

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

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

雪洛's avatar
雪洛 已提交
150

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

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


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

W
wanganxp 已提交
158 159 160 161 162
各家小程序平台,均要求在小程序管理后台配置小程序应用的联网服务器域名,否则无法联网。

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

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

W
wanganxp 已提交
164 165 166 167
|服务提供商	|request合法域名			|uploadFile合法域名					|
|:-:		|:-:						|:-:								|
|阿里云		|api.bspapp.com				|bsppub.oss-cn-shanghai.aliyuncs.com|
|腾讯云		|tcb-api.tencentcloudapi.com|cos.ap-shanghai.myqcloud.com		|
雪洛's avatar
雪洛 已提交
168

雪洛's avatar
雪洛 已提交
169

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

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

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

W
wanganxp 已提交
177
后续会对此流程进行优化。
雪洛's avatar
雪洛 已提交
178

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

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

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

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

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

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

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

雪洛's avatar
雪洛 已提交
195 196 197 198 199 200 201 202 203 204 205 206 207
## cli项目中使用uniCloud

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

1. 将cli项目导入`HBuilderX`
2. 在项目根目录(src同级)创建`cloudfunctions-aliyun`或者`cloudfunctions-tencent`目录
3. 打开`src/manifest.json`,在`基础配置-->uni-app应用标示`处点击`重新获取`
4. 在步骤2创建的目录右键关联服务空间
5. 完成

**注意**

- 运行与发行只能使用HBuilderX的菜单,不可使用`package.json`内的命令
W
wanganxp 已提交
208 209 210

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

W
wanganxp 已提交
211
uniCloud暂未支持H5前端页面部署,需开发者自行准备web服务器,在HBuilderX中点发行菜单,生成H5,将生成的前端文件部署在Nginx等web服务器下。
W
wanganxp 已提交
212 213 214

然后自行注册或使用已有域名,在域名服务商处处理好域名的解析,指向你的Nginx等服务器ip。

W
wanganxp 已提交
215
最后将该域名通过[uniCloud web控制台](https://unicloud.dcloud.net.cn) 配置为安全域名,即可在浏览器中访问。
雪洛's avatar
雪洛 已提交
216

W
wanganxp 已提交
217
**m3w.cn二级域名申请**
W
wanganxp 已提交
218

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

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

雪洛's avatar
雪洛 已提交
223

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