鸿蒙实战:ArkTs 开发一个鸿蒙应用

这篇具有很好参考价值的文章主要介绍了鸿蒙实战:ArkTs 开发一个鸿蒙应用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

学习过的 ArkTs 知识点,一步一步开发一个小的鸿蒙应用示例,涉及到  ArkTs 语法、注解 @Entry@Component@state、路由、生命周期、@Prop@Link 、常用组件的使用等等知识点。

要开发一个鸿蒙应用,首先我们需要知道 系统是如何找到页面的启动入口

鸿蒙如何启动应用

在 HarmonyOS 中,应用程序的启动入口 UIAbility,它继承自 Ability,所以我们需要声明一个 EntryAbilityEntryAbility 继承自 UIAbility。HarmonyOS 中的 Ability 类似于 Android 中的 Activity 是应用与用户交互的一个窗口。

我们需要在 module.json5 配置文件中指定 EntryAbility,系统就是靠这个配置来识别启动应用入口。

{  
 "module": {  
 ......  
 "pages": "$profile:main\_pages", // 通过profile下的资源文件配置  
 "abilities": \[  
 {  
 "name": "EntryAbility",  
 "srcEntry": "./ets/entryability/EntryAbility.ts",  
 "exported": true,  
 ......  
 }  
 \]  
 }  
}

配置文件中 pages 标签,在有 UIAbility 的场景下标签不能省略,用来声明路由跳转路径,如果想通过路由的方式,实现页面之间的跳转,需要在 pages 标签指向的文件 $profile:main_pages,添加页面的路径,否则无法跳转。

{  
 "src": \[  
 "pages/Index",  
 "pages/Second"  
 \]  
}

$profile:main_pages 指向的路径是文件夹 resources/base/profile 下面的配置文件 main_pages.json,其中文件名 (main_pages) 可自定义,和 pages 标签保持一致即可。

另外配置文件中还有一个 exported 标签,exported 标识当前 UIAbility 组件是否可以被其他应用调用。默认值为 false。

  • true :表示可以被其他应用调用

  • false :表示不可以被其他应用调用

如果这个 UIAbility 作为程序的启动入口,应该将 exported 设置为 true,否则启动时会报错。

error: failed to start ability.  
Error while Launching activity

如果这个 UIAbility 不可以被其他应用调用,也不作为程序的启动入口,那么 exported 应该设置为 false。避免带来安全问题。

当 HarmonyOS 应用启动时,系统首先会创建一个 EntryAbility 实例,实例创建完成之后,在进入 Foreground 之前,系统会创建一个 WindowStage 实例,每一个 Ability 实例,都对应一个 WindowStage 实例。

WindowStage 为本地窗口管理器,用于管理窗口相关的内容,例如与界面相关的获焦/失焦、可见/不可见。Ability 的生命周期和 WindowStage 回调对应的关系,如下图所示。

鸿蒙实战:ArkTs 开发一个鸿蒙应用,OpenHarmony,鸿蒙,Harmony OS,harmonyos,华为,鸿蒙开发,移动开发,前端开发

左图表示 UIAbility 的生命周期,每个生命周期分别做什么事,我会在下篇文章中分析,而右图表示 WindowStage 回调。

正如图中所示,在进入 Foreground 之前,系统会调用 onWindowStageCreate() 方法,在这方法中通过 loadContent() 方法设置启动时要加载的页面。

export default class EntryAbility extends UIAbility {  
 ......  
 onWindowStageCreate(windowStage: window.WindowStage): void {  
  
 windowStage.loadContent('pages/Index', (err, data) \=> {  
 if (err.code) {  
 // 页面加载失败处理  
 return;  
 }  
 // 页面加载成功  
 });  
 }  
  
 onWindowStageDestroy(): void {  
 // window 被销毁,释放 UI 资源  
 }  
}

我们在 loadContent() 方法中指定了要加载页面的路径 pages/Index 和一个回调函数,这样系统就会按照我们的配置寻找到要加载的页面。

当页面加载成功之后,接下来就是渲染 UI 了,那么 HarmonyOS 是如何渲染 UI。

