鸿蒙应用开发-基础篇

一、开发准备

环境安装:b11et3un53m.feishu.cn/wiki/LGprwX...

DevEco Studio 常用快捷键

Ctrl+Alt+L:格式化代码

Shift+Tab:文字或者代码向左边缩进

Ctrl+B:快速打开光标处的类或方法

二、了解ArkTS语言

ArkTS开发与传统H5网页开发对比:

三、TypeScript基本语法

基本语法

1.变量声明

2.条件控制

3.循环迭代

四、函数

  • 箭头函数,是定义函数的一种简写写法

定义函数

五、类和接口

TypeScript具备面向对象编程的基本语法,例如 interface、class、enum等。也具备封装、继承、多态等面向对象基本特征。

  • 定义类、接口、枚举
ts 复制代码
// 定义枚举
enum Msg {
  // 给枚举项赋值,如果不赋值,默认项就是数字(0,1,2,...)
  HI = 'Hi',
  HELLO = 'hello'
}

// 定义接口
interface A {
  // 定义规则(声明一个方法)
  // 抽象方法接收枚举参数:没有方法体的方法叫抽象方法,凡是在接口或类中定义的方法不需要加function关键字
  say(msg: Msg): void
}

// 定义一个 B 类型,并实现 A 接口
class B implements A {
  // 实现 A 接口的方法
  say(msg: Msg): void {
    console.log(msg + ', I am B');
  }
}

// 类和接口之前是一种实现关系(父子关系)

// 初始化对象(相当于把 子类对象 赋值给 父类类型,多态)
let a: A = new B()
// 调用方法,传递枚举参数
a.say(Msg.HI)
  • 继承
ts 复制代码
// 定义矩形类
class Rectangle {
  // 成员变量(类中定义变量,不需要加关键字 let)
  private width: number
  private height: number

  // 构造函数(类的初始化方法)
  constructor(width: number, height: number) {
    this.width = width;
    this.height = height;
  }

  // 成员方法
  public area(): number {
    return this.width * this.height
  }
}

// 定义正方形
class Square extends Rectangle {
  constructor(side: number) {
    // 调用父类的构造方法
    super(side, side)
  }
}

let s = new Square(10)
console.log('正方形的面积为:' + s.area())

六、模块开发

模块开发

七、ArkUI组件

  • index.ets
ts 复制代码
// 装饰器(带@修饰)。可以用来装饰类结构、方法、变量,如:@Entry、@Component、@State等
@Entry // @Entry 标记当前组件是入口组件,即这个组件代表一个页面可以被独立访问显示。没有这个装饰器的组件就是普通组件,不能单独显示,只能被其它页面引用,做页面元素的封装(相当于子视图)
@Component // @Component 标记这个结构体是一个自定义组件

// 这个结构体在ArkTS中称为,自定义组件:可复用的UI单元
struct Index {
  // @State 用来标记一个变量是状态变量,值变化时会触发UI刷新
  // 声明式UI特点:状态数据变化驱动页面UI自动刷新
  @State message: string = 'Hello World'

