HarmonyOS开发组件基础

个人简介

👨‍💻‍个人主页：魔术师

📖学习方向：主攻前端方向，正逐渐往全栈发展

🚴个人状态：研发工程师，现效力于政务服务网事业

🇨🇳人生格言： "心有多大，舞台就有多大。"

📚推荐学习： 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒Three.js 🍇鸿蒙开发

🪧使用备注：仅供学习交流严禁用于商业用途，若发现侵权内容请及时联系作者

📤更新进度：持续更新内容

🤙个人名片：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧

HarmonyOS开发组件基础目录

文章目录

- 个人简介
- HarmonyOS开发组件基础目录
- 组件基础
- - [1. 组件-什么是ArkTS](#1. 组件-什么是ArkTS)
  - [2. 基础-组件结构](#2. 基础-组件结构)
  - [3. 基础-系统组件(ArkUI)](#3. 基础-系统组件(ArkUI))
  - [4. 练习案例](#4. 练习案例)

组件基础

1. 组件-什么是ArkTS

ArkTS是HarmonyOS优选的主力应用开发语言。

ArkTS围绕应用开发在TypeScript（简称TS）生态基础上做了进一步扩展，继承了TS的所有特性，是TS的超集。

2. 基础-组件结构

ArkTS通过装饰器 @Component 和 @Entry 装饰 struct 关键字声明的数据结构，构成一个自定义组件。

自定义组件中提供了一个 build 函数，开发者需在该函数内以链式调用的方式进行基本的 UI 描述，UI 描述的方法请参考 UI 描述规范。

页面组件

javascript 复制代码

@Entry
@Component
struct Index {
  // 工程默认显示 `Index` 页面组件
  // build 是声明UI的位置
  build() {
    Text('页面组件')
  }
}

自定义组件

javascript 复制代码

// 定义 `Footer` 组件
@Component
struct Footer {
  build() {
    Text('自定义组件')
  }
}

@Entry
@Component
struct Index {
  build() {
    Column(){
      // 使用 `Footer` 组件
      Footer()
    }
  }
}

注意: 为了更好维护，自定义组件通常会新建一个文件 Footer.ets，通过模块化语法导出导入(默认|按需)使用。

3. 基础-系统组件(ArkUI)

常用系统组件 Text Column Row Button TextInput 更多组件

Text 文本组件
Column 列组件，纵向排列，Flex布局主轴是Y
Row 行组件，横向向排列，Flex布局主轴是X
Button 按钮组件
InputText 输入框组件

实现一个简易登录界面：

javascript 复制代码

@Entry
@Component
struct Index {
  @State
  phone:string = '18852638009'
  yzm:string= 'ws34'
  build() {
    Column(){
      // 手机号
      Row(){
        Text('手机号：')
        TextInput({text:this.phone, placeholder: '请输入手机号'})
          .placeholderColor('red')
      }
      // 验证码
      Row(){
        Text('验证码：')
        TextInput({text:this.yzm, placeholder: '请输入验证码'})
          .maxLength(4)
      }
      // 验证码
      Row(){
        Text('忘记密码')
          .fontColor('#FF2B71F3')
      }
    // 登录，注册按钮
      Row(){
        Button('注册')
          .backgroundColor('#c3c4c5')
          .onClick(()=>{
            console.log('注册')
          })
        Button('登录')
          .onClick(()=>{
            console.log('登录')
          })
      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#ffececec')
  }

}

注意: ArkUI 组件一般都是 Flex 模式，大部分布局可以由行和列组成。

4. 练习案例

实现登录表单数据收集、重置、模拟提交。

javascript 复制代码

import promptAction from '@ohos.promptAction'
@Entry
@Component
struct Index {

  @State
  mobile: string = ''
  @State
  code: string = ''

  build() {
    Column(){
      Row(){
        Text('手机号')
        TextInput({ text: this.mobile })
          .onChange((value)=>this.mobile = value)
      }
      Row(){
        Text('验证码')
        TextInput({ text: this.code })
          .onChange((value)=>this.code = value)
      }
      Row(){
        Button('重置')
          .backgroundColor('#ccc')
          .onClick(()=>{
            this.mobile = ''
            this.code = ''
          })
        Button('登录')
          .onClick(()=>{
            if (this.mobile && this.code) {
              promptAction.showToast({ message: `${this.mobile} 登录成功` })
            } else {
              promptAction.showToast({ message: `请输入手机号或验证码` })
            }
          })
      }
    }
  }
}