在自定義HamronyOS啟動頁組件一文中封裝了啟動頁組件，本節將結合端云協同開發，將啟動頁需要的參數保存到云數據庫中，實現根據特定節氣顯示不同的啟動頁背景圖。

1 環境

• DevEco Studio 3.1 Beta1(V3.1.0.200)
• 觸覺智能IDO-EVB3568-V1開發板
• 自定義teui組件庫
• 端云協同開發應用創建

2 云數據庫

云數據庫(Cloud DB)是Serverless服務提供的能力之一，是AppGallery Connect平臺解決方案的一部分，是端云協同的數據庫產品，支持數據在端云、多端之間無縫同步，并為應用提供離線支持，以幫助開發者快速構建端云、多端協同應用，開發者可以聚集于應用本身業務，極大提升開發者開發效率，更多請至華為App Gallery Connect云數據庫了解。

3 端云協同開發云數據庫

DevEco Studio 3.1 Beta1提供了端云協同開發，可以通過云側CloudProgram項目創建云數據庫對象類型、存儲區、配置權限，端側引入相關的云數據庫文件即可進行云數據庫數據操作，應用開發流程如下圖所示：

3.1 云側CloudProgram工程云數據庫配置

3.1.1 創建對象類型

云數據庫采用存儲區、對象類型和對象三級結構基于對象模型的數據庫。對象類型是用于定義存儲對象的集合，不同對象類型對應的不同數據結構。

在云側CloudProgram工程clouddb目錄下clouddb目錄右鍵New > Cloud DB Object Type創建對象類型，輸入對象類型名稱，DevEco Studio會自動創建初始對象類型JSON文件。

在對象類型JSON文件中，可以配置字段、索引以及角色于權限，表3-1為數據類型JSON文件屬性簡單介紹。

表3-1 數據類型JSON文件屬性(更多描述參見官方文檔)

表3-2 數據表字段(更多描述參見官方文檔)

"fields": [
    {
      "belongPrimaryKey": true,
      "fieldName": "id",
      "fieldType": "Integer",
      "isNeedEncrypt": false,
      "notNull": true
    },
    {
      "belongPrimaryKey": false,
      "fieldName": "timer",
      "fieldType": "Integer",
      "isNeedEncrypt": false,
      "notNull": false
    },
    {
      "belongPrimaryKey": false,
      "fieldName": "isLogo",
      "fieldType": "Boolean",
      "isNeedEncrypt": false,
      "notNull": false
    },
    {
      "belongPrimaryKey": false,
      "fieldName": "backgroundImg",
      "fieldType": "String",
      "isNeedEncrypt": false,
      "notNull": false
    },
    {
      "belongPrimaryKey": false,
      "fieldName": "companyName",
      "fieldType": "String",
      "isNeedEncrypt": false,
      "notNull": false
    },
    {
      "belongPrimaryKey": false,
      "fieldName": "mFontColor",
      "fieldType": "String",
      "isNeedEncrypt": false,
      "notNull": false
    },
    {
      "belongPrimaryKey": false,
      "fieldName": "status",
      "fieldType": "Integer",
      "isNeedEncrypt": false,
      "notNull": false
    },
    {
      "belongPrimaryKey": false,
      "fieldName": "createUser",
      "fieldType": "Integer",
      "isNeedEncrypt": false,
      "notNull": false
    },
    {
      "belongPrimaryKey": false,
      "fieldName": "createTime",
      "fieldType": "Date",
      "isNeedEncrypt": false,
      "notNull": false
    }
  ],

表3-3 數據表索引(更多描述參見官方文檔)

"indexes": [
    {
      "indexName": "IDX_202302221057",
      "indexList": [
        {
          "fieldName": "id",
          "sortType": "DESC"
        }
      ]
    }
  ],

表3-4 操作數據表角色及權限(更多描述參見官方文檔)

"permissions": [
    {
      "rights": [
        "Read"
      ],
      "role": "World"
    },
    {
      "rights": [
        "Read",
        "Upsert"
      ],
      "role": "Authenticated"
    },
    {
      "rights": [
        "Read",
        "Upsert",
        "Delete"
      ],
      "role": "Creator"
    },
    {
      "rights": [
        "Read",
        "Upsert",
        "Delete"
      ],
      "role": "Administrator"
    }
  ]

3.1.2 創建數據條目

創建完對象類型，可以通過為對象類型添加數據條目，來預置數據庫內容，支持手動創建和自動生成數據條目JSON文件。

