【从零开始鸿蒙开发:01】自定义闪屏页

文章目录

大体介绍

文件介绍

其中:

  • pages为我们的页面内容(我个人理解功能性小于activity但是大于fragment)
  • route_map.json 为自定义的路由表(使用Navigation 而不是Router
  • SplashPage.ets 为我们自定义的闪屏文件
  • HomePage.ets 为我们测试的二级页面
  • route_map.json 需要配置在module.json5中

各部分代码

SplashPage.ets

bash 复制代码
import { router } from "@kit.ArkUI"

@Entry
@Component
struct SplashPage {
  build() {
    Column() {
      Image($r("app.media.huawei_logo"))
        .padding({
          left: "15%",
          right: "15%"
        }).width("100%")

      LoadingProgress()
        .width("20%")
        .height("20%")
        .color(Color.Red)
    }.height('100%')
    .width('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
  }

  aboutToAppear(): void {
    setTimeout(() => {
      router.pushUrl(
        { url: "pages/Index" }
      ).then(()=>{
        router.clear()
      })
    }, 2000)
  }
}

Index.ets

bash 复制代码
@Entry
@Component
struct Index {
  @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack();



  build() {
    Navigation(this.pageInfos) {
        Column(){
          Button("TO HOME").onClick(()=>{
            this.pageInfos.pushPathByName("HomePage",null,true)
          })
        }
    }
    .height('100%')
    .width('100%')
    .mode(NavigationMode.Stack)
    .hideBackButton(true)
    .titleMode(NavigationTitleMode.Mini)
    .toolbarConfiguration([

    ])
  }
}

HomePage.ets

bash 复制代码
@Builder
export function PageOnBuilder(){
  HomePage()
}

@Component
struct HomePage {
  @State message: string = 'this is home';

  build() {
    NavDestination(){
      RelativeContainer() {
        Text(this.message)
          .id('HomePageHelloWorld')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .alignRules({
            center: { anchor: '__container__', align: VerticalAlign.Center },
            middle: { anchor: '__container__', align: HorizontalAlign.Center }
          })
      }
      .height('100%')
      .width('100%')
    }
  }
}

route_map.json

bash 复制代码
{
  "routerMap": [
    {
      "name": "HomePage",
      "pageSourceFile": "src/main/ets/pages/HomePage.ets",
      "buildFunction": "PageOnBuilder"
    }
  ]
}

module.json5

bash 复制代码
 {
  "module": {
  	...
    "routerMap": "$profile:route_map",
    ...
    ]
  }
}

流程

  1. 修改启动页为自定义的Splash
  2. 自定义操作后跳到真正的Index页面
  3. Index页面用Navigation管理页面路由
相关推荐
旧曲重听17 分钟前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿16 分钟前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉22 分钟前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽28 分钟前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课30 分钟前
React useEffect 详解与运用
前端·react.js
我想说一句31 分钟前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
funnycoffee12331 分钟前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为
制造数字化方案研究院33 分钟前
59页|PPT|华为集成服务交付ISD业务变革总体方案:业务规则、流程、IT、组织及度量“四位一体”的管理体系
运维·华为
小鱼小鱼干34 分钟前
【Tauri】Tauri中Channel的使用
前端
博睿谷IT99_35 分钟前
华为物联网认证:开启万物互联的钥匙
物联网·华为·华为认证·职业规划