鸿蒙中的变量/常量创建采用了ts语法我们在声明变量的同时需要指定变量类型，定义变量时也是要遵守变量命名规范:

        1.只能包含数字、字母、下划线、$，不能以数字开头…重点

        2.不能使用内置关键字或保留字,比如let、const

        3.严格区分大小写

1.变量类型定义

        变量的创建格式：

         函数创建,调用格式:

                                                                              （鸿蒙中也有箭头函数,定义的语法也是()=>{}）

         对象的定义/使用：

        联合类型: 

        枚举类型 ：

2.鸿蒙页面开发 

• 在使用鸿蒙开发中，我们页面开发代码要在build中书写代码，在预览器中看效果, 在build中有Row和Column两个方法函数，Row代表行，Column代表列，
• 在开始构建页面之前我们要记住，在鸿蒙中有一个和react和vue很像的点，就是在build中有且只能有一个容器根组件，
• 

3.样式方法 

1.  通用属性
   1. .width(200)    组件的宽度，取值 px，数字，%百分比
   2. .height(200)    组件的高度，取值 px，数字，%百分比
   3. .backgroundColor(Color.bule)    组件的背景颜色，取值 固定颜色，十六进制，
2. 字体样式属性:
   1. .fontSize(24)    字体大小，
   2. .fontWeight(FontWeight.blod)    字体的粗细  取值 100-900，或者采用鸿蒙自己封装好的枚举参数
   3. .fontColor(Color.blue)     字体的颜色 取值 固定颜色，十六进制
   4. .textOverflow({overflow：TextOverflow.xxx})     文字溢出省略号，此属性需要配合.maxLines(行数) 使用 
   5. .maxLines(行数)  文本显示的行数
   6. .lineHeight(数字)    文本行高

4.图片组件

1. Image(图片数据源)  支持网络图片资源和本地图片资源，
   1. 网站资源 Image('s://xxxxxx.com/imgages/logo.png')
   2. 本地资源，在鸿蒙项目中我们有存放图片的专属位置，在main文件夹下的resources文件夹中的media文件夹中，如果将图片存放在这个文件夹中我们可以使用：Image($r('app.media.文件名'))这种方式进行访问到文件

5.输入框与按钮

1. textInput({placeholder: ’占位符文本‘}).type(InputType.password)，placeholder是输入框中的提示信息，type是输入框的属性，我们可以在type中切换输入框的属性比如password就是密码框，会自动携带小眼睛的效果
2. Button(参数文本)，默认效果是蓝色的，带有圆角效果

6.Svg图标

svg图标获取官方网址：HarmonyOS 主题图标库 | icon素材免费下载 | 华为开发者联盟 

在使用svg图标时要改变svg图标颜色要使用.fillColor(Color.bule)属性设置图标颜色

7.布局元素的组成

1. .padding() 内边距，文本内容和边框的间距就是内边距，使用语法是.padding({top:10,left:10,right:10,bottom:10}),这样是给四个方面分别设置内边距，如果我们只写一个参数，那么四个方面的内边距默认都是这个参数
2. .margin()外边距，元素和元素之间的距离，使用语法是.margin({top:10,left:10,right:10,bottom:10}),这样是给四个方面分别设置外边距，如果我们只写一个参数，那么四个方面的外边距默认都是这个参数
3. border({width:1,color:'#fffff',style:borderStyle.solid})   元素的边框，
   1. width代表边框的宽度，
   2. color代表的是边框的颜色
   3. style代表的是边框的样式，比如是实线还是虚线，如果我们width只给一个参数，则默认当前元素的四条边框的宽度都是一样的，
4. 我们也可以给width写成一个对象单独给每条边框设置样式，
   1. 边框的宽度设置方式width:{left:1,right：3}
   2. 边框的颜色设置方式color:{left:color.pink,right:color.bule}
   3. 边框样式设置方式style:{left:borderStyle.Dashed,right:borderStyle.Dotted}
5. borderRadius(参数)  设置组件圆角 
   1. borderRadius(5)  组件四个圆角相同
   2. borderRadius({topLeft:1,topRight:3,bottomLeft:5,bottomRight:10})单独给每个角设置不同的属性圆角，topLeft代表左上角，topRight代表右上角，bottomLeft代表左下角，bottomRight代表右下角
   3. 我们可以使用borderRadius将组件设置成一个圆形，设置圆形的话我们要让组件的宽度和高度相等，让组件是一个正方形，然后给这个组件设置borderRadius属性，属性值给宽高的一半就可以设置成一个圆形

      

