当前位置：首页 > 移动端开发 > 正文内容

HarmonyOS Next 入门实战 - 导航结构：页面路由、组件导航(Navigation)

邻居的猫1个月前 (12-09)移动端开发1313

页面路由

官方不引荐运用页面路由，这儿仅做简略介绍。
页面路由用于标识 @Entry 注解的页面间的跳转。
包引进

import { router } from'@kit.ArkUI';

页面跳转

router.pushUrl 方针页面不会替换当时页，而是压入页面栈
router.replaceUrl 方针页面会替换当时页，并毁掉当时页

Router模块供给了两种实例方式，分别是Standard和Single，决议了方针url是否会有对应多个实例

//无参数跳转
router.replaceUrl({
    url: 'pages/PageA' // 方针url
  }, router.RouterMode.Standard, (err) => {
    if (err) {
      console.error(`${err.code}, ${err.message}`);
      return;
    }
    console.info('succeeded.');
  })
//带着参数跳转
class DataModel {
  name: string = ""
  age: number = 0;
}
toPageA() {
  let params: DataModel = {
    name: "张三",
    age: 20,
  }
  router.pushUrl({
    url: "pages/PageA",
    params: params
  })
}
//在方针页面获取参数
const params: DataModel = router.getParams() as DataModel;

页面回来
经过router.back 回来上一个页面或指定页面

//回来上一个页面
router.back();
//回来到指定页面
router.back({
  url: 'pages/Home'
});
//回来时传递参数
router.back({
  url: 'pages/Home',
  params: {
    info: 'back parmas'
  }
});
//回来参数获取，在回来方针页面的OnPageShow中获取参数
onPageShow() {
  const params = this.getUIContext().getRouter().getParams() as Record<string, string>; // 获取传递过来的参数方针
  if (params) {
    const info: string = params.info as string; // 获取info特点的值
  }
}

命名路由

@Entry({ routeName: 'pageA' })
@Component
export struct MyComponent {
  build() {
    ……
  }
}

toPageA() {
  router.pushNamedRoute({
    name: "pageA",
  })
}

Navigation 是路由容器组件，一般作为主页的根容器，包括单栏(Stack)、分栏(Split)和自适应(Auto)三种显现方式。
在不同尺度的设备上，Navigation组件能够自适应显现巨细，主动切换分栏展现作用。
Navigation组件首要包括导航页(NavBar)和子页(NavDestination)。导航页由标题栏(Titlebar，包括菜单栏menu)、内容区(Navigation子组件)和工具栏(Toolbar)组成，其间导航页能够经过 hideNavBar 特点进行躲藏，导航页不存在页面栈中，导航页和子页，以及子页之间能够经过路由操作进行切换。

显现方式
单页面方式示意图

分栏方式示意图

自适应方式：NavigationMode.Auto
单页面方式：NavigationMode.Stack
分栏方式：NavigationMode.Split

Navigation() {
  // ...
}
.mode(NavigationMode.Stack)  //页面方式设置为单页面方式

标题栏
标题栏方式包括：Mini方式和Full方式
Mini方式示意图

Full方式示意图

菜单栏
菜单栏坐落Navigation组件的右上角，经过menus特点进行设置。传递数组时，竖屏最多支撑显现3个图标，横屏最多支撑显现5个图标，剩余的图标会被放入主动生成的更多图标。
菜单栏支撑 CustomBuilder 参数，用来传入自定义布局。

工具栏
工具栏坐落Navigation组件的底部，经过toolbarConfiguration特点进行设置。
工具栏支撑 CustomBuilder 参数，用来传入自定义布局。

navPathStack: NavPathStack = new NavPathStack()

Navigation(this.navPathStack) {
  // ...
}
.titleMode(NavigationTitleMode.Full)  //设置标题栏方式
.menus([{   //设置菜单栏
  value:"menu1",
  icon:"resources/base/media/icon1.png",
  action:()=>{

  }
},{
  value:"menu2",
  icon:"resources/base/media/icon2.png",
  action:()=>{

  }
}])
.toolbarConfiguration([  //设置工具栏
  {
    value: "tab1",
    icon: $r('app.media.scan_multiple_result'),
    action:()=>{

    }
  },
  {
    value: "tab2",
    icon: $r('app.media.scan_one_result'),
    action:()=>{

    }
  },,
  {
    value: "tab3",
    icon: $r('app.media.startIcon'),
    action:()=>{

    }
  },
])

路由表装备

创立跳转页面进口Builder函数

@Builder
export function PageOneBuilder() {
  PageOne()
}

