当前位置: 首页 > news >正文

【11】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-模块化语法与自定义组件

序言:

本文详细讲解了关于鸿蒙系统学习中的模块化语法与自定义组件,在模块化语法中我们学习到了多种导入导出方式,实现了在一个项目中,通过引用不同的组件,让我们整体代码的可读性更强,相当于我们把一个手机拆分成了屏幕、芯片、外壳...等多种原件,最后组装成手机。

然后我们学习了自定义组件,在自定义组件模块中,我们学到了自定义组件中的各种成员参数的性质,基础属性和成员变量函数及成员函数的区别,最后我们学习了BuilderParam构建函数,可以起到传递UI的作用,使我们的代码更加灵活和具有可维护性。

笔者也是跟着B站黑马的课程一步步学习,学习的过程中添加部分自己的想法整理为笔记分享出来,如有代码错误或笔误,欢迎指正。

B站黑马的课程链接:鸿蒙课程介绍_哔哩哔哩_bilibili

往期笔记:

【01】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-ArkTs基础语法与界面开发基础

【02】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-界面进阶与布局排布(附QQ登陆、得物、京东登陆综合案例+代码)

【03】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-更多布局(弹性/层叠)方式与界面开发综合(附飞狗卡片+B站卡片案例+实战开发支付宝界面+代码)

【04】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-ArkTs进阶运算符+状态管理(附综合案例美团购物车)

【05】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-条件渲染+if/switch判断与for/while循环(附计数器、京东加购案例)
【06】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-综合案例·生肖抽奖卡具体实现(类似支付宝集五福)
【07】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-Swiper轮播组件与样式&结构重用  

【08】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-Scroll容器与Tabs组件

【09】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-Class类基础全解(属性、方法、继承复用、判断)

【10】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-泛型基础全解(泛型函数、泛型接口、泛型类)及参数、接口补充

目录

一.模块化语法

1.模块化基本认知

2.默认导出和导入

3.按需导出和导入

4.全部导入

二.自定义组件

1.自定义组件-基础

2.自定义组件-通用属性和语法

3.自定义组件-成员变量函数


一.模块化语法

1.模块化基本认知

1)简介:

模块化:把一个大的程序,【拆分】成若干小的模块,通过【特定的语法】,可以进行任意组合,ArkTs中的每个ets文件,都可以看作是一个模块

2.默认导出和导入

1)简介:

默认导出:指一个模块,只能默认导出一个值或对象。使用时,可以自定义导入名称。

2)使用步骤:

①当前模块中国导出模块。

②需要使用的地方导入模块。

3)语法:

//默认导出
export  default 需要导出的内容
//默认导入
import xxx from '模块路径'

4)基础代码实例:

①导入num

src/main/ets/pages/05tools/module1.ets

//一个ets文件,就是一个模块,每个模块之间独立。
interface Person{name:stringage:number
}
let num:number = 10
let person:Person = {name:'河马',age:88
}
//默认导出
export default num

src/main/ets/pages/Index.ets

//路径:查找文件时,从起点到终点的路线
//相对路径:从当前文件出发查找目标文件
// 找上一级用../
// 同级目录用 ./
import myNum from './05tools/module1'
console.log('module1中的数据',myNum)

如果想导出和导入person也是一样的

②导入person

src/main/ets/pages/05tools/module1.ets

//一个ets文件,就是一个模块,每个模块之间独立。
interface Person{name:stringage:number
}
let num:number = 10
let person:Person = {name:'河马',age:88
}
//默认导出
export default person

src/main/ets/pages/Index.ets

//路径:查找文件时,从起点到终点的路线
//相对路径:从当前文件出发查找目标文件
// 找上一级用../
// 同级目录用 ./
import result from './05tools/module1'
console.log('module1中的数据',JSON.stringify(result))

③结果

3.按需导出和导入

1)简介:

按需导出:指一个模块,可以按照需要,导出多个特性。

2)基础代码实例:

①写法1 逐个导出

src/main/ets/pages/05tools/module2.ets

//按需导出
//写法1 逐个导出
export let name1:string = '荷花'
export let price:number = 9.98
export let sayHi = ()=>{console.log('打招呼')
}

src/main/ets/pages/Index.ets

//2.按需导入
import {name1,price,sayHi}from '../pages/05tools/module2'
console.log('module2中的数据',name1,price)
sayHi()

②写法2 一次性多个特性,进行导出

