本系列是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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/299134