【HarmonyOS】HarmonyOS NEXT学习日记：一
DevEco Studio下载与安装
直接到官网的下载地址下载即可
正常下载、解压、安装完成后
正常来说不会有项目，并且是英文界面。
需要汉化的话可以按照下面的步骤设置插件
选择customize里的 all setting 进入设置页面
进入plugins插件页面、进入installed已安装、然后搜索chinese找到汉化插件后选用enable启用，之后重启就实现汉化了。
构建一个应用
新建工程
新建项目->创建一个Empty Ability->啥都不用改直接finish
即可成功创建出一个空白项目
运行
按照下图设置一preview
然后点击播放键，选择一个设备和分辨率，我这里选的是手机。
即可在模拟器查看页面
修改页面
目录结构
现在页面也能运行了，下一步当然是想要尝试着修改他一下。首先看看项目目录结构。
我以前没有进行过安卓开发这个项目的目录结构十分陌生，我不打算一次性吃透。就这一次的修改页面而言，我着重理解了以下目录结构。
以下是官方给出的其它目录结构的意义：
-
AppScope > app.json5：应用的全局配置信息，详见app.json5配置文件。
-
entry：HarmonyOS工程模块，编译构建生成一个HAP包。
-
src > main > ets：用于存放ArkTS源码。
-
src > main > ets > entryability：应用/服务的入口。
-
src > main > ets > entrybackupability：应用提供扩展的备份恢复能力。
-
src > main > ets > pages：应用/服务包含的页面。
-
src > main > resources：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。关于资源文件，详见资源分类与访问。
-
src > main > module.json5：模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明，详见module.json5配置文件。
-
build-profile.json5：当前的模块信息 、编译信息配置项，包括buildOption、targets配置等。
-
hvigorfile.ts：模块级编译构建任务脚本。
-
obfuscation-rules.txt：混淆规则文件。混淆开启后，在使用Release模式进行编译时，会对代码进行编译、混淆及压缩处理，保护代码资产。详见开启代码混淆。
-
oh-package.json5：用来描述包名、版本、入口文件（类型声明文件）和依赖项等信息。
-
oh_modules：用于存放三方库依赖信息。
-
build-profile.json5：工程级配置信息，包括签名signingConfigs、产品配置products等。其中products中可配置当前运行环境，默认为HarmonyOS。
-
hvigorfile.ts：工程级编译构建任务脚本。
-
oh-package.json5：主要用来描述全局配置，如：依赖覆盖（overrides）、依赖关系重写（overrideDependencyMap）和参数化配置（parameterFile）等。
修改index
参考官方教程修改index.ets代码如下，并添加了每一行的解析
typescript
// 导入页面路由模块
import { router } from '@kit.ArkUI';
// 导入业务错误处理模块
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
struct Index { // 定义一个名为 Index 的组件
@State message: string = 'Hello World' // 定义一个状态变量 message，并初始化为 'Hello World'
build() { // 构建页面结构
Row() { // 使用 Row 布局组件
Column() { // 在 Row 中使用 Column 布局组件
Text(this.message) // 显示状态变量 message 的值
.fontSize(50) // 设置字体大小为 50
.fontWeight(FontWeight.Bold) // 设置字体粗细为粗体
// 添加按钮，以响应用户点击
Button() { // 定义一个按钮组件
Text('Next') // 按钮上的文本为 'Next'
.fontSize(30) // 设置按钮文本的字体大小为 30
.fontWeight(FontWeight.Bold) // 设置按钮文本的字体粗细为粗体
}
.type(ButtonType.Capsule) // 设置按钮类型为胶囊型
.margin({
top: 20 // 设置按钮的上边距为 20
})
.backgroundColor('#0D9FFB') // 设置按钮的背景颜色为蓝色
.width('40%') // 设置按钮的宽度为其父容器宽度的 40%
.height('5%') // 设置按钮的高度为其父容器高度的 5%
// 跳转按钮绑定 onClick 事件，点击时跳转到第二页
.onClick(() => { // 定义按钮的点击事件
console.info(`Succeeded in clicking the 'Next' button.`) // 在控制台输出点击成功的日志信息
// 跳转到第二页
router.pushUrl({ url: 'pages/Second' }).then(() => { // 调用 router 模块的 pushUrl 方法跳转到第二页
console.info('Succeeded in jumping to the second page.') // 在控制台输出跳转成功的日志信息
}).catch((err: BusinessError) => { // 捕捉跳转过程中的错误
console.error(`Failed to jump to the second page. Code is ${err.code}, message is ${err.message}`) // 在控制台输出跳转失败的错误信息，包括错误代码和错误信息
})
})
}
.width('100%') // 设置 Column 的宽度为其父容器的 100%
}
.height('100%') // 设置 Row 的高度为其父容器的 100%
}
}区别和html+js+css的那一套差别很大，用的是声明式UI，并且有自己的一套ArkUI用来布局。已经可以预见后面逃不过相关的学习了，先放一个文档在这里：ArkUI文档
先不深入的学习，通过下面的图能够大概知道这段代码在干什么就行
添加第二个页面、以及路由
再接着添加第二个页面Second.ets，文件位置与Index.ets同级
typescript
// Second.ets
// 导入页面路由模块
import { router } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
struct Second {
@State message: string = 'Hi there'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button() {
Text('Back')
.fontSize(25)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
// 返回按钮绑定onClick事件，点击按钮时返回到第一页
.onClick(() => {
console.info(`Succeeded in clicking the 'Back' button.`)
try {
// 返回第一页
router.back()
console.info('Succeeded in returning to the first page.')
} catch (err) {
let code = (err as BusinessError).code;
let message = (err as BusinessError).message;
console.error(`Failed to return to the first page. Code is ${code}, message is ${message}`)
}
})
}
.width('100%')
}
.height('100%')
}
}添加第二个页面后要记得添加路由，个人感觉操作类似于在小程序开发中的添加路由。
ok，重新跑一下，即可体验新的点击按钮，跳转页面的功能。