6. backgroundImage(背景图片地址，平铺方式-枚举ImageRepeat)
   1. 背景图片和image组件使用方式一样，
   2. 平铺方式的属性有：
      1. NoRepeat：不平铺，默认值
      2. X:水平平铺
      3. Y:垂直平铺
      4. XY:水平和垂直均平埔
7. backgroundImagePosition({x:100,Y:100}) 调整背景图在组件内部显示的位置，默认是左上角展示，位置参数：
   1. x,y,手动设置背景图位置，
   2. 使用鸿蒙定义好的枚举属性backgroundImagePosition(Alignment.center)
8. 设备单位设置：
   1. 在我们设置背景定位时，背景定位默认单位使用的单位是px，实际的物理像素点，设别出场就订好了
   2. vp一种虚拟像素，相对于不同的设备会自动转换，保证不同设备视觉一致，这种方式推荐使用，在定义背景元素定位时使用vp2px函数进行转换，
9. backgroundImageSize(参数)，设置背景图大小

 8.线性布局

1. 线性布局通过线性容器Column和Row创建
   1. Column 容器:子元素 垂直方向 排列
      Row 容器:子元素 水平方向 排列
   2. 排布主方向上的对齐方式使用属性 .justifyContent (枚举FlexAlign)
2. 交叉轴对齐方式，使用的属性是alginItems(),参数是枚举，
   1. 交叉轴在水平方向:HorizontalAlign
   2. 交叉轴在垂直方向:VerticalAlign
3. 自适应伸缩
4. 弹性布局
   1. flex组件使用方式:
   2. flex组件wrap换行属性：

9.绝对定位

zindex使用语法:

10.层叠布局

在使用层叠布局的时候可以搭配zindex属性进行一起使用可以更加灵活的控制当前层叠布局元素中组件的优先级

11,Badge角标组件

        代码展示：

                        

        注意！使用badge组件时不要给其包裹的组件设置外边框，否则样式会出现问题，

12.grid布局组件

        这个布局整个外部的大的组件叫做grid，其内部分为多个小组件，这些小组件叫做griditem，需要注意，这些小组件中我们有且只能有一个子组件，不管是column还是row，只能有一个，

这个组件通过columnsTemplate来设置列数，rowsTemplate来设置行数，下图中这个四列三行的表格就是通过这两个属性进行生成的

        组件代码展示：

                

        效果:

                

        grid布局主要是靠columnsTemplate来设置列数，rowsTemplate来设置行数，一个1fr就代表一行或者一列，在columnsTemplate代表行，在rowsTemplate代表列，这里的1fr代表的是当前这列/行占总数的分数，1fr代表一份，2fr代表两份，

13.swiper轮播组件

        代码展示:

                        

        常用属性：

                        

        swiper轮播组件自定义样式:         

                       

                      在设置轮播图的时候我们要记得给轮播组件配置.aspectRatio()属性，这个属性是为了设置图片一致的宽高比，保证图片正常适配，可以随着我们设备屏幕大小的不同而自动应用不同的大小，保证图片不会缺失

14.滚动容器Scroll

        当子组件的布局尺寸 超过Scroll的尺寸 时，内容可以滚动，

        1.scroll核心用法:

                1.给scroll组件设置尺寸，

                2.给scroll组件内部定义一个溢出的子组件，（在scroll中只能有一个子组件，不能由多个子组件垒起来，且子组件的尺寸需要超过外部的scroll组件，否则不会出现滚动条）

                3.scroll组件滚动方向默认是纵向的，如果想要设置横向的滚动，需要使用ScrollDirection属性来控制滚动方向，有两个参数：

                        ScrollDirection.Vertical纵向

                        ScrollDirection.Horizontal 横向

                scroll组件代码展示:

                        

        2.scroll核心属性:

        3.scroll控制器：

                使用基本步骤：

                        1.实例化scroll组件的控制器，使用new关键字在组件内部声明变量的部分声明一个scroll组件的实例

                        2.绑定scroll组件，有了这个实例之后，接下来就要给scroll组件做绑定，将这个实例对象和scroll组件建立联系。

                        3.控制器方法控制滚动，控制器属性获取滚动距离

                        代码展示：       

                                         

        4.滚动事件

                使用onDidscroll事件可以实时监控scroll组件中滚动条的位置，让开发者可以在适当的时候添加逻辑，下面代码中的x，y代表了你本次滑动了多少距离。我们要获取完整的滚动距离还是使用scroller的currentOffset方法获取滚动距离。

                使用代码展示:

                                        

