11-鸿蒙4.0学习之页面之间的参数传递

11-鸿蒙4.0学习之页面之间的参数传递

方法一

params

// 传参页面
import router from '@ohos.router'

@Entry
@Component
struct LifeCycle1 {
   
  @State message: string = 'Hello World'
  @State isShow: boolean = false

  build() {
   
    Row() {
   
      Column({
     space: 20 }) {
   
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button('跳转界面')
          .onClick(() => {
   
            router.pushUrl({
   
              url: 'pages/LifeCycle2',
             params:{
   
               name:'小明',
               age:20
             }
            })
          })
        Button('切换')
          .onClick(() => {
   
            this.isShow = !this.isShow
          })
        Divider()
        if (this.isShow) {
   
          LifeCycle1_son()
        }

      }
      .width('100%')
    }
    .height('100%')
  }
  // 页面显示
  onPageShow() {
   
    console.log('page1……onPageShow')
  }
  // 页面隐藏
  onPageHide() {
   
    console.log('page1……onPageHide')
  }
  // 页面返回
  onBackPress() {
   
    console.log('page1……onBackPress')
  }
  aboutToAppear() {
   
    console.log('组件本身……aboutToAppear')
  }
  // 组件析构销毁时触发:删除  移出
  aboutToDisappear() {
   
    console.log('组件本身……aboutToDisappear')
  }
}

@Component
struct LifeCycle1_son {
   
  build() {
   
    Column() {
   
      Text('子组件').fontSize(50)
    }
  }
  // 组件渲染之前
  aboutToAppear() {
   
    console.log('LifeCycle1_son……aboutToAppear')
  }
  // 组件析构销毁时触发:删除  移出
  aboutToDisappear() {
   
    console.log('LifeCycle1_son……aboutToDisappear')
  }
}


接受参数页面

import router from '@ohos.router'

let name = router.getParams()['name'] as string

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

  build() {
   
    Row() {
   
      Column() {
   
        Text(name).fontSize(50)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button('返回第一个页面')
          .onClick(() => {
   
            router.back()
          })
      }
      .width('100%')
    }
    .height('100%')
  }
  // 页面显示
  onPageShow(){
   
    console.log('page2……onPageShow')
  }
  // 页面隐藏
  onPageHide(){
   
    console.log('page2……onPageHide')
  }
  // 页面返回
  onBackPress(){
   
    console.log('page2……onBackPress')
  }
}

// 应用程序之间数据共享
// AppStorage.Set(‘appName’,‘我是应用程序’)
AppStorage.SetOrCreate(‘appName’,‘我是应用程序所存储的数据’)

// 从应用对象身上取出数据
let appName:string = AppStorage.Get(‘appName’) as string

// 模拟器获取不到,真机可以显示出来

相关推荐

  1. 11-鸿蒙4.0学习页面之间参数传递

    2023-12-06 03:18:02       49 阅读
  2. 前端网页之间传递参数

    2023-12-06 03:18:02       39 阅读
  3. android与React Native之间传递参数

    2023-12-06 03:18:02       52 阅读
  4. C#面:列举ASP.NET页面之间传递几种方式

    2023-12-06 03:18:02       54 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-06 03:18:02       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-06 03:18:02       106 阅读
  3. 在Django里面运行非项目文件

    2023-12-06 03:18:02       87 阅读
  4. Python语言-面向对象

    2023-12-06 03:18:02       96 阅读

热门阅读

  1. RabbitMQ之ttl(过期消息)解读

    2023-12-06 03:18:02       58 阅读
  2. es常用查询编辑

    2023-12-06 03:18:02       49 阅读
  3. React-hook-form-mui (二):表单数据处理

    2023-12-06 03:18:02       52 阅读
  4. 零基础学Python的第六天||字符串(3)

    2023-12-06 03:18:02       62 阅读
  5. 从react到xflow

    2023-12-06 03:18:02       53 阅读
  6. Leetcode 216 组合总和 III

    2023-12-06 03:18:02       53 阅读
  7. k8s(二):Pod

    2023-12-06 03:18:02       55 阅读
  8. 50-75GHz大功率六倍频源设计

    2023-12-06 03:18:02       54 阅读
  9. 第七章 函数矩阵

    2023-12-06 03:18:02       51 阅读
  10. 网站安全攻防:降本增效的解决之道

    2023-12-06 03:18:02       64 阅读
  11. js数组合并的方法,以及各方法的区别

    2023-12-06 03:18:02       54 阅读
  12. react传值

    2023-12-06 03:18:02       49 阅读