当前位置: 首页 > 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树的…...

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站,会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后,网站没有变化的情况。 不熟悉siteground主机的新手,遇到这个问题,就很抓狂,明明是哪都没操作错误&#x…...

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目:3442. 奇偶频次间的最大差值 I 思路 :哈希,时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况,哈希表这里用数组即可实现。 C版本: class Solution { public:int maxDifference(string s) {int a[26]…...

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板,载入页面后,会显示引导弹窗,适用于引导用户使用页面,点击完成后,会显示下一个引导弹窗,直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中,每个页面需要使用ref,onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入,需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集,包含8种湿地亚类,该数据以0.5X0.5的瓦片存储,我们整理了所有属于中国的瓦片名称与其对应省份,方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

定时器任务——若依源码分析

分析util包下面的工具类schedule utils: ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类,封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz,先构建任务的 JobD…...

测试markdown--肇兴

day1: 1、去程:7:04 --11:32高铁 高铁右转上售票大厅2楼,穿过候车厅下一楼,上大巴车 ¥10/人 **2、到达:**12点多到达寨子,买门票,美团/抖音:¥78人 3、中饭&a…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好,总是藏在那些你咬牙坚持的日子里。 硬件:OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写,"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解,适合用作学习或写简历项目背景说明。 🧠 一、概念简介:Solidity 合约开发 Solidity 是一种专门为 以太坊(Ethereum)平台编写智能合约的高级编…...