【HarmonyOS4学习笔记】《HarmonyOS4+NEXT星河版入门到企业级实战教程》课程学习笔记(十二)

课程地址: 黑马程序员HarmonyOS4+NEXT星河版入门到企业级实战教程,一套精通鸿蒙应用开发

(本篇笔记对应课程第 19节)

P19《18.ArkUI组件-页面路由》

以访问京东页面为例,访问过的页面并没有消失,而是进入了页面栈,栈是一个先进后出的结构。访问过的页面会被压入这个栈,当点击返回时会将当前页面弹出页面栈,从而回到上一页面;当不停地访问页面时,页面栈内会被压入很多页面。

页面路由相关的API:

试用一下路由:我们在index页面中添加一些路由,让其能够跳转到不同的案例页面。

在index中添加如下代码:一个 RouterInfo类,以及一个 routers 数组:

将 routes 数组渲染到页面:

ListItem中通过一个自定义构建函数实现:

现在开始添加路由跳转功能啦:

首先需要导入 router,写出router后会有导入提示,选择这个提示后会自动导入。


打开log查看详细错误信息:

报错的原因是:我们需要在 resources/base/profile 下的 main_pages.json 文件中配置页面信息:

是不是我们每次创建文件都要配置对应的页面信息?不是的,我们创建的如果是页面文件,则可以选择 new Page,这样创建出来的页面会自动添加到页面配置中去,就不需要手动去添加这个页面的配置了:


再次测试发现仍然报错"路由失败",因为我们修改了路由配置页面,重启下预览器,再次测试,可以成功跳转了。

接收路由跳转传递过来的参数:

router还有一个比较有用的api,返回前的警告:

总结:

实践:

typescript 复制代码
// index.ets  首页

import router from '@ohos.router'
class RouterInfo {
  // 页面路径
  url:string
  // 页面标题
  title:string

  constructor(url:string, title:string) {
    this.url = url
    this.title = title
  }
}

@Extend(Text) function textStyle(){
  .fontColor('#fff')
  .fontSize(20)
}

@Entry
@Component
struct Index {
  // @State message: string = 'Hello World'
  @State routers:RouterInfo[] = [
    new RouterInfo('pages/ImagePage','图片查看'),
    new RouterInfo('pages/ItemsPage','商品列表'),
    new RouterInfo('pages/StatePage','Jack的信息'),
    new RouterInfo('pages/PropPage','任务列表'),
  ]


  build() {
    Row() {
      Column({space:30}) {
        Text('页面列表')
          .fontSize(32)
          .fontWeight(FontWeight.Bold)

        List({space:20}){
          ForEach(this.routers,(item,index)=>{
            ListItem(){
              this.routerItem(item,index)
            }
          })
        }
      }
      .width('100%')
      .padding(20)
    }
    .height('100%')
  }

  // 局部自定义构建函数,不需要 function 关键字
  @Builder routerItem(item:RouterInfo,index){
    Row(){
      Text((index+1).toString())
        .textStyle()
      Text(item.title)
        .textStyle()
    }
      .width('100%')
      .height(40)
      .padding(10)
      .justifyContent(FlexAlign.SpaceBetween)
      .backgroundColor('#36D')
      .borderRadius(20)
      .shadow({radius:8, color:'#4f0000',offsetX:2, offsetY:2})
      .onClick(()=>{
        router.pushUrl({
          url: item.url,
          params: {id: index}
        },
          router.RouterMode.Single,
          err => {
            if(err){
              console.log(`路由失败了!code:${err.code},message:${err.message}`)
            }
          }
        )
      })
  }
}
typescript 复制代码
// CommonComponents.tes   Header 公共组件

import router from '@ohos.router'
@Component
export struct Header{
  @State params:any = router.getParams()

  private title:ResourceStr
  build(){
    Row(){
      Image($r('app.media.icon_back'))
        .width(40)
        .onClick(()=>{
          router.showAlertBeforeBackPage({
            message:'确定返回吗?'
          })

          router.back()
        })

      if(this.params && this.title){
        Text(`${this.params.id} . ${this.title}`)
          .fontSize(28)
      }


      Blank()

      Image($r('app.media.icon_search'))
        .width(40)
    }
    .width('100%')
    .height(60)
    .padding({left:14, right:14})
    .justifyContent(FlexAlign.Start)
  }
}
相关推荐
一直在进步的派大星2 分钟前
Docker 从安装到实战
java·运维·docker·微服务·容器
百里香酚兰3 分钟前
【AI学习笔记】基于Unity+DeepSeek开发的一些BUG记录&解决方案
人工智能·学习·unity·大模型·deepseek
老华带你飞6 分钟前
公寓管理系统|SprinBoot+vue夕阳红公寓管理系统(源码+数据库+文档)
java·前端·javascript·数据库·vue.js·spring boot·课程设计
我明天再来学Web渗透17 分钟前
【hot100-java】【二叉树的层序遍历】
java·开发语言·数据库·sql·算法·排序算法
布丁不叮早起枣祈18 分钟前
10.3学习
学习
结衣结衣.30 分钟前
python中的函数介绍
java·c语言·开发语言·前端·笔记·python·学习
原野心存34 分钟前
java基础进阶知识点汇总(1)
java·开发语言
LN-ZMOI1 小时前
c++学习笔记1
c++·笔记·学习
五味香1 小时前
C++学习,信号处理
android·c语言·开发语言·c++·学习·算法·信号处理
无理 Java1 小时前
【技术详解】SpringMVC框架全面解析:从入门到精通(SpringMVC)
java·后端·spring·面试·mvc·框架·springmvc