HarmonyOS开发实操笔记（未整理版）

一、鸿蒙APP开发

        1.开发者工具：DevEco Studio 解压-双击-安装。

                下载地址：DevEco Studio-HarmonyOS Next Beta版-华为开发者联盟
         2.ArkTS基础语法

                

        1.日记打印：

                  console.log('','');  检察方式：最下侧日记选项。最右侧预览器选项。//注解
        

         2.数据范例：

                命名规则：包含数字，字母，下划线，￥，不能数字开头，区分大小写，不能使用内置关键字。
                1).变量：

                        字符串-string，  数字：number ，布尔：boolean
                        格式： let 名称：范例 = 值，例如 let title:string=‘飒飒’
                        修改：title='施耐德'
                2).常量：不能修改

                        const 名称 ：范例=值

1. let s:string='string'
2. let n:number=12
3. let b:boolean=false
4. console.log('字符串:'+s+'数字:'+n+'布尔:'+b)
5. s='sting1'
6. n=13
7. b=true
8. let n1:number=12
9. console.log('${}拼接'+`字符串:${s}数字:${n}布尔:${b}`)
10. console.log("数字拼接",`${n}${n1}`)
11. const a:string='1111'
12. console.log("常量",a).

复制代码

           

         3).字符串:

                拼接： 加号 +，或者${变量} 使用 ${} 必要反引号包裹 `文字${变量}文字`

1. let name:string = '小明'
2. let age:number = 19
3. console.log('简介','名字aa是'+name)
4. console.log('简介是',`名字是${name}年龄${age}`)

复制代码

                范例转换：
                        1.字符串转数字
                                Number();字符串直接转数字，转换失败返回NaN(字符串包含非数字)
                                parseInt();去掉小数部分转为数字，转换失败返回NaN
                                parseFloat();保留小数部分转数字，转换失败返回NaN
                       2.数字转字符串
                                toString():数字之间转字符串
                                toFixed():四舍五入转字符串，可设置暴力几位小数。
           4).数组：

                   let 数组名 ： 范例[] =[数据1,数据2] 索引：从0开始 

1. let arr:string[]=['1','2','3']
2. console.log('数组',arr[0])

复制代码

       

          5).联合范例：

                let 变量：范例1|范例2|范例3=值；
  

1. let judge:number | string =100
2. judge='A+'
3. judge='优秀'
5. //联合类型可以将变量值约定在一组数据范围内进行选择
6. let gender : 'man' | 'women' ='man'

复制代码

        6).罗列范例： 

1. enum ThemeColor{
2.     Red='#ff0f29',
3.     Orange='#ff7100',
4.     Green ='#30b30e'
5. }
6. let color:ThemeColor=ThemeColor.Red

复制代码

        7).函数：

                        function fn (){....}
                          定义函数：function 函数名（）{函数体}
                          调用函数：函数名()
                           传参：
                               

1. function 函数名（形参1：类型）{
2.     代码块
3.     return 结果；
4. }
6. let 变量名：类型 = 函数名（实参1）
8. function fu(a:number,b:string){
9.   return a+b;
10. }
11. let s1:string=fu(1,'a')
12. console.log("a+b=",s1)

复制代码

 

                   

         8).箭头函数：

                let 函数名称 =（形参）=>{函数体 return 结果}
        9).对象：

                let 对象名称：对象结构 = 值
                对象打印使用：JSON.stringify()

1. interface Person{
2.   name:string
3.   sex:string
4.   age:number
5.   fu:(a:number)=>number
6. }
7. let zs:Person={
8.   name:'张三',
9.   sex:'男',
10.   age:18,
11.   fu:(a:number)=>{
12.     return a*2
13. }
14. }
15. console.log("张三"+zs.sex)
16. console.log("张三"+JSON.stringify(zs))
17. console.log('方法返回值',zs.fu(2))

复制代码

       

        对象-方法

1. interface 接口名称{
3.     方法名：（参数：类型）=>返回值类型
4. }

