devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

鸿蒙开发学习笔记 -黑马（持续更新）

作者：AllinToyou | 2024-03-24 18:02:23

赞

踩

鸿蒙开发学习笔记 -黑马（持续更新）

注：建议学习完：Java、Vue/React、JS高级、CSS3在来学习会很简单

一、工具的安装 DevEco Student

官网HarmonyOS应用开发_应用开发平台和工具 - HarmonyOS应用开发官网

按照黑马讲师总结的笔记步骤来即可

Wiki

二、ArkUI组件的学习

注：ArkTS语言要先去了解，可以查看官网，大概了解一遍即可

初识ArkTS语言-学习ArkTS语言-入门-HarmonyOS应用开发

大概 就是这样的写法：


Image组件

Image为图片组件，常用与在应用中显示图片。

Image的参数：

参数名：src

参数类型：Image支持加载string、PixelMap和Resources类型的数据源。

  • string格式，通常用来加载网络图片，需要申请网络访问权限：访问控制授权申请-访问控制-安全-开发-HarmonyOS应用开发

    Image('https://xxx.png')

  • PixelMap格式，可以加载像素图，常用来图片编辑中

    Image(pixeMapObject)

  • Resource格式，加载本地图片，推荐使用

    有两种写法
Image($r('app.media.文件名')) //此写法$r('app.media.xxx')前面为固定写法 后面文件名可以省略后缀，其文件地址为:src/main/resources/medis/xxx
Image($rawfile('文件名.png')) //此写法也为固定写法 后面文件名不能省略后缀 地址为: src/main/resources/rawfile/xxx.*

Image的属性（常用）：

注：属性的详细使用可以参考显示图片（Image）-显示图形-基于ArkTS的声明式开发范式-UI开发-开发-HarmonyOS应用开发。本组件除了支持通用属性尺寸设置-通用属性-组件通用信息-组件参考（基于ArkTS的声明式开发范式）-ArkTS API参考-HarmonyOS应用开发还支持以下属性：

  • alt属性：

    • 参数类型：String | Resources

    • 作用：加载时显示的占位图，支持本地图片(png、jpg、bmp、svg和gif类型)，但不支持网络图片；默认值为:null

  • objeact属性:

    • 参数类型：ImageFit（Contain、Cover、Auto、Fill、ScaleDowm、None）

    • 作用：设置图片填充效果；默认为ImageFit.Cover

    • ImageFit类型表：

      名称描述
      Contain保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。
      Cover保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。
      Auto自适应显示
      Fill不保持宽高比进行放大缩小，使得图片充满显示边界。
      ScaleDown保持宽高比显示，图片缩小或者保持不变。
      None保持原有尺寸显示。

  • objectRepeat

    • 参数类型：ImageRepeat

    • 作用：设置图片的重复样式。从中心点向两边重复，剩余空间不足放下一张图片时会截断。

      默认值：ImageRepeat.NoRepeat；注：svg类型图源不支持该属性。

    • ImageRepeat参数类型表：

      名称描述
      X只在水平轴上重复绘制图片。
      Y只在竖直轴上重复绘制图片。
      XY在两个轴上重复绘制图片。
      NoRepeat不重复绘制图片。

  • interpolation

    • 参数类型：ImageInterpolation

    • 作用：设置图片的插值效果，即减轻低清晰度图片在放大显示时出现的锯齿问题。

      默认值：ImageInterpolation.None 说明：svg类型图源不支持该属性。PixelMap资源不支持该属性。

    • ImageInterpolation参数类型表：

      名称描述
      None不使用图片插值。
      High高图片插值，插值质量最高，可能会影响图片渲染的速度。
      Medium中图片插值。
      Low低图片插值。

Image事件：

  • onComplete

    • 作用：图片数据加载成功和解码成功时均触发该回调，返回成功加载的图片尺寸。

    • 参数表：

      参数名类型说明
      widthnumber图片的宽。单位：像素
      heightnumber图片的高。单位：像素
      componentWidthnumber组件的宽。单位：像素
      componentHeightnumber组件的高。单位：像素
      loadingStatusnumber图片加载成功的状态值。说明：返回的状态值为0时，表示图片数据加载成功。返回的状态值为1时，表示图片解码成功。

  • onError

    • 作用：图片加载异常时触发该回调。

    • 参数表：

      参数名类型说明
      componentWidthnumber组件的宽。单位：像素
      componentHeightnumber组件的高。单位：像素
      message9+string报错信息。

  • onFinish

    • 作用：当加载的源文件为带动效的svg格式图片时，svg动效播放完成时会触发这个回调。如果动效为无限循环动效，则不会触发这个回调。注意：该事件仅仅支持svg格式的图片

大概使用：

  1. @Entry
  2. @Component
  3. // struct Index 自定义组件：可复用的UI单元
  4. struct Index {
  5.   @State message: string = 'Hello World'
  6.   @State text: string = ''
  7.   controller: TextInputController = new TextInputController()
  8.   build() {
  9.     Row() {
  10.       Column() {
  11.         Text(this.message)
  12.           .fontSize(50)
  13.           .fontWeight(FontWeight.Bold)
  14.           .fontColor("#36D")
  15.           .onClick(()=>{
  16.             this.message = "HarmonyOS"
  17.           })
  18.         Image($r("app.media.icon"))
  19.           .width(250) //如果里面是以数字的形式来设置宽度 会自动按宽度进行缩放 而且默认单位为vp 虚拟像素 会自动按设备来分配像素
  20.           .interpolation(ImageInterpolation.High)
  21.           .objectFit(ImageFit.Contain)
  22.           .onComplete((msg: { width: number,height: number })=>{
  23.               this.message = msg.width.toString()
  24.           })
  25.       }
  26.       .width('100%')
  27.     }
  28.     .height('100%')
  29.   }
  30. }

Text组件

显示一段文本的组件。

Text的参数

  • 参数名：content

  • 参数类型：string|Resources

    //string类型：直接传入字符串
Text('Hello world')
//Resources选择 resources下的资源
Text($r('app.string.xxx'))
//注意：默认是选择resources/base/element/string.json 下的值 获取值方式为 app.string.xxx(键)
//但是如果在en_US 或 zh_CN 目录下的string.json 有设置相应的键值对 会优先获取里面的值。至于选择en_US还是zh_CN看设备语言
//也要注意一点，在en_US或zh_CN目录下设置键值对 也要在base/element/string.json 文件下也设置一样的。
​

  • 例子

    1. //base/element/string.json
    2.   {
    3.       "name": "width_label",
    4.       "value": "Image_Width"
    5.     }
    6. //en_US/element/string.json
    7.   {
    8.       "name": "width_label",
    9.       "value": "Image_Width"
    10.     }
    11. //zn_CN/element/string.json
    12.     {
    13.       "name": "width_label",
    14.       "value": "图片宽度"
    15.     }
    16.  //index.ets
    17.         @Entry
    18. @Component
    19. ​
    20. struct Index {
    21.   controller: TextInputController = new TextInputController()
    22.   build() {
    23.     Row() {
    24.       Column() {
    25.         Text($r('app.string.width_label'))
    26.           .fontSize(20)
    27.           .fontWeight(FontWeight.Bold)
    28.           .fontColor('red')
    29.       }
    30.       .width('100%')
    31.     }
    32.     .height('100%')
    33.   }
    34. }

Text()的属性

  • textAlign属性

    • 属性参数:TextAlign

      名称描述
      Start水平对齐首部。
      Center水平居中对齐。
      End水平对齐尾部。

    • 作用:设置文本段落在水平方向的对齐方式

      默认值：TextAlign.Start

      说明：

      文本段落宽度占满Text组件宽度。

      可通过align属性控制文本段落在垂直方向上的位置，此组件中不可通过align属性控制文本段落在水平方向上的位置，即align属性中Alignment.TopStart、Alignment.Top、Alignment.TopEnd效果相同，控制内容在顶部。Alignment.Start、Alignment.Center、Alignment.End效果相同，控制内容垂直居中。Alignment.BottomStart、Alignment.Bottom、Alignment.BottomEnd效果相同，控制内容在底部。结合TextAlign属性可控制内容在水平方向的位置。

  • textOverflow

    • 属性参数: overflow

      名称描述
      Clip文本超长时进行裁剪显示。
      Ellipsis文本超长时显示不下的文本用省略号代替。
      None文本超长时不进行裁剪。

    • 作用: 设置文本超长时的显示方式。

      默认值：overflow: TextOverflow.Clip

  • maxLines

    • 参数类型:number

    • 作用:文本最大行数

TextInput

  • 声明TextInput组件

    TextInput（{ placeholder?： ResourceStr，text?：ResourceStr}）

    • placeholder:提示文本

    • text：文本内容

  • 属性与事件：

    名称参数类型描述
    typeInputType设置输入框类型。默认值：InputType.Normal
    placeholderColorResourceColor设置placeholder文本颜色。
    placeholderFontFont设置placeholder文本样式。
    enterKeyTypeEnterKeyType设置输入法回车键类型。默认值：EnterKeyType.Done
    caretColorResourceColor设置输入框光标颜色。
    maxLengthnumber设置文本的最大输入字符数。
    inputFilter8+{value: ResourceStr,error?: (value: string) => void}正则表达式，匹配表达式的输入允许显示，不匹配的输入将被过滤。目前仅支持单个字符匹配，不支持字符串匹配。- value：设置正则表达式。- error：正则匹配失败时，返回被过滤的内容。
    copyOption9+CopyOptions设置输入的文本是否可复制。设置CopyOptions.None时，当前TextInput中的文字无法被复制或剪切，仅支持粘贴。
    showPasswordIcon9+boolean密码输入模式时，输入框末尾的图标是否显示。默认值：true
    style9+TextInputStyle设置输入框为默认风格或内联输入风格。默认值：TextInputStyle.Default
    textAlign9+TextAlign设置输入文本在输入框中的对齐方式。默认值：TextAlign.Start
    名称功能描述
    onChange(callback: (value: string) => void)输入内容发生变化时，触发该回调。value：输入的文本内容。触发该事件的条件：1、键盘输入。2、粘贴、剪切。3、键盘快捷键Ctrl+v。
    onSubmit(callback: (enterKey: EnterKeyType) => void)按下输入法回车键触发该回调，返回值为当前输入法回车键的类型。enterKeyType：输入法回车键类型。具体类型见EnterKeyType枚举说明。
    onEditChanged(callback: (isEditing: boolean) => void)(deprecated)输入状态变化时，触发该回调。从API Version8开始，建议使用onEditChange。
    onEditChange(callback: (isEditing: boolean) => void)8+输入状态变化时，触发该回调。isEditing为true表示正在输入。
    onCopy(callback:(value: string) => void)8+长按输入框内部区域弹出剪贴板后，点击剪切板复制按钮，触发该回调。value：复制的文本内容。
    onCut(callback:(value: string) => void)8+长按输入框内部区域弹出剪贴板后，点击剪切板剪切按钮，触发该回调。value：剪切的文本内容。
    onPaste(callback:(value: string) => void)8+长按输入框内部区域弹出剪贴板后，点击剪切板粘贴按钮，触发该回调。value：粘贴的文本内容。

  • 补充：输入框类型

     TextInput({placeholder: '请输入图片的大小'})
          .type(InputType.Number)
    名称功能描述
    Normal基本输入模式。这次输入数字、字母、下划线、空格、特殊字符
    Password密码输入模式。
    Email邮箱地址输入模式。
    Number纯数字输入模式。
    PhoneNumber电话号码输入模式。

Button

  • 实例：

    Button("点我")

  • 自定义按钮

    Button(){
    Image($r('app.media.icon')).width(20).margin(10)
}

  • 属性

    名称参数类型描述
    typeButtonType设置Button样式。默认值：ButtonType.Capsule从API version 9开始，该接口支持在ArkTS卡片中使用。
    stateEffectboolean按钮按下时是否开启按压态显示效果，当设置为false时，按压效果关闭。默认值：true从API version 9开始，该接口支持在ArkTS卡片中使用。

  • type属性有三种类型

    名称描述
    Capsule胶囊型按钮（圆角默认为高度的一半）
    Circle圆形按钮
    Normal普通按钮（默认不带圆角）

  • 事件：支持通用事件

Slider

  • 滑动条组件实例

    Slider（options?：SliderOptions）

  • 参数

    参数名参数类型必填参数描述
    valuenumber否当前进度值。默认值：参数min
    minnumber否设置最小值。默认值：0
    maxnumber否设置最大值。默认值：100说明：min >= max异常情况，min取默认值0，max取默认值100。value不在[min, max]范围之内，取min/max，靠近min取min，靠近max取max。
    stepnumber否设置Slider滑动步长。默认值：1取值范围：[0.01, max]说明：设置小于0或百分比的值时，按默认值显示。
    styleSliderStyle否设置Slider的滑块与滑轨显示样式。默认值：SliderStyle.OutSet
    direction8+Axis否设置滑动条滑动方向为水平或竖直方向。默认值：Axis.Horizontal
    reverse8+boolean否设置滑动条取值范围是否反向，横向Slider默认为从左往右滑动，竖向Slider默认为从上往下滑动。默认值：false

  • 属性：

    名称参数类型描述
    blockColorResourceColor设置滑块的颜色。从API version 9开始，该接口支持在ArkTS卡片中使用。
    trackColorResourceColor设置滑轨的背景颜色。从API version 9开始，该接口支持在ArkTS卡片中使用。
    selectedColorResourceColor设置滑轨的已滑动部分颜色。从API version 9开始，该接口支持在ArkTS卡片中使用。
    showStepsboolean设置当前是否显示步长刻度值。默认值：false从API version 9开始，该接口支持在ArkTS卡片中使用。
    showTipsboolean设置滑动时是否显示百分比气泡提示。默认值：false从API version 9开始，该接口支持在ArkTS卡片中使用。说明：当direction的属性值为Axis.Horizontal时，tip显示在滑块正上方。值为Axis.Vertical时，tip显示在滑块正左边。tip的绘制区域为Slider自身节点的overlay。Slider不设置边距，或者边距比较小时，tip会被截断。
    trackThicknessLength设置滑轨的粗细。默认值：当参数style的值设置SliderStyle.OutSet 时为 4.0vp，SliderStyle.InSet时为20.0vp。从APIversion9开始，该接口支持在ArkTS卡片中使用。说明：设置为小于0的值时，按默认值显示。

