【HarmonyOS】HarmonyOS NEXT学习日记:一、创建和运行一个页面

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

相关推荐
dsywws几秒前
Linux学习笔记之时间日期和查找和解压缩指令
linux·笔记·学习
道法自然04021 分钟前
Ethernet 系列(8)-- 基础学习::ARP
网络·学习·智能路由器
爱吃生蚝的于勒7 分钟前
深入学习指针(5)!!!!!!!!!!!!!!!
c语言·开发语言·数据结构·学习·计算机网络·算法
SuperHeroWu71 小时前
【HarmonyOS】键盘遮挡输入框UI布局处理
华为·harmonyos·压缩·keyboard·键盘遮挡·抬起
cuisidong19972 小时前
5G学习笔记三之物理层、数据链路层、RRC层协议
笔记·学习·5g
南宫理的日知录2 小时前
99、Python并发编程:多线程的问题、临界资源以及同步机制
开发语言·python·学习·编程学习
数据与后端架构提升之路3 小时前
从神经元到神经网络:深度学习的进化之旅
人工智能·神经网络·学习
一行13 小时前
电脑蓝屏debug学习
学习·电脑
星LZX3 小时前
WireShark入门学习笔记
笔记·学习·wireshark
阑梦清川3 小时前
在鱼皮的模拟面试里面学习有感
学习·面试·职场和发展