ToB企服应用市场:ToB评测及商务社交产业平台

标题: 【11】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-模块化语法与自界说 [打印本页]
作者: 张裕    时间: 2024-10-10 23:33
标题: 【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）语法：
  1. //默认导出
  2. export  default 需要导出的内容
  3. //默认导入
  4. import xxx from '模块路径'
复制代码


4）基础代码实例：
①导入num
src/main/ets/pages/05tools/module1.ets
  1. //一个ets文件，就是一个模块，每个模块之间独立。
  2. interface Person{
  3.   name:string
  4.   age:number
  5. }
  6. let num:number = 10
  7. let person:Person = {
  8.   name:'河马',
  9.   age:88
  10. }
  11. //默认导出
  12. export default num
复制代码

src/main/ets/pages/Index.ets
  1. //路径：查找文件时，从起点到终点的路线
  2. //相对路径：从当前文件出发查找目标文件
  3. // 找上一级用../
  4. // 同级目录用 ./
  5. import myNum from './05tools/module1'
  6. console.log('module1中的数据',myNum)
复制代码

如果想导出和导入person也是一样的
②导入person
src/main/ets/pages/05tools/module1.ets
  1. //一个ets文件，就是一个模块，每个模块之间独立。
  2. interface Person{
  3.   name:string
  4.   age:number
  5. }
  6. let num:number = 10
  7. let person:Person = {
  8.   name:'河马',
  9.   age:88
  10. }
  11. //默认导出
  12. export default person
复制代码

src/main/ets/pages/Index.ets
  1. //路径：查找文件时，从起点到终点的路线
  2. //相对路径：从当前文件出发查找目标文件
  3. // 找上一级用../
  4. // 同级目录用 ./
  5. import result from './05tools/module1'
  6. console.log('module1中的数据',JSON.stringify(result))
复制代码


③结果


3.按需导出和导入

1）简介：
按需导出：指一个模块，可以按照需要，导出多个特性。

2）基础代码实例：
①写法1 逐个导出
src/main/ets/pages/05tools/module2.ets
  1. //按需导出
  2. //写法1 逐个导出
  3. export let name1:string = '荷花'
  4. export let price:number = 9.98
  5. export let sayHi = ()=>{
  6.   console.log('打招呼')
  7. }
复制代码

src/main/ets/pages/Index.ets
  1. //2.按需导入
  2. import {name1,price,sayHi}from '../pages/05tools/module2'
  3. console.log('module2中的数据',name1,price)
  4. sayHi()
复制代码



②写法2 一次性多个特性，进行导出
  1. let name1:string = '荷花'
  2. let price:number = 9.98
  3. let sayHi = ()=>{
  4.   console.log('打招呼')
  5. }
  6. //写法2 一次性多个特性，进行导出
  7. export {
  8.   name1,
  9.   price,
  10.   sayHi
  11. }
复制代码

Index代码稳固，最后运行的效果都是一样的

3）别名：


4.全部导入

1）简介：
将所有的按需导入，全部导入进来→导出部分不需要调解，调解导入的语法即可。

2）基础代码实例：
src/main/ets/pages/05tools/module3.ets
  1. let name1:string = '吕小布'
  2. let name2:string = '陈美嘉'
  3. let name3:string = '曾小贤'
  6. let price1:number = 8888
  7. let price2:number = 5555
  10. let sayHi=()=>{
  11.   console.log('打招呼')
  12. }
  15. let run=()=>{
  16.   console.log('奔跑')
  17. }
  20. export {
  21.   name1,name2,name3,
  22.   price1,price2,
  23.   sayHi,run
  24. }
复制代码

src/main/ets/pages/Index.ets
  1. //3.全部导入
复制代码
  1. import * as Module3 from '../pages/05tools/module3'
  2. console.log('全部导入方法中的数据',Module3.name1)
  3. console.log('全部导入方法中的数据',Module3.name2)
  4. console.log('全部导入方法中的数据',Module3.name3)
  5. console.log('全部导入方法中的数据',Module3.price1)
  6. Module3.sayHi()
  7. Module3.run()
复制代码

结果：


二.自界说组件

1.自界说组件-基础

1）概念：
由框架直接提供的称为体系组件，由开发者界说的称为自界说组件。

2）根本语法及使用：
  1. @Component
  2. struct HelloComponent{
  3.   //状态变量
  4.   @State message:string=''
  5.   build() {
  6.     //描述UI
  7.     Column(){
  8.       Text('我是一个自定义组件')
  9.       Button('我是按钮')
  10.     }
  11.   }
  12. }
  13. @Entry
  14. @Component
  17. struct Index {
  20.   build() {
  21.     Column(){
  22.       HelloComponent()
  23.     }
  24.   }
  27. }