三、页面布局

1、线性布局组件

上面使用的Row()与Column()就是线性布局

Row()就是行容器、Column()就是列容器

如下：

在页面中可以看见行与列的区别在于主轴与交叉轴的位置不同。这关乎着属性与样式的设置。

属性作用参数
justifyContent设置子元素在主轴方向的对齐格式FlexAlign枚举
alignItems设置子元素在交叉轴方向的对齐格式Row容器使用VerrticalAlign枚举Column容器使用HorizontalAlign枚举

  • justifyContent中FlexAlign对齐方式

    • 主轴对齐

      • Row容器

      • Column容器

      交叉轴对齐

      • Row容器

      • Column容器

注：布局容器的大小是默认自适应组件的大小的，所以如果你不修改width和height属性就直接使用布局对齐的话是没有效果的。

实例：

  1. @Entry
  2. @Component
  3. struct Index {
  4.   @State imgSize: number = 100
  5. ​
  6.   build() {
  7.     Column() {
  8.       Row(){
  9.         Image($r('app.media.icon'))
  10.           .width(this.imgSize)
  11.           .interpolation(ImageInterpolation.High)
  12.       }
  13.       .width("100%")
  14.       .height("40%")
  15.       .justifyContent(FlexAlign.Center)
  16.       Row(){
  17.         Text("图片宽度:")
  18.           .fontSize(20)
  19.           .fontWeight(FontWeight.Bold)
  20.         TextInput({placeholder: '请输入图片的大小'})
  21.           .type(InputType.Number)
  22.           .width(250)
  23.           .height(50)
  24.           .onChange(value => {
  25.             this.imgSize = parseInt(value)
  26.           })
  27.       }
  28.       .justifyContent(FlexAlign.SpaceBetween)
  29.       Divider()
  30.       Row(){
  31.         Button("缩小")
  32.           .type(ButtonType.Normal)
  33.           .width(100)
  34.           .onClick(()=>{
  35.             if(this.imgSize>=10){
  36.               this.imgSize-=10
  37.             }
  38.           })
  39.         Button("放大")
  40.           .type(ButtonType.Capsule)
  41.           .width(100)
  42.           .onClick(()=>{
  43.             if(this.imgSize<=300){
  44.               this.imgSize+=10
  45.             }
  46.           })
  47.       }
  48.       .width('100%')
  49.       .height(100)
  50.       .justifyContent(FlexAlign.SpaceAround)
  51.       Row(){
  52.         Slider({
  53.           min:30,
  54.           max:300,
  55.           value:40,
  56.           step:10,
  57.           style:SliderStyle.InSet
  58.         })
  59.           .width('90%')
  60.           .showTips(true)
  61.           .blockColor("#36D")
  62.           .trackThickness(20)
  63.           .onChange(value=>{
  64.             this.imgSize = value
  65.           })
  66.       }
  67. ​
  68.     }
  69. ​
  70.   }
  71. }

四、循环控制与List

1、forEach

  • 基础写法

    实例：

    1.       ForEach(
    2.         this.items,
    3.         (item:Item)=>{
    4.           Row(){
    5.             Image(item.image)
    6.             Column(){
    7.               Text(item.name)
    8.               Text(item.price.toFixed(0))
    9.             }
    10.           }
    11.         }
    12.       )

  • 注：一般keyGenerator不用写会默认有，其作用是给每个循环的对象添加一个唯一标识，减少渲染所耗的时间与内存】

2、List

forEach的时候循环打印了所有的数据，你会一个Column容器根本装不下所有的数据。因此为了实现滚动查看多条信息的功能，我们使用List容器

  • ListItem（列表项）数量过多超出屏幕后，会自动提供滚动功能

  • 它既可纵向排列，也可横向排列

注：不过要注意Listitem不是容器，List才是，所以ListItem中只能写一个根组件，如果要使用多个组件的话要用别的容器将它们包裹起来

3.if与else

这个与通常的编程语法类似

五、自定义组件

1、自定义组件-注解方式

  1. //1.创建一个文件夹ets/Compents/xxxCompent
  2. @Component
  3. export struct Header {
  4.   private  title:ResourceStr;
  5.     build() {
  6.       Row() {
  7.           Text(this.title)
  8.           .fontSize(30)
  9.           .fontWeight(FontWeight.Bold)
  10.       }
  11.     }
  12. }
  13. //2. 在需要的地方引入
  14. import { Header } from '../Components/CommonCompents'
  15. @Entry
  16. @Component
  17. struct Product{
  18.   build(){
  19.     Column(){
  20.       Row(){
  21.         Header({title:"商品列表"})
  22.       }
  23.       .width('100%')
  24.       .height(50)
  25.     }
  26.   }
  27. }

2、自定义组件-函数方式

  • 全局函数定义方式：在struct外面定义

    1. //定义：
    2. @Builder function testBuilder(){
    3.   Row(){
    4.     Text("这个是全局函数组件")
    5.   }
    6. }
    7. @Entry
    8. @Component
    9. struct Product{
    10.   build(){
    11.     Column(){
    12.       Row(){
    13. ​
    14.         testBuilder()
    15.       }
    16.       .width('100%')
    17.       .height(50)
    18.     }
    19.   }
    20. }

  • 局部函数定义：在struct里面定义，只需要将function去掉即可，然后引入要使用this

    1. //定义：
    2. @Builder testBuilder(){
    3.   Row(){
    4.     Text("这个是全局函数组件")
    5.   }
    6. }
    7. @Entry
    8. @Component
    9. struct Product{
    10.   build(){
    11.     Column(){
    12.       Row(){
    13. ​
    14.         this.testBuilder()
    15.       }
    16.       .width('100%')
    17.       .height(50)
    18.     }
    19.   }
    20. }

3、自定义样式

  • 使用@Style装饰器，仅可封装组件通用属性，其使用方法与上面自定义组件的函数方式差不多

    • 全局公共样式

      • //定义
@Styles function testStyle(){
  .width(100)
  .height(50)
}
//使用
  Text("这个是测试样式")
     .testStyle()

    • 局部公共样式

      • //定义
@Styles  testStyle(){
  .width(100)
  .height(50)
}
//使用
  Text("这个是测试样式")
     this.testStyle()

  • @Extend装饰器，仅可定义在全局，可以设置组件的特有属性

    • //定义
@Extend(Text) function textStylesExtend(){
  .fontSize(30)
  .fontWeight(FontWeight.Bold)
  .fontColor('#36D')
}
//使用
    Text("这个是测试样式")
        .testStyle()
      .textStylsExtend()

  • 代码与实现效果

    ​
    1.  
    2. ​
    3. @Styles function testStyle(){
    4.   .width('100%')
    5.   .height(150)
    6. }
    7. @Extend(Text) function textStylesExtend(){
    8.   .fontSize(30)
    9.   .fontWeight(FontWeight.Bold)
    10.   .fontColor('#36D')
    11. }
    12. import { Header } from '../Components/CommonCompents'
    13. @Entry
    14. @Component
    15. struct Product{
    16.   build(){
    17.       Text("这个是测试样式")
    18.       .testStyle()
    19.       .textStylesExtend()
    20.     }
    21. ​
    22. }

六、状态管理装饰器

1、状态管理

在声明式UI中，是以状态来驱动视图更新的：

  • 状态(State)：指驱动视图更新的数据（被装饰器标记的变量）

  • 视图(View)：基于UI描述渲染得到的用户界面

使用状态管理器是为了，达到页面与状态实时更新的效果。可以用VUE中的双向绑定来理解

2、@State装饰器

说明：

  • @State装饰器标记的变量必须初始化，不能为空值

  • @State装饰器支持Object、class、string、number、boolean、enum类型以及这些类型的数组

  • 嵌套类型以及数组中的对象属性无法触发视图更新（类似于Vue中的ref）

使用实例：

 @State totalTasks:number = 0;
  build(){
    Column(){
      Row(){
        Text(this.totalTasks.toString())
      }
     }
}
​

一个简单的任务例子：

实现效果：

实现代码：

  1. //创建一个类
  2. class Task{
  3.   static id:number = 1;
  4.   name:string = `任务${Task.id++}` //使用静态变量要使用类名引用
  5.   flag:boolean = false
  6. }
  7. //设置一个卡片样式
  8. @Styles function card(){
  9.   .width('95%')
  10.   .padding(20)
  11.   .backgroundColor(Color.White)
  12.   .borderRadius(15)
  13.   .shadow({radius:6,color:"#1F000000",offsetX:2,offsetY:4})
  14. }
  15. //指定Text的样式
  16. @Extend(Text) function finishedTask(){
  17.   .decoration({type:TextDecorationType.LineThrough})
  18.   .fontColor('#B1B2B1')
  19. }
  20. ​
  21. @Entry
  22. @Component
  23. struct Index2{
  24.   //任务总数量
  25.   @State totalTasks:number = 0;
  26.   //完成任务的数量
  27.   @State completeTasks:number = 0;
  28.   //任务数组
  29.   @State tasks:Task[] =[]
  30.   //更新数据的函数
  31.   handleTaskComplete(){
  32.     this.totalTasks = this.tasks.length
  33.     this.completeTasks = this.tasks.filter(item=>item.flag).length
  34.   }
  35.   build(){
  36.     Column(){
  37.       Row(){
  38.         Text("任务进度:")
  39.           .fontSize(30)
  40.           .fontWeight(FontWeight.Bold)
  41.         Stack(){
  42.           Progress({value:this.completeTasks,total:this.totalTasks,type:ProgressType.Ring})
  43.             .width(100)
  44.           Row(){
  45.             Text(this.completeTasks.toString())
  46.               .fontColor('#36D')
  47.               .fontSize(25)
  48.             Text(" / "+this.totalTasks.toString())
  49.               .fontSize(25)
  50.           }
  51.         }
  52.         .margin({left:10})
  53.       }
  54.       .card()
  55.       .margin({top:20})
  56.       .justifyContent(FlexAlign.Center)
  57. ​
  58.       Row(){
  59.         Button("添加任务")
  60.           .width(250)
  61.           .height(50)
  62.           .backgroundColor("#36d")
  63.           .fontColor(Color.White)
  64.           .margin(20)
  65.           .onClick(()=>{
  66.             this.tasks.push(new Task())
  67.             this.handleTaskComplete()
  68.           })
  69.       }
  70.       List({space:10}){
  71.         ForEach(
  72.           this.tasks,
  73.           (item:Task,index)=>{
  74.             ListItem(){
  75.               Row(){
  76.                 if(!item.flag){
  77.                   Text(item.name)
  78.                     .fontSize(25)
  79.                     .fontWeight(FontWeight.Bold)
  80.                 }else{
  81.                   Text(item.name)
  82.                     .fontSize(25)
  83.                     .fontWeight(FontWeight.Bold)
  84.                     .finishedTask()
  85.                 }
  86.                 Checkbox()
  87.                   .select(item.flag)
  88.                   .onChange((val)=>{
  89.                     item.flag = val
  90.                     this.handleTaskComplete()
  91.                   })
  92.               }
  93.               .margin(10)
  94.               .justifyContent(FlexAlign.SpaceBetween)
  95.               .card()
  96.             }
  97.             //指定每个ListItem向左划的效果 ： 会出现一个组件（参数也是一个组件）
  98.             .swipeAction({end:this.DeleteTask(index)})
  99.           }
  100.         )
  101.       }
  102.       .alignListItem(ListItemAlign.Center)
  103.       .layoutWeight(1)
  104.       .width("100%")
  105.       .height("100%")
  106.     }
  107.   }
  108.   //删除组件
  109.   @Builder DeleteTask(index){
  110.     Row(){
  111.       Button("删除")
  112.         .backgroundColor(Color.Red)
  113.         .type(ButtonType.Circle)
  114.         .fontSize(30)
  115.         .onClick(()=>{
  116.           this.tasks.splice(index,1)
  117.           this.handleTaskComplete()
  118.         })
  119.     }
  120.     .margin(10)
  121.   }
  122. }

3、@Prop与@Link装饰器

当父组件之间需要数据同步时，可以使用@Prop与@Link装饰器来实现（vue中的父子组件通信O.O）

以下是大概表格描述：

@Prop@Link
同步类型单向同步双向同步
允许装饰的变量类型1、@Prop只支持string、number、boolean、enum类型 2、父组件对象类型，子组件是对象属性 3、不可以是数组、any1、父子类型一致：string、number、boolean、enum、object、class、以及他们的数组 2、数组中元素增、删、替换会引起刷新 3、嵌套类型以及数组中的对象属性无法触发视图更新
初始化方式不允许子组件被@Prop装饰的变量初始化父组件传递、禁止子组件初始化
区别只是把变量传给子组件，直接使用xxxCompent(xxx:this.xxx)即可把引用传给子组件，使用xxxCompent(xxx:$xxx)传递

图形理解

