写在最前

本系列文章记录我在unicloud开发过程中的一些流程和踩坑

一、安装HBuilderX

  1. 前往DCloud官网下载HBuilderX
  2. 安装完成后打开HBuilderX
  3. 安装插件
    • 内置浏览器
    • scss/sass编译
    • uniapp编译
    • eslint语法检查

二、创建uniCloud项目

  1. 文件->新建->项目
  2. 选择uni-app Vue3/Vite
  3. 勾选"启用uniCloud"
  4. 选择阿里云作为服务商

三、配置云服务空间

  1. 打开uniCloud Web控制台
  2. 登录DCloud账号
  3. 创建服务空间
  4. 在HBuilderX中关联服务空间

四、安装依赖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 安装项目依赖
npm install

# 安装uniCloud核心依赖
npm install @dcloudio/uniCloud-admin # uniCloud管理后台框架
npm install @dcloudio/uni-app # uni-app框架核心
npm install @dcloudio/uni-mp-weixin # 微信小程序平台支持
npm install @dcloudio/uni-h5 # H5平台支持
npm install sass # CSS预处理器
npm install sass-loader # sass加载器

# 开发依赖
npm install -D @dcloudio/types # TypeScript类型支持
npm install -D @dcloudio/uni-automator # 自动化测试
npm install -D @dcloudio/uni-cli-shared # CLI共享工具
npm install -D @dcloudio/vite-plugin-uni # Vite插件

五、目录结构说明

1
2
3
4
5
6
├── uniCloud                    // 云开发目录
│   ├── cloudfunctions         // 云函数
│   ├── database              // 数据库
│   └── storage               // 云存储
├── src                        // 前端源码
└── pages                      // 页面文件

六、常用命令

1
2
3
4
5
6
7
8
# 本地运行
npm run dev:h5

# 发布
npm run build:h5

# 上传云函数
右键cloudfunctions -> 上传所有云函数

第二部分：基础配置

一、项目配置

1. manifest.json配置

打开项目根目录下的manifest.json,配置基本信息:

1
2
3
4
5
6
7
8
9
10
11
12
{
  "name": "你的应用名称",
  "appid": "",
  "description": "应用描述",
  "versionName": "1.0.0",
  "versionCode": "100",
  "uniCloud": {
    "provider": "aliyun",
    "spaceId": "你的服务空间ID",
    "clientSecret": "你的客户端密钥"
  }
}

2. pages.json配置

配置页面路由和导航栏样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uniCloud示例",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  }
}

二、云函数配置

1. 创建云函数

  1. 在uniCloud/cloudfunctions目录右键
  2. 选择"新建云函数"
  3. 输入函数名称(如: hello-world)

2. 云函数示例

1
2
3
4
5
6
7
8
9
10
'use strict';
exports.main = async (event, context) => {
  // event为客户端上传的参数
  // context包含了调用信息和运行状态
  return {
    code: 200,
    msg: 'success',
    data: event
  }
};

3. 调用云函数

在前端页面中调用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
  <view>
    <button @click="callFunction">调用云函数</button>
  </view>
</template>

<script>
export default {
  methods: {
    async callFunction() {
      try {
        const res = await uniCloud.callFunction({
          name: 'hello-world',
          data: {
            name: 'test'
          }
        })
        console.log(res)
      } catch (e) {
        console.error(e)
      }
    }
  }
}
</script>

三、数据库配置

1. 创建集合

  1. 在uniCloud/database目录右键
  2. 选择"新建Collection"
  3. 输入集合名称(如: users)

2. 数据库操作示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 云函数中操作数据库
const db = uniCloud.database()

// 插入数据
await db.collection('users').add({
  name: 'test',
  age: 18
})

// 查询数据
const res = await db.collection('users').get()

// 更新数据
await db.collection('users').where({
  name: 'test'
}).update({
  age: 20
})

// 删除数据
await db.collection('users').where({
  name: 'test'
}).remove()

拓展阅读

[^1]
uniCloud官方文档
[^2]
uni-app官方教程
[^3]
uniCloud云函数文档
[^4]
uniCloud数据库文档