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

张裕 · 2024-10-10 23:33:30

序言：

本文具体解说了关于鸿蒙体系学习中的模块化语法与自界说组件，在模块化语法中我们学习到了多种导入导出方式，实现了在一个项目中，通过引用差别的组件，让我们整体代码的可读性更强，相当于我们把一个手机拆分成了屏幕、芯片、外壳...等多种原件，最后组装成手机。
然后我们学习了自界说组件，在自界说组件模块中，我们学到了自界说组件中的各种成员参数的性质，基础属性和成员变量函数及成员函数的区别，最后我们学习了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('传入的内容')
}
}
}
}

复制代码

感谢观看

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

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

0 个回复

快速回复

楼主热帖

标签云