0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

OpenHarmonyApp启动页后记

ITMING 来源:ITMING 作者:ITMING 2023-03-03 16:43 次阅读

1 回顾

通过DevEco Studio端云协同开发OpenHarmony/HarmonyOS应用程序(以下简称应用)集成AppGallery Connect(以下简称AGC)平台云函数、云数据库、云存储三篇文章笔者从创建端云协同应用程序开始,逐步对云函数、云数据库、云存储简单的数据读取做了简单的介绍。通过使用云数据库、云存储相结合的方式使应用的启动页能够动态化,即可以在不更新应用的情况下更改启动页的参数已达到启动页的动态化。

2 问题及解决方案

问题: 由于启动页参数来源于云数据库、云存储,启动页数据渲染前会受网络影响出现白屏。

解决方案: 为启动页数据单独封装获取方法,在启动页新增状态值,数据未加载完成后显示当前应用的icon图标,数据加载完成后渲染实际获取到的数据。

注: 若读者有其他的处理方法可与笔者共同探讨一下。

3 优化调用方法

使用async将函数异步化,使用await获取Promise的值。

3.1 云数据库获取数据方法异步化

每次使用存储区都要在使用完成后释放,新增关闭存储区方法。

// service/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 cloudDB: AGConnectCloudDB;
    private static cloudDBZone: CloudDBZone;
    private static isInit: boolean;

    public static async init(context: any): Promise<boolean> {
        if (this.isInit) {
            return;
        }
        try {
            // 初始化agc
            getAGConnect(context);
            // 初始化Cloud DB
            await 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

3.2 云存储获取数据方法异步化

// services/cloudstorage/CloudStorageService.ts
import 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.ts
import { splash } from './splash';
import { CloudDBService } from '../services/CloudDBService';
import { CloudStorageService } from '../services/cloudstorage/CloudStorageService';

export class SplashService {

    public static async querySplash(context: any): Promise

5 改写启动页

启动页新增状态码,用于数据未加载完成呈现给用户的显示界面,规避数据未获取导致的白屏现象。

@State isSkip: boolean = false;

aboutToAppear()方法中执行获取启动页数据的方法。

aboutToAppear() {
    this.isSkip = false;
    SplashService.querySplash(getContext(this)).then((ret) => {
      this.isSkip = true;
      this.result = ret;
    })
  }

页面中使用if(){}else{}条件语句判断渲染的组件,从而规避数据请求时间导致的白屏。

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 })
} else {
  Column() {
    Image($r('app.media.icon')).objectFit(ImageFit.None)
  }
  .width('100%').height('100%')
}

通过更改AGC平台云数据库中启动页数据状态,可以实现下次启动应用程序,启动页呈现不同内容。使用场景如新闻类App可以在启动页呈现一条配备图片的热文;常规App可以在启动页呈现一条经典语录;实现不同节日在启动页呈现问候信息

7 后记

本文所记为之前文章的总结,针对获取AGC平台各项服务的数据,可直接调用对应的方法即可。若出现复杂的情况,如后面笔者将实现认证服务登录,并将用户信息存储到云数据库中,可以结合云函数,在用户登录的时候,直接调用云函数去保存用户信息,存储方法可以通过云函数的AUTH触发器实现数据存储云数据库中;再如用户上传图片,生成缩略图,也可以利用云函数将原图和缩略图一同保存到云存储中。

审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • HarmonyOS
    +关注

    关注

    79

    文章

    1974

    浏览量

    30147
  • OpenHarmony
    +关注

    关注

    25

    文章

    3716

    浏览量

    16271