（1）、@Prop简单实例：
  1. @Entry
  2. @Component
  3. struct Index2{
  4.   //任务总数量
  5.   @State totalTasks:number = 0;
  6.   //完成任务的数量
  7.   @State completeTasks:number = 0;
  8. ​
  9.   build(){
  10.     Column(){
  11. //在组件中传递
  12.       TaskComponent({totalTasks:this.totalTasks,completeTasks:this.completeTasks}
  13.   }
  14.   }
  15.  }
  16.  //任务栏组件 一般这个要放在外面  放在这里为了演示
  17. @Component
  18. struct TaskComponent{
  19.   //任务总数量 @Prop只实现了单向绑定 即父组件值的修改会影响到子组件 但子组件的修改不会影响到父组件
  20.   @Prop totalTasks:number
  21.   //完成任务的数量
  22.   @Prop completeTasks:number
  23.   build(){
  24.     Row(){
  25.       Text("任务进度:")
  26.         .fontSize(30)
  27.         .fontWeight(FontWeight.Bold)
  28.       Stack(){
  29.         Progress({value:this.completeTasks,total:this.totalTasks,type:ProgressType.Ring})
  30.           .width(100)
  31.         Row(){
  32.           Text(this.completeTasks.toString())
  33.             .fontColor('#36D')
  34.             .fontSize(25)
  35.           Text(" / "+this.totalTasks.toString())
  36.             .fontSize(25)
  37.         }
  38.       }
  39.       .margin({left:10})
  40.     }
  41.     .card()
  42.     .margin({top:20})
  43.     .justifyContent(FlexAlign.Center)
  44.   }
  45. }
（2）、@Link简单实例
  1. //父组件
  2. @Entry
  3. @Component
  4. struct Index2{
  5.   //任务总数量
  6.   @State totalTasks:number = 0;
  7.   //完成任务的数量
  8.   @State completeTasks:number = 0;
  9.   build(){
  10.     Column(){
  11.       TaskLisiComponent({totalTasks:$totalTasks,completeTasks:$completeTasks})
  12.     }
  13.   }
  14. }
  15. //子组件
  16. ​
  17. //任务栏列表组件
  18. @Component
  19. struct TaskLisiComponent{
  20.   //任务总数量
  21.   @Link totalTasks:number //实现了双向绑定
  22.   //完成任务的数量
  23.   @Link completeTasks:number
  24.   //任务数组
  25.   @State tasks:Task[] =[]
  26.   //更新数据的函数
  27.   handleTaskComplete(){
  28.     this.totalTasks = this.tasks.length
  29.     this.completeTasks = this.tasks.filter(item=>item.flag).length
  30.   }
  31.   build(){
  32.     Column(){
  33.       Row(){
  34.         Button("添加任务")
  35.           .width(250)
  36.           .height(50)
  37.           .backgroundColor("#36d")
  38.           .fontColor(Color.White)
  39.           .margin(20)
  40.           .onClick(()=>{
  41.             this.tasks.push(new Task())
  42.             this.handleTaskComplete()
  43.           })
  44.       }
  45.       List({space:10}){
  46.         ForEach(
  47.           this.tasks,
  48.           (item:Task,index)=>{
  49.             ListItem(){
  50.               Row(){
  51.                 if(!item.flag){
  52.                   Text(item.name)
  53.                     .fontSize(25)
  54.                     .fontWeight(FontWeight.Bold)
  55.                 }else{
  56.                   Text(item.name)
  57.                     .fontSize(25)
  58.                     .fontWeight(FontWeight.Bold)
  59.                     .finishedTask()
  60.                 }
  61.                 Checkbox()
  62.                   .select(item.flag)
  63.                   .onChange((val)=>{
  64.                     item.flag = val
  65.                     this.handleTaskComplete()
  66.                   })
  67.               }
  68.               .margin(10)
  69.               .justifyContent(FlexAlign.SpaceBetween)
  70.               .card()
  71.             }
  72.             //指定每个ListItem向左划的效果 ： 会出现一个组件（参数也是一个组件）
  73.             .swipeAction({end:this.DeleteTask(index)})
  74.           }
  75.         )
  76.       }
  77.       .alignListItem(ListItemAlign.Center)
  78.       .layoutWeight(1)
  79.       .width("100%")
  80.       .height("100%")
  81.     }
  82.   }
  83.   //删除组件
  84.   @Builder DeleteTask(index){
  85.     Row(){
  86.       Button("删除")
  87.         .backgroundColor(Color.Red)
  88.         .type(ButtonType.Circle)
  89.         .fontSize(30)
  90.         .onClick(()=>{
  91.           this.tasks.splice(index,1)
  92.           this.handleTaskComplete()
  93.         })
  94.     }
  95.     .margin(10)
  96.   }
  97. }
（3）、@Prop与@Link装饰器综合实例

实现效果

实现代码

  1. //创建一个类
  2. class Task{
  3.   static id:number = 1;
  4.   name:string = `任务${Task.id++}` //使用静态变量要使用类名引用
  5.   flag:boolean = false
  6. }
  7. //设置一个卡片样式
  8. @Styles function card(){
  9.   .width('95%')
  10.   .padding(20)
  11.   .backgroundColor(Color.White)
  12.   .borderRadius(15)
  13.   .shadow({radius:6,color:"#1F000000",offsetX:2,offsetY:4})
  14. }
  15. //指定Text的样式
  16. @Extend(Text) function finishedTask(){
  17.   .decoration({type:TextDecorationType.LineThrough})
  18.   .fontColor('#B1B2B1')
  19. }
  20. ​
  21. @Entry
  22. @Component
  23. struct Index2{
  24.   //任务总数量
  25.   @State totalTasks:number = 0;
  26.   //完成任务的数量
  27.   @State completeTasks:number = 0;
  28. ​
  29. ​
  30.   build(){
  31.     Column(){
  32.       TaskComponent({totalTasks:this.totalTasks,completeTasks:this.completeTasks})
  33.       TaskLisiComponent({totalTasks:$totalTasks,completeTasks:$completeTasks})
  34.     }
  35.   }
  36. }
  37. //任务栏组件
  38. @Component
  39. struct TaskComponent{
  40.   //任务总数量
  41.   @Prop totalTasks:number
  42.   //完成任务的数量
  43.   @Prop completeTasks:number
  44.   build(){
  45.     Row(){
  46.       Text("任务进度:")
  47.         .fontSize(30)
  48.         .fontWeight(FontWeight.Bold)
  49.       Stack(){
  50.         Progress({value:this.completeTasks,total:this.totalTasks,type:ProgressType.Ring})
  51.           .width(100)
  52.         Row(){
  53.           Text(this.completeTasks.toString())
  54.             .fontColor('#36D')
  55.             .fontSize(25)
  56.           Text(" / "+this.totalTasks.toString())
  57.             .fontSize(25)
  58.         }
  59.       }
  60.       .margin({left:10})
  61.     }
  62.     .card()
  63.     .margin({top:20})
  64.     .justifyContent(FlexAlign.Center)
  65.   }
  66. }
  67. ​
  68. //任务栏列表组件
  69. @Component
  70. struct TaskLisiComponent{
  71.   //任务总数量
  72.   @Link totalTasks:number
  73.   //完成任务的数量
  74.   @Link completeTasks:number
  75.   //任务数组
  76.   @State tasks:Task[] =[]
  77.   //更新数据的函数
  78.   handleTaskComplete(){
  79.     this.totalTasks = this.tasks.length
  80.     this.completeTasks = this.tasks.filter(item=>item.flag).length
  81.   }
  82.   build(){
  83.     Column(){
  84.       Row(){
  85.         Button("添加任务")
  86.           .width(250)
  87.           .height(50)
  88.           .backgroundColor("#36d")
  89.           .fontColor(Color.White)
  90.           .margin(20)
  91.           .onClick(()=>{
  92.             this.tasks.push(new Task())
  93.             this.handleTaskComplete()
  94.           })
  95.       }
  96.       List({space:10}){
  97.         ForEach(
  98.           this.tasks,
  99.           (item:Task,index)=>{
  100.             ListItem(){
  101.               Row(){
  102.                 if(!item.flag){
  103.                   Text(item.name)
  104.                     .fontSize(25)
  105.                     .fontWeight(FontWeight.Bold)
  106.                 }else{
  107.                   Text(item.name)
  108.                     .fontSize(25)
  109.                     .fontWeight(FontWeight.Bold)
  110.                     .finishedTask()
  111.                 }
  112.                 Checkbox()
  113.                   .select(item.flag)
  114.                   .onChange((val)=>{
  115.                     item.flag = val
  116.                     this.handleTaskComplete()
  117.                   })
  118.               }
  119.               .margin(10)
  120.               .justifyContent(FlexAlign.SpaceBetween)
  121.               .card()
  122.             }
  123.             //指定每个ListItem向左划的效果 ： 会出现一个组件（参数也是一个组件）
  124.             .swipeAction({end:this.DeleteTask(index)})
  125.           }
  126.         )
  127.       }
  128.       .alignListItem(ListItemAlign.Center)
  129.       .layoutWeight(1)
  130.       .width("100%")
  131.       .height("100%")
  132.     }
  133.   }
  134.   //删除组件
  135.   @Builder DeleteTask(index){
  136.     Row(){
  137.       Button("删除")
  138.         .backgroundColor(Color.Red)
  139.         .type(ButtonType.Circle)
  140.         .fontSize(30)
  141.         .onClick(()=>{
  142.           this.tasks.splice(index,1)
  143.           this.handleTaskComplete()
  144.         })
  145.     }
  146.     .margin(10)
  147.   }
  148. }

4、@Provide和@Consume

这个类似于Vue中 provide / inject

其作用是：可以跨组件提供类似于@State和@Link的双向同步

优点：不需要在子/孙组件中声明，只需要在父组件中要传递的变量前加上@Provide装饰器；在子/孙组件中接收的变量上加上@Consume装饰器

缺点：内部资源消耗比较大

结构图为：

简单实例：

  1. //父组件
  2. @Entry
  3. @Component
  4. struct Index2{
  5.   //这个是测试@Provide
  6.   @Provide text:number = 1;
  7. ​
  8.   build(){
  9.     Column(){
  10.       TaskComponent()
  11.     }
  12.   }
  13. }
  14. //子/孙组件
  15. @Component
  16. struct TaskComponent{
  17.   //接收测试
  18.   @Consume text:number
  19.   build(){
  20.     Row(){
  21.       Text(this.text.toString())
  22.      }
  23. }

5、@ObjectLink与@Observed装饰器

说明：这两个装饰器用于涉及嵌套对象或数组元素为对象的场景进行双向数据同步（可以理解为：上面的都是类似vue中的ref，这两个装饰器为reactive）

使用步骤：

1、在元素类型中加上@Observed装饰器，如果有嵌套的都要加上

2、在需要同步更新的变量加上@ObjectLink装饰器 注意：一般在数组/对象嵌套中是不能将里面的变量设置装饰器的，所以一般会在声明一个子组件来使用@ObjectLink装饰器

2.1、对象设置@Observed/@ObjectLink装饰器案例

2.2、数组设置@Observed/@ObjectLink装饰器案例

实现案例：

效果：

实现代码：

  1. //创建一个类 使用@Observed装饰器
  2. @Observed
  3. class Task{
  4.   static id:number = 1;
  5.   name:string = `任务${Task.id++}` //使用静态变量要使用类名引用
  6.   flag:boolean = false
  7. }
  8. //设置一个卡片样式
  9. @Styles function card(){
  10.   .width('95%')
  11.   .padding(20)
  12.   .backgroundColor(Color.White)
  13.   .borderRadius(15)
  14.   .shadow({radius:6,color:"#1F000000",offsetX:2,offsetY:4})
  15. }
  16. //指定Text的样式
  17. @Extend(Text) function finishedTask(){
  18.   .decoration({type:TextDecorationType.LineThrough})
  19.   .fontColor('#B1B2B1')
  20. }
  21. ​
  22. @Entry
  23. @Component
  24. struct Index2{
  25.   //任务总数量
  26.   @State totalTasks:number = 0;
  27.   //完成任务的数量
  28.   @State completeTasks:number = 0;
  29.   build(){
  30.     Column(){
  31.       TaskComponent({totalTasks:this.totalTasks,completeTasks:this.completeTasks})
  32.       TaskLisiComponent({totalTasks:$totalTasks,completeTasks:$completeTasks})
  33.     }
  34.   }
  35. }
  36. //任务栏组件
  37. @Component
  38. struct TaskComponent{
  39.   //任务总数量
  40.   @Prop totalTasks:number
  41.   //完成任务的数量
  42.   @Prop completeTasks:number
  43. ​
  44.   build(){
  45.     Row(){
  46. ​
  47.       Text("任务进度:")
  48.         .fontSize(30)
  49.         .fontWeight(FontWeight.Bold)
  50.       Stack(){
  51.         Progress({value:this.completeTasks,total:this.totalTasks,type:ProgressType.Ring})
  52.           .width(100)
  53.         Row(){
  54.           Text(this.completeTasks.toString())
  55.             .fontColor('#36D')
  56.             .fontSize(25)
  57.           Text(" / "+this.totalTasks.toString())
  58.             .fontSize(25)
  59.         }
  60.       }
  61.       .margin({left:10})
  62.     }
  63.     .card()
  64.     .margin({top:20})
  65.     .justifyContent(FlexAlign.Center)
  66.   }
  67. }
  68. ​
  69. //任务栏列表组件
  70. @Component
  71. struct TaskLisiComponent{
  72.   //任务总数量
  73.   @Link totalTasks:number
  74.   //完成任务的数量
  75.   @Link completeTasks:number
  76.   //任务数组
  77.   @State tasks:Task[] =[]
  78.   //更新数据的函数
  79.   handleTaskComplete(){
  80.     this.totalTasks = this.tasks.length
  81.     this.completeTasks = this.tasks.filter(item=>item.flag).length
  82.   }
  83.   build(){
  84.     Column(){
  85.       Row(){
  86.         Button("添加任务")
  87.           .width(250)
  88.           .height(50)
  89.           .backgroundColor("#36d")
  90.           .fontColor(Color.White)
  91.           .margin(20)
  92.           .onClick(()=>{
  93.             this.tasks.push(new Task())
  94.             this.handleTaskComplete()
  95.           })
  96.       }
  97.       List({space:10}){
  98.         ForEach(
  99.           this.tasks,
  100.           (item:Task,index)=>{
  101.             ListItem(){
  102.               //这里将每个任务子模块以及处理完成任务的函数也传递过去
  103.               // 注意：在函数中使用this调用 如果直接传递函数过去 在调用函数过程中函数里面的this是子组件的（因为是子组件调用的）
  104.               // ，所以需要使用bind()指定this指向
  105.               ItemChild({item:item,onChangeTick:this.handleTaskComplete.bind(this)})
  106.             }
  107.             //指定每个ListItem向左划的效果 ： 会出现一个组件（参数也是一个组件）
  108.             .swipeAction({end:this.DeleteTask(index)})
  109.           }
  110.         )
  111.       }
  112.       .alignListItem(ListItemAlign.Center)
  113.       .layoutWeight(1)
  114.       .width("100%")
  115.       .height("100%")
  116.     }
  117.   }
  118.   //删除组件
  119.   @Builder DeleteTask(index){
  120.     Row(){
  121.       Button("删除")
  122.         .backgroundColor(Color.Red)
  123.         .type(ButtonType.Circle)
  124.         .fontSize(30)
  125.         .onClick(()=>{
  126.           this.tasks.splice(index,1)
  127.           this.handleTaskComplete()
  128.         })
  129.     }
  130.     .margin(10)
  131.   }
  132. }
  133. //任务子模块
  134. @Component
  135. struct ItemChild{
  136.   //这里将上面的各个任务的子模块抽取出来
  137.   //各个任务的变量 使用  @ObjectLink 装饰器
  138.   @ObjectLink item:Task
  139.   //接收父组件中的修改函数
  140.   onChangeTick:()=>void
  141.   build(){
  142.     Row(){
  143.       if(!this.item.flag){
  144.         Text(this.item.name)
  145.           .fontSize(25)
  146.           .fontWeight(FontWeight.Bold)
  147.       }else{
  148.         Text(this.item.name)
  149.           .fontSize(25)
  150.           .fontWeight(FontWeight.Bold)
  151.           .finishedTask()
  152.       }
  153.       Checkbox()
  154.         .select(this.item.flag)
  155.         .onChange((val)=>{
  156.           this.item.flag = val
  157.           this.onChangeTick()
  158.         })
  159.     }
  160.     .margin(10)
  161.     .justifyContent(FlexAlign.SpaceBetween)
  162.     .card()
  163.   }
  164. }

七、页面路由

1、前言

页面路由是指在应用程序中实现不同页面之间的跳转和数据传递

页面路由中是使用页面栈来存储页面的，所以遵循栈先进后出的原则。先进来的页面被压到栈里，一层一层拿出来。

但页面栈的最大容量上限为32个，所以有时候就需要使用router.clear()来清空栈，以免栈满，释放内存。

页面栈理解：

2、Router的两种跳转方式

  • router.pushUrl():目标页面不会替换当前页，而是压入页面栈，所以可以用router.back()返回当前页

  • router.replaceUrl()：目标页替换当前页，当前页会被销毁并释放资源，无法返回当前页

3、Router两种页面实例模式

  • Standard:标准化实例模式，每次跳转都会新建一个目标页并压入栈顶。默认就是这种方式

  • Single：单实例模式，如果目标页已经在栈中，则离栈顶最近的同Url页面会被移动到栈顶并重新加载

4、简单使用

5、具体使用

注：在使用url路由中，要在resources/base/profile里面配置

建议在新建页面的时候，直接用倒数第二个的page，会自动添加

代码：

resources/base/profile

  1. {
  2.   "src": [
  3.     "pages/Index",
  4.     "pages/IndexPage",
  5.     "pages/Index2",
  6.     "pages/Product"
  7.   ]
  8. }

Header

  1.  
  2.  
  3. import router from '@ohos.router';
  4. @Component
  5. export struct Header {
  6.   private  title:ResourceStr;
  7.     build() {
  8.       Row() {
  9.           Button("返回")
  10.           Text(this.title)
  11.           .fontSize(30)
  12.           .fontWeight(FontWeight.Bold)
  13.       }
  14.       .onClick(()=>{
  15.         router.showAlertBeforeBackPage({
  16.           message:"确定要返回上一页码" })
  17.         router.back()
  18.       })
  19.     }
  20. }

首页

  1. import router from '@ohos.router'
  2. class RouteInfo {
  3.   pageUrl:string
  4.   title:string
  5.  
  6.   constructor(pageUrl:string,title:string) {
  7.     this.pageUrl = pageUrl
  8.     this.title = title
  9.   }
  10. }
  11. @Entry
  12. @Component
  13. struct IndexPage {
  14.   @State message: string = 'Hello World'
  15.   routesInfo:RouteInfo[] = [
  16.     new RouteInfo("pages/Index","控制图片"),
  17.     new RouteInfo("pages/Index2","任务列表"),
  18.     new RouteInfo("pages/Product","商品列表"),
  19.   ]
  20.   build() {
  21.     Row() {
  22.       Column() {
  23.         Text("路由测试")
  24.           .fontSize(30)
  25.         ForEach(
  26.           this.routesInfo,
  27.           (item:RouteInfo,index)=>{
  28.             Row(){
  29.               Text(index.toString())
  30.                 .fontSize(30)
  31.                 .fontWeight(FontWeight.Bold)
  32.                 .fontColor(Color.White)
  33.               Text(item.title)
  34.                 .fontSize(30)
  35.                 .fontWeight(FontWeight.Bold)
  36.                 .fontColor(Color.White)
  37.             }
  38.             .justifyContent(FlexAlign.SpaceBetween)
  39.             .width("90%")
  40.             .height(100)
  41.             .backgroundColor("#36D")
  42.             .margin(20)
  43.             .padding(10)
  44.             .borderRadius(20)
  45.             .onClick(()=>{
  46.               router.pushUrl({
  47.                 url:item.pageUrl,
  48.                 params:{title:item.title}
  49.               },
  50.               router.RouterMode.Standard,
  51.               err=>{
  52.                 if(err){
  53.                   console.log(`路由失败:错误代码-${err.code} 错误信息-${err.message}`);
  54.                 }
  55.               }
  56.               )
  57.             })
  58.           }
  59.         )
  60.       }
  61.       .width('100%')
  62.     }
  63.     .height('100%')
  64.   }
  65. }

任务列表（这里就给一个页面）：

  1. import { Header } from '../Components/CommonCompents'
  2. //创建一个类
  3. @Observed
  4. class Task{
  5.   static id:number = 1;
  6.   name:string = `任务${Task.id++}` //使用静态变量要使用类名引用
  7.   flag:boolean = false
  8. }
  9. //设置一个卡片样式
  10. @Styles function card(){
  11.   .width('95%')
  12.   .padding(20)
  13.   .backgroundColor(Color.White)
  14.   .borderRadius(15)
  15.   .shadow({radius:6,color:"#1F000000",offsetX:2,offsetY:4})
  16. }
  17. //指定Text的样式
  18. @Extend(Text) function finishedTask(){
  19.   .decoration({type:TextDecorationType.LineThrough})
  20.   .fontColor('#B1B2B1')
  21. }
  22.  
  23. @Entry
  24. @Component
  25. struct Index2{
  26.   //任务总数量
  27.   @State totalTasks:number = 0;
  28.   //完成任务的数量
  29.   @State completeTasks:number = 0;
  30.   build(){
  31.     Column(){
  32.       TaskComponent({totalTasks:this.totalTasks,completeTasks:this.completeTasks})
  33.       TaskLisiComponent({totalTasks:$totalTasks,completeTasks:$completeTasks})
  34.     }
  35.   }
  36. }
  37. //任务栏组件
  38. @Component
  39. struct TaskComponent{
  40.   //任务总数量
  41.   @Prop totalTasks:number
  42.   //完成任务的数量
  43.   @Prop completeTasks:number
  44.  
  45.   build(){
  46.     Column(){
  47.       Row(){
  48.         Header({title:"返回首页"})
  49.       }
  50.       Row(){
  51.         Text("任务进度:")
  52.           .fontSize(30)
  53.           .fontWeight(FontWeight.Bold)
  54.         Stack(){
  55.           Progress({value:this.completeTasks,total:this.totalTasks,type:ProgressType.Ring})
  56.             .width(100)
  57.           Row(){
  58.             Text(this.completeTasks.toString())
  59.               .fontColor('#36D')
  60.               .fontSize(25)
  61.             Text(" / "+this.totalTasks.toString())
  62.               .fontSize(25)
  63.           }
  64.         }
  65.         .margin({left:10})
  66.       }
  67.       .card()
  68.       .margin({top:20})
  69.       .justifyContent(FlexAlign.Center)
  70.     }
  71.   }
  72. }
  73.  
  74. //任务栏列表组件
  75. @Component
  76. struct TaskLisiComponent{
  77.   //任务总数量
  78.   @Link totalTasks:number
  79.   //完成任务的数量
  80.   @Link completeTasks:number
  81.   //任务数组
  82.   @State tasks:Task[] =[]
  83.   //更新数据的函数
  84.   handleTaskComplete(){
  85.     this.totalTasks = this.tasks.length
  86.     this.completeTasks = this.tasks.filter(item=>item.flag).length
  87.   }
  88.   build(){
  89.     Column(){
  90.       Row(){
  91.         Button("添加任务")
  92.           .width(250)
  93.           .height(50)
  94.           .backgroundColor("#36d")
  95.           .fontColor(Color.White)
  96.           .margin(20)
  97.           .onClick(()=>{
  98.             this.tasks.push(new Task())
  99.             this.handleTaskComplete()
  100.           })
  101.       }
  102.       List({space:10}){
  103.         ForEach(
  104.           this.tasks,
  105.           (item:Task,index)=>{
  106.             ListItem(){
  107.               //这里将每个任务子模块以及处理完成任务的函数也传递过去
  108.               // 注意：在函数中使用this调用 如果直接传递函数过去 在调用函数过程中函数里面的this是子组件的（因为是子组件调用的）
  109.               // ，所以需要使用bind()指定this指向
  110.               ItemChild({item:item,onChangeTick:this.handleTaskComplete.bind(this)})
  111.             }
  112.             //指定每个ListItem向左划的效果 ： 会出现一个组件（参数也是一个组件）
  113.             .swipeAction({end:this.DeleteTask(index)})
  114.           }
  115.         )
  116.       }
  117.       .alignListItem(ListItemAlign.Center)
  118.       .layoutWeight(1)
  119.       .width("100%")
  120.       .height("100%")
  121.     }
  122.   }
  123.   //删除组件
  124.   @Builder DeleteTask(index){
  125.     Row(){
  126.       Button("删除")
  127.         .backgroundColor(Color.Red)
  128.         .type(ButtonType.Circle)
  129.         .fontSize(30)
  130.         .onClick(()=>{
  131.           this.tasks.splice(index,1)
  132.           this.handleTaskComplete()
  133.         })
  134.     }
  135.     .margin(10)
  136.   }
  137. }
  138. //任务子模块
  139. @Component
  140. struct ItemChild{
  141.   //这里将上面的各个任务的子模块抽取出来
  142.   //各个任务的变量
  143.   @ObjectLink item:Task
  144.   //接收父组件中的修改函数
  145.   onChangeTick:()=>void
  146.   build(){
  147.     Row(){
  148.       if(!this.item.flag){
  149.         Text(this.item.name)
  150.           .fontSize(25)
  151.           .fontWeight(FontWeight.Bold)
  152.       }else{
  153.         Text(this.item.name)
  154.           .fontSize(25)
  155.           .fontWeight(FontWeight.Bold)
  156.           .finishedTask()
  157.       }
  158.       Checkbox()
  159.         .select(this.item.flag)
  160.         .onChange((val)=>{
  161.           this.item.flag = val
  162.           this.onChangeTick()
  163.         })
  164.     }
  165.     .margin(10)
  166.     .justifyContent(FlexAlign.SpaceBetween)
  167.     .card()
  168.   }
  169. }

6、内容回顾

八、动画

1、属性动画

属性动画是通过设置组件的animation属性来给组件添加动画，当组件的width、height、opacity、backgroundColor、scale、rotate、translate等属性变更时，可以实现渐变过渡效果。

相应实现属性：

名称参数类型必填描述
durationnumber否设置动画时长。默认值：1000单位：毫秒从API version 9开始，该接口支持在ArkTS卡片中使用。说明：- 在ArkTS卡片上最大动画持续时间为1000毫秒。- 设置浮点型类型的值时，向下取整；设置值为1.2，按照1处理。
temponumber否动画播放速度。数值越大，动画播放速度越快，数值越小，播放速度越慢。值为0时，表示不存在动画。默认值：1
curvestring | Curve | ICurve9+否设置动画曲线。默认值：Curve.EaseInOut从API version 9开始，该接口支持在ArkTS卡片中使用。
delaynumber否设置动画延迟执行的时长。默认值：0，不延迟播放。单位：毫秒取值范围：[0, +∞)说明：设置浮点型类型的值时，向下取整。例如，设置值为1.2，按照1处理。
iterationsnumber否设置播放次数。默认值：1取值范围：[-1, +∞)说明：设置为-1时表示无限次播放。设置为0时表示无动画效果。
playModePlayMode否设置动画播放模式，默认播放完成后重头开始播放。默认值：PlayMode.Normal从API version 9开始，该接口支持在ArkTS卡片中使用。
onFinish() => void否状态回调，动画播放完成时触发。从API version 9开始，该接口支持在ArkTS卡片中使用。说明：当iterations设置为-1时，动画效果无限循环不会停止，所以不会触发此回调。
Curve值

从API version 9开始，该接口支持在ArkTS卡片中使用。

名称描述
Linear表示动画从头到尾的速度都是相同的。
Ease表示动画以低速开始，然后加快，在结束前变慢，CubicBezier(0.25, 0.1, 0.25, 1.0)。
EaseIn表示动画以低速开始，CubicBezier(0.42, 0.0, 1.0, 1.0)。
EaseOut表示动画以低速结束，CubicBezier(0.0, 0.0, 0.58, 1.0)。
EaseInOut表示动画以低速开始和结束，CubicBezier(0.42, 0.0, 0.58, 1.0)。
FastOutSlowIn标准曲线，cubic-bezier(0.4, 0.0, 0.2, 1.0)。
LinearOutSlowIn减速曲线，cubic-bezier(0.0, 0.0, 0.2, 1.0)。
FastOutLinearIn加速曲线，cubic-bezier(0.4, 0.0, 1.0, 1.0)。
ExtremeDeceleration急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。
Sharp锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)。
Rhythm节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)。
Smooth平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)。
Friction阻尼曲线，CubicBezier(0.2, 0.0, 0.2, 1.0)。

