鸿蒙开发：1.环境搭建和入门

环境搭建

安装HUAWEI DevEco Studio

简介

HUAWEI DevEco Studio是基于IntelliJ IDEA Community开源版本打造，为运行在HarmonyOS和OpenHarmony系统上的应用和服务提供一站式的开发平台。

特点

1.高效智能代码编辑：支持ArkTS、JS、C/C++等语言的代码高亮、代码智能补齐、代码错误检查、代码自动跳转、代码格式化、代码查找等功能，提升代码编写效率。

2.低代码可视化开发：丰富的UI界面编辑能力，支持自由拖拽组件和可视化数据绑定，可快速预览效果，所见即所得；同时支持卡片的零代码开发，降低开发门槛和提升界面开发效率。

3.多端双向实时预览：支持UI界面代码的双向预览、实时预览、动态预览、组件预览以及多端设备预览，便于快速查看代码运行效果。

4.多端设备模拟仿真：提供HarmonyOS本地模拟器，支持手机等设备的模拟仿真，便捷获取调试环境。

运行环境要求

操作系统：Windows10 64位、Windows11 64位

内存：8GB及以上

硬盘：100GB及以上

分辨率：1280*800像素及以上

文档

文档中心

下载安装

DevEco Studio-HarmonyOS Next开发者预览版-华为开发者联盟

1.进入HUAWEI DevEco Studio产品页，单击下载列表右侧的下载按钮，下载DevEco Studio 2.选择安装路径，单击Browse指定其安装路径【默认C:\Program Files】

3.勾选DevEco Studio

配置开发环境

1.安装Node.js与ohpm【Node.js版本要求为v14.19.1及以上，且低于v17.0.0；对应的npm版本要求为6.14.16及以上】如果本地没有合适的版本，可以选择Install按钮【C:\Users\86150\nodejs】【C:\Users\86150\AppData\Local\Huawei\ohpm】可能有做前端的同学是有Node.js的环境，由于版本和路径的原因，仍然建议单独安装

2.在SDK Setup界面，设置HarmonyOS SDK存储路径【C:\Users\86150\AppData\Local\Huawei\Sdk】

入门

创建第一个项目HelloWorld

创建一个新工程

1.打开DevEco Studio，在欢迎页单击Create Project，创建一个新工程

2.选择"Empty Ability"模板，填写工程相关信息，保持默认值即可

预览项目效果

在DevEco Studio右侧菜单栏，单击Previewer【如果项目过于复杂，则需要使用模拟器或者真机测试】

Previewer热更新

Previewer支持热更新，在修改代码之后，保存可以自动更新效果

创建模拟器

简介

Previewer预览项目，这种预览方式可以快速看到项目效果，但是如果项目过于复杂，则需要使用模拟器或者真机测试

安装

1.Tools > SDK，勾选System-image-phone进行下载【下载的项目比较大，等待时间较长】 2.Tools > Device Manager，创建模拟器模拟器可以创建手表模拟器、电视模拟器和手机模拟器在模拟器创建的高级设置中，可以配置模拟器的内存、存储空间和CPU等设置内存分配根据自己的电脑需求配置，如果电脑内存小，可以适当调小内存，但是至少要保持4G

3.创建完成之后启动模拟器，点击Action启动即可

4.回到IDE中，选择手机模拟器，然后点击运行即可

启动

1.打开DevEco Studio，找到最上面Tools/Device Manager，进入页面启动即可

连接项目

在启动处选择此模拟器即可

工程目录结构和代码初始结构

工程目录结构

复制代码

AppScope > app.json5：应用的全局配置信息

entry：HarmonyOS工程模块，编译构建生成一个HAP包
src > main > ets：用于存放ArkTS源码
src > main > ets > entryability：应用/服务的入口
src > main > ets > pages：应用/服务包含的页面
src > main > resources：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。关于资源文件
src > main > module.json5：Stage模型模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息
build-profile.json5：当前的模块信息、编译信息配置项，包括buildOption、targets配置等。其中targets中可配置当前运行环境，默认为HarmonyOS
hvigorfile.ts：模块级编译构建任务脚本，开发者可以自定义相关任务和代码实现

oh_modules：用于存放三方库依赖信息

build-profile.json5：应用级配置信息，包括签名、产品配置等

hvigorfile.ts：应用级编译构建任务脚本

代码初始结构【src.main.ets.pages.Index.ets】

/**
 * 装饰器：用于装饰类、结构、方法以及变量，并赋予其特殊的含义。
 * @Entry：表示该自定义组件为入口组件
 * @Component：表示自定义组件
 * @State：表示组件中的状态变量，状态变量变化会触发UI刷新
 */
@Entry
@Component
  /**
   * HarmonyOS是组件化开发
   * struct Index{}：自定义组件，可复用的UI单元，可组合其他组件
   */
struct Index {
  @State message: string = 'Hello World'
  /**
   * UI描述
   * build(){}：以声明式的方式来描述UI的结构
   *
   * https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-create-custom-components-0000001473537046-V2#section1150911733811
   1.所有声明在build()函数的语言，我们统称为UI描述
   2.@Entry装饰的自定义组件，其build()函数下的根节点唯一且必要，且必须为容器组件，其中ForEach禁止作为根节点。
   3.@Component装饰的自定义组件，其build()函数下的根节点唯一且必要，可以为非容器组件，其中ForEach禁止作为根节点。
   */
  build() {
    /**
     * 系统组件
     * Row/Column/Text：有ArkUI提供的组件
     *  - 容器组件：用来完成布局，例如：Row/Column
     *  - 基础组件：自带样式功能的页面元素，例如：Text
     */
    Row() {
      Column() {
        Text(this.message)
          /**
           * 属性方法：设置组件的UI样式，方法比较多，后面在慢慢讲解
           */
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .fontColor(Color.Red)
      }
      .width('100%')
    }
    .height('100%')
  }
}

页面跳转(ArkTS基础语法)

创建第二个页面

1.新建第二个页面文件，entry/src/main/etspages，选择New > ArkTS File，命名为About

2.配置第二个页面的路由，entry/src/main/resources/base/profile/main_pages.json文件中的"src"下配置第二个页面的路由"pages/About"

第二个页面【增加按钮组件，并实现点击事件和跳转到第一个页面】

import router from '@ohos.router'
@Entry
@Component
struct About {
  @State message: string = '第二个页面'
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .fontColor(Color.Red)
        // 添加按钮
        Button(){
          Text("Next")
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top:20
        })
        .padding({
          left:20,
          right:20
        })
        // 事件方法
        .onClick(() =>{
          console.info(`点击事件`)
          // 跳转到第一个页面
          router.pushUrl({url:'pages/Index'}).then(() =>{
            console.log("跳转成功")
          }).catch(() =>{
            console.log("跳转失败")
          })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}