【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: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('传入的内容')
      }


    }
  }


}

感谢观看

相关推荐
/**书香门第*/27 分钟前
Cocos creator 3.8 支持的动画 7
学习·游戏·游戏引擎·游戏程序·cocos2d
美式小田1 小时前
单片机学习笔记 9. 8×8LED点阵屏
笔记·单片机·嵌入式硬件·学习
猫爪笔记1 小时前
前端:HTML (学习笔记)【2】
前端·笔记·学习·html
_不会dp不改名_1 小时前
HCIA笔记3--TCP-UDP-交换机工作原理
笔记·tcp/ip·udp
-一杯为品-2 小时前
【51单片机】程序实验5&6.独立按键-矩阵按键
c语言·笔记·学习·51单片机·硬件工程
风尚云网3 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
熙曦Sakura3 小时前
完全竞争市场
笔记
EterNity_TiMe_4 小时前
【论文复现】(CLIP)文本也能和图像配对
python·学习·算法·性能优化·数据分析·clip
sanguine__4 小时前
java学习-集合
学习
lxlyhwl4 小时前
【STK学习】part2-星座-目标可见性与覆盖性分析
学习