简单实现： （具体案例：看下面小鱼案例）

Text('hello Animation')
    .position({x: this.X, y: this.Y})
    //animation 要放在实现属性的后面 一般放在最后面
    .animation({  
        duration: 500 //实现时间
    })

2、显示动画

显式动画是通过全局animateTo函数来修改组件属性，实现属性变化时的渐变过渡效果。

提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。

实现参数

参数类型是否必填描述
valueAnimateParam是设置动画效果相关参数。
event() => void是指定显示动效的闭包函数，在闭包函数中导致的状态变化系统会自动插入过渡动画。
AnimateParam对象说明
名称类型描述
durationnumber动画持续时间，单位为毫秒。默认值：1000从API version 9开始，该接口支持在ArkTS卡片中使用。说明：- 在ArkTS卡片上最大动画持续时间为1000毫秒，若超出则固定为1000毫秒。- 设置浮点型类型的值时，向下取整。例如，设置值为1.2，按照1处理。
temponumber动画的播放速度，值越大动画播放越快，值越小播放越慢，为0时无动画效果。默认值：1.0
curveCurve | ICurve | string动画曲线。默认值：Curve.EaseInOut从API version 9开始，该接口支持在ArkTS卡片中使用。
delaynumber单位为ms(毫秒)，默认不延时播放。默认值：0说明：- 设置浮点型类型的值时，向下取整。例如，设置值为1.2，按照1处理。
iterationsnumber默认播放一次，设置为-1时表示无限次播放。默认值：1
playModePlayMode设置动画播放模式，默认播放完成后重头开始播放。默认值：PlayMode.Normal从API version 9开始，该接口支持在ArkTS卡片中使用。相关使用约束请参考PlayMode说明。
onFinish() => void动效播放完成回调。从API version 9开始，该接口支持在ArkTS卡片中使用。

