建设网站哪个比较好,潍坊网站建设尚荣,网站开发主管,国外免费空间网站申请学习过的 ArkTs 知识点#xff0c;一步一步开发一个小的鸿蒙应用示例#xff0c;涉及到 ArkTs 语法、注解 Entry 、 Component、state、路由、生命周期、Prop、 Link 、常用组件的使用等等知识点。
要开发一个鸿蒙应用#xff0c;首先我们需要知道 系统是如何找到页面的启…学习过的 ArkTs 知识点一步一步开发一个小的鸿蒙应用示例涉及到 ArkTs 语法、注解 Entry 、 Component、state、路由、生命周期、Prop、 Link 、常用组件的使用等等知识点。
要开发一个鸿蒙应用首先我们需要知道 系统是如何找到页面的启动入口。
鸿蒙如何启动应用
在 HarmonyOS 中应用程序的启动入口 UIAbility它继承自 Ability所以我们需要声明一个 EntryAbility。EntryAbility 继承自 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 回调对应的关系如下图所示。 左图表示 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。具体的表现如下图所示。 点击左图上的按钮会获取数据, 当数据变化时会自动刷新 UI结果如右图所示。那么在代码中如何实现呢。
我们可以在代码中声明一个用注解 State 标记的成员变量 listItems。
State private listItems: Arraystring\ \ \[\];然后在 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
应用开发导读(ArkTS)…… HarmonyOS 概念https://qr21.cn/FV7h05
系统定义技术架构技术特性系统安全 如何快速入门https://qr21.cn/FV7h05
基本概念构建第一个ArkTS应用构建第一个JS应用…… 开发基础知识https://qr21.cn/FV7h05
应用基础知识配置文件应用数据管理应用安全管理应用隐私保护三方应用调用管控机制资源分类与访问学习ArkTS语言…… 基于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.……
