【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)
  }
}
相关推荐
字节全栈_kYu10 分钟前
微信小程序视频点播在线视频学习系统 毕业设计 课程设计(1)首页_微信小程序视频功能设计流程图
学习·微信小程序·课程设计
想拿高薪的韭菜20 分钟前
人工智能第2章-知识点与学习笔记
人工智能·笔记·学习
jerry6091 小时前
注解(Annotation)
java·数据库·sql
Future_yzx1 小时前
Java Web的发展史与SpringMVC入门学习(SpringMVC框架入门案例)
java·前端·学习
Future_yzx1 小时前
Spring MVC学习——发送请求(@RequestMapping注解及请求参数绑定)
学习·spring·mvc
一只码代码的章鱼1 小时前
计算机网络 应用层 笔记 (电子邮件系统,SMTP,POP3,MIME,IMAP,万维网,HTTP,html)
笔记·计算机网络·microsoft
学游戏开发的2 小时前
UE求职Demo开发日志#19 给物品找图标,实现装备增加属性,背包栏UI显示装备
c++·笔记·游戏引擎·unreal engine
云缘若仙2 小时前
directx12 3d+vs2022游戏开发第三章 笔记五 变换
笔记·3d
辞半夏丶北笙2 小时前
最近最少使用算法(LRU最近最少使用)缓存替换算法
java·算法·缓存
小菜鸟博士2 小时前
手撕Vision Transformer -- Day1 -- 基础原理
人工智能·深度学习·学习·算法·面试