简单实现（来自官网，下面有小鱼案例）：

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct AnimateToExample {
  5.   @State widthSize: number = 250
  6.   @State heightSize: number = 100
  7.   @State rotateAngle: number = 0
  8.   private flag: boolean = true
  9.  
  10.   build() {
  11.     Column() {
  12.       Button('change size')
  13.         .width(this.widthSize)
  14.         .height(this.heightSize)
  15.         .margin(30)
  16.         .onClick(() => {
  17.           if (this.flag) {
  18.             animateTo({
  19.               duration: 2000,
  20.               curve: Curve.EaseOut,
  21.               iterations: 3,
  22.               playMode: PlayMode.Normal,
  23.               onFinish: () => {
  24.                 console.info('play end')
  25.               }
  26.             }, () => {
  27.               this.widthSize = 150
  28.               this.heightSize = 60
  29.             })
  30.           } else {
  31.             animateTo({}, () => {
  32.               this.widthSize = 250
  33.               this.heightSize = 100
  34.             })
  35.           }
  36.           this.flag = !this.flag
  37.         })
  38.       Button('change rotate angle')
  39.         .margin(50)
  40.         .rotate({ x: 0, y: 0, z: 1, angle: this.rotateAngle })
  41.         .onClick(() => {
  42.           animateTo({
  43.             duration: 1200,
  44.             curve: Curve.Friction,
  45.             delay: 500,
  46.             iterations: -1, // 设置-1表示动画无限循环
  47.             playMode: PlayMode.Alternate,
  48.             onFinish: () => {
  49.               console.info('play end')
  50.             }
  51.           }, () => {
  52.             this.rotateAngle = 90
  53.           })
  54.         })
  55.     }.width('100%').margin({ top: 5 })
  56.   }
  57. }

3、组件动画

转场动画分为：

  • 页面间转场

  • 组件内转场

  • 共享元素转场

此处是组件内转场。

组件转场动画是在组件插入或移除时的过渡动画，通过组件的transition属性来配置。

transition属性的参数是一个JSON对象，可以设置组件动画效果作用于新增还是删除、不透明度的变化值、平移的距离、缩放的比例、旋转的角度等。

因为是转场动画，涉及到入场、离场问题，所以组件是否显示肯定是通过if条件判断一个变量的值来实现的。 这个变量值的修改必须在animateTo函数中进行，需要配合animateTo才能生效，动效时长、曲线、延时跟随animateTo中的配置。

参数列表

名称参数类型参数描述
transitionTransitionOptions设置组件插入显示和删除隐藏的过渡效果。默认值：不设置任何过渡效果时，默认有透明度从0到1的过渡效果。若设置了其他过渡效果，以设置的过渡效果为准。说明：所有参数均为可选参数，详细描述见TransitionOptions参数说明。
TransitionOptions参数说明
参数名称参数类型必填参数描述
typeTransitionType否默认包括组件新增和删除。默认值：TransitionType.All说明：不指定Type时说明插入删除使用同一种效果。
opacitynumber否设置组件转场时的透明度效果，为插入时起点和删除时终点的值。默认值：1取值范围： [0, 1]说明：设置小于0或大于1的非法值时，按1处理。
translate{x? : number | string,y? : number | string,z? : number | string}否设置组件转场时的平移效果，为插入时起点和删除时终点的值。-x：横向的平移距离。-y：纵向的平移距离。-z：竖向的平移距离。
scale{x? : number,y? : number,z? : number,centerX? : number | string,centerY? : number | string}否设置组件转场时的缩放效果，为插入时起点和删除时终点的值。-x：横向放大倍数（或缩小比例）。-y：纵向放大倍数（或缩小比例）。-z：当前为二维显示，该参数无效。- centerX、centerY指缩放中心点，centerX和centerY默认值是"50%"。- 中心点为0时，默认的是组件的左上角。
rotate{x?: number,y?: number,z?: number,angle: number | string,centerX?: number | string,centerY?: number | string}否设置组件转场时的旋转效果，为插入时起点和删除时终点的值。-x：横向的旋转向量。-y：纵向的旋转向量。-z：竖向的旋转向量。- centerX,centerY指旋转中心点，centerX和centerY默认值是"50%"。- 中心点为（0，0）时，默认的是组件的左上角。

示例：

  1. if(this.isShow) {   // 是否显示
  2.     Text('hello')
  3.     	.transition({
  4.         	opcity: 0,  // 不透明度
  5.         	rotate: {angle: -360},  // 旋转角度
  6.         	scale: {x: 0, y: 0}  // 横向、纵向的缩放倍数
  7.     	})
  8. }
  9.  
  10. // 只有用animateTo控制状态变量，才能有动画
  11. animateTo(
  12.     {duration: 1000},  // 设置动画的时长
  13.     () => {
  14.         this.isShow = false  // 在animateTo函数中调整状态变量，控制上面的组件是否显示，从而让上面的组件有入场、离场动画
  15.     }
  16. )

4、小鱼案例

注： 属性动画直接在要设置动画的组件设置一个animation属性即可

显示动画比较麻烦，要在控制是否显示动画的地方 使用animationTo全局事件（自带的）

页面动画是控制组件的是否显示的，要配合animationTo事件使，还要在被设置动画的组件中设置transition属性

  1. import router from '@ohos.router'
  2. @Entry
  3. @Component
  4. struct AnimationPage {
  5.   // 小鱼图片
  6.   @State src: Resource = $r('app.media.fish_R')
  7.   // 是否开始游戏
  8.   @State isBegin: boolean = false
  9.   // 小鱼坐标
  10.   @State fishX: number = 200
  11.   @State fishY: number = 180
  12.   // 小鱼角度
  13.   @State angle: number = 0
  14.  
  15.   build() {
  16.     Row() {
  17.       Column() {
  18.  
  19.         Stack() {
  20.           //  返回按钮
  21.           Button('返回')
  22.             .position({x: 10, y: 10})
  23.             .backgroundColor('#20101010')
  24.             .onClick(() => {
  25.               // 跳转到自己（返回开始状态）
  26.               router.replaceUrl({url: 'pages/AnimationPage'})
  27.             })
  28.           if(!this.isBegin) {
  29.             // 开始按钮
  30.             //组件切换动画
  31.             //transition 要配合AnimationTo使用 直接在要转场的组件下面添加 transition属性即可
  32.             Button('开始游戏')
  33.               .onClick(() => {
  34.                 // 只有用animateTo控制状态变量，才能有动画
  35.                animateTo({duration:1000},()=>{
  36.                  this.isBegin = true
  37.                })
  38.               })
  39.           } else {
  40.             // 显示小鱼图片
  41.             Image(this.src)
  42.               .position({x: this.fishX - 23.7, y: this.fishY - 13.8})  // 图片宽高是47.4*27.6，一半就是23.7*13.8
  43.               .rotate({angle: this.angle, centerX: '50%', centerY: '50%'})
  44.               .width(47.4)
  45.               .height(27.6)
  46.               .transition({
  47.                 type:TransitionType.Insert,
  48.                 opacity:0,
  49.                 // scale:{x:-250}
  50.               })
  51.             //   方式一在要设置样式动画的组件 将Animation属性放在最后设置
  52.             // .animation({
  53.             //                 duration:500
  54.             //               })
  55.           }
  56.           // 操作按钮
  57.           Row() {
  58.             Button('←')
  59.               .backgroundColor('#20101010')
  60.               .onClick(()=>{
  61.                 //方式二 在点击事件中 用AnimationTo全局事件监听
  62.                 animateTo({duration:1000},()=>{
  63.                   this.fishX-=20
  64.                   this.src = $r('app.media.fish_L')
  65.                 })
  66.  
  67.               })
  68.  
  69.             Column({space: 40}) {
  70.               Button('↑')
  71.                 .backgroundColor('#20101010')
  72.                 .onClick(()=>{
  73.                   this.fishY-=20
  74.                 })
  75.               Button('↓')
  76.                 .backgroundColor('#20101010')
  77.                 .onClick(()=>{
  78.  
  79.                   animateTo({duration:1000},()=>{
  80.                     this.fishY+=20
  81.                   })
  82.                 })
  83.             }
  84.             Button('→')
  85.               .backgroundColor('#20101010')
  86.               .onClick(()=>{
  87.                 animateTo({duration:1000},()=>{
  88.                   this.fishX+=20
  89.                   this.src = $r('app.media.fish_R')
  90.                 })
  91.               })
  92.           }
  93.           .height(240)
  94.           .width(240)
  95.           .position({x: 35, y: '40%'})
  96.         }
  97.         .width('100%')
  98.         .height('100%')
  99.  
  100.       }
  101.       .width('100%')
  102.       .height('100%')
  103.     }
  104.     .height('100%')
  105.     .width('100%')
  106.     .backgroundImage($r('app.media.eatFish_bg'))
  107.     .backgroundImageSize(ImageSize.Cover) 
  108.   }
  109. }

九、Stage模型

1、应用模型

应用模型是HarmonyOS为开发者提供的应用程序所需能力的抽象提炼，它提供了应用程序必备的组件和运行机制。有了应用模型，开发者可以基于一套统一的模型进行应用开发，使应用开发更简单、高效。

HarmonyOS应用模型的构成要素包括：

  • 应用组件

  • 应用进程模型

  • 应用线程模型

  • 应用任务管理模型

  • 应用配置文件

2、应用模型概况

随着系统的演进发展，HarmonyOS先后提供了两种应用模型：

  • FA（Feature Ability）模型：HarmonyOS早期版本开始支持的模型，已经不再主推。

  • Stage模型：HarmonyOS 3.1 Developer Preview版本开始新增的模型，是目前主推且会长期演进的模型。在该模型中，由于提供了AbilityStage、WindowStage等类作为应用组件和Window窗口的“舞台”，因此称这种应用模型为Stage模型。

3、Stage模型的项目结构

Stage模型概述

编译器中的代码结构

在一个应用内可以创建多个module。module是应用的基本功能单元。里面包含着源码、配置文件、资源等。每一个moudle都可以独立编译运行

这些module分为两类：

  • Ability module：内部是开发这个应用的核心能力。可以把不同的能力创建成多个Ability module 进行开发

  • Library module：将通用的工具、资源、配置、组件等抽取到的单独module。

创建一个新module只要右键项目new->module即可（注意观察后缀）

编译打包

在编译期中，整个项目会被打包从一个app安装包。

在Stage模型中，为了降低不同module之间的耦合，每一个module都可以独立编译打包运行。其中：

  • Ability module会被编译成HAP（Harmony Ability Package） 文件，.hap后缀 （多个.hap中 只有一个是Entry入口的.hap）

  • Library module会被编译成HSP（Harmony Shared Package）文件或者HAR（Harmony Archive）

HAP包在运行时可以引用依赖HSP包。一个应用中往往会分为多个Ability module，所以会有多个HAP文件。HAP是HarmonyOS应用安装的基本单位。

HAP分为两类（类型在module.json5文件中配置）：

  • Entry HAP：主模块，入口模块。一个应用只能有一个

  • Feature HAP：其他拓展功能的模块，可以有多个，也可以没有。

虽然可以有多个Ability module，但是只能有一个入口模块（例如HelloWorld项目中的entry模块），主要用于开发项目的入口界面、主能力等信息。

这些HAP最终合并一起称为一个Bundle（即App），这个Bundle需要有一个Bundle name，是整个应用的唯一标识。这个Bundle name即新建项目时配置的Bundle name，体现在项目的app.json5文件的bundleName配置项。最终整个Bundle合并打包成一个.app后缀的文件。应用在下载安装时，可以选择性的下载安装，例如安装Entry和某几个Feature。

运行期结构

每一个HAP都可以独立运行。HAP在运行时，每一个HAP都会创建一个 AbilityStage 的实例，应用组件的“舞台”。

Stage模型提供UIAbility和ExtensionAbility两种类型的组件，这两种组件都有具体的类承载，支持面向对象的开发方式。

  • UIAbility：

    • UIAbility组件是一种包含UI界面的应用组件，主要用于和用户交互。例如，图库类应用可以在UIAbility组件中展示图片瀑布流，在用户选择某个图片后，在新的页面中展示图片的详细内容。同时用户可以通过返回键返回到瀑布流页面。UIAbility的生命周期只包含创建/销毁/前台/后台等状态，与显示相关的状态通过WindowStage的事件暴露给开发者。

  • ExtensionAbility：面向特定场景的应用组件

在HAP中定义的UIAbility，都会在实例化后关联到该HAP的AbilityStage，使用AbilityStage获取该HAP中UIAbility实例的运行时信息。

每个UIAbility类实例都会与一个WindowStage类实例绑定，它包含一个主窗口，该窗口为ArkUI提供了绘制区域。

4、应用配置文件

应用配置文件概述（Stage模型）

每个应用项目必须在项目的代码目录下加入配置文件，这些配置文件会向编译工具、操作系统和应用市场提供应用的基本信息。

在基于Stage模型开发的应用项目代码下，都存在一个app.json5及一个或多个module.json5这两种配置文件。

app.json5主要包含以下内容：

  • 应用的全局配置信息，包含应用的包名、开发厂商、版本号等基本信息。

  • 特定设备类型的配置信息。

module.json5主要包含以下内容：

  • Module的基本配置信息，例如Module名称、类型、描述、支持的设备类型等基本信息。

  • 应用组件信息，包含UIAbility组件和ExtensionAbility组件的描述信息。

  • 应用运行过程中所需的权限信息。

