# uniCloud Vue3版本官方推荐用法

**Repository Path**: github-9819409/uniCloudVue3

## Basic Information

- **Project Name**: uniCloud Vue3版本官方推荐用法
- **Description**: uniCloud Vue3版本官方推荐用法，围绕uniapp和uniCloud生态进行开发。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 12
- **Created**: 2025-12-29
- **Last Updated**: 2025-12-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

![](./课程需要的资料/文档图片/banner.jpg)

📃 源码仓库地址：https://gitee.com/qingnian8/uniCloudVue3

📺 视频教程地址：https://www.bilibili.com/video/BV1Dw1uYaE5s



# 📋课程配套学习资料

## 一、uniCloud知识点概述

### 1.1 uniCloud概述

uniCloud 是 DCloud 联合阿里云、腾讯云、支付宝云，为开发者提供的基于 serverless 模式和 js 编程的云开发平台。

官方地址：https://doc.dcloud.net.cn/uniCloud/

**什么是 serverless？**
Serverless是一种云计算架构模式，它使开发者能够在无需管理服务器的情况下构建和运行应用程序。

Serverless架构的核心理念是将计算资源的管理交给云服务提供商，开发者只需专注于编写业务逻辑。在Serverless中，开发者以函数（Function）的形式编写代码，这些函数被云服务提供商自动管理和执行。开发者只需根据需要调用这些函数，无需关心底层的服务器和基础设施。

**——让你脑中的想法快速落地成产品——**

![image-20241016201947489](./课程需要的资料/文档图片/image-20241016201947489.png)

#### 开发后端服务需要什么？

| 语言 | 框架/平台 | 数据库 | 存储 | 发布上线 | 运维 | 难度 |成本|扩展|
| ---- | --------- | ------ | ---- | -------- | ---- | ---- |---- |---- |
| Java | SpringBoot | MySQL / Oracle | OSS / MinIO | 服务器 | Linux/攻击/并发 | 周期长有难度 |较高|强|
| Nodejs | Express | MongoDB | 本地 / 服务器 | 服务器 | Linux/攻击/并发 | 有一定难度 |高|强|
| JS | 微信云开发 | NoSQL型数据库 | 腾讯云存储 | 容易 | 无需关注 | 容易周期短 |中等|弱|
| JS | uniCloud | 云数据库 | 阿里/腾讯/七牛 | 容易 | 无需关注 | 简单周期短 |低|中|




### 1.2 认识uniCloud web控制台

控制台地址：https://unicloud.dcloud.net.cn/



## 二、JQL基础的增删改查

### 2.1 运行项目报错解决办法

**在控制台报Uncaught (in promise) Error: Invalid uni-id config file错误的话，需要做如下配置：**

找到目录uniCloud -> cloudfunctions -> common -> uni-config-center 下，创建uni-id目录，并拷贝提供素材下的config.json文件，重新刷新即可正常运行。



### 2.3 上传图片控制台报错

这是因为跨域问题，只需要在web控制台配置一下跨域管理即可，详细的说明文档：

https://blog.csdn.net/qq_18798149/article/details/141196075



### 2.4 add新增操作

**1.追加单个（对象）**

```
db.collection("demo-user").add({name:"张三",age:22})
```

**2.支持同时追加多个（数组对象）**

```
db.collection("demo-user").add([{name:"张三",age:22},{name:"李四",age:33}])
```



### 2.6 get查询

**1.排序orderBy**

orderBy允许进行多个字段排序，以逗号分隔。每个字段可以指定 asc(升序)、desc(降序)。默认是升序。

**2.限制查询记录的条数limit**

```
db.collection('demo-user').limit(10).get()
```

**3.skip跳过多少条**

为了方便翻页，可以将skip设置为动态参数

```
const queryParams = ref({
	pageNum:1,
	pageSize:7,
	total:0
})
let current = queryParams.value.pageSize * (queryParams.value.pageNum-1);
db.collection("demo-user").skip(current).limit(queryParams.value.pageSize).get();
```

**4.字段过滤field**

要点：客户端显示什么最好就返回哪些字段，如果不做field过滤，那么就好增加没必要的额外开支。

```
db.collection("demo-user").field("name,age,createTime,gender").get();
```



**5.字段别名as**

```
db.collection("demo-user").field("name as username,age").get();
```

如果客户端需要某些指定的字段，那么可以将返回的字段进行as修改别名。



