【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代码如下，并添加了每一行的解析

// 导入页面路由模块
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同级

// 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，重新跑一下，即可体验新的点击按钮，跳转页面的功能。