module.json5配置文件

module.json5配置文件-应用配置文件（Stage模型）-开发基础知识-入门-HarmonyOS应用开发

app.json5配置文件

app.json5配置文件-应用配置文件（Stage模型）-开发基础知识-入门-HarmonyOS应用开发

5、UIAbility生命周期

概述

当用户打开、切换和返回到对应应用时，应用中的UIAbility实例会在其生命周期的不同状态之间转换。UIAbility类提供了一系列回调，通过这些回调可以知道当前UIAbility实例的某个状态发生改变，会经过UIAbility实例的创建和销毁，或者UIAbility实例发生了前后台的状态切换。

UIAbility的生命周期包括Create、Foreground、Background、Destroy四个状态，如下图所示。

 

生命周期状态说明
生命周期触发时间操作
Create状态UIAbility实例创建完成时可以在该回调中进行应用初始化操作，例如变量定义资源加载等，用于后续的UI界面展示
Foreground状态UIAbility切换至前台时，UI界面可见之前申请系统需要的资源
Background状态UIAbility切换至后台时，UI界面完全不可见之后释放UI界面不可见时无用的资源。执行状态保存等较为耗时的操作
Destroy状态UIAbility实例销毁时进行系统资源的释放、数据的保存等操作
Create状态

Create状态为在应用加载过程中，UIAbility实例创建完成时触发，系统会调用onCreate()回调。可以在该回调中进行应用初始化操作，例如变量定义资源加载等，用于后续的UI界面展示。

WindowStageCreate和WindowStageDestroy状态

UIAbility的状态发生变化，也会影响WindowStage的相关变化：

UIAbility实例创建完成之后，在进入Foreground之前，系统会创建一个WindowStage。WindowStage创建完成后会进入onWindowStageCreate()回调，可以在该回调中设置UI界面加载、设置WindowStage的事件订阅。

WindowStageCreate和WindowStageDestroy状态图：

Foreground和Background状态

Foreground和Background状态分别在UIAbility实例切换至前台和切换至后台时触发，对应于onForeground()回调和onBackground()回调。

onForeground()回调，在UIAbility的UI界面可见之前，如UIAbility切换至前台时触发。可以在onForeground()回调中申请系统需要的资源，或者重新申请在onBackground()中释放的资源。

onBackground()回调，在UIAbility的UI界面完全不可见之后，如UIAbility切换至后台时候触发。可以在onBackground()回调中释放UI界面不可见时无用的资源，或者在此回调中执行较为耗时的操作，例如状态保存等。

例如应用在使用过程中需要使用用户定位时，假设应用已获得用户的定位权限授权。在UI界面显示之前，可以在onForeground()回调中开启定位功能，从而获取到当前的位置信息。

当应用切换到后台状态，可以在onBackground()回调中停止定位功能，以节省系统的资源消耗。

Destroy状态

Destroy状态在UIAbility实例销毁时触发。可以在onDestroy()回调中进行系统资源的释放、数据的保存等操作。

例如调用terminateSelf()方法停止当前UIAbility实例，从而完成UIAbility实例的销毁；或者用户使用最近任务列表关闭该UIAbility实例，完成UIAbility的销毁。

查看生命周期

Entry模块中的src/main/ets/enteryabiliity/EntryAbility.ts：

  1. import UIAbility from '@ohos.app.ability.UIAbility';
  2. import hilog from '@ohos.hilog';
  3. import window from '@ohos.window';
  4.  
  5. export default class EntryAbility extends UIAbility {
  6.   onCreate(want, launchParam) {
  7.     hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  8.   }
  9.  
  10.   onDestroy() {
  11.     hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
  12.   }
  13.  
  14.   onWindowStageCreate(windowStage: window.WindowStage) {
  15.     // Main window is created, set main page for this ability
  16.     hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
  17.  
  18.     windowStage.loadContent('pages/Index', (err, data) => {
  19.       if (err.code) {
  20.         hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
  21.         return;
  22.       }
  23.       hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
  24.     });
  25.   }
  26.  
  27.   onWindowStageDestroy() {
  28.     // Main window is destroyed, release UI related resources
  29.     hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
  30.   }
  31.  
  32.   onForeground() {
  33.     // Ability has brought to foreground
  34.     hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
  35.   }
  36.  
  37.   onBackground() {
  38.     // Ability has back to background
  39.     hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
  40.   }
  41. }
补充知识：hilog日志打印

导入模块：

import hilog from '@ohos.hilog';

常用方法:

hilog.debug/info/warn/error

debug(domain: number, tag: string, format: string, ...args: any[]) : void

参数解释：

参数描述
domain日志对应的领域标识，范围是0x0~0xFFFF。
tag指定日志标识，可以为任意字符串
format格式字符串，用于日志的格式化输出
args与格式字符串format对应的可变长度参数列表

6、组件生命周期

页面以及自定义组件

自定义组件：使用@Component装饰的UI单元

页面：由@Entry装饰的自定义组件。一个页面有且只有一个@Entry，可以由一个或多个自定义组件组成。只有一个被@Entry装饰的组件才可以调用页面的生命周期

生命周期

生命周期接口触发时间生效的装饰器其他
onPageShow页面每次显示就触发一次，包括路由过程、应用进入前台等场景@Entry
onPageHide页面每次隐藏时就触发一次，包括路由过程、应用进入后台等场景@Entry
onBackPress当用户点击返回按钮时触发@Entry
aboutToAppear组件即将出现时回调该函数。在创建自定义组件新实例后。执行build()之前@Component
aboutToDisappear自定义组件销毁之前@Component不允许在该函数中改变状态变量

简单实例
  1. mport { Header } from '../Components/CommonCompents';
  2. @Entry
  3. @Component
  4. struct LifePage {
  5.   @State message: string = 'Life'
  6.   @State Flag:boolean = false
  7.   aboutToAppear(){
  8.     console.log(this.message+"aboutToAppear");
  9.   }
  10.   aboutToDisappear(){
  11.     console.log(this.message+"aboutToDisappear");
  12.   }
  13.   onPageShow(){
  14.     console.log(this.message+"onPageShow");
  15.   }
  16.   onBackPress(){
  17.     console.log(this.message+"onBackPress");
  18.   }
  19.   onPageHide(){
  20.     console.log(this.message+"onPageHide");
  21.   }
  22.   build() {
  23.     Row() {
  24.       Column() {
  25.         Header({title:"life"})
  26.  
  27.         Button("显示子组件")
  28.           .onClick(()=>this.Flag = !this.Flag)
  29.       }
  30.       .width('100%')
  31.     }
  32.     .height('100%')
  33.   }
  34. }

7、UIAbility组件启动模式

UIAbility的启动模式是指UIAbility实例在启动时的不同呈现状态。针对不同的业务场景，系统提供了四种启动模式：

  • sigletion启动模式

  • standard启动模式/multion启动模式

  • specificed启动模式

设置启动模式方式

在module.json5配置文件中的"launchType"字段配置即可。

  1. {
  2.   "module": {
  3.     // ...
  4.     "abilities": [
  5.       {
  6.         "launchType": "singleton",
  7.         // ...
  8.       }
  9.     ]
  10.   }
  11. }
sigletion

singleton启动模式为单实例模式，也是默认情况下的启动模式。

每次调用startAbility()方法时，如果应用进程中该类型的UIAbility实例已经存在，则复用系统中的UIAbility实例。系统中只存在唯一一个该UIAbility实例，即在最近任务列表中只存在一个该类型的UIAbility实例。

演示效果：

multiton/standard

standard启动模式：每次启动UIAbility都会创建一个新的实例，在任务列表中可能存在一个或多个相同的UIAbility

multition模式一样。区别点是：multiton模式在创建新实例时，旧的实例会被移出.

specified

每个UIAbility实例可以设置Key标识，启动UIAbility时，需要指定key，存在key相同实例直接被拉起（前台显示）,不存在则创建新实例

配置specified方法

这节不是很懂，视频地址

26-Stage模型-UIAbility的启动模式_哔哩哔哩_bilibili

十、网络连接

连接方式

HarmonyOS提供了三种连接方式：

  • Http连接方式

  • WebSocket连接方式

  • socket连接

Http连接方式

示例

  1. // 引入包名
  2. import http from '@ohos.net.http';
  3.  
  4. // 每一个httpRequest对应一个HTTP请求任务，不可复用
  5. let httpRequest = http.createHttp();
  6. // 用于订阅HTTP响应头，此接口会比request请求先返回。可以根据业务需要订阅此消息
  7. // 从API 8开始，使用on('headersReceive', Callback)替代on('headerReceive', AsyncCallback)。 8+
  8. httpRequest.on('headersReceive', (header) => {
  9.     console.info('header: ' + JSON.stringify(header));
  10. });
  11. httpRequest.request(
  12.     // 填写HTTP请求的URL地址，可以带参数也可以不带参数。URL地址需要开发者自定义。请求的参数可以在extraData中指定
  13.     "EXAMPLE_URL",
  14.     {
  15.         method: http.RequestMethod.POST, // 可选，默认为http.RequestMethod.GET
  16.         // 开发者根据自身业务需要添加header字段
  17.         header: {
  18.             'Content-Type': 'application/json'
  19.         },
  20.         // 当使用POST请求时此字段用于传递内容
  21.         extraData: {
  22.             "data": "data to send",
  23.         },
  24.         expectDataType: http.HttpDataType.STRING, // 可选，指定返回数据的类型
  25.         usingCache: true, // 可选，默认为true
  26.         priority: 1, // 可选，默认为1
  27.         connectTimeout: 60000, // 可选，默认为60000ms
  28.         readTimeout: 60000, // 可选，默认为60000ms
  29.         usingProtocol: http.HttpProtocol.HTTP1_1, // 可选，协议类型默认值由系统自动指定
  30.     }, (err, data) => {
  31.         if (!err) {
  32.             // data.result为HTTP响应内容，可根据业务需要进行解析
  33.             console.info('Result:' + JSON.stringify(data.result));
  34.             console.info('code:' + JSON.stringify(data.responseCode));
  35.             // data.header为HTTP响应头，可根据业务需要进行解析
  36.             console.info('header:' + JSON.stringify(data.header));
  37.             console.info('cookies:' + JSON.stringify(data.cookies)); // 8+
  38.             // 取消订阅HTTP响应头事件
  39.             httpRequest.off('headersReceive');
  40.             // 当该请求使用完毕时，调用destroy方法主动销毁
  41.             httpRequest.destroy();
  42.         } else {
  43.             console.info('error:' + JSON.stringify(err));
  44.             // 取消订阅HTTP响应头事件
  45.             httpRequest.off('headersReceive');
  46.             // 当该请求使用完毕时，调用destroy方法主动销毁。
  47.             httpRequest.destroy();
  48.         }
  49.     }
  50. );

 也可以使用Promise方式作为异步方法：

  1. let promise = httpRequest.request(
  2.     'http://xxxx', 
  3.     {method: xxxxx}
  4. )
  5.  
  6. promise.then((resp: http.HttpResponse) => {
  7.     if(resp.responseCode === 200) {
  8.         // 成功请求后的处理
  9.         console.log(resp.result)
  10.     }
  11. }).catch((err: Error) => {
  12.     // 请求失败时的处理
  13. })
示例

异步调用返回：

  1. // 异步返回一个Promise对象
  2. getShopList(): Promise<ShopInfo[]> {
  3.     return new Promise((resolve, reject) => {
  4.     	let httpRequest = http.createHttp()
  5.     
  6. 		httpRequest.request(
  7.             'http://xxx.xxx.xxx:8080/myDemoProject/userlist?pageNo=1&pageSize=2',
  8.             {
  9.                 method: http.RequestMethod.GET
  10.             }
  11.         )
  12.         .then(resp => {
  13.             if(resp.responseCode === 200) {
  14.                 console.log('查询成功')
  15.                 // 将成功的结果封装到Promise的resolve中
  16.                 resolve(JSON.parse(resp.result.toString()))
  17.             } else {
  18.                 console.log('查询失败')
  19.                 // 将失败的结果封装到Promise的reject中
  20.                 reject('查询用户失败')
  21.             }
  22.         })
  23.         .catch(error => {
  24.             console.log('查询失败，错误信息：', JSON.stringify(error))
  25.             reject('查询用户失败')
  26.         })
  27.     })
  28. }

通过该方法加载数据：

  1. ShopModel.getShopList()  // 得到的是一个Promise<ShopInfo[]>对象
  2. .then(shops => {
  3.     shops.forEach(shop => console.log(shop))
  4. })

第三方库axios

ohpm

OHPM CLI 作为鸿蒙生态三方库的包管理工具，支持OpenHarmony共享包的发布、安装和依赖管理。

旧版本的HarmonyOS使用npm作为包管理工具，后来改为ohpm。ohpm的配置、使用方式与npm类似。

安装ohpm

下载ohpm工具包：HUAWEI DevEco Studio和SDK下载和升级 | HarmonyOS开发者

解压文件，进入ohpm/bin目录，打开命令行工具，输入以下命令初始化ohpm

window

init.bat

linux/mac

./init.bat

配置环境变量

window

在此电脑 > 属性 > 高级系统设置 > 高级 > 环境变量中，将ohpm命令行工具的bin目录配置到系统或者用户的PATH变量中。

安装完成输入，出版本号即为成功

ohpm -v
安装axios

在harmony上找到第三方库OpenHarmony三方库中心仓

在项目目录下安装

ohpm install @ohos/axios

配置权限