复制代码

        运算符优先级

 

          10).数组：Array

          查找：数组名[下标]
          修改： 数组名[下标]  =新值
          长度：数组名.length     
           开头新增元素：数组名.unshift() 返回操纵后的数组长度
           结尾新增元素：数组名.push()返回操纵后的数组长度
           从开头删：.shift()
           从结尾删：.pop()
           任意位置添加、删除素组元素：数组名.splice(起始位置，删除个数，新增元素1，新增元素2，......)
        语句：if while switch
        对象数组：包罗对象的复杂数据，假如想要在日记中打印必要JSON.stringify(对象)；转为字符串格式。

       

        3.ArkUI(方舟开发框架）搭建鸿蒙应用界面的框架。（组件）

                build 决定界面的出现 思绪：1排版2内容3美化
            1.组件   

                 最小结构单位是 组件
                 组件分类：容器组件 Column，Row.(column space属性 间隔）
                1).基础组件:Text  

                build 有且只有一个根元素且是容器组件
                组件属性方法：

                文字颜色
                .fontColor()

                文字溢出显示为...：

1. Text('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
2. .textOverflow({
3.     overflow:TextOverflow.Ellipsis
4. })
5. .maxLines(2)
6. 或者 .lineHeight()

复制代码

               2).Image 图片组件

                        Text组件中使用ImageSpan()组件，小图
                加载本地图片：Image($r('app.media.product'))
                

                        设计资源-svg图标（任意放大缩小不失真，可以改变颜色）图片格式推荐svg
                        图标：通过image使用
              HarmonyOS 主题图标库 | icon素材免费下载 | 华为开发者联盟
                3).输入框与按钮

1. TextInput(参数对象).属性方法
3. TextInput({placeholer:'占位符'}).type(InputType.Password)
5. Button('登录').width(200)

复制代码

               
                4).结构元素的组成

                内边距：padding 组件内添加间距，拉开内容与组件边缘之间的间隔。
                外边距：margin  组件外添加间距，拉开组件间间隔。

1. TextInput('123').padding(20)
2. TextInput('123').padding({
3.     top:20,
4.     right:20,
5.     bottom:40,
6.     left:80
7. })
9. TextInput('456').margin(30）
10. TextInput('456').margin({
11.     left:30,
12.     right:50
13.    })

复制代码

         边框 border 可以对 left right botton top 四个方向配置样式

1. Text('边框').border({
2. width:1,
3. color:Color.Red,
4. style:BorderStyle.Dashed
5. })

复制代码

      5).组件圆角

1. topLeft:左上角
2. topRight：右上角
3. bottomLetf：左下角
4. bottomRight：右下角
5. Text('圆角').borderRadius({
6.     topLeft:5,
7.     topRight：10,
8.     bottomLetf：15,
9.     bottomRight：20
10. )}

复制代码

        6).特殊圆角：

                1.正圆
                2.胶囊按钮

1. Text('正圆')
2.     .width(100)
3.     .heght(100)
4.     .borderRadius(50)
6. Text('胶囊')
7.     .width(150)
8.     .heght(50)
9.     .borderRadius(25)

复制代码

        7).背景属性：

1. Text('内容文本‘）
2. .fontColor(Color.white)
3. .width(300)
4. .heigth(200)
5. .backgroundImage($r('app.media.flower'),ImageRepeat.XY)

复制代码

        背景图位置

             名称：backgroundImagePosition
             作用：调解背景图在组件内的显示位置，默认左上角
             属性: .backgroundImagePosition(坐标对象或罗列）
                        backgroundImagePosition({x:100,y:200})
                        backgroundImagePosition(Alignment.Top)
        单位问题：背景定位默认单位->px：现实的物理像素点。不同设备不同的分辨率，像素点大小不一.
                        宽高默认单位： vp:假造像素，对于不同设备会自动转换。
                         函数：vp2px(数值)
                         

        背景图尺寸

                名称：backgroundImageSize
                作用：背景图缩放
                属性：.backgroundImageSize(宽高对象或罗列)
                contain：等比例缩放，留白。
                cover：等比例缩放，内容现实不全
                auto:默认尺寸
         8).复选框：

        CheckBox 
         text-span 对text中的文本，举行单独举行设置。

1. Checkbox()
2. Text(){
3.     Span('.....').fontColor('#32674f6')
4.     Span('.....')
5. }

复制代码

        填充组件：Blank()  填充剩余空缺区域

        2.结构        

                1).线性结构：

                Column Row
                结构子元素在主轴上的排列方式
        在结构容器内，可以通过justifyContent属性设置子元素在容器主轴上的排列方式。可以从主轴起始位置开始排布，也可以从主轴竣事位置开始排布，或者均匀分割主轴的空间。
        1.主轴起始位置对齐 2.主轴居中对齐 3.主轴竣事位置对齐 4.贴边显示 5.间隙围绕
        6.间隙均匀围绕

        交叉轴：
                属性：aIignItems
                参数：罗列范例
                水平方向：HorizontalAlign
                垂直方向：VerticalAlign

          row

        column

        自适应伸缩

        设置 layoutWeight 的属性的子元素与兄弟元素，会按照权重分配主轴空间。
        语法:.layoutWeight(数字）

       
        2)弹性结构（Flex)：

        弹性结构（Flex）提供更加有效的方式对容器中的子元素举行排列、对齐和分配剩余空间。常用于页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等。
        容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方向的尺寸称为主轴尺寸，在交叉轴方向的尺寸称为交叉轴尺寸。
         主轴为水平方向的Flex容器表示图

       

