🚀 鸿蒙开发入门必看！30 分钟掌握 ArkUI 界面开发

        大家好，我又来更新我的学习笔记啦！📒 这是我在学习HarmonyOS ArkUI 开发 时新的整理与思考。本篇内容比较全面，既有变量与数字处理的基础，也涉及了 ArkUI 中的事件响应与状态管理。  说实话，光靠看官方文档很难完全消化知识点，而把它们转化为笔记，再写成文章，能加深很多理解。所以这篇文章里，我不仅整理了原始代码，还会穿插一些自己的见解和体会，帮助你更好地掌握这些知识。

目录

📌 一、变量的声明与使用

📌 二、类型转换（字符串 ↔ 数字）

📌 三、点击事件与弹框

📌 四、状态管理（State 驱动 UI）

📌 一、变量的声明与使用

在 TypeScript 中，我们通常推荐 显式地声明变量类型。

示例：

用模板字符串的例子：

let name: string = '小明'
let age: number = 18
console.log(`姓名是${name}, 年龄是${age}`)

注：

🔎 见解：
在 JavaScript 中我们习惯直接写 let name = '小明'，但在 TypeScript 里标注类型会更安全，尤其是项目变大之后，能提前发现类型错误。比如 let age: number = '18' 这种错误，TS 编译器会直接报错，避免了运行时 bug。

📌 二、类型转换（字符串 ↔ 数字）

在开发中，表单输入一般是 字符串，但逻辑计算需要 数字，所以必须掌握各种转换方法。

1. 字符串转换为数字
    •    Number()：严格转换，字符串必须是纯数字才行。
    •    parseInt()：只取整数部分，遇到非法字符就停止。
    •    parseFloat()：能解析小数，但同样遇到非法字符会截断。

示例：

let str1: string = '1.1'
let str2: string = '1.9'
let str3: string = '1.9a'
let str4: string = 'a'

console.log('Number', Number(str1)) // 1.1
console.log('Number', Number(str2)) // 1.9
console.log('Number', Number(str3)) // NaN
console.log('Number', Number(str4)) // NaN

console.log('parseInt', parseInt(str1)) // 1
console.log('parseInt', parseInt(str2)) // 1
console.log('parseInt', parseInt(str3)) // 1
console.log('parseInt', parseInt(str4)) // NaN

console.log('parseFloat', parseFloat(str1)) // 1.1
console.log('parseFloat', parseFloat(str2)) // 1.9
console.log('parseFloat', parseFloat(str3)) // 1.99
console.log('parseFloat', parseFloat(str4)) // NaN

🔎 见解：
这里有一个容易踩的坑：
    •    parseInt('12px') 👉 会返回 12（遇到字母截断）
    •    Number('12px') 👉 返回 NaN

所以如果处理带单位的输入（如前端样式 px），parseInt 更合适；但如果要求输入必须是纯数字，那 Number 更安全。

2. 转换为字符串
    •    toString()：最常用的方法
    •    toFixed(n)：保留 n 位小数，返回字符串

示例：

let num1: number = 1.1
let num2: number = 1.9
let num3: number = 1.9152

console.log('字符串是：', num1.toString()) // "1.1"
console.log('字符串是：', num2.toString()) // "1.9"
console.log('保留小数：', num3.toFixed(2)) // "1.92"

实际应用：

let money: number = 10000
console.log('toString:', money.toString())    // "10000"
console.log('toFixed:', money.toFixed())      // "10000"
console.log('toFixed(2):', money.toFixed(2))  // "10000.00"

🔎 见解：
在电商、金融等场景，金额显示常常需要两位小数。比如后台存储的是 10000，在 UI 上要显示成 10000.00，这时 toFixed(2) 就很有用。但要注意，它返回的是字符串，如果还要参与运算，需要再转回数字。

📌 三、点击事件与弹框

ArkUI 中可以使用 onClick 绑定点击事件：

Button() {
  .onClick(() => {
    console.log('消息：按钮被点击了')
    AlertDialog.show({
      message: '你好，这是个弹框'
    })
  })
}

🔎 见解：
和 React 类似，ArkUI 也是「声明式 UI + 事件驱动」。写事件时要注意逻辑不要太复杂，否则会让组件难以维护。建议把事件处理函数抽离出去，让 UI 和逻辑解耦。