收藏 人收藏

    评论

    相关推荐

    OpenHarmony之开机优化

    OpenHarmony已经支持了Bootchart工具,我们可以直接使用Bootchart工具,Bootchart工具介绍如下: 概述 Bootchart是一个用于系统启动过程性能分析的开源软件工具
    发表于 07-01 16:39

    OpenHarmony 明星开发板和应用招募启动,等你来!

    为助力企业和开发者快速找到好用的开发板和应用,推动OpenHarmony生态发展,现启动OpenHarmony 明星开发板和应用招募”评选活动!本次活动旨在为 OpenHarmony
    发表于 09-14 15:21

    基于OpenHarmony【O了个H】 #OpenHarmony #HarmonyOS

    HarmonyOSOpenHarmony
    程皖Orz
    发布于 :2022年09月22日 10:15:45

    龙芯openharmony 【2】启动分析

    开源项目见:首发!成功移植OpenHarmony到龙芯开发板,代码开源~1 启动文件和链接脚本龙芯开发板的板级代码位于:device\loongson\ls1c300b_hrst 文件夹其中,启动
    发表于 12-15 19:12

    如何导入OpenHarmony源码

      Import Project适用于打开DevEco Device Tool创建的工程项目和获取的OpenHarmony源码。如果是打开OpenHarmony源码,在打开工程时,点击Import
    发表于 04-12 11:16

    RK3399/3568 适配OpenHarmony应用开发环境搭建

    ,可通过欢迎的Configure (或图标)> Settings > SDK Manager > OpenHarmony SDK界面,点击
    发表于 04-12 18:54

    《沉浸式剖析OpenHarmony源代码》开放100样章

    《沉浸式剖析OpenHarmony源代码》开放100样章梁开祝2022.09.29这本书正在排版印刷中,不出意外的话,在10月中下旬便可面市了。目前,此书的定价和订购链接暂时还没有确定,待有确定
    发表于 09-29 11:33

    openharmony启动方式

    6 月 1 日,开放原子开源基金会( OpenAtom Foundation,以下简称“基金会”)正式发布 OpenAtom OpenHarmony(以下简称“OpenHarmony”)2.0 Canary。
    的头像 发表于 06-22 10:59 1920次阅读

    基于openharmony适配移植的导航控件

    项目介绍 项目名称:GuideView 所属系列:openharmony的第三方组件适配移植 功能:本系统能够快速的为一个Ability里的任何一个Component控件创建一个遮罩式的导航,并且
    发表于 04-07 10:07 2次下载

    2022 OpenHarmony组件大赛,共建开源组件

    OpenHarmony官网,点击【互动】,可在【活动】页面进入大赛活动。本次大赛旨在鼓励开发者积极参与OpenHarmony开源组件生态建设,贡献优秀开源组件作品,与广大OpenHarmon
    的头像 发表于 04-26 17:31 1555次阅读
    2022 <b class='flag-5'>OpenHarmony</b>组件大赛,共建开源组件

    自定义HarmonyOS启动组件

    启动作为应用程序首次出现的页面,该页面提供一些预加载数据的提前获取,防止应用程序出现白屏等异常,如是否第一次访问应用程序并开启应用欢迎;判断用户登录信息进行页面跳转;消息信息懒加载等。 常见
    的头像 发表于 02-17 13:00 579次阅读
    自定义HarmonyOS<b class='flag-5'>启动</b><b class='flag-5'>页</b>组件

    OpenHarmony竞赛训练营正式启动

    点击蓝字 ╳ 关注我们 开源项目 OpenHarmony 是每个人的 OpenHarmony OpenAtom OpenHarmony(简称“OpenHarmony”)竞赛训练营正式开
    的头像 发表于 10-07 21:10 567次阅读

    资讯速递 | OpenHarmony竞赛训练营重磅启动,邀您共享OpenHarmony探索与创新之旅!

    OpenHarmony竞赛训练营活动旨在引导高校学生进行OpenHarmony产学研用,培养更多应用型人才和产业需求有效链接,吸引更多的高校师生参与到OpenHarmony的开发和应用中。本期
    的头像 发表于 10-10 10:27 766次阅读
    资讯速递 | <b class='flag-5'>OpenHarmony</b>竞赛训练营重磅<b class='flag-5'>启动</b>,邀您共享<b class='flag-5'>OpenHarmony</b>探索与创新之旅!

    报名启动OpenHarmony源码转换器—多线程特性转换赛题

    点击蓝字 ╳ 关注我们 开源项目 OpenHarmony 是每个人的 OpenHarmony 原文标题:报名启动OpenHarmony源码转换器—多线程特性转换赛题 文章出处:【微信
    的头像 发表于 12-29 16:15 706次阅读
    报名<b class='flag-5'>启动</b>|<b class='flag-5'>OpenHarmony</b>源码转换器—多线程特性转换赛题

    OpenHarmony统一互联PMC启动孵化

    在2024年10月12日于上海举办的第三届OpenHarmony技术大会上,OpenHarmony统一互联PMC(项目群项目管理委员会)正式启动孵化。 OpenHarmony项目群工作
    的头像 发表于 10-21 11:44 376次阅读
    <b class='flag-5'>OpenHarmony</b>统一互联PMC<b class='flag-5'>启动</b>孵化