鸿蒙学习笔记一：页面跳转及传参

1：page级页面跳转传参问题

官方文档链接：https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_PageRouter

官方文档上的页面跳转传参方法如下：

@State src: string = router.getParams()?.[CommonConstants.SECOND_SRC_PARAM];

实际操作时按照官方文档上的写法会报编译错误：

image.png

按照网上的写法也会报错：

image.png

正确的写法如下：

@State srcParams : string = (router.getParams() as object) ['src111'];

2：Ability及页面跳转传参问题

官方文档链接：https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_About-Stage-Ability

官方文档上的页面跳转时获取context的方法如下，这种方法编译报错，应该是API过时了：

const context = getContext(this) as AppContext.UIAbilityContext

正确获取context的方法及跳转页面并传参的代码如下：

Button('跳转到详情页面')
          .onClick(()=>{
            const context = getContext(this) as common.UIAbilityContext
            const want : Want = {
              bundleName : getContext(context).applicationInfo.name,
              abilityName : "DetailAbility", //这里要注意，只能是页面名称，不能带后缀，也不能写全路径或半路径
              parameters : {
                param : "这是参数"
              }
            }
            context.startAbility(want)
          })

Ability中获取参数并将参数写入AppStorage，只有这样Ability的子页中才能获取到传参

//Ability的onCreate()方法
onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    let p  = (want.parameters as  Record<string, Object>)['param']
    AppStorage.setOrCreate("param", p)
  }

子页代码如下：

@Entry
@Component
struct DetailPage {
  @State message: string = '这里是详情页面';
  @State param1 : string = AppStorage.get('param') as string

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


        Text(this.param1)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}