let name1:string = '荷花'
let price:number = 9.98
let sayHi = ()=>{console.log('打招呼')
}
//写法2 一次性多个特性,进行导出
export {name1,price,sayHi
}

Index代码不变,最后运行的效果都是一样的

3)别名:

4.全部导入

1)简介:

将所有的按需导入,全部导入进来→导出部分不需要调整,调整导入的语法即可。

2)基础代码实例:

src/main/ets/pages/05tools/module3.ets

let name1:string = '吕小布'
let name2:string = '陈美嘉'
let name3:string = '曾小贤'let price1:number = 8888
let price2:number = 5555let sayHi=()=>{console.log('打招呼')
}let run=()=>{console.log('奔跑')
}export {name1,name2,name3,price1,price2,sayHi,run
}

src/main/ets/pages/Index.ets

//3.全部导入
import * as Module3 from '../pages/05tools/module3'
console.log('全部导入方法中的数据',Module3.name1)
console.log('全部导入方法中的数据',Module3.name2)
console.log('全部导入方法中的数据',Module3.name3)
console.log('全部导入方法中的数据',Module3.price1)
Module3.sayHi()
Module3.run()

结果:

二.自定义组件

1.自定义组件-基础

1)概念:

由框架直接提供的称为系统组件,由开发者定义的称为自定义组件。

2)基本语法及使用:

@Component
struct HelloComponent{//状态变量@State message:string=''build() {//描述UIColumn(){Text('我是一个自定义组件')Button('我是按钮')}}
}
@Entry
@Componentstruct Index {build() {Column(){HelloComponent()}}}

3)具体应用:

比如说我们在一个界面上划分为上中下三部分,如头部、身体和腿,我们就可以定义三个组件来分别表示。

@Component
struct HelloComponent{//状态变量@State message:string=''build() {//描述UIColumn(){Text('我是一个自定义组件')Button('我是按钮')}}
}
@Component
struct MyHead{//状态变量@State message:string=''build() {//描述UIColumn(){Text('我是一个头部')Button('我是按钮')}}
}
@Component
struct MyBody{//状态变量@State message:string=''build() {//描述UIColumn(){Text('我是一个中间的身体')Button('我是按钮')}}
}
@Component
struct MyLeg{//状态变量@State message:string=''build() {//描述UIColumn(){Text('我是一个底下的腿部')Button('我是按钮')}}
}
@Entry
@Componentstruct Index {build() {Column(){HelloComponent()MyHead()MyBody()MyLeg()}}}

2.自定义组件-通用属性和语法

1)简介:

自定义组件可以通过点语法,设置 通用样式(宽高背景色...)、通用事件。

2)基础语法及使用:

@Component
struct HelloComponent {@State info:string = '默认info'build() {Row(){Text(this.info)Button('修改数据')}.width(100).height(80).backgroundColor(Color.Brown)}
}
@Entry
@Componentstruct Index {build() {Column(){HelloComponent().width(200).height(100).backgroundColor(Color.Orange).onClick(()=>{console.log('外部添加的点击事件')})}}
}

我们未来会建一个Component目录中,当我们需要什么组件,就可以把这些组件写在这个文件夹里,这样我们以后用到这些组件就可以使用上文提到的导出,一般我们都是按需导出。

我们在文件夹里写的组件因为不是入口,所以无法直接预览,这个时候我们可以添加@Preview标签,这样我们就可以预览了,方便我们进行组件的调试与编写。

3.自定义组件-成员变量函数

1)简介:

除了必须要实现build()函数外,还可以定义其他成员函数,以及成员变量。

成员变量的值→外部可传参覆盖。

2)基础语法及使用

@Component
struct Module1 {//状态变量@State msg:string=''//成员变量-数据info:string = ''//成员变量*函数-可以外部修改sayHello=()=>{}//成员函数-不可以外部修改sayHi(){}build() {///.....描述UI}
}
@Entry
@Componentstruct Index {build() {Column(){Module1()Module1({info:'你好',msg:'修改一下状态变量'})Module1({sayHello(){console.log('传入的逻辑')}})}}}

3)BuilderParam构建函数-传递UI

@Component
struct SonCom {//1.定义构建函数@BuilderParam ContentBuilder:()=>void=this.defaultBuilder//2.定义默认值@BuilderdefaultBuilder(){Text('默认的内容')}build() {//3.使用构建函数,构建结构Column(){this.ContentBuilder()}}
}
@Entry
@Componentstruct Index {build() {Column(){SonCom(){Button('传入的内容')}}}}