15.tabs组件

        1.tabs基本语法 

         我们在使用tabs组件时我们要把页面分为两个区域，一个是上面的导航区，一个是下面的内容展示区。在内容展示区其实是由多个组件叠在一起的，我们上面的导航栏中有几个按钮，下面内容展示区就有几个组件叠在一起，它默认是展示当前导航栏中选中高亮的组件页面，

        就像下面这个例子一样，我在导航栏中选中了我的，那在内容展示区，展示的就是我的相关联的页面，

                        

        代码展示：

                        

        这四层内容区域对应的就是上面代码中的TabContent(),而顶部的导航栏就是使用Tabcontent中的tabar属性设置的，注意在Tabcontent中只能有一个子组件

        2.常用属性

                barPosition:调整位置 开头 或 结尾(参数)，这个参数是给tabs组件的括号中使用的，

                vertical:调整导航 水平 或 垂直

                scrollable:调整是否 手势滑动 切换

                animationDuration:点击滑动动画时间

                代码展示：

                                

        3.滚动导航栏

                作用:如果导航栏的内容较多，屏幕无法容纳时，可以将他设置为滚动，可以通过 Tabs 组件的 barMode 属性即可调整 固定导航栏 或 滚动导航栏

                代码展示：

                                

        4.自定义tabBar

                TabBar组件有时需要我们显示 图形 和 文字甚至有 特殊的图标，这时我们就可以使用自定义tabBar，

                使用过程：

                        需要利用@Builder 关键字来声明一个大体的结构然后通过将这个结构写在tabBar()属性中, 

                代码示例：

                        

        然后将这个封装好的@Builder函数在tabBar()中进行使用即可，

                代码展示: 

                        

                最终样式：

                        

                但是要注意，tabBar组件自带的点击高亮的样式，在使用了自定义TabBar之后就不生效了，如果想要保留点击高亮的效果需要手动设置。

        5.切换tabBar高亮效果

                1.核心思路:

                        1.监听切换事件 → 得到索引值，记录高亮的索引

                        2.给每个 tabBar起个标记，0，1，2

                        3.在 tabBar 内部比较 标记 ==记录的索引?高亮:不高亮

                2.使用的事件:

                                

                        onchange是你的鼠标滑过或者点击都会触发，而onTabBarClick是只有点击时才会触发，在实际开发过程中onChange的使用率比较高

                @builder代码展示:    

                                    

                                注意在这里声明的用来存储index的变量必须要使用@state装饰器声明，

                        因为State 装饰器的变量是组件内部的状态数据，

                                当这些状态数据被修改时，将会调用所在组件的build方法进行UI刷新，用其

                        他关键字或装饰器声明的变量不会触发刷新，

                 页面代码:

                                    

                        具体的逻辑就是通过onchange事件来获取到每个tabBar的id，然后在将这个id给到由@state声明的变量中用来存储，然后在向@builder声明的方法中传递一个id，然后使用三元运算来判断当前点击了那个tabBar然后给到点击的TabBar不同的样式

16.list列表组件

        专门用于实现列表的滚动，列表是一种容器，当列表项达到一定数量，超过List容器组件大小时，自动滚动

        组件常用属性：

                        

       list组件是一个容器，要是想要往里放东西的话，list中的子组件只能是listitem组件

        代码展示：

                        

