大连门户网站建设,网站中数据库教程,凡客是什么品牌,介绍产品网站制作组件是 OpenHarmony 页面最小显示单元#xff0c;一个页面可由多个组件组合而成#xff0c;也可只由一个组件组合而成#xff0c;这些组件可以是ArkUI开发框架自带系统组件#xff0c;比如 Text 、 Button 等#xff0c;也可以是自定义组件#xff0c;本节笔者简单介绍一… 组件是 OpenHarmony 页面最小显示单元一个页面可由多个组件组合而成也可只由一个组件组合而成这些组件可以是ArkUI开发框架自带系统组件比如 Text 、 Button 等也可以是自定义组件本节笔者简单介绍一下自定义组件的语法规范。 定义组件 自定义一个组件首先要定义好名称尽量做到见名知意比如定义一个标题栏组件笔者把它命名为 TitleBar 为了让系统知道这是一个组件需要使用 Component 修饰符和 struct 关键字修饰格式【Component struct 组件名称】如下所示 Component struct TitleBar {build() {// 省略} }Entry Component struct Index {build() {// 省略} } struct表示 TitleBar 是一个结构体使用 struct 关键字必须实现 build() 方法否则编译器报错Require build function for struct 。Component表示 TitleBar 这个结构体具有组件化的能力也就是说它可以成为一个独立的组件。Entry表示当前组件是页面的总入口简单理解就是页面的根节点一个页面有且仅有一个 Entry 修饰符只有被 Entry 修饰的组件或者子组件才会在页面上显示。 自定义组件禁止添加构造函数否则编译器报错。 更多鸿蒙开发应用知识已更新gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md参考前往。 刷新组件 使用 struct 关键字修饰完 TitleBar 后必须实现 build() 方法该方法满足 Builder 构造器接口定义用于定义组件的声明式 UI 描述在组件创建或者组件内 State 修饰的变量更新时系统都会自动调用 build() 方法。 Component struct TitleBar {State count: number 0;build() {Flex() {Text(index: this.number)// ……}.width(100%).height(100%).backgroundColor(#aabbcc)} } 上述样例中当 count 的值发生了变化系统会自动调用 build() 方法更新相关属性值实现 UI 刷新的目的。 导出组件 自定义完组件后提供给外界使用时还要允许该组件可以导出导出组件使用关键字 export 如下所示 Component export struct TitleBar { // 使用export关键字导出TitleBar组件build() {Flex() {}.width(100%).height(100%).backgroundColor(#aabbcc)} } 使用组件 使用自定义组件用关键字 import 导入即可例如使用自定义组件 TibleBar 导入如下所示 import {TitleBar} from ../../common/widgets/titlebar // 导入TitleBarEntry Component struct Index {build() {Column() {TitleBar({titleBarAttribute: { // 使用TitleBar// 添加相关属性}})}.padding({bottom: 5}).backgroundColor(#010101).width(100%).height(100%)} } 自定义组件的使用和系统组件使用无差别直接引用即可如果自定义组件需要传值方式是在组件的构造方法中传递一个匿名对象 {} 进去且该匿名对象中的属性名称和类型要和自定义组件中的属性保持一致 组件生命周期 ArkUI开发框架赋予了组件独有的生命周期方法对于系统组件来讲生命周期方法是 onAppear 和 onDisAppear 组件的生命周期 使用 Component 修饰的组件ArkUI开发框架会自动为其赋予私有的生命周期方法 aboutToAppear() 和 aboutToDisappear() 它们用于通知开发者该自定义组件的生命周的变更。 aboutToAppear函数在创建自定义组件的新实例后在执行其 build() 函数之前执行。允许在该函数中改变状态变量更改将在后续执行 build() 函数中生效。aboutToDisappear函数在自定义组件析构消耗之前执行。不允许在该函数中改变状态变量特别是 Link 变量的修改可能会导致应用程序行为不稳定。 页面的生命周期 页面本质上也是一个组件只是页面对于组件来讲多了一个修饰符 Entry该修饰符表示当前组件是一个页面它需要在 config.json 中做配置页面除了具有组件的生命周期外它还有自己独有的生命周期方法 onPageShow页面显示时触发一次包括路由过程、应用进入前后台等场景仅 Entry 修饰的自定义组件生效。 onPageHide页面消失时触发一次包括路由过程、应用进入前后台等场景仅 Entry 修饰的自定义组件生效。 onBackPress当用户点击返回按钮时触发仅 Entry 修饰的自定义组件生效。该方法返回 boolean 类型的值说明如下 返回 true 表示页面自己处理返回逻辑, 不进行页面路由。返回 false 表示使用默认的返回逻辑。不返回值会作为 false 处理。 组件生命周期制作表格对比说明如下 函数名描述onAppear系统组件独有的方法组件从组件树上挂载的回调。onDisAppear系统组件独有的方法组件从组件树上卸载的回到。aboutToAppear函数在创建自定义组件的新实例后在执行其 build() 函数之前执行。允许在该函数中改变状态变量更改将在后续执行 build() 函数中生效。aboutToDisappear函数在自定义组件析构消耗之前执行。不允许在该函数中改变状态变量特别是 Link 变量的修改可能会导致应用程序行为不稳定。onPageShow页面显示时触发该回调包括路由过程、应用进入前后台等场景。仅 Entry 修饰的自定义组件生效。onPageHide页面消失时触发该回调包括路由过程、应用进入前后台等场景。仅 Entry 修饰的自定义组件生效。onBackPress当用户点击返回按钮时触发该方法返回 boolean 类型true表示页面自己处理返回逻辑, 不进行页面路由。false表示使用默认的返回逻辑。不返回值会作为 false 处理。仅 Entry 修饰的自定义组件生效。 这些回调函数是私有的在运行时由开发框架在特定的时间进行调用不能从应用程序中手动调用这些回调函数。 允许在生命周期函数中使用 Promise 和异步回调函数比如网络资源获取定时器设置等不允许在生命周期函数中使用 async await 。 再按一次退出应用 我们在使用第三方 APP 的时候会遇见点击返回键提示再按一次退出应用的场景比如在短时间内不按就不会退出 APP 达到留住用户的目的接下来我们实现这个再按一次退出应用的例子。 根据页面生命周期的方法可知点击返回键的时候会调用 onBackPress() 方法因此判断是否是第一次点击如果是则返回 true 并给用户提示如果不是则判断两次点击的时间间隔若间间隔小于 2 秒那么就直接退出 APP 否则给用户提示本样例复用第二章的测试代码如下所示 import app from system.app;Entry Component struct Index {private lastExitTime: number -1; // 记录点击时间State count: number 0; // 状态数据build() {Stack({alignContent: Alignment.BottomEnd}) { // 堆叠式布局Text(this.count.toString()) // 显示文本.fontSize(50) // 文字大小.textAlign(TextAlign.Center) // 居中对齐.size({width: 100%, height: 100%}) // 控件大小Button() // 显示一个按钮.size({width: 80, height: 80}) // 按钮大小.fontSize(50) // 按钮文字大小.onClick(() { // 按钮点击事件this.count; // count累加触发build()方法回调}).margin(50)}.width(100%).height(100%)}onBackPress() {if (-1 this.lastExitTime) { // 第一次点击返回键提示toastthis.lastExitTime new Date().getTime();prompt.showToast({message: 再按一次退出应用})return true;} else {let currentTime new Date().getTime();if(currentTime - this.lastExitTime 2000) { // 时间大于2000提示prompt.showToast({message: 再按一次退出应用})this.lastExitTime currentTime;return true;} else { // 2秒内点击退出APPapp.terminate();}}return false;} } 鸿蒙开发岗位需要掌握那些核心要领 目前还有很多小伙伴不知道要学习哪些鸿蒙技术不知道重点掌握哪些为了避免学习时频繁踩坑最终浪费大量时间的。 自己学习时必须要有一份实用的鸿蒙Harmony NEXT资料非常有必要。 这里我推荐根据鸿蒙开发官网梳理与华为内部人员的分享总结出的开发文档。内容包含了【ArkTS、ArkUI、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战】等技术知识点。 废话就不多说了接下来好好看下这份资料。 如果你是一名Android、Java、前端等等开发人员想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。鸿蒙OpenHarmony知识←前往。下面是鸿蒙开发的学习路线图。 针对鸿蒙成长路线打造的鸿蒙学习文档。鸿蒙OpenHarmony 学习手册共计1236页与鸿蒙OpenHarmony 开发入门教学视频帮助大家在技术的道路上更进一步。 其中内容包含 《鸿蒙开发基础》鸿蒙OpenHarmony知识←前往 ArkTS语言安装DevEco Studio运用你的第一个ArkTS应用ArkUI声明式UI开发.…… 《鸿蒙开发进阶》鸿蒙OpenHarmony知识←前往 Stage模型入门网络管理数据管理电话服务分布式应用开发通知与窗口管理多媒体技术安全技能任务管理WebGL国际化开发应用测试DFX面向未来设计鸿蒙系统移植和裁剪定制…… 《鸿蒙开发实战》鸿蒙OpenHarmony知识←前往 ArkTS实践UIAbility应用网络案例…… 最后 鸿蒙是完全具备无与伦比的机遇和潜力的预计到年底将有 5,000 款的应用完成原生鸿蒙开发这么多的应用需要开发也就意味着需要有更多的鸿蒙人才。鸿蒙开发工程师也将会迎来爆发式的增长学习鸿蒙势在必行