感谢观看

相关文章:

【11】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-模块化语法与自定义组件

序言: 本文详细讲解了关于鸿蒙系统学习中的模块化语法与自定义组件,在模块化语法中我们学习到了多种导入导出方式,实现了在一个项目中,通过引用不同的组件,让我们整体代码的可读性更强,相当于我们把一个手…...

Angular 客户端渲染时,从 ng-state 里读取 SSR 状态的具体逻辑

Angular 在客户端启动时,如何检测页面中的 ng-state 标签并从中读取 JSON 对象,进而还原应用的状态,是服务器端渲染(SSR)与客户端渲染(CSR)无缝衔接的核心环节之一。为了理解这个过程&#xff0…...

C++的联合体union

联合体有点像class类型或者struct类型,只不过它一次只占用一个成员的内存。 通常我们有一个结构体,声明了4个浮点数,那么结构体中就有4*416字节。当我们不断向类或者结构体中添加成员时,其大小也会不断增大。 union只有一个成员…...

JavaScript 中的变量作用域

JavaScript 中的变量作用域 在 JavaScript 中,理解变量作用域是非常重要的,它决定了变量的可见性和生命周期。本文将深入探讨 JavaScript 中的变量作用域,帮助你更好地掌握这一关键概念。 一、什么是变量作用域? 变量作用域指的…...

【C++】二叉搜索树+变身 = 红黑树

🚀个人主页:小羊 🚀所属专栏:C 很荣幸您能阅读我的文章,诚请评论指点,欢迎欢迎 ~ 目录 前言一、定义与性质二、红黑树节点的定义三、新增节点插入四、验证红黑树五、AVL树和红黑树比较 前言 本文仅适合了…...

万界星空科技MES数据集成平台

制造执行系统MES作为连接企业上层ERP系统和现场控制系统的桥梁,承担了实时数据采集、处理、分析和传递的重要任务。MES数据集成平台是一个集成各类数据源,将数据进行整合和统一管理的系统,通过提供标准化接口和协议,实现数据的无缝…...

Ajax和axios简单用法

Ajax Ajax(Asynchronous JavaScript And XML,异步的JavaScript和XML)。 作用是: 数据交换:通过Ajax可以给服务器发送请求,并获取服务器响应的数据。异步交互:可以在不重新加载整个页面的情况…...

Chillax2024.08.01 |免费的白噪音软件

支持多种声音叠加,单独调整音量,定时功能,完全免费。 大小:13.5M 百度网盘:https://pan.baidu.com/s/1dWpdYoO1bPCnHR1bXpTZEg?pwdolxt 夸克网盘:https://pan.quark.cn/s/89dc88c56e26 移动网盘&#xff…...

Python自动化办公:从Excel到PDF生成的全流程

解锁Python编程的无限可能:《奇妙的Python》带你漫游代码世界 在现代办公环境中,数据处理和报表生成是日常工作中非常重要的一环。Python作为一门灵活且功能强大的编程语言,能够通过一系列开源库实现办公自动化。本文将详细讲解如何使用Python实现从Excel数据处理到生成PDF…...

allegro 不同页面相同网路的连接

一、cadence学习笔记(1)-原理图库制作 绘制好各个界面 放置OFFPAGE 绘制好单个界面是这个样子的,并将剩下的界面进行相同的操作 所有界面完成后,进入设计界面 右键design1.dsn选择Annotate… 点击OK后可以看到WiFi界面OFFPAGE旁边…...

医院管理新趋势:Spring Boot技术引领

4系统概要设计 4.1概述 本系统采用B/S结构(Browser/Server,浏览器/服务器结构)和基于Web服务两种模式,是一个适用于Internet环境下的模型结构。只要用户能连上Internet,便可以在任何时间、任何地点使用。系统工作原理图如图4-1所示: 图4-1系统工作原理…...

Java 新手教程!面向对象设计一口气讲完![]~( ̄▽ ̄)~*(中)

目录 Java 内部类 Java面向对象的设计 - Java 内部类 什么是内部类? 例子 使用内部类的优点 访问局部变量的限制 内部类和继承 内部类中没有静态成员 生成的内部类的类文件 静态上下文中的内类 Java 内部类类型 Java面向对象设计 - Java内部类类型 成员内…...

驰骋低代码功能升级 - 实体功能权限控制

