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

news2024/10/6 11:42:54

序言：

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

然后我们学习了自定义组件，在自定义组件模块中，我们学到了自定义组件中的各种成员参数的性质，基础属性和成员变量函数及成员函数的区别，最后我们学习了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:string
  age: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:string
  age: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 = 5555


let 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() {
    //描述UI
    Column(){
      Text('我是一个自定义组件')
      Button('我是按钮')
    }
  }
}
@Entry
@Component


struct Index {


  build() {
    Column(){
      HelloComponent()
    }
  }


}

3）具体应用：

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

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


struct 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
@Component


struct 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
@Component


struct Index {


  build() {
    Column(){
      Module1()
      Module1({info:'你好',msg:'修改一下状态变量'})
      Module1({sayHello(){console.log('传入的逻辑')}})
    }
  }


}

3）BuilderParam构建函数-传递UI

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


struct Index {


  build() {
    Column(){
      SonCom(){
        Button('传入的内容')
      }


    }
  }


}

感谢观看

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2191810.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【系统方案】系统设计方案书，可视化设计方案（word）

【系统方案】系统设计方案书，可视化设计方案（word）

第 一 章 系统总体设计 1.1 总体架构 1.1.1 系统拓扑 1.1.2 系统组成 1.2 设计概述 1.3 平台系统功能 1.3.1 总部数据看板 1.3.2 项目部数据看板 1.3.3 视频联网系统 1.3.4 实名制考勤系统 1.3.5 安全生产系统 1.3.6 塔吊安全监控子系统 1.3.7 施工升降机安全监控管系统 1.3.8 …
阅读更多...
聊天记录怎么监控？企业微信聊天记录监控的2个方法分享！员工权益vs企业管理

聊天记录怎么监控？企业微信聊天记录监控的2个方法分享！员工权益vs企业管理

在企业管理与员工权益的平衡中，聊天记录的监控成为了一个备受争议的话题。 一方面，企业希望通过监控聊天记录来确保信息安全、规范员工行为，并防止潜在的风险； 另一方面，员工则强调个人隐私和沟通自由的重要性。 本文…
阅读更多...
大模型技术进阶路线，有了基础应该怎么进阶？

大模型技术进阶路线，有了基础应该怎么进阶？

“ 高性能大模型的打造，是一项复杂的系统性工程 ” 在上一篇文章中讲了学习大模型的基础路线，而如果是对有一定基础的人来说，应该怎么进阶呢？也就是说大模型更加高级的技术栈有哪些？ 一个好的基础能够让你在学习的道…
阅读更多...
《向量数据库指南》——Mlivus Cloud打造生产级AI应用利器

《向量数据库指南》——Mlivus Cloud打造生产级AI应用利器

哈哈，各位向量数据库和AI应用领域的朋友们，大家好！我是大禹智库的向量数据库高级研究员王帅旭，也是《向量数据库指南》的作者。今天，我要和大家聊聊如何使用Mlivus Cloud来搭建生产级AI应用。这可是个热门话题哦，相信大家都非常感兴趣！ 《向量数据库指南》 使用Mlivus …
阅读更多...
降低大模型幻觉的5种方案

降低大模型幻觉的5种方案

降低大模型幻觉的5种方案 大语言模型（如GPT-4）在生成文本时，有时会产生所谓的“幻觉”——即生成的内容虽然语法和逻辑上看似正确，但实际上是不准确或虚构的。为了减少这种现象，以下是五种有效的方案：Prom…
阅读更多...
必备指南：人人适用的AI大模型学习路径！

必备指南：人人适用的AI大模型学习路径！

23年 AI 大模型技术狂飙一年后，24年 AI 大模型的应用已经在爆发，因此掌握好 AI 大模型的应用开发技术就变成如此重要，那么如何才能更好地掌握呢？一份 AI 大模型详细的学习路线就变得非常重要！ 由于 AI 大模型应用技术…
阅读更多...
R语言绘制散点图

R语言绘制散点图

散点图是一种在直角坐标系中用数据点直观呈现两个变量之间关系、可检测异常值并探索数据分布的可视化图表。它是一种常用的数据可视化工具，我们通过不同的参数调整和包的使用，可以创建出满足各种需求的散点图。 常用绘制散点图的函数有plot()函数和ggpl…
阅读更多...
图解IP分类及子网掩码计算实例

图解IP分类及子网掩码计算实例

一、什么是IP地址 在网络世界中，人们为了通信方便给每一台计算机都事先分配一个类似电话号码一样的标识地址，即IP地址。根据TCP/IP协议，IP地址由32位二进制数组成，而且在INTERNET范围内是唯一的。假如某台计算机IP地址为11000000…
阅读更多...
基于SpringBoot vue 医院病房信息管理系统设计与实现

基于SpringBoot vue 医院病房信息管理系统设计与实现

博主介绍：专注于Java（springboot ssm 等开发框架） vue .net php python(flask Django) 小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设，从业十五余年开发设计教学工作☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不然下次找…
阅读更多...
SpringBoot+ElasticSearch7.12.1+Kibana7.12.1简单使用

