IMAU鸿蒙北向开发-2023年9月5日学习日志

1. 5种调试方式

1.1 Previewer

在侧边 Previewer 选项卡内可以预览Entry。

如果要单独预览组件,可以在给组件加@Preview 装饰器

1.2 Local Emulator(本地模拟)

1.3 Remote Emulator(远程模拟)

使用时需要登录华为开发者账号。

1.4 Remote Device (远程真机)

上图分别对应Local Emulator、Remote Emulator、Remote Device

1.5 本地真机

2. 属性方法和事件方法


ts 复制代码
@Entry // 将这个组件作为入口
@Component // @Component 加上 struct 关键字来定义一个组件
struct Index {
  @State message: string = 'Hello World'

  build() {
    Column({space: 5}) {
      Text('Hello Harmony!')
        .fontColor(Color.Red) // 设置属性方法
        .fontSize(30)
      Button()
        .fontColor(Color.Black)
        .onClick(() => { // 设置事件方法
          console.info("-----> button is clicked")
        })
      Component1()
    }
  }
}

3. 源码简要分析

4. UI动态更新

@State 装饰器是 HaromonyOS 中用来标识状态变量的装饰器。使用 @State 装饰器可以将变量标记为状态变量,并且在变量值发生改变时可以自动触发组件的重新渲染,从而保持界面与状态的一致性。

具体来说,使用 @State 装饰器会将变量标记为响应式变量,在变量值发生改变时,会通过调用 setState 方法来触发组件的重新渲染。在编写鸿蒙应用时,可以利用 @State 装饰器来标记需要动态变化的状态变量,这样可以更方便地实现组件的动态更新。

使用 @State 装饰器时需要注意以下几点:

  1. @State 装饰器只能用于类组件中的字段上。

  2. 被 @State 装饰器标记的变量不应该被直接修改,而是应该通过调用 setState 方法来进行更新。

  3. 在组件的构造函数中,需要通过调用 bind 方法将 this 绑定到 setState 中,否则在调用 setState 时会出现错误。

5. @Style 装饰器

ts 复制代码
// 公共属性和专有属性
@Styles function myText1() {
  .backgroundColor(Color.Gray)
  .width(400)
  .height(100)
  .padding({
    left: 50,
  })
}

// 组件的专有属性,扩展组件的属性
@Extend(Text) function myText2(size: number) {
  .fontSize(size)
  .fontSize(Color.Blue)
}

使用

ts 复制代码
@Entry
@Component
struct Page4 {
  build(){
    Column() {

      Text("Hello Harmony")
        .fontSize(30)
        .fontColor("#0000ff")
        .myText1()

      Text("Hello Harmony2")
        .fontSize(30)
        .fontColor("#0000ff")
        .myText1()

      Text("Hello Harmony3")
        .fontSize(30)
        .fontColor("#0000ff")
        .myText1()
    }
  }
}

6. @Entry的生命周期

  • 页面加载的时候,会依次调用:aboutToAppear() --> onPageShow()
  • 点击手机返回,会依次调用:onBackPress() ---> aboutToDisappear()
  • 再次打开桌面应用,会依次调用:aboutToAppear() ---> onPageShow()
  • 点击手机回到桌面按钮,会依次调用:onPageHide(), 再次打开的时候只调用 onPageShow()
ts 复制代码
// 组件的生命周期方法
@Entry
@Component
struct Page5 {
  @State message: string = 'Hello World'
  private tag: string = "-------->"

  aboutToAppear() {
    // 在build之前调用
    console.info(`${this.tag}, aboutToAppear()方法被调用了`)
  }

  build() {

    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Blank()
      }
      .width('100%')
    }
    .height('100%')
  }

  aboutToDisappear() {
    console.info(`${this.tag}, aboutToDisappear()方法被调用了`)

  }

  onPageShow() {
    console.info(`${this.tag}, onPageShow()方法被调用了`)

  }

  onPageHide() {
    console.info(`${this.tag}, onPageHide()方法被调用了`)

  }

  onBackPress() {
    console.info(`${this.tag}, onBackPress()方法被调用了`)

  }
}

7. 基础组件介绍

7.1 Text

7.2 TextInput




8. router 路由跳转

ts 复制代码
import router from '@ohos.router';

跳转

ts 复制代码
router.pushUrl({
  url: "pages/Page5"
})
相关推荐
做科研的周师兄8 分钟前
【机器学习入门】7.4 随机森林:一文吃透随机森林——从原理到核心特点
人工智能·学习·算法·随机森林·机器学习·支持向量机·数据挖掘
QZ_orz_freedom22 分钟前
学习笔记--文件上传
java·笔记·学习
deng-c-f25 分钟前
Linux C/C++ 学习日记(24):UDP协议的介绍:广播、多播的实现
linux·网络·学习·udp
Industio_触觉智能39 分钟前
开源鸿蒙6.1和8.1版本被确定为LTS建议版本,最新路标正式发布!-转自开源鸿蒙OpenHarmony社区
harmonyos·openharmony·开源鸿蒙
爱吃甜品的糯米团子1 小时前
Linux 学习笔记之 VI 编辑器与文件查找技巧
linux·笔记·学习
im_AMBER1 小时前
数据结构 03 栈和队列
数据结构·学习·算法
我先去打把游戏先2 小时前
VSCode通过SSH连接到Ubuntu虚拟机失败“找不到ssh安装”问题解决
笔记·vscode·单片机·嵌入式硬件·学习·ubuntu·ssh
●VON2 小时前
重生之我在大学自学鸿蒙开发第五天-《实战篇》
学习·华为·云原生·harmonyos·鸿蒙
QiZhang | UESTC2 小时前
学习日记day
学习
饮马长城窟2 小时前
华为Asend NPU 大模型W8A8量化调优
华为