1. Flex({参数对象}）{
2.     子组件1
3.     子组件2
4. }
5. 参数：
6. 1.主轴方向：direction FlexDirection.Row
7. 2.主轴对齐方式：justifyContent FlexAlign.Start
8. 3.交叉轴对齐方式：alignItems ItemAlign.Auto
9. 4.布局换行：wrap 单行布局 NoWarp 多行布局 Wrap

复制代码

        3)层叠结果：

                绝对定位： 参照父组件的左上角举行偏移，绝对定位后的组件不在占用自身原有位置。
                语法：position(位置对象)
                参数：{x:水平偏移,y:垂直偏移} 
                权重：zIndex(数值顺序)

1. Text('文字内容')
2.     .position({x:50,y:50})

复制代码

                层叠结构：Stack({ }){},省去定位的测量间隔的时间。

1. Stack({
2. alignContent:Alignment.Center   
3. }){
4.     Item1()
5.     Item2()
6.   }

复制代码

                滚动区域：Scroll（）{}

               

          4).交互 点击事件：

1. 组件.onClick(()=>{
2.     AlertDialog.show({
3.         message:'弹框'
4.     })
5. })

复制代码

          5).状态管理：@State 装饰变量

                   普通变量：只在初始化时渲染，后续不在刷新
                   状态变量：必要装饰器装饰，改变会引起UI渲染刷新（必须设置范例和初始值）
                   定义在组件内的 变量必要this访问
                

               运算符：同Java相同                        
                渲染控制：ForEach() 基于数组格式，渲染组件个数。
                语法：ForEach(arr,(item,index)=>{})
                        

案例：生肖抽卡
        组件：Badge 角标 

1. Badge({
2.     count:1,
3.     position:BadgePosition.RightTop,//位置
4.     style:{
5.         fontSize:14,
6.         badgeSize:50,
7.         badgeColor:'#fa2a2d'
8.     }
9. }){
10.     Image('图片地址')
11. }

复制代码

        6).结构：Grid 网格

                

1. Grid(){
2.     GridItem(){
3.         Column(){
4.             
5.         }   
6.     }.width(80)
7.      .heigth(80)
8.    
9. }.columnsTemplate('1fr 1fr 1fr') //列份数
10. .rowsTemplate('1fr 1fr 1fr ifr')    //行份数
11. .rowGap(5)//行间距
12. .columnsTemplate(5)//列间距

复制代码

                

                组件透明度：opacity 0->1
                元素的缩放：scale({x:1,y：1})  -1=>99  animation({duration:500})  

                7).轮播组件：Swiper 

                                根本用法：Swiper（）{}
                                属性：

                                自定义：indicator必要传入一个indicator对象参数 
                                        宽高比：设定宽后，aspectRatio(数值)  适配更多设备 使图片保持比例

1. .indicator(
2.         Indicator.dot()//小圆点
3.         .itemWidth(20)//默认的宽
4.           .itemHeight(20)//默认的高
5.           .color(Color.Black)//默认颜色
6.           .selectedItemWidth(30)//选中的宽
7.           .selectedItemHeight(30)//选中的高
8.           .selectedColor(Color.White)//选中的颜色
9.       )

复制代码

                8).样式和结构的重用：

                @Extend 扩展组件（样式，事件）同组件情况
                        图中两个Text组件样式根本一致，部分参数不一致的情况下使用组件扩展

        
        

操纵如下：声明方法，添加注解@Extend注解内填写组件名称，调用方法。

