黑马云音乐-Harmony5课程笔记总结

zh3g 发布于 2025-12-06 142 次阅读

文章目录

开发准备-快速入门-基础入门 - 华为HarmonyOS开发者

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

核心扩展 —— 让页面 “动起来”（理解 @State 的响应式）

咱们给页面加一个按钮，点击后修改message的值，你就能直观感受到@State的作用：
typescript
build() {
  Row() {
    Column() {
      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      
      // 新增按钮组件
      Button('点击修改文字')
        .margin({top: 20}) // 距离上面的Text 20px
        .onClick(() => {   // 按钮点击事件
          this.message = '你好，鸿蒙6.0！' // 修改状态变量
        })
    }
    .width('100%')
  }
  .height('100%')
}
👉 效果：点击按钮后，屏幕上的文字会从 “Hello World” 立刻变成 “你好，鸿蒙 6.0！”—— 因为message是@State修饰的 “响应式变量”，变量值变了，UI 会自动更新，不用手动写刷新代码（这就是声明式 UI 的核心优势）。

第四步：核心总结（一句话记住）

代码部分 核心作用 类比
@Entry 标记应用首页 积木的 “首页标签”
@Component 标记 UI 组件 积木的 “可渲染标签”
struct Index 定义组件结构 积木的 “骨架”
@State message 响应式变量（值变 UI 更） 积木的 “动态电池”
build() 构建 UI 的入口 搭积木的 “工作台”
Row/Column 布局容器（横向 / 纵向排组件） 装小积木的 “盒子”
Text/Button 基础 UI 组件（显示文字 / 交互按钮） 具体的 “小积木”

开发者也可以在右键单击pages文件夹时，选择New > Page > Empty Page，命名为Second，单击Finish完成第二个页面的创建

配置第二个页面的路由。在Project窗口，打开entry > src > main > resources > base > profile，在main_pages.json文件中的"src"下配置第二个页面的路由"pages/Second"。示例如下

{
  "src": [
    "pages/Index",
    "pages/Second"
  ]
}

上面的是Harmony的官方教程 + AI讲解的形式

下面基本上是按照书上的教程顺序来进行
基本格式

let result01: boolean = true;  // 和java很像
最后更新于 2026-01-24