[Harmony]Router跳转新页面和关闭回传数据

风浅月明2025-11-29 11:15

使用router.pushUrl跳转新页面，在onPageShow方法接收后面页面的回调。后面页面中，使用router.back关闭页面和回传数据。

注意onPageShow方法不执行原因：

若当前组件未通过router.pushUrl导航或未在pages.json中配置为路由页面，onPageShow不会触发。

自定义组件默认无页面生命周期，需显式声明@Entry装饰器。

MFRechargeAddMemberView

TypeScript 复制代码

export interface MFRechargeAddMemberParams {
  inputSubmit?: boolean // 输入提交
  inputPassword?: string // 输入的密码
}

@Entry
@Component
struct MFRechargeAddMemberView {
  @State saveZFMMText: string = '' // 支付密码 

  onPageShow() {
    // 后面页面的回调
    const params = this.getUIContext().getRouter().getParams() as MFRechargeAddMemberParams;
    if (params?.inputSubmit == true) {
      let pw = params.inputPassword
      if (pw != undefined && !isBlank(pw)) {
        this.saveZFMMText = pw
      } else {
        this.saveZFMMText = ''
      }
    }
  }

  build() {
    Column() {
        Button('支付密码设置') 
        .onClick(() => {
           this.tapPayPassword()
        })
    }
    .width('100%')
    .height('100%')
  }

  // 支付密码设置
  private tapPayPassword() {
    this.getUIContext().getRouter().pushUrl({
      url: 'pages/features/memberRecharge/MFPayPasswordSetView',
      params: {
        parIsEdit: false,
      }
    }, router.RouterMode.Standard, (err) => {
      if (!err) {
        //console.log('pushUrl成功')
      }
    })
  }
  
}

MFPayPasswordSetView

TypeScript 复制代码

export interface MFPayPasswordSetParams {
  parIsEdit: boolean,
}

@Entry
@Component
struct MFPayPasswordSetView {
  @State isEdit: boolean = false
  
  @State private usePassword: string = ''

  aboutToAppear() {
    const params = this.getUIContext().getRouter().getParams() as MFPayPasswordSetParams;
    if (params) {
      this.isEdit = params.parIsEdit
    }
  }

  build() {
    Column() {
       Button('返回') 
        .onClick(() => {
            //this.getUIContext().getRouter().back();
            this.getUIContext().getRouter().back({
              url: 'pages/features/memberRecharge/MFRechargeAddMemberView',
              params: {
                inputSubmit: true,
                inputPassword: this.usePassword
              }
            })
        })
    }
    .justifyContent(FlexAlign.Start)
    .width('100%')
    .height('100%')
    .onAppear(()=>{

    })
  }

main_pages.json

TypeScript 复制代码

{
  "src": [
    "pages/Index",

    "pages/features/memberRecharge/MFRechargeAddMemberView",
    "pages/features/memberRecharge/MFPayPasswordSetView",
  ]
}