SpringBoot+ElasticSearch7.12.1+Kibana7.12.1简单使用

案例简介 本案例是把日志数据保存到Elasticsearch的索引中，并通过Kibana图形化界面的开发工具给查询出来添加的日志数据，完成从0到1的简单使用 ElasticSearch职责用法简介 ElasticSearch用在哪 ElasticSearch在我这个案例中，不是用来缓解增…
阅读更多...
牛市以一个什么视角看它？

牛市以一个什么视角看它？

这波指数行情连续上涨，我说过我没有任何情绪波动，我不想称之为牛市，而是一个增量周期，这样的话我的语言里尽量去除一些欲望和情绪的表达，有利于去给大家讲一些股市的客观存在规律；我们知道熊市的本质是什么…
阅读更多...
重庆数字孪生工业互联网可视化技术，赋能新型工业化智能制造工厂

重庆数字孪生工业互联网可视化技术，赋能新型工业化智能制造工厂

重庆作为西南地区的重要工业基地，正积极探索和实践数字孪生、工业互联网及可视化技术在智能制造领域的深度融合，致力于打造新型工业化智能制造工厂，为制造业的高质量发展注入强劲动力。 在重庆的智能制造工厂中，数字孪生技术被广…
阅读更多...
为什么要学习大模型？AI在把传统软件当早餐吃掉？

为什么要学习大模型？AI在把传统软件当早餐吃掉？

前言 上周末在推特平台上有一篇写在谷歌文档里的短文，在国外的科技/投资圈得到了非常广泛的浏览，叫做 The End of Software（软件的终结）， 作者 Chris Paik 是位于纽约市的风险投资基金 Pace Capital 的创始合伙人&…
阅读更多...
【预备理论知识——2】深度学习：线性代数概述

【预备理论知识——2】深度学习：线性代数概述

简单地说，机器学习就是做出预测。 线性代数 线性代数是数学的一个分支，主要研究向量空间、线性方程组、矩阵理论、线性变换、特征值和特征向量、内积空间等概念。它是现代数学的基础之一，并且在物理学、工程学、计算机科学、经济学等领域有着…
阅读更多...
字符串和字符数组（2）

字符串和字符数组（2）

6.求字符串长度 C语言中有一个库函数叫strlen，这个函数是专门用来求字符串长度的。strlen的使用需要包含一个头文件string.h。 strlen函数统计的是字符串中\0之前的字符个数，所以传递给strlen函数的字符串中必须得包含\0. 请看代码： #inc…
阅读更多...
AFSim仿真系统 --- 系统简解_04 Mystic（“情报处理模块”或“智能决策支持系统”）

AFSim仿真系统 --- 系统简解_04 Mystic（“情报处理模块”或“智能决策支持系统”）

Mystic应用 Mystic应用（Mystic）是一个主要的WSF应用程序，用于可视化模拟结果和统计数据。 当在场景中提供event_pipe命令块时，模拟结果将被记录。event_pipe块会创建AFSIM事件录制文件（.aer），…
阅读更多...
家政服务|基于springBoot的家政服务平台设计与实现(附项目源码+论文+数据库）

家政服务|基于springBoot的家政服务平台设计与实现(附项目源码+论文+数据库）

私信或留言即免费送开题报告和任务书（可指定任意题目） 目录 一、摘要 二、相关技术 三、系统设计 四、数据库设计 五、核心代码 六、论文参考 七、源码获取 一、摘要 现代经济快节奏发展以及不断完善升级的信息化技术，让传统数…
阅读更多...
璞华科技×珠海采筑：通过SRM系统实现采购管理一体化和精细化

璞华科技×珠海采筑：通过SRM系统实现采购管理一体化和精细化

SRM供应商关系管理应该怎么做？如何实现采购管理一体化？近日，聚焦建材采购交易领域的服务商珠海采筑和SRM系统提供商璞华科技通过合作给出了一个现实的回答：通过SRM系统，聚焦使用者视角，以数据为主线&#x…
阅读更多...
二分算法详解

二分算法详解

1. 二分查找 704. 二分查找 这是一道单纯的朴素二分模版题&#xff0c;当 left right 时的这种情况也是需要考虑的&#xff0c;因为不排除数组中只有一个数的情况&#xff0c;或者是二分到数组中只剩一个数的情况&#xff0c;所以循环条件要写 left < right class Soluti…
阅读更多...
批量复制文件技巧：高效管理，一键复制至指定位置

批量复制文件技巧：高效管理，一键复制至指定位置

当需要处理大量文件时&#xff0c;批量复制功能能显著提升工作效率。通过文件管理器或专业的文件处理软件&#xff0c;用户可以一次性选择多个文件或文件夹进行复制操作&#xff0c;无需逐个手动操作&#xff0c;大大节省了时间。还可以实现更复杂的批量处理任务。 1.打开“文件…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023