极客一鸿蒙ext应用开发训练营实战

极客一鸿蒙ext应用开发训练营实战

鸿蒙ext应用开发训练营实战

在开始之前，请确保您已安装以下工具：

• 华为DevEco Studio：鸿蒙系统的官方开发环境。
• 鸿蒙SDK：可以通过DevEco Studio进行下载和配置。

1. 打开华为DevEco Studio。
2. 点击“新建项目”。
3. 选择“鸿蒙应用”，然后点击“下一步”。
4. 输入项目名称、包名等信息，完成创建。

创建完成后，您会看到如下项目结构：

YourProject/
├── src/
│   ├── main/
│   │   ├── js/
│   │   ├── resources/
│   │   ├── ...
│   └── ...
└── ...

4.1. 配置 config.json

在 src/main/config.json 中配置应用基本信息：

{
  "app": {
    "id": "harmonyapp",
    "name": "HarmonyApp",
    "version": "1.0.0",
    "description": "A sample HarmonyOS application"
  }
}

4.2. 创建主界面

在 src/main/js 文件夹中，创建一个 main.js 文件，并添加以下代码：

import app from '@system.app';
import router from '@system.router';

export default {
  data: {
    title: 'Hello, HarmonyOS!'
  },
  
  onInit() {
    cole.log('Application initialized');
  },

  navigateToPage() {
    router.push({
      uri: 'pages/secondPage/secondPage'
    });
  }
};

4.. 创建视图文件

在 src/main/resources 中，创建一个 main.hml 文件，并添加以下代码：

<?xml version="1.0" encoding="utf-8"?>
<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="navigateToPage">Go to Second Page</button>
  </div>
</template>

4.4. 创建第二个页面

在 src/main/js 文件夹中，创建 secondPage.js 文件：

export default {
  data: {
    message: 'Welcome to the second page!'
  }
};

在 src/main/resources 中，创建 secondPage.hml 文件：

<?xml version="1.0" encoding="utf-8"?>
<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="goBack">Go Back</button>
  </div>
</template>

<script>
  export default {
    methods: {
      goBack() {
        ct router = require('@system.router');
        router.back();
      }
    }
  }
</script>

在 DevEco Studio 中，选择您的设备（如模拟器或实际鸿蒙设备），然后点击“运行”按钮。您的应用程序将被编译并部署到选定的设备上。