【木棉花】学习笔记——基于ArkUI的页面路由（eTS） 原创 精华

春节不停更，此文正在参加「星光计划-春节更帖活动」

前言

最近在学习eTS的harmonyOS开发，顺便写写文章来记录一下学习过程还有也激励自己继续学习下去。
我们开发一个应用所有的功能是不可能单独只在一个页面内就可以完成的，所以这页面路由肯定是学习eTS开发绕不开的一个非常重要的环节。
这eTS的页面路由类似于java开发的页面间的跳转，也是大致可以分为不带数据的页面间的导航和携带数据的页面间的导航这两个大类，不过eTS相对于java来说就没有那个复杂的一个Ability可以对应一个或多个AbilitySlice的关系了，所以eTS开发会相对比较简单也相对比较简洁。这eTS开发倒是更接近于JS开发，但也省略了JS那烦人的三剑客的问题了，UI和逻辑代码只需要在一个页面中就可以实现了。
话不多说，这就开始我今天的学习吧。

正文

不带数据的页面路由

先在page的目录下创建一个eTS的页面。

接下来在我们的index页面增加一个button按钮，当然也不是只有按钮才可以点击。

@Entry
@Component
struct Index {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text('Hello World')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Button('Next')
        .fontSize(40)
        .fontWeight(FontWeight.Bold)
        .backgroundColor('#007DFF')
        .fontColor('#FFFFFF')
        .margin({top:25})
        .padding({top:10,bottom:10,left:20,right:20})
    }
    .width('100%')
    .height('100%')
  }
}

然后给按钮增加一个点击事件。页面路由router根据页面的uri找到目标页面，从而实现跳转。

      Button('Next')
        .fontSize(40)
        .fontWeight(FontWeight.Bold)
        .backgroundColor('#007DFF')
        .fontColor('#FFFFFF')
        .margin({top:25})
        .padding({top:10,bottom:10,left:20,right:20})
        .onClick(()=>{
          router.push({uri:'pages/Second'})
        })

当然我们也可以在Second页面，根据页面路由来返回到之前的页面。这里我就直接在text上操作了。

import router from '@system.router';
@Entry
@Component
struct Second {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text('Back')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .onClick(()=>{
          router.back();
        })
    }
    .width('100%')
    .height('100%')
  }
}

携带数据的页面路由

携带数据的页面路由就更像是JS了。只需要在index中的router中增加一个参数，就可以把参数带到Second页面了。

.onClick(()=>{
          router.push({
            uri:'pages/Second',
            params:{param1:'I am come from index'}
          })
        })

而在目标页面也只是需要通过router.getParams().param1这一行代码就可以把param1对应的参数的值获得。所以我就新加了一个text来查看这个参数。

      Text(router.getParams().param1)
        .padding({top:10})
        .fontSize(20)

router的其他用法

replace方法

在router中，有一个replace的方法，该方法和push之间的区别就是push只进行页面的跳转，而replace的话，就字面意思我们也大概能猜得到是将当前页面用新的页面来代替，而当前页面就不会存在页面栈中了。

clear方法

router中的clear方法是清空页面栈中的所有历史页面，仅保留当前页面作为栈顶页面。

getLength

router中的getLength方法是获取页面栈中的页面的数量。
这些方法就不一一举例了。

更多资料请关注我们的项目 : Awesome-HarmonyOS_木棉花

本项目会长期更新 ，希望随着鸿蒙一同成长变强的既有我们，也有正在看着这个项目的你。明年3月，深大校园内的木棉花会盛开，那时，鸿蒙也会变的更好，愿这花开，有你我的一份。