1. // @Extend(组件名称)
2. //   function 函数名称(参数1，参数2)
3. //
4. @Extend(Text)
5. function tFun(c: ResourceColor, m: string) {
6.   .textAlign(TextAlign.Center)
7.   .backgroundColor(c)
8.   .fontColor(Color.White)
9.   .fontSize(30)
10.   .onClick(() => {
11.     AlertDialog.show({
12.       message: '轮播图 ' + m
13.     })
14.   })
15. }
17. @Entry
18. @Component
19. struct Index {
20.   build() {
21.     Column() {
22.       Swiper() {
23.         Text('1').tFun(Color.Red, '1')
24.         Text('2').tFun(Color.Black, '2')
25.       }
26.       .width('100%')
27.       .backgroundColor(Color.Black)
28.       .aspectRatio(2.4)
29.       .loop(true)
30.       .autoPlay(true)
31.       .interval(2000)
32.     }.padding(20)
34.   }
35. }

复制代码

    @Styles 抽取通用属性，事件 不同组件，相同属性和事件情况,不支持传参
                  操纵方法: 声明方法,添加注解@Style，构建方法体，调用方法
                  

1. @Styles
2. function fuStyle(){
3.   .width(100)
4.   .height(100)
5.   .backgroundColor(Color.Blue)
6.   .onClick(()=>{
7.     AlertDialog.show({
8.       message:"弹框弹框"
9.     })
10.   })
11. }
13. Text('111').fuStyle()
14. Button('按钮').fuStyle()

复制代码

 

           
  9).@Builder   自定义构建函数（结构，样式，事件）                 

        假设要实现下面结果，代码重复性高，可使用@Builder,定义在全局不能访问组件内变量（删除function）。 
        

1. Row({space:10}){
2.         Column({space:10}) {
3.           Image($r('app.media.img')).width('100%').aspectRatio(2.4)
4.           Text('图1')
5.         }.width('25%')
6.         .onClick(()=>{
7.           AlertDialog.show({
8.             message:'点击事件1'
9.           })
10.         })
11.         Column({space:10}) {
12.           Image($r('app.media.img_2')).width('100%').aspectRatio(2.4)
13.           Text('图2')
14.         }.width('25%')
15.         .onClick(()=>{
16.           AlertDialog.show({
17.             message:'点击事件2'
18.           })
19.         })
20.         Column({space:10}) {
21.           Image($r('app.media.img_1')).width('100%').aspectRatio(2.4)
22.           Text('图3')
23.         }.width('25%')
24.         .onClick(()=>{
25.           AlertDialog.show({
26.             message:'点击事件3'
27.           })
28.         })

复制代码

1. @Builder
2. function itemBuilder(txt:string,icon: ResourceStr){
3.   Column({space:10}) {
4.     Image(icon).width('100%').aspectRatio(2.4)
5.     Text(txt)
6.   }.width('25%')
7.   .onClick(()=>{
8.     AlertDialog.show({
9.       message:'点击'+txt
10.     })
11.   })
12. }
14.   Row({space:10}){
15.         itemBuilder('图1',$r('app.media.img'))
16.         itemBuilder('图2',$r('app.media.img_1'))
17.         itemBuilder('图2',$r('app.media.img_2'))
18.       }

复制代码

 10).滚动容器Scroll

        当子组件的结构凌驾Scroll时内容滚动
             用法： 内部支持一个子组件（Column，Row）

1. Scroll(){
2.       Column(){
4.       }
5.     }.width('100%')
6.     .height('400')
7.     .scrollable(ScrollDirection.Vertical)

复制代码

属性：

             控制器：
                实例化控制器-》绑定Scorll组件-》控制器方法 控制滚动，控制器属性，获取滚动间隔

1. [/code] [code]
2. @Entry
3. @Component
4. struct Index {
5.   myScroll:Scroller=new Scroller();//1.实例化控制器
6.   build() {
7.     Column({space:10}) {
8.       Scroll(this.myScroll) {//2.绑定组件
9.         Column({space:10}) {
10.           ForEach(Array.from({ length: 10 }), (item: string, index: number) => {
11.             Text("文字"+index).width('100%').height(50).backgroundColor(Color.Orange).borderRadius(10)
12.               .textAlign(TextAlign.Center)
13.           })
14.         }
15.       }.width('100%')
16.       .height('400')
18.       Button('控制滚动条位置').onClick(()=>{
19.         this.myScroll.scrollEdge(Edge.Top)//调用控制方法
20.       })
21.       Button('获取已经滚动的距离').onClick(()=>{
22.         let  y=this.myScroll.currentOffset().yOffset
23.         let x=this.myScroll.currentOffset().xOffset
24.         console.log("x",x)
25.         console.log("y",y)
26.       })
27.     }.padding(20)
28.   }
29. }

