1.字符串方法

        (1).字符串拼接

                作用:将两个或者多个字符串合并为一个字符串

                代码展示:

                                

                字符串拼接,只要拼接的两个或者多个值中有一个是字符串,就会进行拼接而不是计算,只有都是整数的情况下才会进行加法运算。

        (2).模板字符串

                作用:也是用来拼接字符串和常量/变量的,但是它的优势在于适合多个变量/常量或者字符串的拼接。

                使用的方式:` ` 使用反引号将字符串进行包裹,在包裹的字符串内部使用${}来进行传入拼接的值 

                代码展示:

                                

2.数组的操作方法

        数组的操作其实就是对数组中的数据进行查找,修改,删除或增加,

        操作的方法有:

                

        查找 & 修改

                查找:数组名[下标]

                修改:数组名[下标] = '新值'

                查看数组长度:数组.length

                代码展示:

                            

        添加:  

                往开头加:数组名.unshift(数据1,数据2,数据3,…..)

                结尾添加:数组名.push(数据1,数据2,数据3)

                代码展示:

                            

        删除数组元素:

                从开头删:数组名.shift()

                从结尾删:数组名.pop()

                代码展示:

                            

        任意位置添加/删除/替换数组元素

                语法:数组名.splice(起始位置,删除的个数,新增元素1,新增元素2)

                代码展示:

                            

3.对象数组

        定义对象数组的顺序:

                       

                

        在这里说明一下,包括对象的复杂数据,如果想要在日志中打印,需要调用JSON.stringify()方法,转成字符串格式,

        不进行转译的话日志中打印出的结果是这样的:

        对象数组的访问方式:

                可以通过下标和利用for of 循环进行访问对象数组中的每一项

4.类型转换

        (1)数字和字符串转换方法:

                字符串转数字方法:

                        Number():字符串 直接转数字,转换失败返回NaN(字符串中包含非数字)

                        parseInt():去掉小数部分 转数字,转换失败返回NaN

                        parseFloat():保留小数部分转数字,转换失败返回NaN

                代码实例:

                                

                数字转字符串方法:

                        tostring():数字直接转字符串

                        toFixed():四舍五入转字符串,可设置保留几位小数 ,如果我们不传递参数他会将小数部分全部舍去,如果我们传递了参数比如传递一个2,他会自动保留两位小数,并会对小数部分进行四舍五入

                注意!在鸿蒙开发中如果我们要在页面中展示数字类型的变量,需要先将其转换为字符串之后在进行渲染,我们在页面中渲染数据时使用的Text()方法,只能接收字符串类型的变量,如果传入其他的数据类型就会出现报错

5.交互-事件 

        1.点击事件

                说明:组件 被点击时 触发的事件

                作用:监听(感知)用户 点击行为,进行对应操作

                语法:onclick((参数)=>{})

                代码展示:

                               

        2.滚动事件Scroll- onDidScroll 事件

                Scroll 组件提供了一些事件,让开发者可以在适当的时候添加逻辑

                代码展示:

                                

                

6.状态管理

        普通变量状态变量,类似于vue中的响应式变量和非响应式变量,

        普通变量,只能在初始化时渲染,后续变化了,也不会引起更新

        状态变量,被装饰器修饰,值的改变,会[自动]引起 界面的刷新

        在全局作用域中声明的变量就不是响应式变量,只能用于在页面上进行访问,不能进行响应式的修改,

        而在struct内部定义的不带@State装饰器的变量也不是响应式的,而且在使用渲染其变量在页面上进行渲染的时候需要使用this关键字

        代码展示:

                        

        而在struct中声明的带有@State装饰器的变量就是我们常说的状态变量,可以在组件中通过设置交互事件来对当前变量中的数据进行改变

        代码展示:

                        

7.一元,比较,逻辑运算符

        1.一元运算符

                常见一元运算符:++和--

                        后置写法:先赋值后自增/自减 

                        前置写法:先自增/自减再赋值

        2.比较运算符

                作用:用来判断比较两个数据大小,返回一个布尔值(true /false)

                常用的比较运算符:

                代码展示:

                         

                        

        3.逻辑运算符

                作用:扩充判断条件

                常用的逻辑运算符:

                        

                代码展示:

                         

        4.运算符优先级:

8.判断语句

        1.if判断

                作用:根据逻辑条件的不同,执行不同的语句,if判断中可以和逻辑运算符搭配使用使得判断条件更加灵活,

                代码展示:

                                

        2.switch判断

                作用:switch通常用于精确匹配,不同的值执行不同的代码,而if判断经常用于判断一个范围

                代码展示:

                                

                注意!break语句是用来结束代码的执行,如果没有break语句,则会直接执行 switch 中的下一个代码块(无论是否匹配成功)

        3.三元条件表达式:

                作用:语句条件?条件成立执行的表达式:条件不成立执行的表达式

                三元条件表达式会去判断当前表达式的条件是否满足,如果满足则会执行?后面的表达式,如果不满足就会执行:后面的表达式,而这个表达式的返回值是boolean (True/false)

                代码展示:

                                

