【鸿蒙开发】闪屏页面练习

1. 创建页面 Index.ets

javascript 复制代码
@Entry
@Component
struct Index {
  build() {
    Column() {
      Text("首页")
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .height('100%')
  }
}

2. 创建页面 SplashScreen.ets

javascript 复制代码
@Entry
@Component
struct SplashScreen {
  @State message: string = 'SplashScreen'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

3. 创建store工具 StoreUtil.ets

javascript 复制代码
import preferences from '@ohos.data.preferences'

export class StoreUtil {
  constructor(private readonly context: Context, private readonly storeName: string) {
  }

  getStore() {
    return preferences.getPreferences(this.context, this.storeName)
  }

  async getData<T>(key): Promise<T> {
    const store = await this.getStore()
    const data = await store.get(key, "{}") as string
    return JSON.parse(data) as T
  }

  async setData<T>(key: string, data: T): Promise<void> {
    const store = await this.getStore()
    await store.put(key, JSON.stringify(data))
    await store.flush()
  }

  async delData(key: string): Promise<void> {
    const store = await this.getStore()
    await store.delete(key)
    await store.flush()
  }
}

4. 创建类型 typs/SplashScreen.ets

javascript 复制代码
export interface ISplashScreen {
  show: boolean
  duration: number
  image: string | Resource
}

5. 修改 EntryAbility

  • 修改 EntryAbility.ts 后缀为 EntryAbility.ets
  • 创建 userStore
  • 模拟获取闪屏数据
  • 从 userStore 获取闪屏数据
  • 加载首页或者闪屏页
javascript 复制代码
  async onWindowStageCreate(windowStage: window.WindowStage) {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
    // 用户仓库
    const userStore = new StoreUtil(this.context, "userStore",)
    // 模拟获取闪屏数据
    await new Promise(resolve => {
      setTimeout(async () => {
        const splashScreen: ISplashScreen = {
          show: true,
          duration: 10,
          image: $r("app.media.splash_screen")
        }
        await userStore.setData("userSplashScreen", splashScreen)
        resolve(splashScreen)
      }, 2000)
    })
    // 从仓库获取闪屏数据
    const splashScreen = await userStore.getData<ISplashScreen>("userSplashScreen")
    if (splashScreen.show) {
      // 加载闪屏页面
      windowStage.loadContent('pages/SplashScreen', (err, data) => {
        if (err.code) {
          hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
          return;
        }
        hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
      });
    } else {
      // 加载首页
      windowStage.loadContent('pages/Index', (err, data) => {
        if (err.code) {
          hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
          return;
        }
        hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
      });
    }
  }

6. 修改闪屏页面

修改 SplashScreen.ets

javascript 复制代码
import router from '@ohos.router'
import { ISplashScreen } from '../types/SplashScreen'
import { StoreUtil } from '../utils/StoreUtil'

@Entry
@Component
struct SplashScreen {
  @State timer: number = -1
  @State splashScreenObj: ISplashScreen = { show: true, duration: 10, image: '' }
  userStore: StoreUtil = new StoreUtil(getContext(this), 'userStore')

  aboutToAppear() {
    this.getData()
  }

  aboutToDisappear() {
    clearInterval(this.timer)
  }

  async getData() {
    // 获取闪屏数据
    const data = await this.userStore.getData<ISplashScreen>('userSplashScreen')
    this.splashScreenObj.duration = data?.duration ?? 10
    this.splashScreenObj.image = data?.image ?? $r('app.media.splash_screen')
    // 倒计时
    this.timer = setInterval(() => {
      if (this.splashScreenObj.duration === 0) {
        clearInterval(this.timer)
        router.replaceUrl({ url: 'pages/Index' })
        return
      }
      this.splashScreenObj.duration--
    }, 1000)
  }

  build() {
    Stack({ alignContent: Alignment.TopEnd }) {
      Image(this.splashScreenObj.image)
        .width('100%')
        .height('100%')

      Row() {
        Text(`${this.splashScreenObj.duration}秒后跳过`)
          .padding({ left: 10, right: 10 })
          .margin({ right: 20, top: 20 })
          .height(30)
          .fontSize(14)
          .borderRadius(15)
          .backgroundColor("#ccc")
          .textAlign(TextAlign.Center)

        Text(`跳过`)
          .padding({ left: 10, right: 10 })
          .margin({ right: 20, top: 20 })
          .height(30)
          .fontSize(14)
          .borderRadius(15)
          .backgroundColor("#ccc")
          .textAlign(TextAlign.Center)
          .onClick(() => {
            router.replaceUrl({ url: 'pages/Index' })
          })
      }
    }
    .width('100%')
    .height('100%')
  }
}
相关推荐
爱笑的眼睛1127 分钟前
HarmonyOS 应用开发新范式:深入探索 Stage 模型与 ArkUI 声明式开发
华为·harmonyos
叫我阿柒啊2 小时前
Java全栈开发工程师的实战面试经历:从基础到微服务
java·微服务·typescript·vue·springboot·前端开发·后端开发
烛阴4 小时前
【TS 设计模式完全指南】从零到一:掌握TypeScript建造者模式,让你的对象构建链式优雅
javascript·设计模式·typescript
光锥智能5 小时前
小平板元年,华为MatePad Mini创出一片蓝海
华为·电脑
祥睿夫子5 小时前
零基础搞定 ArkTS 类与对象!保姆级教程:定义→创建→测试全流程 + 代码示例
harmonyos
程序员潘Sir8 小时前
HarmonyOS实现快递APP自动识别地址
harmonyos·鸿蒙
萌虎不虎8 小时前
【鸿蒙(openHarmony)自定义音频播放器的开发使用说明】
华为·音视频·harmonyos
拜无忧8 小时前
2025最新React项目架构指南:从零到一,为前端小白打造
前端·react.js·typescript
李洋-蛟龙腾飞公司8 小时前
HarmonyOSAI编程万能卡片生成(一)
华为·ai编程·harmonyos