网页制作与网站建设教程,wordpress 文件管理插件,广州公司宣传片设计,遵义网站建设公司排名序言#xff1a;
本文详细讲解了关于鸿蒙系统学习中的模块化语法与自定义组件#xff0c;在模块化语法中我们学习到了多种导入导出方式#xff0c;实现了在一个项目中#xff0c;通过引用不同的组件#xff0c;让我们整体代码的可读性更强#xff0c;相当于我们把一个手…序言
本文详细讲解了关于鸿蒙系统学习中的模块化语法与自定义组件在模块化语法中我们学习到了多种导入导出方式实现了在一个项目中通过引用不同的组件让我们整体代码的可读性更强相当于我们把一个手机拆分成了屏幕、芯片、外壳...等多种原件最后组装成手机。
然后我们学习了自定义组件在自定义组件模块中我们学到了自定义组件中的各种成员参数的性质基础属性和成员变量函数及成员函数的区别最后我们学习了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:stringbuild() {//描述UIColumn(){Text(我是一个自定义组件)Button(我是按钮)}}
}
Entry
Componentstruct Index {build() {Column(){HelloComponent()}}} 3具体应用
比如说我们在一个界面上划分为上中下三部分如头部、身体和腿我们就可以定义三个组件来分别表示。
Component
struct HelloComponent{//状态变量State message:stringbuild() {//描述UIColumn(){Text(我是一个自定义组件)Button(我是按钮)}}
}
Component
struct MyHead{//状态变量State message:stringbuild() {//描述UIColumn(){Text(我是一个头部)Button(我是按钮)}}
}
Component
struct MyBody{//状态变量State message:stringbuild() {//描述UIColumn(){Text(我是一个中间的身体)Button(我是按钮)}}
}
Component
struct MyLeg{//状态变量State message:stringbuild() {//描述UIColumn(){Text(我是一个底下的腿部)Button(我是按钮)}}
}
Entry
Componentstruct Index {build() {Column(){HelloComponent()MyHead()MyBody()MyLeg()}}} 2.自定义组件-通用属性和语法
1简介
自定义组件可以通过点语法设置 通用样式宽高背景色...、通用事件。 2基础语法及使用
Component
struct HelloComponent {State info:string 默认infobuild() {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(传入的逻辑)}})}}} 3BuilderParam构建函数-传递UI
Component
struct SonCom {//1.定义构建函数BuilderParam ContentBuilder:()voidthis.defaultBuilder//2.定义默认值BuilderdefaultBuilder(){Text(默认的内容)}build() {//3.使用构建函数构建结构Column(){this.ContentBuilder()}}
}
Entry
Componentstruct Index {build() {Column(){SonCom(){Button(传入的内容)}}}} 感谢观看
