01创建第一个鸿蒙APP

James-Tom

已于 2023-12-12 17:57:25 修改

阅读量2.1k

点赞数 20

分类专栏：鸿蒙开发文章标签： harmonyos 华为鸿蒙 hap arkts

于 2023-12-12 17:53:49 首次发布

本文链接：https://blog.youkuaiyun.com/huangbin123/article/details/134947748

版权

鸿蒙开发专栏收录该内容

6 篇文章

订阅专栏

1、安装开发工具

第一步：准备好，开发工具下载地址：

https://developer.huawei.com/consumer/cn/gray/deveco-studio#download

在下载地址中，需要下载两个工具：

IDE：DevEco Studio 3.1.1 Release，用于鸿蒙应用及服务开发；
命令行工具：Command Line Tools for HarmonyOS ，用于该集合了HarmonyOS应用开发所用到的系列工具，包括SDK管理sdkmgr、代码检查codelinter、三方库的包管理ohpm。

第二步：安装DevEco Studio 和命令行工具：

安装DevEco Studio

先解压安装包800多MB，如下图所示：

在这里插入图片描述

点击exe文件直接运行，如下图所示:

在这里插入图片描述

开始引导安装，如下图所示：

在这里插入图片描述
可全部勾上，如下图所示：

启动IDE，还需要根据引导进行一些配置库安装，如下图所示：

同意之后开始安装，如下图所示：

看起来有些文件安装失败了，先点击Finish按钮：
在这里插入图片描述
跳转到了这个界面，还可以点击Set it up now补救，安装失败的文件，如下图所示:

上面的问题再次安装失败，最后查了一下，还是因为权限的原因，解决方案如下：

到此，DevEco Studio安装完成。
在这里插入图片描述

接下来安装命令行工具

先解压命令行工具压缩包，如下图所示
在这里插入图片描述
bin目路是三个bat命令可执行文件，如下图所示：

直接把文件拖到cmd命令行工具中即可使用，如下图所示：

命令行工具无需安装，解压即可使用，实际用到的时候再说。

2、创建工程项目

第一步：先创建一个工程项目，如下图所示：

在这里插入图片描述

第二步：点击Next按钮，配置一下工程项目属性，如下图所示：

在这里插入图片描述

第三步：点击Finish按钮之后，进入到项目开发界面，如下图所示：

在这里插入图片描述

第四步：右下角发现了一处错误，还需要安装SDK，如下图所示：

在这里插入图片描述

第五步：初次运行APP，可安装IDE自带的模拟器设备，如下图所示：

在这里插入图片描述

第六步：选择手机，进行模拟器的下载安装，大概2GB大小，如下图所示：

在这里插入图片描述

第七步：模拟器已经安装完成，启动鸿蒙系统中，如下图所示：

在这里插入图片描述

3、编写代码

项目结构，如下图所示：

在这里插入图片描述

第一步：在pages目录下，创建一个Test.ets文件：

@Entry
@Component
struct Test {
  @State btnText: string = '鸿蒙，你好！'

  build() {
    Row() {
      Column() {
        Button() {
          Text(this.btnText)
            .fontSize(32)
            .fontColor(Color.White)
            .padding(16)
        }.backgroundColor(Color.Orange)
      }
      .width('100%')
    }
    .height('100%')
  }
}

第二步：修改一下/entryability目录下的EntryAbility.ts这个文件：

import UIAbility from '@ohos.app.ability.UIAbility';
import hilog from '@ohos.hilog';
import window from '@ohos.window';

export default class EntryAbility extends UIAbility {
  onCreate(want, launchParam) {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  }

  onDestroy() {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
  }

  onWindowStageCreate(windowStage: window.WindowStage) {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

	//TODO　最关的就在此处，修改成你的界面对应的ets文件名
    windowStage.loadContent('pages/Test', (err, data) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
    });
  }

  onWindowStageDestroy() {
    // Main window is destroyed, release UI related resources
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
  }

  onForeground() {
    // Ability has brought to foreground
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
  }

  onBackground() {
    // Ability has back to background
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
  }
}

第三步：修改profile中的main_pages.json文件

{
  "src": [
    "pages/Test"
  ]
}

4、调试运行与打包

APP打包分为两种模式，Debug和Release模式。

4.1、运行Debug程序

点击标记处即可运行Debug调试等操作，如下图所示：

在这里插入图片描述

4.2、打包应用程序

第一步：点击Build，构建Hap（s），如下图所示：

在这里插入图片描述
注意鸿蒙的APP文件的后缀是.hap，而AndroidAPP文件的后缀名是.apk。

我们可以看到，已经创建了对应的Debug版本的打包文件，如下图所示：
在这里插入图片描述
为了直接将这个hap安装到鸿蒙系统的模拟器（设备）上，因为不能直接拖进去安装，可通过hdc命令进行安装（类似Android的Adb命令），所以还需要为HDC命令配置的对应的环境变量，以便能直接在Cmd命令行工具中使用hdc命令。