复制代码

   

         
11).事件

       onScroll(x,y)=>{} 滚动时触发事件 x,y为滚动的间隔不完整。
 12).容器组件：Tabs导航栏 

   Tabs组件的页面组成包含两个部分，分别是TabContent和TabBar。TabContent是内容页，TabBar是导航页签栏，页面结构如下图所示，根据不同的导航范例，结构会有区别，可以分为底部导航、顶部导航、侧边导航，其导航栏分别位于底部、顶部和侧边。

TabContent组件内只支持一个子组件

        滚动导航栏：barMode()
                BarMode.Scrollable 默认BarMode.Fixed

2. @Entry
3. @Component
4. struct Index {
5.   build() {
6.    Tabs(){
7.      TabContent(){
8.        Text("首页内容")
9.      }.tabBar("首页")
10.      TabContent(){
11.        Text("推荐内容")
12.      }.tabBar("推荐")
13.      TabContent(){
14.        Text("发现内容")
15.      }.tabBar("发现")
16.      TabContent(){
17.        Text("我的内容")
18.      }.tabBar("我的")
19.      TabContent(){
20.        Text("新闻内容")
21.      }.tabBar("新闻")
22.      TabContent(){
23.        Text("科学内容")
24.      }.tabBar("科学")
25.      TabContent(){
26.        Text("心理内容")
27.      }.tabBar("心理")
28.      TabContent(){
29.        Text("服装内容")
30.      }.tabBar("服装")
31.    }.vertical(false)
32.     .scrollable(false)
33.     .barMode(BarMode.Scrollable)
34.   }
35. }

复制代码

        自定义组件：使用@Builder注解举行更换TabBar内容。
                              高亮：

        

        2).class类

            类是用于创建对象模板，同时类声明也会引入一个新范例，可定义着实例属性，方法和构造函数。
           

        语法：属性需给初始值，无初始值必要在属性加 ？（问号），或者构造函数，可选操纵值.在访问可选操纵值的属性时，必要为属性赋值或者 类.属性？访问属性（工具会自动填充） 

1. class 类名{
2.   //1.实例属性
3.   //2.构造函数
4.   //3.方法
5. }
7. class Preson{
8.     name:string='jack'
9.     food?:string
10. }
12. class Cat{
13.   name:string='Tom'
14.   foods?:string
15. }
16. let  p:Cat=new Cat();
17. console.log('aaaaa',p.name);
18. console.log('aaaaa',p.foods?.length);
20. class Cat{
21.   name:string
22.   foods:string
24.   constructor(name:string,foods:string) {
25.     this.name=name;
26.     this.foods=foods;
27.   }
28. }
29. let  p:Cat=new Cat('aaa','ccc');

复制代码

        方法：

                        方法名（参数）：返回值范例{}

1. class Cat{
2.   name:string
3.   foods:string
5.   constructor(name:string,foods:string) {
6.     this.name=name;
7.     this.foods=foods;
8.   }
9.   say(name:string){
10.     console.log("说",name+'想要吃'+this.foods)
11.   }
12. }
13. let  p:Cat=new Cat('小喵咪','小罐头');
14. p.say("小猫咪")

复制代码

        静态属性和静态方法：static修饰 类名.调用

1. class Robot {
2.   static version: string = 'v2.0'
4.   static getRandom(): number {
5.     return Math.random()
6.   }
7. }
8. console.log('版本：',Robot.version)
9. console.log('随机数：',Robot.getRandom())

复制代码

        继续extends和super关键字 ：

                 类可以通过 继续 快速获取别的一个类的 属性 和 方法
                子类通过super访问父类的实例字段，实例方法和构造函数
                

1. class  Person{
2.   name:string
3.   age:number
4.   constructor(name:string,age:number) {
5.     this.name=name
6.     this.age=age
7.   }
8.   say(name:string,age:number){
9.      console.log("说点什么",name+`年龄：${age}`)
10.   }
11. }
13. class Student extends Person{
14.   grade:string
15.   constructor(name: string,age:number,grade:string) {
16.     super(name,age)
17.     this.grade=grade
18.   }
19.   say(): void {
20.     console.log("说点什么",this.name+`年龄：${this.age}`+'岁,年级'+this.grade)
21.   }
22. }
24. let s:Student=new Student("小张",18,'小学生')
25. s.say()

