环境搭建
安装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%')
}
}