#夏日挑战赛#ArkUI路由跳转 原创 精华

发布于 2022-7-13 17:33
浏览
1收藏

「本文正在参加星光计划3.0–夏日挑战赛」

今天的这一节,我们来看一下路由跳转,目前有两种方式

  • Navigator组件
  • 页面路由接口router

首先看一下目录结构

#夏日挑战赛#ArkUI路由跳转-开源基础软件社区

注意,使用这两种方式的时候,我们需要在config.json中配置一下,,否则,你会发现报这个错

 [manifest_router.cpp(GetPagePath)-(0)] [Engine Log] can't find this page <private> path
 "pages": [
          "pages/index",
          "common/router"
        ],

做完这个准备,我们就开始今天的内容:

首先我们来看Navigator组件

Navigator组件用于跳转到App内的其它页面。

新建一个router.ets页面,初始代码如下:

@Entry
@Component
struct Router {
  @State message: string = '这里是坚果小课堂'


  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold).onClick(()=>{
         

        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

接下来,我们就来看一下如何挑战到这个页面。

只需要用Navigator组件包裹就可以,

 (value?: { target: string; type?: NavigationType }): NavigatorAttribute;

然后我们看一下需要传的参数有哪些,概括起来就是:

 /**
       * 接口:Navigator(value?: {target: string, type?: NavigationType})
       *    target:string 指定跳转目标页面的路径。
       *    type:NavigationType 默认值Push 指定路由方式。
       *        NavigationType.Push 跳转到应用内的指定页面。
       *        NavigationType.Replace 用应用内的某个页面替换当前页面,并销毁被替换的页面。
       *        NavigationType.Back 返回上一页面或指定的页面。
       */

下面是完整的代码

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Navigator({ target: "common/router"}) {

          Text(this.message)
            .fontSize(50)
            .fontWeight(FontWeight.Bold)

        }
      }
      .width('100%')
    }
    .height('100%')
  }
}

好的,上面的这种方式到这就结束了,接下来,我们用第二种方式

页面路由router

使用router接口前需要导入模块,代码如下:

import router from '@system.router'

然后使用

 router.push({ // 使用push模式
            uri:  "common/router", // 转向的目标页面
           
          });

就可以完成路由跳转,我们看一下push方法提供的两种参数,

  • 转向的目标页面
  • 要传递的参数
export interface RouterOptions {

  uri: string;

  params?: Object;
}

我们利用通用事件onclick,绑定一个点击事件,下面的完整的代码,这次的区别在于,我们给目标页面传递一个参数,并且接受到它

这是完整代码

import router from '@system.router'

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        //第一中跳转方式
        Navigator({ target: "common/router", type: NavigationType.Push }) {

          Text("第一种跳转方式")
            .fontSize(50)
            .fontWeight(FontWeight.Bold)

        }
        Text("第二种跳转方式")
          .fontSize(50)
          .fontWeight(FontWeight.Bold).onClick(()=>{
          router.push({ // 使用push模式
            uri:  "common/router", // 转向的目标页面
            params: { // 同时传参
              data: '上一个页面的数据',
            },
          });
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

那么我们既然把数据已经传递过去了,如何接受呢?这又是一个很重要的知识点。

router.getParams()接收上一个页面传递的参数 @State info: string = router.getParams()

这里需要注意的router.getParams()后面的参数要和前面的一致。

// @ts-nocheck

import router from '@system.router'
@Entry
@Component
struct Router {
  @State message: string = '这里是坚果小课堂';

  // 通过router接收上一个页面传递的参数
  @State info: string = router.getParams().data;
  build() {

    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold).onClick(()=>{


        })
        Text(this.info)
          .fontSize(50)
          .fontWeight(FontWeight.Bold).onClick(()=>{
router.back();

        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

#夏日挑战赛#ArkUI路由跳转-开源基础软件社区

我们如果要返回上一级页面该如何做呢,我继续教大家

router.back();

好的极简入门到这就完成了,

最后介绍2个组件

Hyperlink组件

interface HyperlinkInterface {
  /**
   * Return to get Hyperlink.
   * adress: Web page redirected by the hyperlink component.
   * content: Hyperlinks in the hyperlink component display text.
   * @since 7
   */
  (address: string | Resource, content?: string | Resource): HyperlinkAttribute;
}

其中接口参数"address"对标"href",可选参数content对标"title"。

示例代码如下:

      /**
       * 接口:Hyperlink(address: string, content?: string)
       *    address: string hyperlink组件跳转的网页。
       *    content: string hyperlink组件中超链接显示文本。
       */
        Hyperlink('https://space.bilibili.com/480883651', ) {
        Text("坚果").fontSize(50)
            .fontWeight(FontWeight.Bold)
        }

用过之后发现可以跳转到指定网页。

#夏日挑战赛#ArkUI路由跳转-开源基础软件社区

Web组件

提供具有网页显示能力的Web组件。访问在线网页时需添加网络权限:ohos.permission.INTERNET

  Web({ src:
        $rawfile("index.html"), controller: this.controller })

使用很简单

![image-20220713172404957](…/…/…/…/Library/Application Support/typora-user-images/image-20220713172404957.png)

好的,今天就是简单的路由跳转的两种方式,顺便了解了一下Hyperlink组件和Web组件

都是最简单的一个入门,

参考文档

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
5
收藏 1
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