文章目录
大体介绍
文件介绍
其中:
- 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",
...
]
}
}
流程
- 修改启动页为自定义的Splash
- 自定义操作后跳到真正的Index页面
- Index页面用Navigation管理页面路由