鸿蒙项目篇-22-项目功能结构说明-写子页面和导航页面

项目功能结构【预览】

播放页【预览】

播控中心页【预览】

项目功能结构分析

[官方推荐 navigation 组件实现](#官方推荐 navigation 组件实现)

分析1

分析2

分析3

[Navigation 组件官网实现参考](#Navigation 组件官网实现参考)

代码实现

步骤1、先写子页面（NavDestination）

广告页代码实现

布局页代码实现

步骤2、子页面配置信息（routerMap）

步骤3、写导航页（Navigation）

项目功能结构【预览】

播放页【预览】

播控中心页【预览】

也能控制音乐的播放等功能

项目功能结构分析

代码实现推荐官方推荐的组件 navigation 组件

分析1

首页放Navigation组件

它有两个子页面，分别为广告页、布局页，分别放 NavDestination组件

Navigation组件的跳转，其实就是跳转到带有 NavDestination组件的页面

分析2

有了两个子页面，分别为广告页、布局页，

我们要把的页面信息添加到配置文件

分析3

首页、广告页、布局页是 3个独立的页面，如何用 Navigation 做整体管理呢？

这3个页面，我们用一个对象进行管理，我们可以称之为控制跳转的对象。

它包括：你是哪个页面、哪些页面能跳转、如何跳转、跳转方式等等

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-navigation-navigation#%E7%B3%BB%E7%BB%9F%E8%B7%AF%E7%94%B1%E8%A1%A8

代码实现

先子页，再导航页，最后添加配置信息

步骤1、先写子页面（NavDestination）

广告页代码实现

新建 ArkTS File

TypeScript 复制代码

// 跳转页面入口函数
@Builder
export function StartBuilder() {
  Start();//调用 Start 组件
}

@Component
struct Start {
  //控制跳转的对象
  pathStack: NavPathStack = new NavPathStack();

  build() {
    NavDestination() {
    }
    .title('广告页')
    //Navigation组件准备好以后，放入 NavPathStack（控制跳转的对象）
    .onReady((context: NavDestinationContext) => {
      this.pathStack = context.pathStack;
    })
  }
}

布局页代码实现

复制一份广告页代码，相关名称修改即可。

如这里：全局搜索 Start 替换为 Layout 等等

TypeScript 复制代码

// 跳转页面入口函数
@Builder
export function LayoutBuilder() {
  Layout();//调用 Layout 组件
}

@Component
struct Layout {
  //控制跳转的对象
  pathStack: NavPathStack = new NavPathStack();

  build() {
    NavDestination() {
    }
    .title('布局页')
    //Navigation组件准备好以后，放入 NavPathStack（控制跳转的对象）
    .onReady((context: NavDestinationContext) => {
      this.pathStack = context.pathStack;
    })
  }
}

步骤2、子页面配置信息（routerMap）

1、在跳转目标模块的配置文件 module.json5 添加路由表配置：

src/main/module.json5

TypeScript 复制代码

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

2、添加完路由配置文件地址后，需要在工程resources/base/profile中创建route_map.json文件。添加如下配置信息：

TypeScript 复制代码

{
  "routerMap": [
    {
      "name": "Start",
      "pageSourceFile": "src/main/ets/pages/Start.ets",
      "buildFunction": "StartBuilder",
      "data": {
        "description" : "this is Start"
      }
    },
    {
      "name": "Layout",
      "pageSourceFile": "src/main/ets/pages/Layout.ets",
      "buildFunction": "LayoutBuilder",
      "data": {
        "description" : "this is Layout"
      },
  ]
}

配置说明如下：

配置项	说明
name	可自定义的跳转页面名称。
pageSourceFile	跳转目标页在包内的路径，相对src目录的相对路径。
buildFunction	跳转目标页的入口函数名称，必须以@Builder修饰。
data	应用自定义字段。可以通过配置项读取接口getConfigInRouteMap获取。

TypeScript 复制代码

  @Entry
  @Component
  struct Index {
    pageStack : NavPathStack = new NavPathStack();

    build() {
      Navigation(this.pageStack){
      }.onAppear(() => {
        this.pageStack.pushPathByName("PageOne", null, false);
      })
      .hideNavBar(true)
    }
  }

同一个 Navigation 组件控制跳转的对象，必须是同一个。

所以我们把 pageStack 都改为 pathStack

TypeScript 复制代码

@Entry
@Component
struct Index {
  pathStack : NavPathStack = new NavPathStack();

  build() {
    Navigation(this.pathStack){
    }.onAppear(() => {
      this.pathStack.pushPathByName("PageOne", null, false);
    })
    .hideNavBar(true)
  }
}

这个时候我们导航页和子页，都有 pathStack 对象了，

Navigation 组件用上了这个 pathStack 对象了

Navigation(this.pageStack)

那就代表这个对象控制了导航页和子页

复制代码

onAppear 是Navigation组件要显示的时候调用
//跳转到 Start 广告页（默认跳转的页面）
this.pathStack.pushPathByName("Start", null, false);
//不会把自己放到控制跳转的对象里面
//视觉效果->点返回的时候不会返回到这个导航页（这里导航页即 Index页）
hideNavBar(true)

预览器不支持 navigation，模拟器支持

pushPathByName 支持返回

TypeScript 复制代码

@Entry
@Component
struct Index {
  pathStack : NavPathStack = new NavPathStack();

  build() {
    Navigation(this.pathStack){
    }.onAppear(() => {
      //跳转到 Start 广告页（默认跳转的页面）
      this.pathStack.pushPathByName("Start", null, false);
    })
    //不会把自己放到控制跳转的对象里面
    //视觉效果->点返回的时候不会返回到这个导航页（这里导航页 即 Index页）
    .hideNavBar(true)
  }
}

注意：千万不要背代码，知道大致流程即可