**6.统计数量**

1.count获取数量

```
db.collection("demo-user").count();
```

2.查询记录返回详情，使用getCount参数

```
db.collection("demo-user").get({getCount:true});
```



### 2.9 where条件查询

**1.两种查询方式**

1）传统形式where查询

```
db.collection("demo-user").where({name:"小明"}).get();
```

2）模版字符串形式

```
db.collection("demo-user").where(`name == "张三" && age = 18`).get();
```



**2.模糊查询**

```
const keyword = ref("");
db.collection("demo-user").where(`${new RegExp(keyword.value, 'i')}.test(name)`).get();
```



### 2.10 doc查询单条数据与getOne

1.where查询一条记录

```
db.collection("demo-user").where(`_id == "123321"`).get();
```

2.如果是查询_id的话，可以直接使用doc查询

```
db.collection("demo-user").doc("123321").get();
```

3.无论是where还是doc获取的一条对象总是包含在数组中，如[{...}]，可以配合使用getOne，可以直接从数组中解构出来。

```
db.collection("demo-user").doc("123321").get({getOne:true});
```



### 2.11 remove删除

特别注意，删除一定要加添加限制，如果不限制，将会清除所有数据记录，如果真的不小心清库了，可以进行如下操作，进行数据回档。

> web控制台 -> 数据库 -> 数据库回档 -> 新建回档

```
db.collection("demo-user").doc(id).remove()
```



### 2.12 update更新

```
db.collection("demo-user").doc(id).update({name:"张三",age:"18"})
```



## 三、JQL进阶

### 3.8 remove删除与update更改

以switch内置组件为例，如果想要获得change事件的返回值，而且还想给change事件传值，可以采用定义箭头函数的方法，如下所示：

```
<switch 
:checked="item.status" 
style="transform:scale(0.6)" 
@change="(e)=>switchChange(e,item._id)"
/>
```



## 四、云对象前后端分离及云存储

### 4.9 网格布局构建上传模块

**1.实现网格布局的三要素：**

- display：grid 是转为网格布局，这个是必须的
- grid-template-columns：1fr | px 这是将网格分为几列，1fr是自适配单位，可以当成栅格
- gap:30px 这是网格四周的间隔

详细的视频教程：https://www.bilibili.com/video/BV1gw41167gh



**2.aspect-ratio宽高比例属性**

- aspect-ratio: 1 / 1;   设置1比1正方形比例，非常常用

- aspect-ratio: 16 / 9;  16比9的比例

- aspect-ratio: 0.5;      相当于1 / 2

详细视频教程：https://www.bilibili.com/video/BV18c411f7LW/



### 4.12 将本地图片上传到云端

**1.将cloud地址转换为可访问的https地址（好理解的方式）**

```
let str = "cloud://env-00jxhf99mvd2/1729091076640_0.jpg";
let str2 = str.replace("cloud://", "https://");
let [,,env] = str.split("/");
let str3 = str2.replace(env,env+".normal.cloudstatic.cn")
```



**2.封装精简的方法**

```
const cloudToHttps = (str)=>{
	return str.replace("cloud://", "https://")
	.replace(str.split("/")[2], str.split("/")[2] + ".normal.cloudstatic.cn");	
}
cloudTohttp("cloud://env-00jxhf99mvd2/1729091076640_0.jpg");
```

## 七、uni-starter的使用

### 7.1.安装与启动uni-starter

#### 1.云服务空间初始化向导

创建完starter项目后，在家在uniCloud目录上单机右键，执行云服务空间初始化向导，选择好自己的服务空间，然后会自动上传云函数及schema表结构，在过程中出现弹窗一律选择覆盖即可。

#### 2.修改uni-id的配置项

在目录uniCloud -> cloudfunctions -> common -> uni-config-center -> uni-id - config.json

修改tokenSecret自动为自己的token秘钥

#### 3.创建hooks钩子

使用beforeRegister钩子函数，实现用户不设置昵称，自动创建随机昵称的功能，代码如下所示：

```
// 钩子函数示例 hooks/index.js
function beforeRegister({
  userRecord,
  clientInfo
} = {}) {  
	if(!userRecord.nickname) {
	  userRecord.nickname = "匿名"+Math.random().toString(36).substring(3,9)
	}	
	return userRecord
}

module.exports = {
  beforeRegister
}

```