HarmonyOS应用开发-参数传递（router）

目录

前言

参数传递

一级页面

代码演示：

二级页面

代码演示：

整体效果图：

---

前言

关于API9到API12的升级，我想唠嗑几句，API9的传参通过router跳转，跳转路径上通过params携带参数，在二级页面接收，唠叨到这里似乎一切都没有问题，API12虽说新添了一个路由组件 (Navigation)也能传参，而且官网也推荐新路由传参，好话说，没有问题就是最大的问题【阴笑】。API9的传参想必各位都知道，其中我最爱的是API9传参可以通过params携带之前封装好的数据（数组），全部携带到二级页面中去，在二级页面，只需要简单的接收参数就ok了。API12就恰恰相反，不能携带整个数组了（个人发现不能，如有相反已经，请赐教），这您受得了吗？API12传参尽管您之前已经封装好了数组、类型也定义了，在一级页面传参时params也需要携带参数类型，同样在二级页面接收参数时，也需要编写接受数据的类型，这就很苦恼。注意：以上唠嗑只是唠嗑，不携带任何反面情绪，本人已了解API更新换代为了更规范化，更符合当代IT行业的需求和传统。

接下来正式进入API12的传参。

参数传递

通常需要在不同的页面之间跳转，有时还需要将数据从一个页面传递到另一个页面

一级页面

携带参数：跳转时需要传递一些数据给目标页面，则可以在调用Router模块的方法时，添加一个params属性，并指定一个对象作为参数跳转时传递一些数据给目标页面，则可以在调用Router模块的方法时，添加一个params属性，并指定一个对象作为参数

代码演示：

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

@Entry
@Component
struct APage {
  @State message: string = '一级页面的参数';//设置需要传递的参数

  build() {
    RelativeContainer() {
      Text('点击传参到二级页面')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .onClick(()=>{
          router.pushUrl({
            url:'pages/BPage',
            params:{
              message:this.message//参数主体
            }
          }
          )
        })
    }
    .height('100%')
    .width('100%')
  }
}

二级页面

传递参数：在目标页面中，可以通过调用Router模块的getParams方法来获取传递过来的参数。

代码演示：

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

class RouTmp{//上一级参数类型
  message:string=''
}
const params: RouTmp = router.getParams() as RouTmp; // 获取传递过来的参数对象
@Entry
@Component
struct BPage {
  @State message: string = 'Hello World';

  build() {
    RelativeContainer() {
      Text(params.message)//导入参数对象
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }
    .height('100%')
    .width('100%')
  }
}

到此演示了string类型的传参，Resource、number、boolean类型的都是相同的写法，相较于API9会稍微麻烦一丢丢，好了接下来展示最后效果了

整体效果图：