17.Stage模型

        应用模型 是系统为开发者提供的应用程序所需能力的抽象提炼，它提供了应用程序必备的组件和运行机制简而言之:应用模型就是 应用的施工图纸，他规范化了：程序运行流程、项目结构、文件功能等...

        了解应用模型之后，就可以知道:
                1.实现某个功能需要在哪个文件编码
                2.如何感知应用的 状态变化(启动、关闭、切后台)
                3.如何调整项目配置

        随着系统的演进发展，先后提供了两种应用模型:
                1.FA 模型:从API7开始支持的模型，已经不再主推

                2.Stage 模型:从API9开始新增的模型，是目前主推且会长期演进的模型

        项目创建之后目录下所有文件报作用解释：

                

                1.Stage模型-app.json5 应用配置应用配置

                         在工程的 AppScope 目录下的 app.json5 配置文件中,

                        代码解释:

                                

                2.Stage模型-module.json5 模块

                        配置module.json5 配置文件，配置 ability 入口图标 和 标签配置

                        代码解释:

                                 

                3.Stage模型UlAbility 组件
                        每一个UIAbility实例，都对应于一个最近任务列表中的任务。

                        UAbility是一种包含用户界面的应用组件，主要用于和用户进行交互

                        一个应用可以有一个 UAbility 也可以有多个 UAbility

                                1.单 UlAbility:任务列表只有一个任务。

                                2.多 UlAbility:在任务列表中会有多个任务。

                        相关知识点:
                                1.UlAbilitiy 配置启动页面
                                2.UIAbilitiy 生命周期
                                3.UlAbilitiy 组件间交互

                在一个应用中额可以有多个模块，一个模块中可以有多个UAbility，一个UAbility中也可以有多个page页面，

                在我们创建的项目目录下有一个entry文件夹，这个文件夹就是我们说的模块，而在entry模块下的src/main/ets/entryabillity文件夹下有一个叫EntryAbility.ets文件，这个文件就是我们的UlAbilitiy

                

        在这个UlAbilitiy中提供了非常多的生命周期钩子函数，然后在这一堆生命周期钩子中有一个最核心的叫做onWindowStageCreate，在这个生命周期钩子中有一个叫做windowStage.loadContent这个的意思是我们的窗口舞台如果要加载内容的话应该去加载哪个页面

        我们在创建了多个Abilitiy时，可以利用虚拟机进行测试，我们会发现虽然创建了新的Abilitiy但是运行起来还是原来的那个Abilitiy，这是因为，Abilitiy也有自己的配置，我们想要进入新创建的Abilitiy中需要在module.json5这个文件中进行修改配置，我们只需要将下面代码选中的部分换到刚刚新创建的abilitiy中就可以了，在修改完成之后记得重新启动一下项目。

                4.Stage模型-UlAbility 组件的生命周期

                        当用户打开、切换和返回到对应应用时，应用中的UIAbility实例会在其生命周期的不同状态之间转换。

                        生命周期执行顺序图纸:

                

                onCreate:Ability创建时回调，执行初始化业务逻辑操作。
                onDestory: Ability销毁时回调，执行资源清理等操作。
                onForeground:当应用从后台转到前台时触发。
                onBackground:当应用从前台转到后台时触发

        5.同模块拉起abilitiy

                使用技术:want

                操作步骤:

                                1.准备 want作为 UIAbility 的启动参数

                                2.利用上下文对象 context，调用 startAbility传入 want 启动

                实际操作:

                                1.准备want，使用want，创建一个变量，比如叫做wantinfo，类型用want，里面要配置一些属性，分别有：deviceId，bundleName，moduleName，abilityName，parameters

        分别需要接收参数，

                        deviceId，如果不填为空的话表示本设备，

                        bundleName：代表包名，这个包名我们可以在AppScope文件夹下的 app.json5文件中进行查找配置

                        moduleName：代表模块名，比如咱们现在用的模块叫做entry那么在这里就写entry

                        abilityName:代表当前启动的ability的名字，这个名字我么可以在resources文件夹下的module.json5文件中进行查找，

                        parameters：可以去配一下要传递的参数

                        代码展示:

                                        

                2.利用context获取上下文对象

                        代码展示:       

                                        

                        在getContext中需要把this进行传递，这样就可以获取到我们的上下文对象，有了这个context对象我们就可以基于它来获取环境下的一些方法，相当于它提供了一些api等着我们去调

                        完成了这一部之后，去进行使用： 

                        有两种写法:

                             1.简写：

                                ​​​​​​​        ​​​​​​​

                             2.但是在使用这个this.context时他会返回一个promise对象，写完整代码：

                                       ​​​​​​​

                                在书写的代码比较简单时，使用简写方式就可以了，如果在执行时，我们的abilitiy启动失败了就可以使用返回的promise打印一下错误，对错误进行处理并解决

                                最终效果呈现:

        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        

        6.不同模块(跨模块)拉起另一个UlAbility

                使用方式和同模块拉起UlAbility是一样的，

                只需要将moduleName模块名改为另一个模块的名字，然后将abilityName改为另一个模块下的ability名称

                最后在运行时加一个编译配置，

                点击Deploy Muiti Hap，将里面的Deploy Multi Hap Packages进行打勾选中，然后在module中将我们的另一个模块包一起选上，这样他在打包编译时，就不单单只会编译entry，也会将我们第二个模块TextModule一起打包上，进行编译

            经过这样我们就可以调起不同模块了

                效果展示：

        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​