鸿蒙端云一体化开发实践：前端构建全栈应用

这步非常重要，后续 IDE 创建项目需要和 AGC 平台创建好的应用进行绑定。AGC 平台地址：https://developer.huawei.com/consumer/cn/service/josp/agc/index.html

登录华为开发者账号后，进入 AGC 控制台新建项目。

在 IDE 创建端云一体化开发模板项目时，注意模板项目只能选择手机，且是否开启云开发默认是开，不能修改。

完成上述步骤后，需在 IDE 中进行项目绑定操作，系统会根据登录账号和项目包名显示 AGC 平台上对应的项目信息。

手动签名

由于端云一体的端调试必须在真机上进行，且必须手动签名，不能使用自动签名。自动签名的话，不允许调用云端函数。

手动签名请参照：手动签名

神器一：云对象 (Cloud Object) —— 告别 HTTP 请求

在端云一体化里，云对象让你在端侧调用云端代码，就像调用本地的一个类的方法一样简单。

1. 云端怎么写？

在 CloudProgram/cloudfunctions 下右键创建一个云函数，比如 id-generator。

"cloudfunctions"目录下生成新建的云对象目录，目录下主要包含如下文件：

• 云对象配置文件"function-config.json"：包含 handler、触发器等信息。
  • handler: 云对象的入口模块及云对象导出的类，通过"."连接。
  • functionType：表示函数类型，"0"表示云函数，"1"表示云对象。
  • triggers：定义了云对象使用的触发器类型，当前云对象仅支持 HTTP 触发器。

看代码，这就跟写一个普通的 TypeScript 类没啥区别：

// CloudProgram/cloudfunctions/id-generator/idGenerator.ts
import * as crypto from 'crypto';

export class IdGenerator {
  // 生成 UUID 的方法
  randomUUID() {
    const uuid = crypto.randomUUID();
    console.info(`Generate random UUID: ${uuid}`);
    return { code: 0, desc: 'success', data: { uuid: uuid } };
  }

  // 获取列表的方法
  getList() {
    return [
      { id: 0, title: 'html', price: 10 },
      { id: 1, title: 'css', price: 20 }
    ];
  }
}

注意到了吗？没有 req 和 res，没有路由配置，就是纯粹的业务逻辑。

2. 端侧怎么调？

右击云对象（以"id-generator"为例），选择'生成调用接口'。

DevEco Studio 自动打开指定的端侧调用接口类存储目录，该目录包含"ImportObject.ts"文件和"id-generator"文件夹。

• "ImportObject.ts"文件定义了 importObject 方法，可以通过该方法来实例化一个云对象的代理。
• "id-generator"文件夹包含了该云对象在端侧可能用到的所有模型。
• "IdGenerator.ts"文件中定义了 IdGenerator class，并且定义了 randomUUID 和 getList 两个方法。

回到端侧 entry/src/main/ets/pages/Index.ets。直接导入这个对象：

// Application/entry/src/main/ets/pages/Index.ets
import { IdGenerator, importObject } from 'cloud_objects';

@Entry
@Component
struct Index {
  @State msg: string = 'hello world!'

  build() {
    Column() {
      Text(this.msg)
      Button("调用云对象")
        .onClick(async () => {
          // 1. 实例化云对象
          const idGenerator = importObject(IdGenerator)
          // 2. 像调本地方法一样调用云端逻辑
          idGenerator.randomUUID().then((res) => {
            console.log("云端返回的 UUID:", res.data.uuid)
            this.msg = res.data.uuid
          })
        })
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
        .alignItems(HorizontalAlign.Center)
    }
  }
}

看到区别了吗？

• 没有 URL。
• 没有 HTTP Method。
• IDE 甚至能给你做类型提示。

这就叫像调用本地函数一样调用云函数。底层通信？鸿蒙帮你搞定了。

神器二：云数据库 (Cloud Database) —— SQL 恐惧症福音

如果你讨厌写 SQL 语句，或者不想折腾 MySQL/MongoDB 的连接池，云数据库就是你的救星。它是一个基于对象模型的数据库，支持端云数据同步。

1. 创建对象类型

对象类型（ObjectType）用于定义存储对象的集合。每创建一个对象类型，云数据库会在每个存储区实例化一个与之结构相对应的对象类型。

右击"clouddb/objecttype"目录，选择'新建 > 云数据库对象类型'。输入对象类型名称（下文以"objecttype1"为例）后，点击'确认'。