如何渲染 UI

ArkTS 通过 struct 声明自定义组件名,使用 @Entry@Component 装饰的自定义组件作为页面的入口。

@Entry  
@Component  
struct Index {  
 ......  
}

而页面上的 UI 通过 build 方法进行构建,会在页面加载时首先进行渲染。

@Entry  
@Component  
struct Index {  
 build() {  
 Text("Hello World)  
 }  
}

build 方法主要用于构建和返回 UI 布局和组件,它的主要职责是构建应用的 UI,不允许执行业务逻辑或者其他非 UI 的操作。这是为了确保 UI 代码的清晰性和维护性,同时遵循了关注点分离(Separation of Concerns)的原则

这可能有人会有疑问,如果不在 build 方法写非 UI 逻辑,那么数据变化了,怎么更新 UI 呢,这就需要用到注解 @state,在 HarmonyOS 中注解有很多,其中 @state 至关重要。而且注解 @state 在实际开发中用的非常频繁。

注解 @state 主要用于刷新 UI, 当用注解  @state 标记的成员变量内容发生变化时,会自动重新渲染 UI。具体的表现如下图所示。

鸿蒙实战:ArkTs 开发一个鸿蒙应用,OpenHarmony,鸿蒙,Harmony OS,harmonyos,华为,鸿蒙开发,移动开发,前端开发

点击左图上的按钮,会获取数据, 当数据变化时,会自动刷新 UI,结果如右图所示。那么在代码中如何实现呢。

我们可以在代码中,声明一个用注解 @State 标记的成员变量 listItems

@State private listItems: Array<string\> \= \[\];

然后在 build 方法中遍历 listItems 渲染 UI。

 build() {  
 Column() {  
 ForEach(this.listItems, (item: string) \=> {  
 Column() {  
 Text(item)  
 }  
 })  
 }  
 }

最后我们在 Button 中绑定 onClick 事件,点击时更新 listItems 数据,当 listItems 数据发生变化时,会自动重新渲染 UI 调用 build 方法刷新布局。

