文章目录
- 大体介绍
- 文件介绍
- 各部分代码
- SplashPage.ets
- Index.ets
- HomePage.ets
- route_map.json
- module.json5
- 流程
大体介绍
文件介绍
其中：
- pages为我们的页面内容（我个人理解功能性小于activity但是大于fragment）
- route_map.json 为自定义的路由表（使用Navigation而不是Router）
- SplashPage.ets 为我们自定义的闪屏文件
- HomePage.ets 为我们测试的二级页面
- route_map.json 需要配置在module.json5中
各部分代码
SplashPage.ets
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
@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
@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
{"routerMap": [{"name": "HomePage","pageSourceFile": "src/main/ets/pages/HomePage.ets","buildFunction": "PageOnBuilder"}]
}
module.json5
{"module": {..."routerMap": "$profile:route_map",...]}
}
流程
- 修改启动页为自定义的Splash
- 自定义操作后跳到真正的Index页面
- Index页面用Navigation管理页面路由