在 CloudProgram/clouddb/objecttype 下定义你的数据结构 objecttype1.json，比如一个 Post（帖子）对象。这里用 JSON 描述，不用写 CREATE TABLE。

// CloudProgram/clouddb/objecttype/objecttype1.json
{
  "objectTypeName": "objecttype1",
  "fields": [
    { "fieldName": "author", "fieldType": "String", "notNull": true, "belongPrimaryKey": true },
    { "fieldName": "shadowFlag", "fieldType": "Boolean", "notNull": true, "defaultValue": true },
    { "fieldName": "bookName", "fieldType": "String" },
    { "fieldName": "id", "fieldType": "Integer" },
    { "fieldName": "price", "fieldType": "Double" },
    { "fieldName": "publish", "fieldType": "Date" }
  ],
  "indexes": [
    { "indexName": "id_Index", "indexList": [{ "fieldName": "id", "sortType": "ASC" }] },
    { "indexName": "price_index", "indexList": [{ "fieldName": "price", "sortType": "DESC" }] }
  ],
  "permissions": [
    { "role": "World", "rights": ["Read"] },
    { "role": "Authenticated", "rights": ["Read", "Upsert"] },
    { "role": "Creator", "rights": ["Read", "Upsert", "Delete"] },
    { "role": "Administrator", "rights": ["Read", "Upsert", "Delete"] }
  ]
}

2. 部署云数据库

右击"clouddb"目录，选择'部署云数据库'。在菜单栏选择'工具 > CloudDev'，点击'Serverless > Cloud DB'下的'Go to console'，进入当前项目的云数据库服务页面。

3. 生成 Client Model

在端侧通过 Cloud Foundation Kit 访问云数据库，需先引入对应云数据库对象类型的 Client Model。

4. 添加数据条目

// CloudProgram/clouddb/dataentry/d_objecttype1.json
{
  "cloudDBZoneName": "objecttype1",
  "objectTypeName": "objecttype1",
  "objects": [
    { "author": "Nancy", "shadowFlag": true, "bookName": "My Favorite book", "id": 10, "price": 10.5, "publish": 20241212 },
    { "author": "Peter", "shadowFlag": false, "bookName": "Your First English Book", "id": 20, "price": 20.5, "publish": 20251212 }
  ]
}

5. 部署云工程

云工程代码完成后在 CloudProgram/部署云工程。

6. 在端侧访问云数据库

如果网络权限没有开记得要开启。

// entry/src/main/module.json5
{
  "requestPermissions": [
    { "name": "ohos.permission.INTERNET" }
  ]
}

// Application/entry/src/main/ets/pages/Index.ets
import { cloudDatabase } from '@kit.CloudFoundationKit';
import { objecttype1 } from './objecttype1';

// ... Button("查询云数据库").onClick(async () => {
  try {
    // 1. 获取数据库区域
    let databaseZone = cloudDatabase.zone('objecttype1');
    // 2. 构造查询条件 (类似 ORM)
    let condition = new cloudDatabase.DatabaseQuery(objecttype1);
    // 3. 直接查询，拿到结果
    this.list = await databaseZone.query(condition);
    console.log("查询结果:", JSON.stringify(this.list));
  } catch (err) {
    console.error("数据库错误:", err);
  }
})

这一套下来，连后端 API 都不用写了。端侧直接安全地访问数据库，权限控制在 JSON 里配置就好。

技术评估

优势

1. 极速开发：一个人就是一支队伍。不用等后端排期，想法验证极快。
2. 统一语言：端侧 ArkTS，云侧 TS/JS，思维不需要切换。
3. 免运维：Serverless 架构，不用担心服务器宕机、扩容，华为云帮你扛。

局限性

1. 厂商绑定：既然上了生态依赖，想迁移到 AWS 或阿里云就需要重构云侧代码。
2. 冷启动：虽然优化过，但云函数长时间不跑，第一次调用可能会有几百毫秒的延迟。
3. 复杂业务吃力：对于超复杂的事务处理、海量数据关联查询，传统后端架构（微服务 + 关系型数据库）目前还是更稳健。

总结

如果你是想快速上线一个 App、小程序，或者做个独立开发者，鸿蒙的端云一体化绝对是生产力的高效工具。它把最繁琐的'胶水代码'和运维工作砍掉了，让你专注于业务逻辑。

建议打开 DevEco Studio，新建一个'端云一体化'项目，体验全栈开发流程。

参考资料

• 端云一体化
• 云开发服务