9.循环语句

        1.while循环

                作用:重复执行一段指定的代码,

                代码展示:

                        

        2.for循环

                作用:和while一样也是用于重复执行一段指定的代码,不同的是,for不能创建死循环

                for循环三要素:

                                        1.初始值(变量)
                                        2.循环条件
                                        3.变化量(变量计数,自增或自减)

                代码展示:

                                

        3.for  of 循环

                语法:for(let item of 数组名){}

                        for .. of:在… 之中 进行循环item:声明的一个变量,用来在循环的时候接收 每一个数组元素

                代码展示:

                                

        4.forEach循环

                作用:ForEach 可以基于数组的个数,渲染组件的个数。(简化代码)        

                语法:ForEach(arr,(item,index)=>{})

                这里foreach循环中的第一项是我们指定的循环数组,箭头函数中的第一项是我们数组中的每一项,index是数组中每一项的下标

                代码展示:

                                

       5.退出循环

                作用:满足指定条件,可以退出循环
                break:终止整个循环
                continue:退出当前一次循环的执行,继续执行下一次循环

                代码展示:

                break:

                        

                continue:

                        

10.样式&结构重用

        作用:随着我们开发的页面越来越多,我们代码量也越来越大,我们可以发现其中不管是组件还是样式,还是触发之后所执行的功能,有很多重复的,这造成了我们代码体积过大,这时我们就可以将组件共同拥有的样式或者方法抽离出来进行封装,在我们需要进行使用时,复用我们封装的这个方法,可以极大的减少我们代码的重复率和提高代码的重用率

        为了实现上述功能,鸿蒙给我们提供了三种三种语法:

                @Extend:扩展组件(样式、事件),这个方法侧重于基于组件进行扩展,可以用来扩展样式和事件等,比如,我现在用@Extend对Text()组件生成了一个样式复用的方法,那这个方法就只能用于Text()组件,其他组件不能使用。

                @Styles:抽取通用属性、事件,这个语法基于通用的属性事件,可以应用于各种组件的,使用@Styles声明的方法,可以用于各种组件没有@Extend那种组件的限制,这个组件侧重于样式。


                @Builder:自定义构建函数(结构、样式、事件),这个语法侧重于结构,它是结构样式事件都包含,但是更侧重于结构

        @Extend使用方法:

                代码展示:

                                函数封装

                                

                                函数使用:

                                

在这个代码片段就是使用@Extend将Text的组件的样式进行了抽离,封装起来,我们首先使用@Extend()语法,@Extend()括号中需要填入组件名称,表明是对那个组件进行封装的方法。需要注意,这个方法只能在全局作用域中进行声明函数,不能在组件内部进行声明。

        @Styles语法使用方法:

                代码展示:

                        @styles语法全局定义:

                        

                      @styles语法组件内部定义:

                        

        在使用@styles语法时我们要注意,在外部声明需要使用function关键字,在组件内部声明时不需要使用function函数,

        还有这个语法声明的函数不能接收传参,

        以及如果要是访问到我们组件内部状态时,就必须要在组件内部声明,因为只有在组件内部才能通过this访问到我们组件内部状态,在组件外部是没有办法使用this的。所以在实际开发中组件内定义使用的次数要比全局定义的使用次数要多。

        @Builder语法使用方法:

                代码展示:

                                

                使用方式:

                                

                @Builder语法也可以声明在组件内部,和上面两个语法的使用方式一样,这三种方法,我们重点要会@Builder,学会了@Builder之后,@Extend,@Styles这两个方法就可以先放一放,在实际开发过程中@Builder使用的次数是最多的,

11.类

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

        类的实例属性:通过实例属性,可以保存各种各样的类型的数据,在创建实例属性时我们要注意如果没有问号则不是可选字段,不是可选字段我们要给一个默认值,否则会报错,

                                

        构造函数 :

                不同实例,将来需要有不同的字段初始值,就需要通过构造函数实现,

                类定义:

                        

                利用定义的类,来构造新的对象:

                        

        定义方法

                类中可以定义方法,并且在内部编写逻辑

                方法定义/使用:

                        

                添加静态方法/静态属性:

                        类还可以添加 静态属性、方法,后续访问需要通过 类 来完成,

        静态方法是给类添加的方法,不是给类创建的实例添加的方法,在类一创建的时候就已经存在了, 在使用类的静态方法或属性时直接使用类名.方法/属性名就可以了

        继承extends/super关键字 :

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

                类可以通过 继承 快速获取另外一个类的 字段 和 方法

                使用方式:

                        

        super关键字:

                子类通过 super 可以访问父类的实例字段、实例方法和构造函数,

                当我们在子类中想要访问父类中的构造函数,此时需要我们手动调用super().构造函数,访问父类中的方法:super.方法名(),访问父类中的属性名:super.属性名,在子类中如果我们子类的属性和方法和继承的父类中的属性和方法重名了,这时就相当于对继承来的父类属性进行了重写,

                           

12.生命周期函数

        组件 和 页面 在创建、显示、销的这一整个过程中会自动执行 一系列的【生命周期钩子】其实就是一系列的【函数】,让开发者有机会在特定的阶段运行自己的代码区分 页面 和 组件

        如何去区分是页面还是组件呢?

                通过@Entry这个装饰器,如果在发现当前组件中存在@Entry,那么当前这个组件就是一个页面形式的组件了,简单来说是一个页面了,而页面中的生命周期钩子也要更多一些

        常用的生命周期:

                        

        生命周期函数执行顺序:

                        

                

                

                

            

                

        

        

        

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