复制代码

        instanceof

            判定某个对象是否为某个类的实例        
            typeof 获取对象的范例

1. console.log('s是否为Person实例',s instanceof Person)
2. console.log('s的类型是',typeof s)

复制代码

        修饰符：
        readonly 无法修改，
        private 不能在声明该成员的类之外访问，
        protected 派生子类举行访问，
        public 公开的，任何位置可访问

剩余参数和展开运算符  ...数组名
       剩余参数： 将函数或方法中的一个不定数量的参数表现为一个数组
       展开运算： 将数组展开拼接。

1. function sum(a:number,b:number,...arr:number[]){
2.   let total=a+b;
3.   for (let a of arr){
4.     total+=a
5.   }
6.   console.log("剩余运算符结果：",total)
7.   return total;
8. }
9. sum(1,2,3,4,5,6)
11. let arr1:number[]=[1,2,3]
12. let arr2:number[]=[4,5,6]
13. let  arr3:number[]=[...arr1,...arr2]
14. console.log("展开运算符结果",arr3);

复制代码

3).泛型：

        泛型函数：

1. function fn<T> (param:T):T{
2.   return param;
3. }
4. fn<string>('字符串字符串');

复制代码

        泛型束缚：
             之前的泛型没有限定范例，使用泛型束缚限定泛型范例

1. interface length{
2.   length:number
3. }
4. function  fun<T extends length>(param:T){
5.   console.log("泛型约束")
6. }
8. fun<string>('string')

复制代码

        多个泛型参数

1. function fun1<T1,T2>(param1:T1,param2:T2){
2.   console.log("参数1",param1)
3.   console.log("参数2",param2)
4. }
5. fun1<string,string>('001','002')

复制代码

        泛型接口

1. interface inf<T>{
2.   id:(value:T)=>T
3.   ids:()=>T[]
4. }
6. let obj:inf<number>={
7.   id(value:number){
8.     return value;
9.   },
10.   ids(){
11.     return [1,2,3]
12.   }
13. }

复制代码

        泛型类

1. class Person<T>{
2.   id:T
4.   constructor(id:T) {
5.     this.id=id
6.   }
7.   getId():T{
8.     return this.id
9.   }
10.    
11. }
13. let p=new Person<Number>(10);
14. console.log('泛型类',JSON.stringify(p))

复制代码

4).模块化语法：

        把一个大的步伐，拆分成若干小的模块，通过特定语法举行任意组合。
        1.默认导出导入：

                一个模块，只能默认导出一个值或对象。使用时 自定义导入名称。
                export default 导出内容。import xxx from '模块路径'

1. //新建文件中，导出语法
2. let num:number=10
3. export default num;
4. //导入语法
5. import num from '../tools/module1'
6. console.log("展开运算符结果",num);

复制代码

        2.按需导入：

1. export  let num:number=10
2. export let name:string='小张'
5. import {name} from '../tools/module1'
6. console.log("导入结果",name);
9. let num:number=10
10. let name:string='小张'
11. export {
12.   num,name
13. }
15. import {num,name} from '../tools/module1'
16. console.log("导入结果",name);

复制代码

        3.全部导入

1. import * as module1 from '../tools/module1'
2. console.log("导入结果",module1.num);

复制代码

        5).自定义组件：

                通用的样式事件

1. @Component
2. struct module {
3.   build() {
4.     Row() {
5.       Text("组件一").width('100%').backgroundColor(Color.Orange)
6.         .onClick(()=>{
7.           AlertDialog.show({
8.             message:'弹窗'
9.           })
10.         })
11.     }
12.   }
13. }
14. @Entry
15. @Component
16. struct Index {
17.   build() {
18.    Column(){
19.      module()
20.    }
21.   }
22. }

复制代码

                成员变量和成员函数：
                         自定义其他成员函数，以及成员变量。
                        成员变量的值->外部可传参覆盖
                        

1. @Component
2. struct module {
3.   title: string = '标题'
4.   extra: string = '小标题'
5.   getMol = () => {
6.     AlertDialog.show({
7.       message: '弹框'
8.     })
9.   }
11.   sayHi() {
12.     AlertDialog.show({
13.       message: '你好'
14.     })
15.   }
17.   build() {
18.     Column() {
19.       Row() {
20.         Text(this.title).onClick(() => {
21.           this.sayHi()
22.         })
23.         Text(this.extra).onClick(() => {
24.           this.getMol()
25.         }
26.         )
27.       }.width('100%')
28.       .justifyContent(FlexAlign.SpaceBetween)
30.       Row() {
31.         Text('内容部分')
32.       }
33.     }.width('100%')
34.     .height(200)
35.     .backgroundColor(Color.White)
36.   }
37. }
40. @Entry
41. @Component
42. struct Index {
43.   build() {
44.     Column() {
45.       module({
46.         title: '我的订单',
47.         extra: '查看全部',
48.         getMol() {
49.           AlertDialog.show({
50.             message: '查看全部弹框'
51.           })
52.         }
53.       }).margin(5)
54.       module().margin(5)
55.     }
57.     .padding(10)
58.     .width('100%')
59.     .backgroundColor(Color.Orange)
60.     .height('100%')
61.   }
62. }

复制代码

 @BuilderParam 传递UI

           使用@BuilderParam构建函数，一让自定义组件允许外部传递UI
           定义@BuilderParam 担当外部传入的ui,并设置默认值

1. @Component
2. struct module {
3.   //1.声明BuilderParam
4.   @BuilderParam ContentBuilder: () => void = this.defaultBuilder
5.   title: string = '标题'
6.   extra: string = '小标题'
7.   getMol = () => {
8.     AlertDialog.show({
9.       message: '弹框'
10.     })
11.   }
12.   //2.默认值赋值
13.   @Builder
14.   defaultBuilder() {
15.     Text('默认内容')
16.   }
17.   build() {
18.     Column() {
19.       Row() {
20.         Text(this.title)
21.         Text(this.extra)
22.       }.width('100%')
23.       .justifyContent(FlexAlign.SpaceBetween)
25.       Row() {
26.         //3.使用
27.         this.ContentBuilder()
28.       }
29.     }.width('100%')
30.     .height(200)
31.     .backgroundColor(Color.White)
32.   }
33. }
34. @Entry
35. @Component
36. struct Index {
37.   build() {
38.     Column() {
39.       module({
40.         title: '我的订单',
41.         extra: '查看全部',
42.         getMol() {
43.           AlertDialog.show({
44.             message: '查看全部弹框'
45.           })
46.         },
47.       }) {
48.         //4.传入内容
49.         Button("按钮按钮")
50.       }
51.     }
52.     .padding(10)
53.     .width('100%')
54.     .backgroundColor(Color.Orange)
55.     .height('100%')
56.   }
57. }

复制代码

        多个@BuilderParam

                

1. @Component
2. struct module {
3.   //1.声明BuilderParam
4.   @BuilderParam contentBuilder: () => void = this.defaultBuilder
5.   @BuilderParam builder1: () => void = this.defaultBuilder1
6.   title: string = '标题'
7.   extra: string = '小标题'
8.   //2.默认值赋值
9.   @Builder
10.   defaultBuilder() {
11.     Text('默认内容')
12.   }
13.   @Builder
14.   defaultBuilder1() {
15.     Text('默认内容')
16.   }
17.   build() {
18.     Column() {
19.       Row() {
20.         Text(this.title)
21.         Text(this.extra)
22.         this.builder1()
23.       }.width('100%')
24.       .justifyContent(FlexAlign.SpaceBetween)
26.       Row() {
27.         //3.使用
28.         this.contentBuilder()
30.       }
31.     }.width('100%')
32.     .height(200)
33.     .backgroundColor(Color.White)
34.   }
35. }
36. @Entry
37. @Component
38. struct Index {
39. //设置内容
40.   @Builder builder1(){
41.       Button('替换按钮')
42.   }
43.   @Builder builder2(){
44.     Text('替换表头')
45.   }
46.   build() {
47.     Column() {
48.       module({
49.         title: '我的订单',
50.         extra: '查看全部',
51.         contentBuilder:this.builder1,//使用内容
52.         builder1:this.builder2//使用内容
53.       })
54.     }
55.     .padding(10)
56.     .width('100%')
57.     .backgroundColor(Color.Orange)
58.     .height('100%')
59.   }
60. }

复制代码

         状态管理:

                当运行时的状态变量变化，带来UI的重新渲染，在ArkUI 中统称未 状态管理机制。变量必须被装饰器装饰可以成为状态变量。
        

        Components :组件干系的装饰器。
                             数据传递：父组件@State 传递给子组件 @Prop,单项传递
                                                @Link可以双向传递数据
                                                @Provid可以直接个孙子组件传递
        @State 自己状态