示例

  1. axios.get(
  2.     'http://xxx.xxx.xxx.xxx',
  3.     {
  4.         params: {'param1': 'value1'}, // Get请求时的请求参数
  5.         data: {'param1': 'value1'}  // Post请求时的请求参数
  6.     }
  7. ).then(resp => {
  8.     if(resp.status === 200) {
  9.         // 成功请求后的处理
  10.         console.log(JSON.stringify(resp.data))
  11.     }
  12. }).catch(error => {
  13.     // 请求失败时的处理
  14.     console.log('查询失败', JSON.stringify(error))
  15. })

 案例

  1. //这里来生明接口
  2. // 引入包名
  3. import  ShopInfo from '../viewmodel/ShopInfo'
  4. //引入axios
  5. import axios from '@ohos/axios'
  6.   class ShopModel {
  7.     pageNo: number = 1
  8.     getShopList(): Promise<ShopInfo[]> {
  9.       // 每一个httpRequest对应一个HTTP请求任务，不可复用
  10.       return new Promise((resolve, reject) => {
  11.  
  12.        axios.get(
  13.           `http://localhost:3000/shops`,
  14.           {
  15.             //params 用于拼接地址参数 data 用来携带请求参数 一般在post使用
  16.           params:{
  17.             pageNo:this.pageNo,pageSize:3
  18.           }
  19.           }
  20.         ).then(res=>{
  21.           if(res.status===200){
  22.             console.log(JSON.stringify(res.data))
  23.             resolve(res.data)
  24.           }else {
  25.             reject("查询失败")
  26.           }
  27.         })
  28.           .catch(err=>{
  29.             console.log("获取失败"+err)
  30.             reject("查询失败")
  31.           })
  32.       }
  33.       )
  34.     }
  35.   }
  36. //需要实例化才能调用里面的方法
  37. const shopModel = new ShopModel()
  38. export default shopModel

十一、数据持久化

测试数据持久化需要使用真机调试

1、用户首选项

场景介绍：

用户首选项为应用提供Key-Value键值型的数据处理能力，支持应用持久化轻量级数据，并对其修改和查询。当用户希望有一个全局唯一存储的地方，可以采用用户首选项来进行存储。Preferences会将该数据缓存在内存中，当用户读取的时候，能够快速从内存中获取数据。Preferences会随着存放的数据量越多而导致应用占用的内存越大，因此，Preferences不适合存放过多的数据，适用的场景一般为应用保存用户的个性化设置（字体大小，是否开启夜间模式）等。

运作机制

约束限制

  • Key键为string类型，要求非空且长度不超过80个字节。

  • 如果Value值为string类型，可以为空，不为空时长度不超过8192个字节。

  • 内存会随着存储数据量的增大而增大，所以存储的数据量应该是轻量级的，建议存储的数据不超过一万条，否则会在内存方面产生较大的开销。

接口说明（来自官网）

以下是用户首选项持久化功能的相关接口，大部分为异步接口。异步接口均有callback和Promise两种返回形式，下表均以callback形式为例，更多接口及使用方式请见用户首选项。

接口名称描述
getPreferences(context: Context, name: string, callback: AsyncCallback<Preferences>): void获取Preferences实例。
put(key: string, value: ValueType, callback: AsyncCallback<void>): void将数据写入Preferences实例，可通过flush将Preferences实例持久化。
has(key: string, callback: AsyncCallback<boolean>): void检查Preferences实例是否包含名为给定Key的存储键值对。给定的Key值不能为空。
get(key: string, defValue: ValueType, callback: AsyncCallback<ValueType>): void获取键对应的值，如果值为null或者非默认值类型，返回默认数据defValue。
delete(key: string, callback: AsyncCallback<void>): void从Preferences实例中删除名为给定Key的存储键值对。
flush(callback: AsyncCallback<void>): void将当前Preferences实例的数据异步存储到用户首选项持久化文件中。
on(type: 'change', callback: Callback<{ key : string }>): void订阅数据变更，订阅的Key的值发生变更后，在执行flush方法后，触发callback回调。
off(type: 'change', callback?: Callback<{ key : string }>): void取消订阅数据变更。
deletePreferences(context: Context, name: string, callback: AsyncCallback<void>): void从内存中移除指定的Preferences实例。若Preferences实例有对应的持久化文件，则同时删除其持久化文件。
开发步骤

简单案例

在src/main/ets创建文件夹Common/utils 下创建保存用户首选项文件（可以直接复制）

  1. import preferences from '@ohos.data.preferences';
  2.  
  3. class PreferenceUtils{
  4.   //设置一个Map格式的变量方便存储
  5.   preMap:Map<string,preferences.Preferences> =  new Map()
  6.     //加载Preference
  7.   //写法一： 因为getPreferences返回的是一个Promise对象 所以也可以使用async异步标识改造
  8.   // loadPreference(content,name:string){
  9.   //   preferences.getPreferences(content,name)
  10.   //     .then(pref=>{
  11.   //       //保存一个pref实例
  12.   //       this.preMap.set(name,pref)
  13.   //       console.log('testTag',`加载preference[${name}]成功`)
  14.   //     })
  15.   //     .catch(reason=>{
  16.   //       console.log('testTag',`加载preference[${name}]失败`,JSON.stringify(reason))
  17.   //     })
  18.   // }
  19.   //写法二：下面一样
  20.   //加载 初始化
  21.   async  loadPreference(content,name:string){
  22.     try {
  23.       let pref = await preferences.getPreferences(content, name)
  24.       this.preMap.set(name, pref);
  25.       console.log('testTag', `加载preference[${name}]成功`)
  26.     } catch (e) {
  27.       console.log('testTag',`加载preference[${name}]失败`,JSON.stringify(e))
  28.     }
  29.   }
  30.   //写入数据
  31.   async  putPreferenceValue(name:string,key:string,value:preferences.ValueType){
  32.     if(!this.preMap.get(name)){
  33.       console.log('testTag',`加载preference[${name}]未初始化`)
  34.       return
  35.     }
  36.     try {
  37.       let pref = this.preMap.get(name)
  38.       //写入数据
  39.       await pref.put(key, value)
  40.       //刷新磁盘
  41.       await pref.flush()
  42.       console.log('testTag', `保存preference[${name}]成功`)
  43.     } catch (e) {
  44.       console.log('testTag',`保存preference[${name}]失败`,JSON.stringify(e))
  45.     }
  46.  
  47.   }
  48.  
  49.   //得到数据
  50.   //name：哪个prefMap里面的值 key：具体的key defaultValue：如果没有就加载这个 默认
  51.   async  getPreferenceValue(name:string,key:string,defaultValue:preferences.ValueType){
  52.     if(!this.preMap.get(name)){
  53.       console.log('testTag',`加载preference[${name}]未初始化`)
  54.       return
  55.     }
  56.     try {
  57.       let pref = this.preMap.get(name)
  58.       //读取数据
  59.       let value = await pref.get(key,defaultValue);
  60.       console.log('testTag', `读取preference[${name}]--[${value}]成功`)
  61.       return value
  62.     } catch (e) {
  63.       console.log('testTag',`读取preference[${name}]失败`,JSON.stringify(e))
  64.     }
  65.  
  66.   }
  67. }
  68. const preferenceUtils = new PreferenceUtils();
  69. export default preferenceUtils;

在应用刚启动就加载该首选项

在文件src/main/etc/entryability/EntryAbility.ts中找到生命周期函数onCreate加上

 //在入口Ability就加载 preference 有多个就加载多个 MyPreference这个要唯一
    preferenceUtils.loadPreference(this.context,"MyPreference")
    // preferenceUtils.loadPreference(this.context,"MyPreference1")

最后只要写入读出数据的地方使用相应的get/put方法即可

示例：

  1.   //使用preferenceUtils
  2.   //在build 渲染之间调用 该生命周期函数
  3.  async  aboutToAppear(){
  4.    this.fontSize =await preferenceUtils.getPreferenceValue('MyPreference','IndexFont',16) as number
  5.  }
  6.  
  7.  .onChange(val=>{
  8.  //修改字体时 需要首选项保存
  9.      this.fontSize = val
  10.      preferenceUtils.putPreferenceValue('MyPreference','IndexFont',val)
  11.  })

2、关系数据库

前言

由于上面的用户首选项只能保留基本数据类型的数据，保留不了类似对象、数组等复杂类型的数据。所以引入了关系数据库来保留数据

这个关系数据库和mysql的数据库类似

场景介绍

关系型数据库基于SQLite组件，适用于存储包含复杂关系数据的场景，比如一个班级的学生信息，需要包括姓名、学号、各科成绩等，又或者公司的雇员信息，需要包括姓名、工号、职位等，由于数据之间有较强的对应关系，复杂程度比键值型数据更高，此时需要使用关系型数据库来持久化保存数据。

基本概念

  • 谓词：数据库中用来代表数据实体的性质、特征或者数据实体之间关系的词项，主要用来定义数据库的操作条件。

  • 结果集：指用户查询之后的结果集合，可以对数据进行访问。结果集提供了灵活的数据访问方式，可以更方便地拿到用户想要的数据。

运作机制

关系型数据库对应用提供通用的操作接口，底层使用SQLite作为持久化存储引擎，支持SQLite具有的数据库特性，包括但不限于事务、索引、视图、触发器、外键、参数化查询和预编译SQL语句。

图1 关系型数据库运作机制

约束限制

  • 系统默认日志方式是WAL（Write Ahead Log）模式，系统默认落盘方式是FULL模式。

  • 数据库中连接池的最大数量是4个，用以管理用户的读操作。

  • 为保证数据的准确性，数据库同一时间只能支持一个写操作。

  • 当应用被卸载完成后，设备上的相关数据库文件及临时文件会被自动清除。

接口说明

以下是关系型数据库持久化功能的相关接口，大部分为异步接口。异步接口均有callback和Promise两种返回形式，下表均以callback形式为例，更多接口及使用方式请见关系型数据库。

接口名称描述
getRdbStore(context: Context, config: StoreConfig, callback: AsyncCallback<RdbStore>): void获得一个相关的RdbStore，操作关系型数据库，用户可以根据自己的需求配置RdbStore的参数，然后通过RdbStore调用相关接口可以执行相关的数据操作。
executeSql(sql: string, bindArgs: Array<ValueType>, callback: AsyncCallback<void>):void执行包含指定参数但不返回值的SQL语句。
insert(table: string, values: ValuesBucket, callback: AsyncCallback<number>):void向目标表中插入一行数据。
update(values: ValuesBucket, predicates: RdbPredicates, callback: AsyncCallback<number>):void根据RdbPredicates的指定实例对象更新数据库中的数据。
delete(predicates: RdbPredicates, callback: AsyncCallback<number>):void根据RdbPredicates的指定实例对象从数据库中删除数据。
query(predicates: RdbPredicates, columns: Array<string>, callback: AsyncCallback<ResultSet>):void根据指定条件查询数据库中的数据。
deleteRdbStore(context: Context, name: string, callback: AsyncCallback<void>): void删除数据库。

实现步骤
初始化数据库

导入import relationalStore from '@ohos.data.relationalStore';

使用relationalStore.getRdbStore()初始化数据库 有三个参数 【应用上下文，rdb配置，配置后的回调函数】

在上面的回调函数中使用rdbStore.executeSql(sql)执行sql语句 获取执行后的rdbStore

操作数据库

调用相应的API即可（具体参数意思看下面案例）

案例

说明：在使用关系数据库涉及到的文件基本使用.ets文件。因为ts文件不能导入.ets文件的数据（entryAbility也要改为.ets文件）。

配置关系数据库

在model文件夹下创建一个.ets文件 这里创建TaskModel.ets(也可以直接复制把相应数据改改就行)

  1. import relationalStore from '@ohos.data.relationalStore';
  2. import TaskInfo from '../viewmodel/TaskInfo';  //由于taskInfo文件是ets类型的 ts不能导入ets文件 所以该model也要使用ets文件
  3.  
  4. class TaskModel {
  5.  
  6.   private rdbStore: relationalStore.RdbStore
  7.   private tableName: string = 'TASK'
  8.  
  9.   /**
  10.    * 初始化任务表
  11.    */
  12.   initTaskDB(context){
  13.     //初始化rdb配置
  14.     const config = {
  15.       name:"MyApplication.db", //数据库名字 可以自己取别重复
  16.       securityLevel:relationalStore.SecurityLevel.S1 //安全等级 总共有四级  这里用一级就够了
  17.     }
  18.     //初始化sql语句
  19.     const sql = `CREATE TABLE IF NOT EXISTS TASK(
  20.                  ID INTEGER PRIMARY KEY AUTOINCREMENT,
  21.                  NAME TEXT NOT NULL,
  22.                  FINISHED BIT
  23.                  )`
  24.     //获取rdb
  25.     relationalStore.getRdbStore(context,config,(err,rdbStore)=>{
  26.       if(err){
  27.         console.log("testTag","获取rdbStore失败！")
  28.         return
  29.       }
  30.       //执行sql语句
  31.       rdbStore.executeSql(sql)
  32.       //保存
  33.       this.rdbStore =rdbStore
  34.     })
  35.  
  36.   }
  37.  
  38.   /**
  39.    * 查询任务列表
  40.    */
  41.   async getTaskList(){
  42.  
  43.     //查询条件
  44.     //创建一个查询条件 predicates可以指定多种条件
  45.     let predicates =  new relationalStore.RdbPredicates(this.tableName);
  46.     //查询 返回的是一个 promise
  47.     let result = await this.rdbStore.query(predicates,['ID','NAME','FINISHED']) //第一个参数是指定表 第二个是查询出来的列
  48.     //遍历返回值
  49.     //定义一个接受返回每一列的数组
  50.     let tasks:TaskInfo[] = [];
  51.     //遍历返回值 判断是不是最后一行
  52.     while(!result.isAtLastRow){
  53.       //指针指向下一行
  54.       result.goToLastRow()
  55.       //获取每一行的数据
  56.       let id = result.getLong(result.getColumnIndex('ID')) //id是int 可以使用long来获取 getColumnIndex 可以理解为每列的表头
  57.       let name = result.getString(result.getColumnIndex("NAME"));
  58.       let  finished = result.getLong(result.getColumnIndex("FINISHED")) //因为在数据库中保存boolean类型的是1/0 所以获取的只能是long
  59.       tasks.push({id,name,finished:!!finished}) //转化为boolean型
  60.     }
  61.     console.log("testTag查询数据成功",JSON.stringify(tasks))
  62.     return tasks;
  63.   }
  64.  
  65.   /**
  66.    * 添加一个新的任务
  67.    * @param name 任务名称
  68.    * @returns 任务id
  69.    */
  70.   addTask(name: string): Promise<number>{
  71.     return this.rdbStore.insert(this.tableName, {name, finished: false})
  72.   }
  73.  
  74.   /**
  75.    * 根据id更新任务状态
  76.    * @param id 任务id
  77.    * @param finished 任务是否完成
  78.    */
  79.   updateTaskStatus(id: number, finished: boolean) {
  80.     //封装要更新的数据
  81.     let data = {finished}
  82.     //查询条件
  83.     let predicates =  new relationalStore.RdbPredicates(this.tableName)
  84.     predicates.equalTo('ID',id) // 创建一个ID=id的条件 相当于where ID = #{id}
  85.     //执行条件操作
  86.     return this.rdbStore.update(data,predicates) // 第一个是修改的数据 第二个是修改的条件 返回单额是一个promise对象
  87.   }
  88.  
  89.   /**
  90.    * 根据id删除任务
  91.    * @param id 任务id
  92.    */
  93.   deleteTaskById(id: number){
  94.     //查询条件
  95.     let predicates =  new relationalStore.RdbPredicates(this.tableName)
  96.     predicates.equalTo('ID',id) // 创建一个ID=id的条件 相当于where ID = #{id}
  97.     //执行条件操作
  98.     return this.rdbStore.delete(predicates) // 第一个删除的条件 返回单额是一个promise对象
  99.   }
  100. }
  101.  
  102. let taskModel = new TaskModel();
  103.  
  104. export default taskModel as TaskModel;

在入口文件中初始化关系数据库

entryability/EntryAbility.ets

  1.   onCreate(want, launchParam) {
  2.     hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate'); //日志
  3.     //导入持久化数据库需要改成ets后缀名
  4.     //初始化TaskModel
  5.     TaskModel.initTaskDB(this.context)
  6.   }

部分使用

因为我们上面使用的是返回Promise，所以在使用的时候也要.then()获得

  1. //查
  2.  aboutToAppear(){
  3.     // 查询任务列表
  4.     console.log('testTag', '初始化组件，查询任务列表')
  5.     TaskModel.getTaskList().then(tasks=>{
  6.      //获取数据
  7.       this.tasks = tasks;
  8.       //刷新
  9.       this.handleTaskChange();
  10.     })
  11.   }
  12.   
  13.   //增
  14.   // 1.新增任务
  15.     TaskModel.addTask(name).then(id=>{
  16.       this.tasks.push({id,name,finished:false})
  17.       //刷新
  18.       this.handleTaskChange();
  19.       this.dialogController.close();//关闭对话框
  20.       console.log("testTag","新增任务成功")
  21.     })
  22.  // 删
  23.     // 删除任务
  24.   TaskModel.deleteTaskById(id).then(()=>{
  25.     this.tasks.splice(index,1)
  26.     console.log("testTag","删除任务成功")
  27.     }).catch(err=>{
  28.     console.log("testTag","删除任务失败")
  29.   })
  30.       
  31.    //改
  32.    //更新任务状态
  33.    TaskModel.updateTaskStatus(this.item.id,val).then(()=>{
  34.       this.item.finished = val
  35.       //更新已完成的数量
  36.       this.onTaskChange(this.item)
  37.       console.log("testTag","更新成功")
  38.       }).catch(err=>{
  39.       console.log("testTag","更新失败")
  40.    })

十二、通知

通知简介

应用可以通过通知接口发送通知消息，终端用户可以通过通知栏查看通知内容，也可以点击通知来打开应用。

通知常见的使用场景：

  • 显示接收到的短消息、即时消息等。

  • 显示应用的推送消息，如广告、版本更新等。

  • 显示当前正在进行的事件，如下载等。

HarmonyOS通过ANS（Advanced Notification Service，通知系统服务）对通知类型的消息进行管理，支持多种通知类型，如基础类型通知、进度条类型通知。

通知业务流程

通知业务流程由通知子系统、通知发送端、通知订阅端组成。一条通知从通知发送端产生，通过IPC通信发送到通知子系统，再由通知子系统分发给通知订阅端。

  • 通知发送端：可以是三方应用或系统应用。开发者重点关注。

  • 通知订阅端：只能为系统应用，比如通知中心。通知中心默认会订阅手机上所有应用对当前用户的通知。开发者无需关注。

img

构建一个基础通知

开发步骤

  • 导入接口

  • 发布通知

  • 取消通知

主要是在编写发布基础通知功能时，能了解各个代码的含义即可

基础类型通知主要应用于发送短信息、提示信息、广告推送等，支持普通文本类型、长文本类型、多行文本类型和图片类型。

表1 基础类型通知中的内容分类

类型描述
NOTIFICATION_CONTENT_BASIC_TEXT普通文本类型。
NOTIFICATION_CONTENT_LONG_TEXT长文本类型。
NOTIFICATION_CONTENT_MULTILINE多行文本类型。
NOTIFICATION_CONTENT_PICTURE图片类型。

通知发布接口如下表所示，不同发布类型通知由NotificationRequest的字段携带不同的信息。

接口名描述
publish(request: NotificationRequest, callback: AsyncCallback<void>): void发布通知。
cancel(id: number, label: string, callback: AsyncCallback<void>): void取消指定的通知。
cancelAll(callback: AsyncCallback<void>): void;取消所有该应用发布的通知。

具体代码：

导入模块

import NotificationManager from '@ohos.notificationManager';

构造NotificationRequest对象，并发布通知

  1. let notificationRequest: notificationManager.NotificationRequest  = {
  2.   id: 1,
  3.   content: {
  4.     contentType: NotificationManager.ContentType.NOTIFICATION_CONTENT_BASIC_TEXT, // 普通文本类型通知 必填（上面可以修改）
  5.     normal: {
  6.       title: 'test_title', //标题
  7.       text: 'test_text', //内容
  8.       additionalText: 'test_additionalText',
  9.     }
  10.   }
  11. }
  12.  
  13. NotificationManager.publish(notificationRequest, (err) => {
  14.     if (err) {
  15.         console.error(`[ANS] failed to publish, error[${err}]`);
  16.         return;
  17.     }
  18.     console.info(`[ANS] publish success`);
  19. });

普通文本类型

let notificationRequest: notificationManager.NotificationRequest  = {
  id: 1,
  content: {
    contentType: NotificationManager.ContentType.NOTIFICATION_CONTENT_BASIC_TEXT, // 普通文本类型通知 必填（上面可以修改）
    normal: {
      title: 'test_title', //标题
      text: 'test_text', //内容
      additionalText: 'test_additionalText', //通知附加内容
    }
  }
}

长文本内容：长文本类型通知继承了普通文本类型的字段，同时新增了长文本内容、内容概要和通知展开时的标题。通知默认显示与普通文本相同，展开后，标题显示为展开后标题内容，内容为长文本内容。

let notificationRequest: notificationManager.NotificationRequest  = {
  id: 1,
  content: {
    contentType: NotificationManager.ContentType.NOTIFICATION_CONTENT_LONG_TEXT, // 长文本类型通知
    longText: {
      title: 'test_title',
      text: 'test_text',
      additionalText: 'test_additionalText',
      longText: 'test_longText',
      briefText: 'test_briefText',
      expandedTitle: 'test_expandedTitle',
    }
  }
}
​
// 发布通知
NotificationManager.publish(notificationRequest, (err) => {
    if (err) {
        console.error(`[ANS] failed to publish, error[${err}]`);
        return;
    }
    console.info(`[ANS] publish success`);
});

多行文本内容：多行文本类型通知继承了普通文本类型的字段，同时新增了多行文本内容、内容概要和通知展开时的标题。通知默认显示与普通文本相同，展开后，标题显示为展开后标题内容，多行文本内容多行显示。

let notificationRequest: notificationManager.NotificationRequest  = {
  id: 1,
  content: {
    contentType: NotificationManager.ContentType.NOTIFICATION_CONTENT_MULTILINE, // 多行文本类型通知
    multiLine: {
      title: 'test_title',
      text: 'test_text',
      briefText: 'test_briefText',
      longTitle: 'test_longTitle',
      lines: ['line_01', 'line_02', 'line_03', 'line_04'],
    }
  }
}
​
// 发布通知
NotificationManager.publish(notificationRequest, (err) => {
  if (err) {
    console.error(`[ANS] failed to publish, error[${err}]`);
    return;
  }
  console.info(`[ANS] publish success`);
});

图片类型：图片类型通知继承了普通文本类型的字段，同时新增了图片内容、内容概要和通知展开时的标题，图片内容为PixelMap型对象，其大小不能超过2M。

let imagePixelMap: PixelMap = undefined; // 需要获取图片PixelMap信息
let notificationRequest: notificationManager.NotificationRequest = {
  id: 1,
  content: {
    contentType: notificationManager.ContentType.NOTIFICATION_CONTENT_PICTURE,
    picture: {
      title: 'test_title',
      text: 'test_text',
      additionalText: 'test_additionalText',
      briefText: 'test_briefText',
      expandedTitle: 'test_expandedTitle',
      picture: imagePixelMap
    }
  }
};
​
// 发布通知
notificationManager.publish(notificationRequest, (err) => {
  if (err) {
    console.error(`Failed to publish notification. Code is ${err.code}, message is ${err.message}`);
    return;
  }
  console.info('Succeeded in publishing notification.');
});
​

注：

SlotType

系统能力：以下各项对应的系统能力均为SystemCapability.Notification.Notification

名称值说明
UNKNOWN_TYPE0未知类型。
SOCIAL_COMMUNICATION1社交类型。
SERVICE_INFORMATION2服务类型。
CONTENT_INFORMATION3内容类型。
OTHER_TYPES0xFFFF其他类型。

进度条通知

进度条通知也是常见的通知类型，主要应用于文件下载、事务处理进度显示。HarmonyOS提供了进度条模板，发布通知应用设置好进度条模板的属性值，如模板名、模板数据，通过通知子系统发送到通知栏显示。

开发步骤

  • 导入模块

  • 查询系统是否可以使用进度条模板，查询结果为支持downloadTemplate模板类通知。

  • 构建进度条模板对象，并发布通知

import notify from '@ohos.notificationManager' 

  1. async aboutToAppear(){
  2.     // 1.判断当前系统是否支持进度条模板
  3.     this.isSupport = await notify.isSupportTemplate('downloadTemplate')
  4.   }

 

  1.  
  2.  
  3.   publishDownloadNotification(){
  4.     // 1.判断当前系统是否支持进度条模板
  5.     if(!this.isSupport){
  6.       // 当前系统不支持进度条模板
  7.       return
  8.     }
  9.     // 2.准备进度条模板的参数
  10.     let template = {
  11.       name: 'downloadTemplate',
  12.       data: {
  13.         progressValue: this.progressValue,
  14.         progressMaxValue: this.progressMaxValue
  15.       }
  16.     }
  17.     let request: notify.NotificationRequest = {
  18.       id: this.notificationId,
  19.       template: template,
  20.       wantAgent: this.wantAgentInstance,
  21.       content: {
  22.         contentType: notify.ContentType.NOTIFICATION_CONTENT_BASIC_TEXT,
  23.         normal: {
  24.           title: this.filename + ':  ' + this.state,
  25.           text: '',
  26.           additionalText: this.progressValue + '%'
  27.         }
  28.       }
  29.     }
  30.     // 3.发送通知
  31.     notify.publish(request)
  32.       .then(() => console.log('test', '通知发送成功'))
  33.       .catch(reason => console.log('test', '通知发送失败！', JSON.stringify(reason)))
  34.   }

为通知添加一个行为意图

注：就是点击通知消息会跳转到页面

WantAgent提供了封装行为意图的能力，这里所说的行为意图主要是指拉起指定的应用组件及发布公共事件等能力。HarmonyOS支持以通知的形式，将WantAgent从发布方传递至接收方，从而在接收方触发WantAgent中指定的意图。例如，在通知消息的发布者发布通知时，通常期望用户可以通过通知栏点击拉起目标应用组件。为了达成这一目标，开发者可以将WantAgent封装至通知消息中，当系统接收到WantAgent后，在用户点击通知栏时触发WantAgent的意图，从而拉起目标应用组件。

开发步骤

  • 导入模块

  • 创建WantAgentInfo信息

  • 创建WantAgent。

  • 构造NotificationRequest对象。

  • 发布WantAgent通知。

  • 用户通过点击通知栏上的通知，即可触发WantAgent的动作。

简单实现

import wantAgent, { WantAgent } from '@ohos.app.ability.wantAgent'

  1.   //通知的行为意图 就是点击通知会跳转到哪里
  2.   wantAgentInstance: WantAgent
  3.   
  4.   async aboutToAppear(){
  5.     // 1.判断当前系统是否支持进度条模板
  6.     this.isSupport = await notify.isSupportTemplate('downloadTemplate')
  7.     // 2.创建拉取当前应用的行为意图
  8.     // 2.1.创建wantInfo信息
  9.     let wantInfo: wantAgent.WantAgentInfo = {
  10.       wants: [
  11.         {
  12.           bundleName: 'com.example.myapplication',
  13.           abilityName: 'EntryAbility',
  14.         }
  15.       ],
  16.       requestCode: 0,
  17.       operationType: wantAgent.OperationType.START_ABILITY,
  18.       wantAgentFlags: [wantAgent.WantAgentFlags.CONSTANT_FLAG]
  19.     }
  20.     // 2.2.创建wantAgent实例
  21.     this.wantAgentInstance = await wantAgent.getWantAgent(wantInfo)
  22.   }

 

  1. publishDownloadNotification(){
  2.     // 1.判断当前系统是否支持进度条模板
  3.     if(!this.isSupport){
  4.       // 当前系统不支持进度条模板
  5.       return
  6.     }
  7.     // 2.准备进度条模板的参数
  8.     let template = {
  9.       name: 'downloadTemplate',
  10.       data: {
  11.         progressValue: this.progressValue,
  12.         progressMaxValue: this.progressMaxValue
  13.       }
  14.     }
  15.     let request: notify.NotificationRequest = {
  16.       id: this.notificationId,
  17.       template: template,
  18.       wantAgent: this.wantAgentInstance, //这里指定一下 简单实现
  19.       content: {
  20.         contentType: notify.ContentType.NOTIFICATION_CONTENT_BASIC_TEXT,
  21.         normal: {
  22.           title: this.filename + ':  ' + this.state,
  23.           text: '',
  24.           additionalText: this.progressValue + '%'
  25.         }
  26.       }
  27.     }
  28.     // 3.发送通知
  29.     notify.publish(request)
  30.       .then(() => console.log('test', '通知发送成功'))
  31.       .catch(reason => console.log('test', '通知发送失败！', JSON.stringify(reason)))
  32.   }

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

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号