  // 构建组件内容,UI描述:其内部以声明式方式描述UI结构
  build() {
    // 内置组件:ArkUI提供的组件
    // 容器组件:用来完成页面布局,例如:Row、Column
    // 基础组件:自带样式和功能的页面元素,例如:Text
    Row() {
      Column() {
        Text(this.message)
          // 属性方法:设置组件的UI样式
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          // 事件方法:设置组件的事件回调(传一个回调函数)
          .onClick(() => {
            // ...处理事件
            this.message = 'Hello ArkTS!'
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

1. Image组件

Image组件

  • 组件使用
ts 复制代码
// 需要配置网络访问权限,才能请求网络资源
Image('https://gbres.dfcfw.com/Files/picture/20240107/A647B2359640C398075289DFB100768F_w707h782.jpg')
  // 指定图片宽度,高度会自动按图片宽高比自动缩放
  .width(300) // 数字格式,如:300vp,会有一个默认单位vp(虚拟像素:不是真正屏幕像素,会根据设备像素密度进行换算,确保在不同设备上视觉大小一样)
  //.width('100%') // 字符串格式,如:'100%',百分比模式(根据设备大小自动伸缩)
  • 访问控制权限申请
    在module.json5文件中添加如下内容:
ts 复制代码
{
  "module": {
    // 配置权限(系统权限、用户权限)
    "requestPermissions": [
      {
        // 配置网络权限(属于系统权限,只需要配置name即可)
        "name": "ohos.permission.INTERNET"
      }
    ],
    ... ...
}

2. Text组件

Text组件

注意:base目录是默认目录,在读取本地资源文件String时,会优先匹配限定词目录(国际化),匹配不到再去base目录。

3. TextInput组件

TextInput组件

ts 复制代码
// 常见数据类型转换
let text = '200'
let num = parseInt(text) // 字符串 转 数字
let string = num.toFixed(0) // 数字 转 字符串(保留0位小数)

4. Button组件

Button组件

5. Slider组件

Slider组件

6. 页面布局组件

  • 容器(列容器,纵向布局,从上到下排列)

  • 容器(行容器,横向布局,从左到右排列)

  • 布局示例

    布局示例

对齐方式1

对齐方式2

  • justifyContent:子元素在主轴方向的对齐方式

    justifyContent(主轴方向的对齐方式)

  • alignItems:子元素在交叉轴方向的对齐方式

    alignItems(交叉轴方向的对齐方式)

内容回顾

  • 案例

ts 复制代码
@Entry
@Component

struct ImagePage {
  @State imageWidth: number = 150

  build() {
    Column() {
      Row() {
        Image('https://gbres.dfcfw.com/Files/picture/20240107/A647B2359640C398075289DFB100768F_w707h782.jpg')
          .width(this.imageWidth)
          .interpolation(ImageInterpolation.High)
      }
      .width('100%')
      .height(300)
      .justifyContent(FlexAlign.Center)
      .alignItems(VerticalAlign.Center)
      .backgroundColor('#f1f1f1')

      Row() {
        Text('图片宽度:')
          .fontSize(20)
        TextInput({ placeholder: '请输入图片宽度', text: this.imageWidth.toFixed(0) })
          .type(InputType.Number)
          .onChange(value => {
            this.imageWidth = parseInt(value)
          })
          .backgroundColor('#f1f1f1')
          .fontSize(20)
          .width(200)
      }
      .width('100%')
      .margin({top: 30})
      .padding({left: 15, right: 15})
      .justifyContent(FlexAlign.SpaceBetween)
      .backgroundColor('#f1f1f1')

      // 分割线
      Divider()

      Row() {
        Button('缩小')
          .width(88)
          .fontSize(20)
          .onClick(value => {
            if (this.imageWidth >= 100) {
              this.imageWidth -= 20
            }
          })
        Button('放大')
          .width(80)
          .fontSize(20)
          .onClick(value => {
            if (this.imageWidth <= 300) {
              this.imageWidth += 20
            }
          })
      }
      .width('100%')
      .margin({top: 30})
      .justifyContent(FlexAlign.SpaceEvenly)
      .backgroundColor('#f1f1f1')

      Row() {
        Slider({
          min: 100,
          max: 300,
          value: this.imageWidth,
          step: 20
        })
          .blockColor('#bbccdd')
          .trackThickness(8)
          .showTips(true)
          .showSteps(true)
          .onChange(value => {
            this.imageWidth = value
          })
      }
      .margin({top: 30})
      .backgroundColor('#f1f1f1')
    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
}

7. 渲染控制(列表渲染、条件渲染)

ForEach循环渲染

  • 提示:其中的 index?keyGenerator?是可选参数,可以不写

👀关注公众号:Android老皮!!!欢迎大家来找我探讨交流👀

相关推荐
SuperHeroWu71 小时前
【HarmonyOS】鸿蒙应用唤起系统相机拍照
华为·harmonyos·系统相机·photo·startability·camerapicker
stone51951 小时前
鸿蒙系统ubuntu开发环境搭建
c语言·ubuntu·华为·嵌入式·harmonyos
踏雪Vernon12 小时前
[OpenHarmony5.0][Docker][环境]OpenHarmony5.0 Docker编译环境镜像下载以及使用方式
linux·docker·容器·harmonyos
Andy醒16 小时前
HarmonyOS . 沉浸状态栏使用
harmonyos·鸿蒙
yuwinter16 小时前
鸿蒙HarmonyOS学习笔记(2)
笔记·学习·harmonyos
jikuaidi6yuan18 小时前
鸿蒙系统(HarmonyOS)分布式任务调度
分布式·华为·harmonyos
SameX1 天前
HarmonyOS Next 安全生态构建与展望
前端·harmonyos
SameX1 天前
HarmonyOS Next 打造智能家居安全系统实战
harmonyos
Random_index1 天前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos