你的第一个HarmonyOS应用：从创建、调试到运行模拟器

本文将带领你完成第一个完整的HarmonyOS应用开发流程，从项目创建、代码编写、调试测试到真机运行和上架准备，让你全面体验HarmonyOS应用开发的全过程。

一、创建并配置新项目

1.1 项目创建步骤

1. 打开DevEco Studio，点击"Create Project"
2. 选择"Application" -> "Empty Ability"模板
3. 配置项目参数：

// 项目配置示例
Project Name: MyFirstApp
Bundle Name: com.yourcompany.myfirstapp
Save Location: /your/project/path
Compile SDK: HarmonyOS 5.0 (API 12)
Language: ArkTS
Model: Stage
Device Type: Phone

1. 点击"Finish"完成创建

二、编写第一个页面功能

2.1 基础页面代码

修改Index.ets文件，创建一个简单的计数器应用：

@Entry
@Component
struct Index {
  @State count: number = 0
  @State message: string = '欢迎使用HarmonyOS'

  // 构建UI界面
  build() {
    Column({ space: 20 }) {
      // 标题文本
      Text(this.message)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
        .fontColor(Color.Blue)

      // 计数显示
      Text(`当前计数: ${this.count}`)
        .fontSize(24)
        .fontColor('#333')

      // 按钮行
      Row({ space: 15 }) {
        // 增加按钮
        Button('增加')
          .onClick(() => {
            this.count++
            this.updateMessage()
          })
          .width(100)
          .backgroundColor('#007DFF')

        // 减少按钮
        Button('减少')
          .onClick(() => {
            this.count--
            this.updateMessage()
          })
          .width(100)
          .backgroundColor('#FF0000')

        // 重置按钮
        Button('重置')
          .onClick(() => {
            this.count = 0
            this.message = '计数器已重置'
          })
          .width(100)
          .backgroundColor('#666666')
      }
      .margin({ top: 20 })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }

  // 更新消息的方法
  private updateMessage() {
    if (this.count > 10) {
      this.message = '计数很高了！'
    } else if (this.count < -5) {
      this.message = '计数太低了！'
    } else {
      this.message = '继续操作'
    }
  }
}

2.2 添加样式和布局

创建样式文件并优化布局：

// 在Index.ets中添加样式常量
const styles = {
  container: {
    padding: 20,
    backgroundColor: '#F5F5F5'
  },
  title: {
    fontSize: 30,
    fontWeight: FontWeight.Bold,
    color: '#007DFF',
    textAlign: TextAlign.Center,
    marginBottom: 30
  },
  counterText: {
    fontSize: 28,
    color: '#333333',
    marginBottom: 40,
    fontWeight: FontWeight.Medium
  },
  button: {
    width: 120,
    height: 45,
    borderRadius: 8
  }
}

// 更新build方法中的样式应用
build() {
  Column({ space: 20 }) {
    Text(this.message)
      .fontSize(styles.title.fontSize)
      .fontWeight(styles.title.fontWeight)
      .fontColor(styles.title.color)
      .margin({ bottom: styles.title.marginBottom })

    Text(`当前计数: ${this.count}`)
      .fontSize(styles.counterText.fontSize)
      .fontColor(styles.counterText.color)
      .margin({ bottom: styles.counterText.marginBottom })
      .fontWeight(styles.counterText.fontWeight)

    // ... 按钮代码
  }
  .width('100%')
  .height('100%')
  .padding(styles.container.padding)
  .backgroundColor(styles.container.backgroundColor)
}

三、调试与测试

3.1 使用预览器实时调试

1. 打开预览器：点击编辑器右上角的预览器图标
2. 实时修改：在代码中进行修改，预览器会实时更新
3. 热重载：支持代码修改后的即时重载

3.2 日志调试

import hilog from '@ohos.hilog'

@Component
struct Index {
  // ...

  aboutToAppear() {
    // 输出信息级别日志
    hilog.info(0x0000, 'MyFirstApp', 'Index页面已加载')
  }

  private updateMessage() {
    // 调试日志
    hilog.debug(0x0000, 'MyFirstApp', `计数更新为: ${this.count}`)
    
    if (this.count > 10) {
      hilog.warn(0x0000, 'MyFirstApp', '计数超过10')
      this.message = '计数很高了！'
    } else if (this.count < -5) {
      hilog.error(0x0000, 'MyFirstApp', '计数低于-5')
      this.message = '计数太低了！'
    } else {
      this.message = '继续操作'
    }
  }
}

3.3 单元测试

创建测试文件entry/src/ohosTest/ets/test/Index.test.ets：

import { describe, it, expect } from '@ohos/hypium'
import { Index } from '../../../../src/main/ets/pages/Index'

@Entry
@Component
struct TestHarness {
  build() {
    Column() {
      Index()
    }
  }
}

describe('IndexComponentTest', () => {
  it('test_initial_count_is_zero', 0, () => {
    const index = new Index()
    expect(index.count).assertEqual(0)
  })

  it('test_increment_count', 0, () => {
    const index = new Index()
    const initialCount = index.count
    
    // 模拟点击增加按钮
    index.count++
    expect(index.count).assertEqual(initialCount + 1)
  })

  it('test_decrement_count', 0, () => {
    const index = new Index()
    const initialCount = index.count
    
    // 模拟点击减少按钮
    index.count--
    expect(index.count).assertEqual(initialCount - 1)
  })
})

四、真机调试与运行

4.1 真机调试准备

1. 开启开发者选项： 设置 → 关于手机 → 连续点击"版本号"7次 返回设置 → 系统和更新 → 开发人员选项
2. 启用调试功能： 开启"USB调试" 开启"USB安装" 开启"仅充电模式下允许ADB调试"

4.2 连接真机调试

// 配置签名信息
// 在File → Project Structure → Project → Signing Configs中配置
const signingConfigs = {
  debug: {
    storeFile: 'debug.p12',
    storePassword: '123456',
    keyAlias: 'debugKey',
    keyPassword: '123456',
    signAlg: 'SHA256withECDSA',
    profileFile: 'debug.p7b',
    certpath: 'debug.cer'
  }
}

4.3 运行到真机

1. 使用USB数据线连接手机和电脑
2. 在DevEco Studio中选择真机设备
3. 点击运行按钮（▶️）或按Shift + F10
4. 在手机上授权安装应用

需要参加鸿蒙认证的请点击 鸿蒙认证链接