【HarmonyOS】鸿蒙端云一体化开发入门详解 （一）

// AGC平台地址：
https://developer.huawei.com/consumer/cn/service/josp/agc/index.html

import { CloudDb } from './CloudDb/CloudDb';  // 导入云数据库功能组件
import { DbInsert } from './CloudDb/DbInsert';  // 导入数据库插入操作组件
import { CloudFunction } from './CloudFunction';  // 导入云函数功能组件
import { CloudStorage } from './CloudStorage';  // 导入云存储功能组件

/**
 * 应用主入口组件
 * 展示端云一体化功能导航菜单，通过按钮跳转到不同的云服务演示页面
 */
@Entry
@Component
struct Index {
  // 提供导航路径管理，用于页面间的导航切换
  @Provide('pathStack') pathStack: NavPathStack = new NavPathStack();

  /**
   * 路径映射构建器
   * 根据路由名称渲染对应的云服务组件
   * @param routeName - 路由名称
   */
  @Builder
  pathMap(routeName: string) {
    if (routeName === 'CloudFunction') {
      CloudFunction();  // 渲染云函数演示页面
    } else if (routeName === 'CloudDb') {
      CloudDb();  // 渲染云数据库演示页面
    } else if (routeName === 'CloudStorage') {
      CloudStorage();  // 渲染云存储演示页面
    } else if (routeName === 'DbInsert') {
      DbInsert();  // 渲染数据库插入操作页面
    }
  }

  /**
   * 主页按钮构建器
   * 创建具有统一样式的导航按钮，点击后跳转到对应云服务页面
   * @param title - 按钮标题资源
   * @param description - 按钮描述资源
   * @param routeName - 目标路由名称
   */
  @Builder
  homeButton(title: Resource, description: Resource, routeName: string) {
    Button({ type: ButtonType.Normal, stateEffect: true }) {
      Column() {
        Text(title)  // 按钮标题
          .fontSize($r('app.float.body_font_size'))
          .margin({ bottom: $r('app.float.number_5'), top: $r('app.float.number_5') })
          .fontWeight(FontWeight.Bold)
        Text(description)  // 按钮描述
          .textAlign(TextAlign.Center)
          .fontSize($r('app.float.body_font_size'))
          .margin({ bottom: $r('app.float.number_5') })
      }
      .width('100%')
    }
    // 按钮样式设置
    .borderRadius($r('app.float.number_5'))
    .margin($r('app.float.number_10'))
    .borderWidth($r('app.float.number_1'))
    .borderColor($r('app.color.body_color'))
    .fontColor($r('app.color.body_color'))
    .backgroundColor($r('app.color.start_window_background'))
    .width('96%')
    .onClick(() => {
      // 点击按钮时，将目标路由压入路径栈实现页面跳转
      this.pathStack.pushPathByName(routeName, null);
    })
  }

  /**
   * 组件构建函数
   * 构建应用主界面，包含导航栏和云服务功能按钮
   */
  build() {
    Navigation(this.pathStack) {  // 使用导航组件管理页面栈
      Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center }) {
        Text($r('app.string.main_page_title'))  // 应用主标题
          .width('100%')
          .fontSize($r('app.float.main_title_font_size'))
          .textAlign(TextAlign.Center)
          .fontColor($r('app.color.body_color'))
          .margin({ bottom: $r('app.float.number_10') })
        
        // 创建云函数导航按钮
        this.homeButton($r('app.string.cloud_function_title'), $r('app.string.cloud_function_description_main'),
          'CloudFunction');
        // 创建云数据库导航按钮
        this.homeButton($r('app.string.cloudDB_label'), $r('app.string.cloud_db_description_main'),
          'CloudDb');
        // 创建云存储导航按钮
        this.homeButton($r('app.string.cloudStorage_label'), $r('app.string.cloud_storage_description_main'),
          'CloudStorage');
      }
      .height('100%')
      .width('100%')
      .padding($r('app.float.number_10'))
      .backgroundColor($r('app.color.start_window_background'))
    }
    .hideTitleBar(true)  // 隐藏标题栏
    .navDestination(this.pathMap)  // 设置导航目标映射
  }
}