复制代码


3）具体应用：
比如说我们在一个界面上划分为上中下三部分，如头部、身体和腿，我们就可以界说三个组件来分别表示。
  1. @Component
  2. struct HelloComponent{
  3.   //状态变量
  4.   @State message:string=''
  5.   build() {
  6.     //描述UI
  7.     Column(){
  8.       Text('我是一个自定义组件')
  9.       Button('我是按钮')
  10.     }
  11.   }
  12. }
  13. @Component
  14. struct MyHead{
  15.   //状态变量
  16.   @State message:string=''
  17.   build() {
  18.     //描述UI
  19.     Column(){
  20.       Text('我是一个头部')
  21.       Button('我是按钮')
  22.     }
  23.   }
  24. }
  25. @Component
  26. struct MyBody{
  27.   //状态变量
  28.   @State message:string=''
  29.   build() {
  30.     //描述UI
  31.     Column(){
  32.       Text('我是一个中间的身体')
  33.       Button('我是按钮')
  34.     }
  35.   }
  36. }
  37. @Component
  38. struct MyLeg{
  39.   //状态变量
  40.   @State message:string=''
  41.   build() {
  42.     //描述UI
  43.     Column(){
  44.       Text('我是一个底下的腿部')
  45.       Button('我是按钮')
  46.     }
  47.   }
  48. }
  49. @Entry
  50. @Component
  53. struct Index {
  56.   build() {
  57.     Column(){
  58.       HelloComponent()
  59.       MyHead()
  60.       MyBody()
  61.       MyLeg()
  62.     }
  63.   }
  66. }
复制代码


2.自界说组件-通用属性和语法

1）简介：
自界说组件可以通过点语法，设置 通用样式（宽高背景色...）、通用事件。

2）基础语法及使用：
  1. @Component
  2. struct HelloComponent {
  3.   @State info:string = '默认info'
  4.   build() {
  5.     Row(){
  6.       Text(this.info)
  7.       Button('修改数据')
  8.     }
  9.     .width(100)
  10.     .height(80)
  11.     .backgroundColor(Color.Brown)
  12.   }
  13. }
  14. @Entry
  15. @Component
  18. struct Index {
  21.   build() {
  22.     Column(){
  23.       HelloComponent()
  24.         .width(200)
  25.         .height(100)
  26.         .backgroundColor(Color.Orange)
  27.         .onClick(()=>{
  28.           console.log('外部添加的点击事件')
  29.         })
  30.     }
  31.   }
  32. }
复制代码

我们将来会建一个Component目录中，当我们需要什么组件，就可以把这些组件写在这个文件夹里，如许我们以后用到这些组件就可以使用上文提到的导出，一样平常我们都是按需导出。
我们在文件夹里写的组件因为不是入口，以是无法直接预览，这个时候我们可以添加@Preview标签，如许我们就可以预览了，方便我们进行组件的调试与编写。


3.自界说组件-成员变量函数

1）简介：
除了必须要实现build()函数外，还可以界说其他成员函数，以及成员变量。
成员变量的值→外部可传参覆盖。

2）基础语法及使用
  1. @Component
  2. struct Module1 {
  3.   //状态变量
  4.   @State msg:string=''
  5.   //成员变量-数据
  6.   info:string = ''
  7.   //成员变量*函数-可以外部修改
  8.   sayHello=()=>{
  11.   }
  12.   //成员函数-不可以外部修改
  13.   sayHi(){}
  14.   build() {
  15.     ///.....描述UI
  16.   }
  17. }
  18. @Entry
  19. @Component
  22. struct Index {
  25.   build() {
  26.     Column(){
  27.       Module1()
  28.       Module1({info:'你好',msg:'修改一下状态变量'})
  29.       Module1({sayHello(){console.log('传入的逻辑')}})
  30.     }
  31.   }
  34. }
复制代码

3）BuilderParam构建函数-通报UI
  1. @Component
  2. struct SonCom {
  3.   //1.定义构建函数
  4.   @BuilderParam ContentBuilder:()=>void=this.defaultBuilder
  5.   //2.定义默认值
  6.   @Builder
  7.   defaultBuilder(){
  8.     Text('默认的内容')
  9.   }
  10.   build() {
  11.     //3.使用构建函数，构建结构
  12.     Column(){
  13.       this.ContentBuilder()
  14.     }
  15.   }
  16. }
  17. @Entry
  18. @Component
  21. struct Index {
  24.   build() {
  25.     Column(){
  26.       SonCom(){
  27.         Button('传入的内容')
  28.       }
  31.     }
  32.   }
  35. }
复制代码


感谢观看

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



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4