@Component
export struct PageOne {
  @Consume('navPathStack') navPathStack: NavPathStack

  build() {
    NavDestination() {
    }.title("Page1")
  }
}

在resources/base/profile中创立route_map.json文件，装备如下：
name：路由称号
pageSourceFile：方针页在保内的途径，相对src目录的相对途径
buildFunction：跳转方针页的进口函数称号，有必要以@Builder润饰
data：使用自定义字段。能够经过装备项读取接口getConfigInRouteMap获取

{
  "routerMap": [
    {
      "name": "PageOne",
      "pageSourceFile": "src/main/ets/pages/PageOne.ets",
      "buildFunction": "PageOneBuilder",
      "data": {
        "description" : "this is PageOne"
      }
    }
  ]
}

装备文件module.json5增加路由表装备

 {
    "module" : {
      "routerMap": "$profile:route_map"
    }
  }

路由表另一种完成办法：

创立Builder函数
经过Navigation的navDestination()办法创立路由表

@Builder
PageMap(name: string) {
  if (name === "page1") {
    PageOne()
  } else if (name === "page2") {
    PageTwo()
  } else if (name === "page3") {
    PageThree()
  }
}

Navigation(this.navPathStack) {
  ……
}.navDestination(this.PageMap)

页面导航
页面导航经过 NavPathStack 的相关接口完成

//跳转page1
this.navPathStack.pushPath({ name: "page1", param: "page1 param" })
this.navPathStack.pushPathByName("page1", "page1 param")
//带回调跳转，在方针页封闭后获取回来信息
this.navPathStack.pushPathByName("page1", "page1 param",(popInfo)=>{
  console.log('Pop page name is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result))
})
//跳转并获取跳转成果信息
this.navPathStack.pushDestination({name:"page1",param:"page1 param"})
  .then(()=>{
    console.info('success');
  })
  .catch((err:BusinessError)=>{
    console.info(`${err.code} - ${err.message}`);
  })


//替换当时页面
this.navPathStack.replacePath({ name: "page1", param: "page1 param" })


//回来前一个页面
this.navPathStack.pop()
//回来到指定页面
this.navPathStack.popToName("page1")


//删去栈中一切name=page1的页面
this.navPathStack.removeByName("page1")
//删去栈中指定索引的页面
this.navPathStack.removeByIndexes([1,2])


//获取page1页面的参数
this.navPathStack.getParamByName("page1")
//一切栈中索引1的页面参数
this.navPathStack.getParamByIndex(1)
//一切page1页面的索引调集
this.navPathStack.getIndexByName("page1")

子页面
子页面有容器 NavDestination 包裹，能够设置生命周期，独立的标题栏，菜单栏等特点，运用办法与navigation相同，其间mode特点能够指定页面类型。

页面类型：

规范类型：mode为NavDestinationMode.STANDARD，为默许类型，生命周期跟从其在NavPathStack页面栈中的方位改动而改动。
弹窗类型：mode为NavDestinationMode.DIALOG，显现为通明窗体，显现和消失时不会影响基层规范类型页面的显现和生命周期。

页面生命周期
Navigation作为路由容器，其生命周期承载在NavDestination组件上，以组件事情的方式敞开。
● aboutToAppear和aboutToDisappear是自定义组件的生命周期
● OnAppear和OnDisappear是组件的通用生命周期
● 其他六个生命周期为NavDestination独有

@Component
export struct PageTwo {
  @Consume('navPathStack') navPathStack: NavPathStack

  build() {
    NavDestination() {
      Column() {
        Text("page2").geometryTransition("text2")
      }.width('100%').height('100%')
    }.title("Page2")
  }
}

路由阻拦
NavPathStack供给了setInterception办法，用于设置Navigation页面跳转阻拦回调。该办法需求传入一个NavigationInterception方针。
NavigationInterception包括三个回调函数

willShow：页面跳转前回调，答应操作栈，在当时跳转收效。
didShow：页面跳转后回调，在该回调中操作栈会在下一次跳转收效。
modeChange：Navigation单双栏显现状况产生改变时触发该回调。
无论是哪个回调，在进入回调时页面栈都现已产生了改动。

this.navPathStack.setInterception({
  willShow: (_from, _to, _operation, _animated) => {
    if (typeof _to === "object") {
      let target = _to as NavDestinationContext
      if (target.pathInfo.name == "page1") {
        target.pathStack.pop()
        target.pathStack.pushPath({ name: "page2" })
      }
    }
  }
})

本文的技术设计和完成都是根据作者工作中的经验总结，如有过错，请留言纠正，谢谢。