留意:不是状态变量的全部更改都会引起刷新。只有可以被框架观察到的修改才会引起U刷新。1.boolean、string、number范例时，可以观察到数值的变化
2.class或者Object时，可观察 自身的赋值 的变化，第一层属性赋值的变化，即Object.keys(observedObject)返回的属性。
                       

1. interface Car{
2.   name:string
3. }
4. interface Person{
5.   name:string,
6.   age:number,
7.   car:Car
8. }
9. @Entry
10. @Component
11. struct Index {
12.   @State Person:Person ={
13.     name:'杰克',
14.     age:18,
15.     car:{
16.       name:'宝马车'
17.     }
18.   }
19.   build() {
20.     Column() {
21.       Text(this.Person.name+'拥有一辆'+this.Person.car.name).width('50%').textAlign(TextAlign.Center)
22.       Button('换').onClick(()=>{
23.         this.Person.car.name='劳斯莱斯'//无法触发渲染
24.         this.Person.car={//标准写法
25.           name:'劳斯莱斯'
26.         }
27.         console.log("----",JSON.stringify(this.Person))
28.       })
29.     }.width('100%')
31.   }
32. }

复制代码

           @Prop 父子组件传递数据

                      @Prop 装饰的变量可以和父组件创建单向的同步关系。
                       @Prop 装饰的变量是可变的，但是变化不会同步回其父组件
                    

 

1. @Component
2. struct SonCom{
3.   @Prop sCar:string=''
4.   changCar=()=>{}
5.   build(){
6.     Column(){
7.       Text('子组件'+this.sCar)
8.       Button('换车').onClick(
9.         ()=>{
10.           this.changCar()
11.         }
12.       )
13.     }.backgroundColor(Color.Grey)
14.     .height(50)
15.     .width(100)
16.     .justifyContent(FlexAlign.Center)
17.   }
18. }
22. @Entry
23. @Component
24. struct Index {
25.   @State fCar:string='劳斯莱斯'
26.   build() {
27.     Column() {
28.       Text('父组件'+this.fCar)
29.       Button('换车').onClick(()=>{
30.         this.fCar='迈巴赫'//父传子
31.       })
32.       SonCom({
33.         sCar:this.fCar,
34.         changCar:()=>{//使用箭头函数进行传递
35.           this.fCar='布加迪'
36.         }
37.       })
38.     }.width('100%').backgroundColor(Color.Orange)
39.     .height(200)
40.     .justifyContent(FlexAlign.Center)
42.   }
43. }

复制代码

       List 组件： 

       @Link 实现父组件和子组件的双向同步
                1.将父组件的状态属性传递给子组件
                2.子组件通过@Link修饰即可
                3.分别测试基础和复杂范例
        @Procide @Consume后代组件 @都是装饰器
                

     6)路由配置跳转  

                1.创建页面 2.配置路由

1. //1.导包
2. import { router } from '@kit.ArkUI'
4. //2.事件调用 传参
5. Button('跳转').onClick(() => {
6.         router.pushUrl({
7.           url:'pages/EduiPage',
8.           params:{
9.             name:'华山论剑'
10.           }
11.         })
12.       })
14. //3.获取参数
15. router.getParams()  as 类型
16. //4.返回
17. router.back()

复制代码

        页面栈：
        

        7).生命周期

        组件和页面在创建，显示，销毁的一整个过程，会自动执行一系列的 生命周期钩子（函数），在特定的阶段执行自己的代码。
        区分页面和组件 @Entry
        

        Stage模子

                应用模子是体系为开发者提供的应用步伐所需能力的抽象提炼，它提供了应用步伐必备的组件和运行机制。
        1.实现某个功能必要编写哪个文件
        2.怎样感知应用的状态变化（启动，关闭，切后台）
        3.怎样调解项目配置
        

app.json5

修改桌面图标

UIAbility组件

每一个UIAbility实例，都对应一会近来使命列表的使命。
UIAbility是包含用户界面的应用组件，重要用于和用户举行交互。
一个应用可以有单个或多个UIAbility
        UIAbility 配置启动页面
        UIAbility生命周期
        UIAbility组件间交互
        

配置Ability加载页面        

生命周期

同模块-拉起另一个Ability
        
        

跨模块-UIAbility
        修改包名，修改编译内容

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