• 手動創建數據條目文件：在clouddb目錄下dataentry目錄右鍵New > Cloud DB Data Entry創建數據條目JSON文件，輸入數據條目名稱。
• 自動生成數據條目文件：在對象類型JSON文件右鍵Generate Data Entry輸入數據條目自定義名稱。

無論選擇哪種創建數據條目的方法，DevEco Studio會自動初始化已配置的對象類型，并賦初始值，同時配置數據條目所在存儲區名稱，如代碼中的cloudDBZoneName，可自定義。

{
  "cloudDBZoneName": "cloudDBZoneSplash",
  "objectTypeName": "splash",
  "objects": [
    {
      "id": 1,
      "timer": 3,
      "isLogo": false,
      "backgroundImg": "https://img1.baidu.com/it/u=1884825806,3687074543&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889",
      "companyName": "xxxx有限公司",
      "mFontColor": "#F2F2F2",
      "status": 0,
      "createUser": 1,
      "createTime": 1677035025264
    },
    {
      "id": 2,
      "timer": 3,
      "isLogo": true,
      "backgroundImg": "https://img1.baidu.com/it/u=1884825806,3687074543&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889",
      "companyName": "xxxx有限公司",
      "mFontColor": "#F2F2F",
      "status": 1,
      "createUser": 1,
      "createTime": 1677035025264
    }
  ]
}

3.1.3 部署云數據庫

在DevEco Studio還未實現端云協同開發之前，要實現云側數據庫需要在網頁端配置。當前開發者只需要在DevEco Studio云側工程中配置好云數據庫信息后，右鍵clouddb目錄選擇Deploy Cloud DB將云數據庫需要的資源統一部署到AGC控制臺，Event Log會顯示同步進度信息。部署完成后，可在AGC控制臺查看部署的云數據庫信息。

3.2 端側Application訪問云側數據庫業務實現

使用端云協同開發，將較于之前的操作會減少如配置開發環境agconnect-services.json文件引入，該文件在創建端云協同工程時會自動初始化到工程中，在entry/src/main/resources/rawfile中；同時會自動引入相關依賴文件，如database-ohos等。

除配置文件和依賴文件之外，還需要和之前的操作相同，導出JSON格式文件和JS格式文件并添加至本地開發環境中。

3.2.1 添加對象類型文件

• 將導出的數據類型JSON文件內容拷貝到entry/src/main/ets/services/app-schema.json中，若無該文件則創建即可。
• 將導出的JS格式文件拷貝到entry/src/main/ets/services/目錄下。

3.2.2 云數據庫操作

該文件僅作為示例應用獲取云數據庫數據，若需要更詳細的開發者可自定義封裝，其中異常并未作處理，開發者可根據自身業務做響應的處理。

// entry/src/main/ets/services/CloudDBService.ts
// @ts-ignore
import * as schema from './app-schema.json';
import { splash } from './splash';
import {
    AGConnectCloudDB,
    CloudDBZoneConfig,
    CloudDBZone,
    CloudDBZoneQuery
} from '@hw-agconnect/database-ohos';

import { AGCRoutePolicy } from '@hw-agconnect/core-ohos';

import { getAGConnect } from './AgcConfig';

export class CloudDBService {

    private static readonly ZONE_NAME = "cloudDBZoneSplash";

    private static init(context: any): Promise

3.2.3 將云數據庫數據渲染到頁面

利用aboutToAppear()方法獲取云數據庫中的啟動頁信息。

import { CloudDBService as CloudDB } from '../services/CloudDBService';
import { SplashPage } from '@tetcl/teui';
@Entry
@Component
struct Splash {

  @State result: SplashObj = new SplashObj(5);
  @State isSkip: boolean = false;
  
  onSkipt() {
    // 跳轉頁面
  }
  
  build() {
    Column() {
      if (this.isSkip) {
        SplashPage({ mSplash: {
          timer: this.result.timer,
          isLogo: this.result.isLogo,
          backgroundImg: this.result.backgroundImg,
          companyName: this.result.companyName,
          mFontColor: this.result.mFontColor
        }, skip: this.onSkip })
      }
    }
    .width('100%')
    .height('100%')
  }
  
  aboutToAppear() {
    // 若受網絡印象獲取數據時間過長，此處可以自定義一個數據加載動畫
    CloudDB.query(getContext(this)).then(ret => {
      this.isSkip = true;
      this.result = ret;
    })
  }
}

3.3 在開發板預覽效果

審核編輯 黃宇