 parseData() {  
 for (let i \= 0; i < 10; i++) {  
 this.listItems.push(\` item ${i}\`)  
 }  
 }  
  
 build() {  
 Column() {  
 Button("click me")  
 .onClick(() \=> {  
 this.parseData()  
 })  
 ForEach(this.listItems, (item: string) \=> {  
 Column() {  
 Text(item)  
 }  
 })  
 }  
 }

为了能让大家更好的学习鸿蒙 (OpenHarmony) 开发技术,这边特意整理了《鸿蒙 (OpenHarmony)开发学习手册》(共计890页),希望对大家有所帮助:https://qr21.cn/FV7h05

《鸿蒙 (OpenHarmony)开发学习手册》

入门必看:https://qr21.cn/FV7h05

  1. 应用开发导读(ArkTS)
  2. ……

鸿蒙实战:ArkTs 开发一个鸿蒙应用,OpenHarmony,鸿蒙,Harmony OS,harmonyos,华为,鸿蒙开发,移动开发,前端开发

HarmonyOS 概念:https://qr21.cn/FV7h05

  1. 系统定义
  2. 技术架构
  3. 技术特性
  4. 系统安全

鸿蒙实战:ArkTs 开发一个鸿蒙应用,OpenHarmony,鸿蒙,Harmony OS,harmonyos,华为,鸿蒙开发,移动开发,前端开发

如何快速入门?:https://qr21.cn/FV7h05

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. 构建第一个JS应用
  4. ……

鸿蒙实战:ArkTs 开发一个鸿蒙应用,OpenHarmony,鸿蒙,Harmony OS,harmonyos,华为,鸿蒙开发,移动开发,前端开发

开发基础知识:https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ……

鸿蒙实战:ArkTs 开发一个鸿蒙应用,OpenHarmony,鸿蒙,Harmony OS,harmonyos,华为,鸿蒙开发,移动开发,前端开发

基于ArkTS 开发:https://qr21.cn/FV7h05

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……

鸿蒙实战:ArkTs 开发一个鸿蒙应用,OpenHarmony,鸿蒙,Harmony OS,harmonyos,华为,鸿蒙开发,移动开发,前端开发文章来源地址https://www.toymoban.com/news/detail-835391.html

到了这里,关于鸿蒙实战:ArkTs 开发一个鸿蒙应用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 鸿蒙Harmony应用开发—ArkTS声明式开发(通用属性:边框设置)

    设置组件边框样式。 说明: 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 border(value: BorderOptions) 设置边框样式。 卡片能力:  从API version 9开始,该接口支持在ArkTS卡片中使用。 系统能力:  SystemCapability.ArkUI.ArkUI.Full 参数: 参数

    2024年04月23日
    浏览(51)
  • 鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:Checkbox)

    提供多选框组件,通常用于某选项的打开或关闭。 说明: API version 11开始,Checkbox默认样式由圆角方形变为圆形。 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 无 Checkbox(options?: CheckboxOptions) 多选框组件。 卡片能力:  从

    2024年04月11日
    浏览(49)
  • 鸿蒙Harmony应用开发—ArkTS声明式开发(容器组件:Scroll)

    可滚动的容器组件,当子组件的布局尺寸超过父组件的尺寸时,内容可以滚动。 说明: 该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 该组件嵌套List子组件滚动时,若List不设置宽高,则默认全部加载,在对性能有要求的场

    2024年04月13日
    浏览(72)
  • 鸿蒙Harmony应用开发—ArkTS声明式开发(自定义事件分发)

    ArkUI在处理触屏事件时,会在触屏事件触发前进行按压点和组件区域的触摸测试,来收集需要响应触屏事件的组件,再基于触摸测试结果分发相应的触屏事件。在父节点,开发者可以通过onChildTouchTest决定如何让子节点去做触摸测试,影响子组件的触摸测试,最终影响后续的触

    2024年04月14日
    浏览(56)
  • 鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:ImageAnimator)

    提供帧动画组件来实现逐帧播放图片的能力,可以配置需要播放的图片列表,每张图片可以配置时长。 说明: 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 无 ImageAnimator() 从API version 10开始,该接口支持在ArkTS卡片中使用。

    2024年03月15日
    浏览(49)
  • 鸿蒙Harmony应用开发—ArkTS声明式开发(容器组件:Flex)

    以弹性方式布局子组件的容器组件。 说明: 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 Flex组件在渲染时存在二次布局过程,因此在对性能有严格要求的场景下建议使用Column、Row代替。 Flex组件主轴默认不设置时撑满父容

    2024年04月11日
    浏览(50)
  • 鸿蒙Harmony应用开发—ArkTS声明式开发(通用属性:组件标识)

    id为组件的唯一标识,在整个应用内唯一。本模块提供组件标识相关接口,可以获取指定id组件的属性,也提供向指定id组件发送事件的功能。 说明: 从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 名称 参数说明 描述 id string 组件

    2024年04月22日
    浏览(65)
  • 鸿蒙Harmony应用开发—ArkTS声明式开发(容器组件:List)

    列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据,例如图片和文本。 说明: 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 该组件内容区小于一屏时,默认没有回弹效果。需要回弹效果,可以通过edgeEffe

    2024年04月13日
    浏览(104)
  • 鸿蒙Harmony应用开发—ArkTS声明式开发(通用属性:尺寸设置)

    用于设置组件的宽高、边距。 说明: 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 width(value: Length) 设置组件自身的宽度,缺省时使用元素自身内容需要的宽度。若子组件的宽大于父组件的宽,则会画出父组件的范围。 从API ver

    2024年03月15日
    浏览(85)
  • 鸿蒙Harmony应用开发—ArkTS声明式开发(通用属性:文本通用)

    文本通用属性目前只针对包含文本元素的组件,设置文本样式。 说明: 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 名称 参数类型 描述 fontColor ResourceColor 设置字体颜色。 从API version 9开始,该接口支持在ArkTS卡片中使用。 fon

    2024年03月23日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包