📌 四、状态管理（State 驱动 UI）

ArkUI 的 @State 很像 React 的 useState，变量一旦变化，UI 会自动刷新。

示例：

@Entry
@Component
struct Index {
  @State msg: string = 'Hello World'

  build() {
    Column() {
      Text(this.msg)
        .onClick(() => {
          this.msg = '你好，世界'
        })
    }
  }
}

🔎 见解：
    •    普通变量只能在函数内用，UI 不会更新
    •    @State 修饰的变量能驱动 UI 自动刷新
    •    状态的变化是单向数据流，状态变了 → UI 自动更新

这点和 React、Vue 的思想是一致的。掌握了这套思路，跨框架学习就会很轻松。

案例：计数器的状态管理

在学习 ArkUI 的时候，最经典的例子就是 计数器。通过它可以直观理解 状态变量（@state） 与 界面更新 的关系。

代码思路如下：
    1.    定义一个状态变量：

@State count: number = 1

这样定义后，count 就具备了“响应式”特性。

    2.    在 build() 方法里，放置两个按钮（+ / -）和一个文本控件：
    •    “+” 按钮点击时：this.count = this.count + 1
    •    “-” 按钮点击时：this.count = this.count - 1
    •    文本用来展示 this.count.toString()
    3.    当按钮触发事件改变 count 时，系统会自动 刷新绑定了 count 的界面部分，开发者无需手动处理 UI 更新。

核心逻辑：
    •    状态驱动 UI → 修改状态值，就会触发 UI 的刷新。
    •    不可直接操作 UI → 你只能改状态，不能直接“推 UI 变化”。

build() {
  Row(
    [
      Button("-", onClick: () => {
        this.count = this.count - 1
      }),
      Text(this.count.toString())
        .margin(10),
      Button("+", onClick: () => {
        this.count = this.count + 1
      })
        .padding(20)
    ]
  )
}

💡 我的一点见解：
这个例子看似简单，但其实透露了 ArkUI 和 React/Flutter 等框架相同的设计理念——
    •    数据是唯一真相（single source of truth）
    •    UI 是状态的函数

换句话说，开发者要养成思维习惯：不要想着“点一下按钮去改文本控件的内容”，而是“点一下按钮去改状态，UI 自然会更新”。这样可以避免复杂应用中 UI 与数据不同步 的问题。

📌普通变量 vs 状态变量
    •    普通变量：不触发 UI 更新，只是存储数据
    •    状态变量：能驱动 UI 渲染，属于响应式数据

🔎 见解：
写 ArkUI 的时候，如果你发现「变量改了但界面没变」，十有八九是因为用了普通变量。记住：UI 要绑定在 @State 上。

✨ 总结 & 体会

这一篇主要涵盖了：
    •    ✅ TypeScript 变量与类型
    •    ✅ 数字与字符串的互转技巧
    •    ✅ toString()、toFixed() 在实际业务的应用场景
    •    ✅ ArkUI 中的点击事件与弹框
    •    ✅ 状态变量 @State 的用法与优势

💡 我的体会是：
    1.    TypeScript 的强类型让人写代码更安心，尤其是变量类型转换这块，可以提前避免很多低级 bug。
    2.    数字与字符串的处理看似简单，但在业务里会踩不少坑，尤其是金额、浮点数精度问题。
    3.    ArkUI 的状态管理和 React/Vue 的思想相通，学会了一套框架，其实能触类旁通到其他框架。

恭喜您，迈出了鸿蒙应用开发坚实的一步！🎉
🤔 接下来，我将继续为大家更新鸿蒙开发的相关知识点，如果喜欢，记得关注驻波

往期的如果你也感兴趣，欢迎各位大佬捧场

从 0 到 1：用 ArkUI 写出你的第一个鸿蒙 App 界面 -CSDN博客

鸿蒙ArkUI布局与样式进阶（二）—— SVG 设计图案、Padding、Margin、Border、圆角与背景实战-CSDN博客

鸿蒙ArkUI布局与样式进阶（三）——线性布局（Row 与 Column）深度解析与工程实践-CSDN博客

鸿蒙ArkUI布局与样式进阶（四）——从 Column 到 Grid，一篇搞懂常用布局（含实战案例与逐行注释）-CSDN博客

大家有什么问题也欢迎大家在评论区讨论；