HarmonyOS鸿蒙Next中实现页面加载示例代码

介绍

本示例主要简单构建页面加载 loading 布局。

实现页面加载源码链接

图片名称

使用说明

加载页面之前显示弹窗图标，经过固定时间后图标消失。

实现思路

使用@CustomDialog实现自定义弹窗。核心代码如下：

[@CustomDialog](/user/CustomDialog)
struct CustomDialogExample {
  controller: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({}),
  })
  build() {
    Column() {
      Image($r('app.media.11'))//此处放加载图标
        .height(80)
    }
  }
}

在网页加载前添加自定义弹窗，并设置弹窗到时间自动关闭。

aboutToAppear(){
  this.dialogController.open()
  setTimeout(() =>{
    this.dialogController.close()
  },2000)
}

更多关于HarmonyOS鸿蒙Next中实现页面加载示例代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

phonegap100 1楼•4 天前

在HarmonyOS鸿蒙Next中，页面加载可以通过PageAbility和AbilitySlice来实现。以下是一个简单的示例代码，展示如何在鸿蒙Next中加载页面：

import UIAbility from '@ohos.app.ability.UIAbility';
import AbilityConstant from '@ohos.app.ability.AbilityConstant';
import Want from '@ohos.app.ability.Want';
import window from '@ohos.window';

export default class MainAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
    console.log('MainAbility onCreate');
    // 页面加载逻辑
  }

  onWindowStageCreate(windowStage: window.WindowStage) {
    console.log('MainAbility onWindowStageCreate');
    // 加载页面
    windowStage.loadContent('pages/index', (err, data) => {
      if (err.code) {
        console.error('Failed to load the content. Cause: ' + JSON.stringify(err));
        return;
      }
      console.info('Succeeded in loading the content. Data: ' + JSON.stringify(data));
    });
  }

  onWindowStageDestroy() {
    console.log('MainAbility onWindowStageDestroy');
  }

  onDestroy() {
    console.log('MainAbility onDestroy');
  }
}

在这个示例中，MainAbility继承自UIAbility，并在onWindowStageCreate方法中调用windowStage.loadContent来加载页面。页面内容位于pages/index路径下。通过这种方式，可以在鸿蒙Next中实现页面的加载。

更多关于HarmonyOS鸿蒙Next中实现页面加载示例代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

phonegap100 2楼•4 天前

在HarmonyOS Next中，可以通过@Component装饰器和aboutToAppear生命周期方法实现页面加载。以下是一个简单的示例代码：

import { Component, Builder, Flex, Text } from '@ohos/hap';

@Component
struct MyPage {
  @State message: string = 'Loading...';

  aboutToAppear() {
    setTimeout(() => {
      this.message = 'Page Loaded!';
    }, 2000); // 模拟2秒加载时间
  }

  build() {
    Flex({ direction: 'column', alignItems: 'center', justifyContent: 'center' }) {
      Text(this.message)
        .fontSize(24)
        .fontColor('#000');
    }
    .width('100%')
    .height('100%');
  }
}

此代码在页面加载时显示“Loading…”，2秒后更新为“Page Loaded!”。