目录
简介
本系列是windows系统下、采用ArkTS语言、ArkUI框架、deveco studio编译器学习纯鸿蒙软件研发,采用API version 9进行。本小节主要了解鸿蒙开发的各部分的模块化如数据、自定义组件、常量数据等抽离成文件复用的方法,并且补充了一些之前漏掉的知识点,以及一些小的技巧。纯小白,一步步学习,记录一下过程便于查询。
1.渲染控制
渲染控制一般分为条件渲染和循环渲染两种。
1.1条件渲染
条件渲染:支持if、else、else if语句,语法结构为:
if(条件表达式){
组件内容
}else{
组件内容
}
1.2 循环渲染
ForEach循环渲染,接口基于数组类型的数据进行循环渲染,需要与容器组件配合使用,接口返回的组件应当是允许包含在ForEach父容器组建中的子组件。
ForEach具有三个参数:分别为内容的数组,函数用于设置循环组件,键值生成器用于返回值(这个返回值必须唯一,否则会省略重复的)
循环控制中的第三个参数:键值生成器如果只有1个参数,可以将item的括号省略,如果只有一行return的业务代码,可以将{}和return也省略 ,如上述最后可以修改为:item=>item.id+"",同样,参数2也可以用相同的方式省略。
2.一些扩充的小知识
2.1 创建页面page小知识
创建页面可以通过pages右键NEW,选择page,这样会创建页面ets文件同时将路由添加到main_pages中,如果不想添加路由,可以选择创建ArkTS File。使用这种方式可以用于封装自定义组件、自定义样式等。
2.2 一些字符串转换小技巧
转换成字符串目前我已知的:
(1)as string
(2)tostring()
(3)+""
(4)JSON.stringify(string)
3.代码模块化
3.1 自定义组件的模块化(抽离成文件)
之前自定义组件采用了几种方式:(1)@Compent+struct,(2)@builder函数。
这两种方式都会面临问题:(1)无法跨页面文件复用,(2)对于相同的自定义组件再多个页面中使用不止需要多次声明,并且组件的名称还不能相同。这会导致代码冗余,并且代码维护成本较高,所以将自定义组件抽离成文件进行模块化是必要的。
3.1.1 自定义组件模块化步骤
(1)新建ArkTS文件用于存储自定义组件
在src>main>ets下可以先新建一个目录结构,用于存储自定义组件,建好后,右键New,选择ArkTS File,填写文件的名称。
(2)在ArkTS文件中声明自定义组件,编写自定义组件的相关代码
按照之前的@Compent+struct自定义组件,注意这里的struct的名称最好和文件名称相同。
(3)将自定义组件导出->暴露
使用export+default关键字对struct进行导出,暴露我们的自定义组件。
(4)回到调用界面,引入自定义组件
回到调用界面,使用import引入导出的自定义组件,语法结构如下:
import 名称 from '自定义组件的路径'
(5)调用自定义组件
在调用界面调用自定义组件,语法结构如下:
名称({需要传递的参数键值对})
3.1.2 自定义组件模块化示例
(1)自定义组件模块化部分测试代码:
自定义组件模块文件:
@Component
export default struct CustomAssembly{
@State flag:boolean=false
//需要添加export default关键字,用于自定义组件的导出
//传递参数:?表示参数可选
content1?:string
build() {
Row({space:20}) {
if(this.flag){
Image($r("app.media.radiocheck")).imageStyle()
}else{
Image($r("app.media.radioclear")).imageStyle()
}
Text(this.content1).fontSize(20)
.decoration({
type: this.flag?TextDecorationType.LineThrough:TextDecorationType.None
})
.opacity(this.flag?0.5:1)
}.rowStyle().onClick(() => {
this.flag=!this.flag
})
}
}
//图片样式函数
@Extend(Image) function imageStyle(){
.width(30)
.height(30)
.objectFit(ImageFit.Contain)
.margin(20)
}
//扩展row样式函数
@Extend(Row) function rowStyle(){
.width('90%')
.height(50)
.backgroundColor(Color.White)
.borderRadius(25)
}
(2)调用自定义组件的相关代码:
引入自定义组件:
import CustomAssembly from '../view/CustomAssembly'
调用自定义组件:
CustomAssembly({content1:'aaaaaa'})
(3)一些注意事项:
3.2 数据的模块化(抽离成文件)
对于多个界面想要调用的数据:可以通过建立类+私有变量+方法的方式对数据统一管理,便于修改维护以及减少界面文件的代码体量。
3.2.1 数据模块化步骤
(1)新建ArkTS文件存储数据
在src>main>ets下可以先新建一个目录结构,用于存储自定义组件,建好后,右键New,选择ArkTS File,填写文件的名称。
(2)在文件中建立类,并将类暴露,语法结构如下:
export class Data{
}
export default new Data()
//暴露了这个类,这个类中的方法可以使用,但是私有化的属性不可以
(3)在类中声明私有化变量:语法结构如下:
private 变量名:变量类型=变量值
(4)在类中编写变量的操作方法,例如获取方法,起到类似暴露变量的作用
getData(){
return this.变量名
}
(5)在调用界面引入类
//导入数据模型
import 使用模块化数据得名称 from '数据模块化后得路径';
(6)通过类调用类中的方法对变量进行操作
this.变量名=使用模块化数据得名称.暴露的获取数据得方法
扩充:需要在页面加载完毕后,build()函数执行前加载的数据可以在aboutToAppear()生命周期函数中进行数据的初始化。
3.2.2 数据模块化的示例
(1)数据模块化测试代码:
export class Data{
//私有化数据
private tasks:Array<string>=['HarmonyOS4.0','ArkTS','鸿蒙系统','windows','API 9']
//提供对私有化数据的非私有方式,也就是将数据暴露出来,
// 使其在其他文件中可以被获取
getData(){
return this.tasks
}
}
export default new Data()
//暴露了这个类,这个类中的方法可以使用,但是私有化的属性不可以
(2)数据模块引入测试代码:
//导入数据模型
import Data from '../ViewData/Data';
(3)数据调用测试代码:
//初始化数据
this.content=Data.getData()
(4)在页面加载完毕,build函数执行前初始化数据
private content:string[]=[];
//当组件加载完成,build构建之前
aboutToAppear(){
//初始化数据
this.content=Data.getData()
//当数据很多时,可以将数据也进行抽取,抽取到单独的ets中。
}
3.3 常量数据的拆分
对于一些静态只读的常量数据,可以通过模块化的方式将其封装起来,便于调用和维护修改。
3.2.1 常量数据的拆分步骤
(1)新建新建ArkTS文件用于存储常量数据
在src>main>ets下可以先新建一个目录结构,用于存储自定义组件,建好后,右键New,选择ArkTS File,填写文件的名称。
(2)新建类并将这个类直接暴露,语法结构如下:
export default class 类名{
}
(3)声明常量数据:注意,由于直接暴露的该类,所以类中的属性也就是常量不可以用private关键字,而应该使用static和readonly,表示静态可读,这样就可以直接通过引入该类调用我们的常量,而不需要像数据的模块化那样通过方法去对数据操作。数据结构如下:
//并且属性不可以使用私有private关键字,而是采用static和readonly,表示静态可读
//这样就可以直接使用该类的属性
//常量一般都要求全大写,最好加注释标明这个常量所表示的意思
//常用的背景色
static readonly 常量名:常量类型=常量值
(4)回到调用文件,引入暴露的类,语法结构如下:
//导入封装的常量数据
import 使用封装常量数据得名 from '封装的常量数据模块路径';
(5)调用常量数据,语法结构如下:
private 变量名:变量类型=使用模块化常量数据得名称.常量数据名
注意:声明常量时最好添加注释,因为常量名一般需要大写,不容易见名知意。
3.2.2 常量数据的拆分示例
(1)常量数据拆分模块测试代码:
export default class CommonConstant{
//由于是常量,所以直接暴露这个类
//并且属性不可以使用私有private关键字,而是采用static和readonly,表示静态可读
//这样就可以直接使用该类的属性
//常量一般都要求全大写,最好加注释标明这个常量所表示的意思
//常用的背景色
static readonly BACKGROUND:string='#ccc'
}
(2)常量数据导入测试代码:
import CommonConstant from '../common/CommonConstant'
(3)常量数据调用测试代码:
private tasks:Array<string>=CommonConstant.TASKS