鸿蒙开发实战-简明易懂的基础指南

最新推荐文章于 2024-09-27 14:08:58 发布

不停留的码牛

最新推荐文章于 2024-09-27 14:08:58 发布

阅读量815

点赞数 6

分类专栏：鸿蒙 HarmonyOS OpenHarmony 文章标签： harmonyos 华为鸿蒙开发鸿蒙 HarmonyOS 鸿蒙OS 鸿蒙应用开发

本文链接：https://blog.csdn.net/m0_64422261/article/details/139531791

版权

鸿蒙同时被 3 个专栏收录

166 篇文章 4 订阅

订阅专栏

HarmonyOS

164 篇文章 1 订阅

订阅专栏

OpenHarmony

154 篇文章 1 订阅

订阅专栏

1.认识页面代码结构

在内部声明的变量使用的时候需要this.变量，在外部声明的变量类似于全局变量，不需要带this。

// 引入模块
import router from '@ohos.router'
// 外部变量
let name:string = '雪天前端'

@Entry
@Component
struct Index {
  // 内部变量 前面要加 @State 否则没有响应
  @State message: string = 'Hello World'

  build() {
    // 行
    Row() {
      // 列
      Column() {
        // 文本组件
        Text(this.message)
          // 组件属性样式
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          // 组件事件方法
          .onClick(()=>{
            // 逻辑（路由跳转）
            router.pushUrl({
              url: "../pages/B",
              params: {
                data: "跳转路径带的参数"
              }
            })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

2.页面的生命周期

类似于小程序的生命周期：显示之前，页面显示，页面隐藏，页面返回（真机的返回按钮触发。并非路由触发），组件销毁

@Entry
@Component
struct Index {

  aboutToAppear(){
    console.log('组件显示之前类似onload')
  }

  aboutToDisappear(){
    console.log('组件销毁')
  }

  onPageShow(){
    console.log('show')
  }

  onPageHide(){
    console.log('hide')
  }

  onBackPress(){
    console.log('back')
  }


  build() {
    
  }
}

3.全局共享数据

用于设置全局共享的数据，在任意地方都可以获取的数据，类似于浏览器的本地储存。注意：模拟器上获取数据为undefind，需真机测试。

在EntryAbility.ts这个文件下设置：

设置代码：

// 设置全局共享数据
AppStorage.SetOrCreate('gloableData','我是全局共享数据');

其他页面获取全局数据代码：

// 获取全局共享数据
let appData:any = AppStorage.Get('gloableData')

4.条件渲染和循环渲染

和JavaScript的一样，就是if和forEach

条件渲染：

@Entry
@Component
struct Index {
  @State isShow:Boolean = true
  build() {
    // 行
    Row() {
      // 列
      Column() {
        if(this.isShow){
          Text('真真真')
            .fontSize(50)
        }else{
          Text('假假假')
            .fontSize(50)
        }
      }
      .width('100%')
    }
    .height('100%')
  }
}

循环渲染：

@Entry
@Component
struct Index {
  @State list:any = ['张三','李四','王五','赵六']
  build() {
    // 行
    Row() {
      // 列
      Column({space:10}) {
       ForEach(this.list,(item,index)=>{
         // 这里放循环体 如列表项等
         Text(index+'---'+item).fontSize(30)
       })
      }
      .width('100%')
    }
    .height('100%')
  }
}

5.监听watch

@Watch，作用类似vue的监听属性，用来监听一个数据。

用法：一个装饰器，类似于@state，被@Watch装饰的数据，他的值发生改变就会触发某个函数方法。

代码：

@Entry
@Component
struct Index {
  // 申明并监视num变量
  @State @Watch('change') num:number = 1

  // num改变就会触发change方法
  change(){
    console.log('num改变了')
  // 当num发生变化时 做什么
  }

  build() {
    // 行
    Row() {
      // 列
      Column({space:10}) {
        // 点击文本改变num的值 触发change方法
        Text('哈哈').onClick(()=>{
          this.num ++
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

6.自定义组件构建函数

@Builder function name(){ }

在页面里面的写个函数，函数里面可以是组件和方法，然后在页面需要的地方去调用这个函数，就可以展示这种函数的内容在需要的地方。类似于页面内的自定义组件。

这个函数可以写在原组件里面，也可以写在原组件外面，区别就是，写在组件里面的要调用时需要加this，且只能在这个组件里面调用。而定义在外部的，可以在页面任意地方调用。

代码（内部）：

@Entry
@Component
struct Index {
  build() {
    // 行
    Row() {
      // 调用函数 即可显示函数里面的内容在这里
      // 既然是函数 就可以传参
      this.myFun('哈哈')
    }
  }

  // 函数 自定义组件构建函数
  @Builder myFun(text){
    Text(text)
      .fontSize(30).width('100%').height('100%')
      .textAlign(TextAlign.Center)
  }
}

代码（外部）：

// 外部函数 自定义组件构建函数
@Builder function myFun(text){
  Text(text)
    .fontSize(30).width('100%').height('100%')
    .textAlign(TextAlign.Center)
}

@Entry
@Component
struct Index {
  build() {
    // 行
    Row() {
      // 外部不用this 就是全局的了
      myFun('哈哈')
    }
  }
}

7.重用样式（类似class类）

@Styles function name(){}
多次使用的样式都放在这个函数中，到时候直接调用，

类似于css的class样式类(这种样式里只能写通用的样式，如宽高背景色等)

代码（这个也可以写在内部和外部）：

// 外部样式函数 类似于css的class样式类(这种样式里只能写通用的样式，如宽高背景色等)
// 多次使用的样式都放在这个函数中 到时候直接调用
@Styles function myClass(){
  .width('200').height('100').backgroundColor('#ccc')
}

@Entry
@Component
struct Index {
  build() {
    // 行
    Row() {
      // 调用样式函数
      Text('样式函数').myClass()
    }.height('100%')
  }
}

8.某个内置组件的样式函数

@Extend(组件名).function fontClass(color,fontSize){ }

作用是给组件写样式，把某个内置组件使用的样式统一写在这个函数里面，用到调用即可。

此方式可以传参数，例如宽高背景色字体的值都可以用参数接收展示。

代码（这个也可以写在内部和外部）：

// 专门给某个组件的样式 例如：文本组件
// 且这个可以传参
@Extend(Text) function fontClass(color,fontSize){
  .fontColor(color).fontSize(fontSize)
}

@Entry
@Component
struct Index {
  build() {
    // 行
    Row() {
      // 调用样式函数 并传参数
      Text('样式函数').fontClass('red',30)
    }.height('100%')
  }
}

8.常用事件

点击事件-触摸事件-键盘事件

代码：

let  keyInfo:any = ''
@Entry
@Component
struct Index {

  build() {
    // 行
    Row() {
      // 点击
      Button('Click')
        .onClick((event:ClickEvent)=>{
          console.log('Click',event)
        })
      // 触摸
      Button('Touch')
        .onTouch((event:TouchEvent)=>{
          console.log('Touch',event)
        })
      //按键 包含 按下和抬起
      TextInput()
        .onKeyEvent((event:KeyEvent)=>{
          if(event.type == KeyType.Down){
            console.log('按下')
          }else if(event.type == KeyType.Up){
            console.log('抬起')
            // 获取当前的按键信息
          keyInfo = 'code' + event.keyCode + '按键名' + event.keyText
            console.log(keyInfo)
          }

        })
    }.height('100%')
  }
}