鸿蒙开发：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#section11509117338111.所有声明在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%')}
}