1. 权限控制升级概述 新增功能:对新建、保存、删除、归档、撤销归档等操作的按钮进行精细化的权限控制。展示位置:这些权限控制体现在查询页面和实体卡片页面的工具栏按钮上。 2. 权限控制方式 新建 0. 不控制:任何人都可以新建。1. 指定岗…...

Matlab|考虑阶梯式碳交易机制与电制氢的综合能源系统热电优化

目录 1 主要内容 2 部分程序 3 程序结果 4 下载链接 1 主要内容 该程序复现《考虑阶梯式碳交易机制与电制氢的综合能源系统热电优化》,主要内容:“双碳”背景下,为提高能源利用率,优化设备的运行灵活性,进一步降低…...

Midjourney零基础学习

Midjourney学习笔记TOP01 什么是AI艺术 AI艺术指的是使用AI技术创作的艺术作品,包括AI诗歌、AI音乐、AI绘画等多种艺术表现形式;AI艺术可以被视为计算机程序与人类合作创作作品;除了Midjourney,比较流行的AI图像生成工具还有Stab…...

词嵌入(Word Embedding)之Word2Vec、GloVe、FastText

简介:个人学习分享,如有错误,欢迎批评指正。 词嵌入(Word Embedding)是一种将词语映射到低维稠密向量空间的技术,能够捕捉词与词之间的语义关系。Word2Vec、GloVe、FastText 是常见的词嵌入方法&#xff0c…...

Vue82 路由器的两种工作模式 以及 node express 部署前端

笔记 对于一个url来说,什么是hash值?—— #及其后面的内容就是hash值。hash值不会包含在 HTTP 请求中,即:hash值不会带给服务器。hash模式: 地址中永远带着#号,不美观 。若以后将地址通过第三方手机app分享…...

[C#]使用纯opencvsharp部署yolov11-onnx图像分类模型

【官方框架地址】 https://github.com/ultralytics/ultralytics.git 【算法介绍】 使用纯OpenCvSharp部署YOLOv11-ONNX图像分类模型是一项复杂的任务,但可以通过以下步骤实现: 准备环境:首先,确保开发环境已安装OpenCvSharp和必…...

【机器学习-无监督学习】概率图模型

【作者主页】Francek Chen 【专栏介绍】 ⌈ ⌈ ⌈Python机器学习 ⌋ ⌋ ⌋ 机器学习是一门人工智能的分支学科,通过算法和模型让计算机从数据中学习,进行模型训练和优化,做出预测、分类和决策支持。Python成为机器学习的首选语言,…...

每日学习一个数据结构-AVL树

文章目录 概述一、定义与特性二、平衡因子三、基本操作四、旋转操作五、应用场景 Java代码实现 概述 AVL树是一种自平衡的二叉查找树,由两位俄罗斯数学家G.M.Adelson-Velskii和E.M.Landis在1962年发明。想了解树的相关概念,请点击这里。以下是对AVL树的…...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄

文|魏琳华 编|王一粟 一场大会,聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中,汇集了学界、创业公司和大厂等三方的热门选手,关于多模态的集中讨论达到了前所未有的热度。其中,…...

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施,由雇主和个人按一定比例缴纳保险费,建立社会医疗保险基金,支付雇员医疗费用的一种医疗保险制度, 它是促进社会文明和进步的…...

工程地质软件市场:发展现状、趋势与策略建议

一、引言 在工程建设领域,准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具,正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

css3笔记 (1) 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时&#xff0c;性能会显著下降。以下是优化思路和简易实现方法&#xff1a; 一、核心优化思路 减少 JOIN 数量 数据冗余&#xff1a;添加必要的冗余字段&#xff08;如订单表直接存储用户名&#xff09;合并表&#xff1a;将频繁关联的小表合并成…...

day36-多路IO复用

一、基本概念 &#xff08;服务器多客户端模型&#xff09; 定义&#xff1a;单线程或单进程同时监测若干个文件描述符是否可以执行IO操作的能力 作用&#xff1a;应用程序通常需要处理来自多条事件流中的事件&#xff0c;比如我现在用的电脑&#xff0c;需要同时处理键盘鼠标…...

书籍“之“字形打印矩阵(8)0609

题目 给定一个矩阵matrix&#xff0c;按照"之"字形的方式打印这个矩阵&#xff0c;例如&#xff1a; 1 2 3 4 5 6 7 8 9 10 11 12 ”之“字形打印的结果为&#xff1a;1&#xff0c;…...