【从零开始鸿蒙开发: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管理页面路由
相关推荐
豆包MarsCode11 分钟前
使用 Vue 配合豆包MarsCode 实现“小恐龙酷跑“小游戏
开发语言·前端·javascript·vue.js·html
四喜花露水17 分钟前
vue2.x elementui 固定顶部、左侧菜单与面包屑,自适应 iframe 页面布局
前端·elementui·vue
看山还是山,看水还是。26 分钟前
Redis 命令
前端·数据库·redis·bootstrap
会飞的郁金香28 分钟前
第8章 利用CSS制作导航菜单
前端·css
凉风听雪31 分钟前
免费HTML模板和CSS样式网站汇总
前端·javascript·css·html
。小二1 小时前
前端js用canvas合成图片并转file对象
开发语言·前端·javascript·canva可画
哟哟耶耶1 小时前
learn-F12 Performance(性能)前端性能分析(LCP,CLS,INP)
前端
kkkAloha1 小时前
vue | 劫持原理
前端·javascript·vue.js
ssma1111 小时前
ES6笔记
前端·笔记·es6
乐闻x2 小时前
ESLint 使用教程(七):ESLint还能校验JSON文件内容?
前端·javascript·json·eslint