鸿蒙保姆级教学

news2025/3/23 11:29:07

鸿蒙（HarmonyOS）是华为推出的一款面向全场景的分布式操作系统，支持手机、平板、智能穿戴、智能家居、车载设备等多种设备。鸿蒙系统的核心特点是分布式架构、一次开发多端部署和高性能。以下是从入门到大神级别的鸿蒙开发深度分析，结合代码示例，帮助你逐步掌握鸿蒙开发。

1. 鸿蒙开发入门

1.1 环境搭建

鸿蒙编译器安装运行教程

安装 DevEco Studio：
- 下载并安装 DevEco Studio，这是鸿蒙官方提供的集成开发环境（IDE）。
配置 SDK：
- 打开 DevEco Studio，安装 HarmonyOS SDK。
创建项目：
- 选择模板（如 Empty Ability），创建第一个鸿蒙应用。

1.2 鸿蒙应用的基本结构

一个鸿蒙应用通常包括以下部分：

entry：主模块，包含应用的代码和资源。
src/main/js/default：JavaScript 代码目录。
src/main/resources：资源文件目录（如图片、布局文件）。
config.json：应用配置文件，声明权限、设备类型等。

1.3 Hello World 示例

以下是一个简单的鸿蒙应用示例，显示 “Hello World”。

1.3.1 `index.hml`（布局文件）

<!-- src/main/js/default/pages/index/index.hml -->
<div class="container">
  <text class="title">Hello World</text>
</div>

1.3.2 `index.css`（样式文件）

/* src/main/js/default/pages/index/index.css */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.title {
  font-size: 50px;
  color: #000000;
}

1.3.3 `index.js`（逻辑文件）

// src/main/js/default/pages/index/index.js
export default {
  data: {
    title: 'Hello World',
  },
};

2. 鸿蒙中级开发

2.1 页面跳转

鸿蒙支持通过路由实现页面跳转。

2.1.1 添加第二个页面

在 pages 目录下创建 detail 页面：

detail.hml
detail.css
detail.js

2.1.2 修改 `index.js`

// src/main/js/default/pages/index/index.js
export default {
  data: {
    title: 'Hello World',
  },
  jumpToDetail() {
    router.push({
      uri: 'pages/detail/detail', // 跳转到详情页
    });
  },
};

2.1.3 修改 `index.hml`

<!-- src/main/js/default/pages/index/index.hml -->
<div class="container">
  <text class="title" onclick="jumpToDetail">{{title}}</text>
</div>

2.2 数据绑定

鸿蒙支持双向数据绑定，通过 {{}} 语法实现。

2.2.1 修改 `index.js`

// src/main/js/default/pages/index/index.js
export default {
  data: {
    title: 'Hello World',
    count: 0,
  },
  increment() {
    this.count++;
  },
};

2.2.2 修改 `index.hml`

<!-- src/main/js/default/pages/index/index.hml -->
<div class="container">
  <text class="title">{{title}}</text>
  <text class="count">Count: {{count}}</text>
  <button class="button" onclick="increment">Increment</button>
</div>

2.3 组件开发

鸿蒙支持自定义组件，可以将重复的 UI 逻辑封装为组件。

2.3.1 创建自定义组件

在 components 目录下创建 MyButton 组件：

MyButton.hml
MyButton.css
MyButton.js

2.3.2 使用自定义组件

在 index.hml 中引入组件：

<!-- src/main/js/default/pages/index/index.hml -->
<element name="MyButton" src="../../components/MyButton/MyButton.hml"></element>
<div class="container">
  <MyButton></MyButton>
</div>

3. 鸿蒙高级开发

3.1 分布式能力

鸿蒙的核心特性是分布式能力，支持多设备协同。

3.1.1 设备发现与连接

使用 @ohos.distributedHardware 模块实现设备发现与连接。

import deviceManager from '@ohos.distributedHardware.deviceManager';

// 发现设备
deviceManager.startDeviceDiscovery({
  discoverCallback: (deviceInfo) => {
    console.log('Discovered device:', deviceInfo);
  },
});

// 连接设备
deviceManager.connectDevice({
  deviceId: 'deviceId',
  connectCallback: (result) => {
    console.log('Connected to device:', result);
  },
});

3.1.2 分布式数据管理

使用 @ohos.data.distributedData 模块实现跨设备数据共享。

import distributedData from '@ohos.data.distributedData';

// 创建分布式数据库
const kvManager = distributedData.createKVManager({
  bundleName: 'com.example.myapp',
});

const kvStore = kvManager.getKVStore({
  storeId: 'myStore',
  options: {
    createIfMissing: true,
  },
});

// 写入数据
kvStore.put({
  key: 'name',
  value: 'HarmonyOS',
}, (err) => {
  if (!err) {
    console.log('Data saved successfully');
  }
});

// 读取数据
kvStore.get({
  key: 'name',
}, (err, data) => {
  if (!err) {
    console.log('Data retrieved:', data);
  }
});

3.2 性能优化

减少主线程阻塞：

使用 Worker 线程处理耗时任务。

const worker = new Worker('workers/myWorker.js');
worker.postMessage('Start working');
worker.onmessage = (event) => {
  console.log('Worker result:', event.data);
};

懒加载：
- 使用 router.replace 或动态导入组件，减少初始加载时间。
内存优化：
- 及时释放不再使用的资源，避免内存泄漏。

3.3 跨设备适配

鸿蒙支持一次开发多端部署，通过自适应布局和资源管理实现跨设备适配。

3.3.1 自适应布局

使用 mediaquery 实现响应式布局。

/* src/main/resources/base/media/query.css */
@media screen and (device-type: phone) {
  .container {
    width: 100%;
  }
}

@media screen and (device-type: tablet) {
  .container {
    width: 50%;
  }
}