聊一聊OpenHarmony启动页后记 _OpenHarmony

文章插图
?
1、回顾通过DevEco Studio端云协同开发OpenHarmony/HarmonyOS应用程序(以下简称应用)集成AppGallery Connect(以下简称AGC)平台??云函数???、??云数据库???、??云存储??三篇文章笔者从创建端云协同应用程序开始，逐步对云函数、云数据库、云存储简单的数据读取做了简单的介绍。通过使用云数据库、云存储相结合的方式使应用的启动页能够动态化，即可以在不更新应用的情况下更改启动页的参数已达到启动页的动态化。
2、问题及解决方案【聊一聊OpenHarmony启动页后记】问题：由于启动页参数来源于云数据库、云存储，启动页数据渲染前会受网络影响出现白屏。
解决方案：为启动页数据单独封装获取方法，在启动页新增状态值，数据未加载完成后显示当前应用的??icon??图标，数据加载完成后渲染实际获取到的数据。
注：若读者有其他的处理方法可与笔者共同探讨一下。
3、优化调用方法使用async将函数异步化，使用await获取Promise的值。
（1）云数据库获取数据方法异步化每次使用存储区都要在使用完成后释放，新增关闭存储区方法。

// service/CloudDBService.ts// @ts-ignoreimport * 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 cloudDB: AGConnectCloudDB;private static cloudDBZone: CloudDBZone;private static isInit: boolean;public static async init(context: any): Promise<boolean> {if (this.isInit) {return;}try {// 初始化agcgetAGConnect(context);// 初始化Cloud DBawait AGConnectCloudDB.initialize(context);// 获取对应数据处理位置的CloudDB实例this.cloudDB = await AGConnectCloudDB.getInstance(AGCRoutePolicy.CHINA);// 创建对象类型this.cloudDB.createObjectType(schema);// 打开存储区await this.openZone(this.ZONE_NAME);this.isInit = true;} catch (err) {console.error(JSON.stringify(err))}return Promise.resolve(this.isInit);}// 打开存储区private static async openZone(zoneName: string): Promise<CloudDBZone> {if (this.cloudDBZone) {return;}try {const cloudDBZoneConfig = new CloudDBZoneConfig(zoneName);this.cloudDBZone = await this.cloudDB.openCloudDBZone(cloudDBZoneConfig);} catch (err) {console.error(JSON.stringify(err));}}// 关闭存储区public static async closeZone(): Promise<void> {try {this.cloudDB.closeCloudDBZone(this.cloudDBZone);this.cloudDBZone = null;} catch (err) {console.error(JSON.stringify(err))}}public static async query(): Promise<splash> {try {const query = CloudDBZoneQuery.where(splash).equalTo("status", 1);const result = await this.cloudDBZone.executeQuery(query);return result.getSnapshotObjects().length > 0 ? result.getSnapshotObjects()[0] : new splash();} catch (err) {console.error(JSON.stringify(err));}}}

（2）云存储获取数据方法异步化

// services/cloudstorage/CloudStorageService.tsimport agconnect from '@hw-agconnect/api-ohos';import "@hw-agconnect/cloudstorage-ohos";import { getAGConnect } from '../AgcConfig';export class CloudStorageService {public static async init(context: any, path: string): Promise<string> {try {getAGConnect(context);// 初始化默认实例const storage = agconnect.cloudStorage();// 创建需要下载文件的引用const storageReference = await storage.storageReference();var reference = await storageReference.child(path);return reference.getDownloadURL();} catch (err) {console.error(JSON.stringify(err));}}}

4、为启动页数据获取封装专用方法可以将一些处理逻辑放在该方法中处理。

// services/SplashService.tsimport { splash } from './splash';import { CloudDBService } from '../services/CloudDBService';import { CloudStorageService } from '../services/cloudstorage/CloudStorageService';export class SplashService {public static async querySplash(context: any): Promise<splash> {try {await CloudDBService.init(context);let splash = await CloudDBService.query();let url = await CloudStorageService.init(context, splash.backgroundImg);splash.backgroundImg = url;await CloudDBService.closeZone();return splash;} catch (err) {console.error(JSON.stringify(err));}}}

5、改写启动页启动页新增状态码，用于数据未加载完成呈现给用户的显示界面，规避数据未获取导致的白屏现象。
@State isSkip: boolean = false;
在aboutToAppear()方法中执行获取启动页数据的方法。