一.基础语法

找到尘封多年的古老笔记，分享娱乐一下。

1. 基本组件使用

当你开始学习鸿蒙开发时，第一步就是了解如何使用组件。组件是鸿蒙应用程序的基本构建块，它们用于构建应用程序的用户界面和逻辑。在鸿蒙应用程序开发中，你可以使用内置的组件来创建各种界面元素，例如文本、按钮、图片等。同时，你也可以自定义组件来满足特定的需求。

1.1 文本组件Text基本使用


//注解用于标识应用程序中的入口
@Entry
//注解用于标识应用程序中的组件
@Component
struct Index {
	//@State是一个装饰器（Decorator），用于定义一个组件的状态
  @State message: string = 'Hello World';
//定义一个变量 为整数int 类型 赋值为10
  age: number = 10;

  //系统自动在页面构建时候调用
  build() {
		//跟布局
    //创建一个row对象 横向布局容器
    Row() {
      //纵向布局容器
      Column() {
        //创建一个text 文本 链式结构
        Text(this.message)
          //字体 大小
          .fontSize(100)
          //文本 类型
          .fontWeight(FontWeight.Bold)
      }
      //---父布局

      //设置宽度Column给布局
      .width('100%')
    }
    //设置高度Row给布局
    .height('100%')
  }
}

//纵向
Column(){// 创建一个文本组件，文本内容为"目标1"
	Text("目标1")
	// 设置文本颜色为黑色
	.fontColor(Color.Black)
	// 设置文本字体大小为20
	.fontSize(20)
	// 设置文本字体粗细为粗体
	.fontWeight(FontWeight.Bold)
	// 设置文本字体为"微软雅黑"
	.fontFamily("微软雅黑")
	// 设置文本字体样式为斜体
	.fontStyle(FontStyle.Italic);
}

1.2 按钮组件Button基本使用


// 创建一个按钮，并设置宽度为100，高度为20，背景颜色为蓝色
Button().width(100).height(20).backgroundColor(Color.Blue)

1.3 图片组件Image基本使用

// 显示一张网络图片，并设置宽度为50%，高度为100
Image("https://img1.baidu.com/it/u=448626017,44915786&fm=253&fmt=auto&app=138&f=JPEG?w=728&h=500").width("50%").height(100)

// 显示一个应用程序图标，并设置宽度为50%，高度为10%
Image($r("app.media.app_icon")).width("50%").height("10%")

2.布局容器组件基本使用

在鸿蒙应用程序开发中，布局容器组件是非常重要的一部分，它们用于组织和管理应用程序中的各种组件。布局容器组件可以帮助你更好地控制应用程序的布局和外观，使其更加美观和易于使用。

2.1 Column( )使用

  • 第一个Column()组件：设置子元素垂直方向间距为5。
  • Text('space').width('90%')：在第一个Column()组件中添加了一个Text组件，用于显示文字“space”，并设置其宽度为90%。
  • 第二个Column()组件：嵌套在第一个Column()组件中，用于实现两个子元素的垂直排列，并设置子元素之间的垂直间距为5。
  • Column().width('100%').height(30).backgroundColor(0xAFEEEE)：在第二个Column()组件中添加了一个Column组件，用于显示一个高度为30的矩形，并设置其背景颜色为0xAFEEEE。
  • Column().width('100%').height(30).backgroundColor(0x00FFFF)：在第二个Column()组件中再次添加了一个Column组件，用于显示另一个高度为30的矩形，并设置其背景颜色为0x00FFFF。
  • .width('90%').height(100).border({ width: 1 })：设置第二个Column()组件的宽度为90%，高度为100，边框宽度为1。
Column({ space: 5 }) {
  // 设置子元素垂直方向间距为5
  Text('space').width('90%')
  Column({ space: 5 }) {
    // 子元素之间的间距也为5
    Column().width('100%').height(30).backgroundColor(0xAFEEEE)
    Column().width('100%').height(30).backgroundColor(0x00FFFF)
  }.width('90%').height(100).border({ width: 1 })
 // 设置容器的宽度为90%，高度为100，边框宽度为1
}

2.2 Row( )使用

  • Row({ space: 5 })：设置子元素水平方向间距为5。
  • Row().width('30%').height(50).backgroundColor(0xAFEEEE)：添加一个Row组件，用于显示一个宽度为30%、高度为50的矩形，并设置其背景颜色为0xAFEEEE。
  • Row().width('30%').height(50).backgroundColor(0x00FFFF)：再次添加一个Row组件，用于显示另一个宽度为30%、高度为50的矩形，并设置其背景颜色为0x00FFFF。
  • .width('90%').height(107).border({ width: 1 })：设置Row()组件的宽度为90%，高度为107，边框宽度为1。
Row({ space: 5 }) {
  // 设置子元素水平方向间距为5
  Row().width('30%').height(50).backgroundColor(0xAFEEEE)
  Row().width('30%').height(50).backgroundColor(0x00FFFF)
}.width('90%').height(107).border({ width: 1 }) // 设置容器的宽度为90%，高度为107，边框宽度为1

2.3 Flex( )基本使用

  • direction：设置主轴方向，这里设置为"column"，表示垂直方向排列子组件。
  • justifyContent：设置主轴对齐方式，这里设置为"center"，表示居中对齐。
  • alignItems：设置交叉轴对齐方式，这里设置为"start"，表示起始对齐。
Flex({
			 // 设置主轴方向为垂直方向
			 direction:FlexDirection.Column
			 // 设置主轴对齐方式为居中对齐
	    ,justifyContent:FlexAlign.Center
			//设置交叉轴对齐方式为起始对齐
			,alignItems:ItemAlign.Start
		})
 {
      Text(this.message)
        .fontSize(20)
        .backgroundColor(Color.Yellow)
        .fontWeight(FontWeight.Bold);
      Text(this.message)
        .fontSize(20)
        .backgroundColor(Color.Yellow)
        .fontWeight(FontWeight.Bold);
      Text(this.message)
        .fontSize(20)
        .backgroundColor(Color.Yellow)
        .fontWeight(FontWeight.Bold);
}

2.4容器组件小demo抽奖

2.41@State 简单解析

@State 注解是鸿蒙应用开发中用于标识组件状态的注解，它可以用于声明一个组件状态，并指定该状态的类型、名称、默认值等属性。在组件类中使用 @State 注解可以让鸿蒙系统自动将该状态添加到组件的状态列表中，从而使组件可以在运行时使用该状态来存储和管理数据。

具体来说，@State 注解的作用是：

  1. 声明组件状态：通过使用 @State 注解，我们可以在组件类中声明一个状态，该状态可以用于存储和管理组件的数据。
  2. 自动管理状态：鸿蒙系统会自动将 @State 注解声明的状态添加到组件的状态列表中，并在组件运行时自动管理该状态的生命周期和值的变化。
  3. 状态变化通知：当 @State 注解声明的状态发生变化时，鸿蒙系统会自动通知组件进行重新绘制或重新布局等操作，从而保证界面的实时更新。
  4. 状态共享：通过使用 @State 注解，我们可以实现不同组件之间的状态共享，从而实现组件之间的数据交互和状态管理。
@Entry
@Component
struct LuckyPage {
  // 存储中奖信息的状态变量
  @State message: string = '奖品：'

  // 定义奖品列表
  dataList = [
    {
      name: "奖品1",
      image: "https://ms.bdimg.com/pacific/0/pic/1481309691_-822376179.jpg?x=0&y=0&h=110&w=165&vh=110.00&vw=165.00"
    },
    {
      name: "奖品2",
      image: "https://ms.bdimg.com/pacific/0/pic/1481309691_-822376179.jpg?x=0&y=0&h=110&w=165&vh=110.00&vw=165.00"
    },
    {
      name: "奖品3",
      image: "https://ms.bdimg.com/pacific/0/pic/1481309691_-822376179.jpg?x=0&y=0&h=110&w=165&vh=110.00&vw=165.00"
    },
    {
      name: "奖品4",
      image: "https://ms.bdimg.com/pacific/0/pic/1481309691_-822376179.jpg?x=0&y=0&h=110&w=165&vh=110.00&vw=165.00"
    },
    {
      name: "奖品5",
      image: "https://ms.bdimg.com/pacific/0/pic/1481309691_-822376179.jpg?x=0&y=0&h=110&w=165&vh=110.00&vw=165.00"
    },
    {
      name: "奖品5",
      image: "https://ms.bdimg.com/pacific/0/pic/1481309691_-822376179.jpg?x=0&y=0&h=110&w=165&vh=110.00&vw=165.00"
    },
    {
      name: "奖品6",
      image: "https://ms.bdimg.com/pacific/0/pic/1481309691_-822376179.jpg?x=0&y=0&h=110&w=165&vh=110.00&vw=165.00"
    },
    {
      name: "奖品7",
      image: "https://ms.bdimg.com/pacific/0/pic/1481309691_-822376179.jpg?x=0&y=0&h=110&w=165&vh=110.00&vw=165.00"
    },
    {
      name: "奖品8",
      image: "https://ms.bdimg.com/pacific/0/pic/1481309691_-822376179.jpg?x=0&y=0&h=110&w=165&vh=110.00&vw=165.00"
    }
  ];

  // 存储当前中奖奖品的索引
  @State currentCount: number = 0;
  // 定义奖品列表的展示顺序
  relIndex = [0, 1, 2, 5, 8, 7, 6, 3];

  build() {
    // 使用 Flex 布局
    Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center }) {
      // 显示中奖信息
      Text(this.message)
      // 展示奖品列表
      Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceAround }) {
        // 遍历奖品列表
        ForEach(this.dataList, (item, index) => {
          // 如果不是抽奖按钮
          if (index != 4) {
            Column() {
              // 显示奖品图片
              Image(item.image).height(80).width("100%");
              // 显示奖品名称
              Text(item.name).height(20);
            }
            // 设置样式
            .margin(5)
            .backgroundColor(index == this.relIndex[this.currentCount] ? Color.Pink : Color.Red)
            .borderRadius(5)
            .width("27%")
          } else { // 如果是抽奖按钮
            Text("抽奖")
              // 设置样式
              .width("27%")
              .height(100)
              .backgroundColor("#8842cdcd")
              .fontColor(Color.White)
              .borderRadius(5)
              .margin(5)
              .textAlign(TextAlign.Center)
              .onClick((event: ClickEvent) => {
                // 点击按钮开始抽奖
                this.start()
              })
          }
        });
      }.backgroundColor(Color.Yellow)
    }
  }

  // 标记是否正在抽奖
  isStarted = false;
  // 开始抽奖
  start() {
    // 如果正在抽奖，直接返回
    if (this.isStarted) {
      return;
    }
    // 标记正在抽奖
    this.isStarted = true;
    // 随机生成抽奖次数
    let index = Math.floor(Math.random() * this.dataList.length) + 20;
    const intervalId = setInterval(() => {
      // 更新中奖奖品的索引
      this.currentCount = (this.currentCount + 1) % 8;
      if (index-- == 0) {
        // 显示中奖信息
        this.message = "奖品：恭喜你抽取到" + this.dataList[this.relIndex[this.currentCount]].name;
        // 清除定时器
        clearInterval(intervalId);
        // 标记抽奖结束
        this.isStarted = false;
      }
    }, 100);
  }
}

2.5 Canvas组件使用

Canvas提供画布组件，用于自定义绘制图形，开发者使用 CanvasRenderingContext2D 对象和OffscreenCanvasRenderingContext2D 对象在Canvas组件上进行绘制，绘制对象可以是基础形状、文本、图片等。

// 定义一个 RenderingContextSettings 对象，用于设置绘图上下文的属性
const settings = new RenderingContextSettings(true);

// 创建一个 CanvasRenderingContext2D 对象，表示绘图上下文
const context = new CanvasRenderingContext2D(settings);

// 创建一个 Canvas 组件对象，并设置宽度、高度和背景颜色
const canvas = Canvas(context)
  .width('100%')
  .height('100%')
  .backgroundColor('#F5DC62');

// 当 Canvas 组件准备好后，执行回调函数，在回调函数中进行绘图操作
canvas.onReady(() => {
  // 设置轮廓线条的颜色和宽度，并绘制矩形轮廓线条
  context.strokeStyle = "#ff2255";
  context.lineWidth = 10;
  context.strokeRect(50, 50, 200, 150);

  // 设置填充色的颜色，并绘制矩形填充色
  context.fillStyle = "#ff6555";
  context.fillRect(50, 400, 200, 150);

  // 绘制一条从当前绘图位置到 (50, 50) 的线条，并绘制轮廓线条
  context.lineTo(50, 50);
  context.stroke();
});
  1. 定义了一个 CanvasPage 类，其中包含了 settings 和 context 两个成员变量。
  2. settings 是一个 RenderingContextSettings 类型的对象，用于设置绘图上下文的属性。在这里，将 antialias 属性设置为 true，表示开启抗锯齿功能。
  3. context 是一个 CanvasRenderingContext2D 类型的对象，表示绘图上下文。通过 new CanvasRenderingContext2D(this.settings) 创建一个绘图上下文对象，并将 settings 对象作为参数传入，以应用设置。
  4. build() 方法是一个绘图方法，用于绘制图形。在这里，首先通过 Canvas(this.context) 创建了一个 Canvas 组件对象，并设置了宽度、高度和背景颜色。当 Canvas 组件准备好后，执行回调函数，在回调函数中进行绘图操作。
  5. strokeRect() 方法用于绘制矩形轮廓线条。在这里，设置了轮廓线条的颜色和宽度，并使用 strokeRect() 方法绘制了一个左上角坐标为 (50, 50)、宽度为 200，高度为 150 的矩形。
  6. fillRect() 方法用于绘制矩形填充色。在这里，设置了填充色的颜色，并使用 fillRect() 方法绘制了一个左上角坐标为 (50, 400)、宽度为 200，高度为 150 的矩形。
  7. lineTo() 方法用于绘制线条。在这里，使用 lineTo() 方法绘制了一条从当前绘图位置到 (50, 50) 的线条。
  8. stroke() 方法用于绘制轮廓线条。在这里，使用 stroke() 方法绘制了设置的轮廓线条。

Canvas组件使用-画爱心demo

struct LikePage {
   settings: RenderingContextSettings = new RenderingContextSettings(true)
   context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  build() {
    Canvas(this.context).width("100%").height("100%").backgroundColor("#FF5555")
      // 当 Canvas 对象准备就绪后，执行回调函数
      .onReady(() => {
        // 调用 starDraw
        this.starDraw()
      })
  }
  // 定义 starDraw 方法，用于绘制星星
  starDraw() {
    // 初始化变量 currentRa 和 add_radian
    let currentRa = 0;
    const add_radian = Math.PI / 180;

    // 将绘图原点设置为画布中心
    this.context.translate(this.context.width / 2, this.context.height / 2);

    // 移动到起点，设置线条样式
    this.context.moveTo(this.call_x(currentRa), this.call_y(currentRa));
    this.context.strokeStyle = "#ff2255";
    this.context.lineWidth = 10;

    // 使用 setInterval 方法实现绘制和填充动画
    const timer=setInterval(()=>{
      if  (currentRa < 2 * Math.PI) {
        // 继续绘制星星的路径
        currentRa = currentRa + add_radian;
        let end_X = this.call_x(currentRa);
        let end_Y = this.call_y(currentRa);
        this.context.lineTo(end_X, end_Y);
        this.context.stroke();
      }else {
        // 填充
        this.context.fillStyle="#ff2255"
        this.context.fill()
        //关闭计时器
        clearInterval(timer)
      }
    },10)
  }

  // 定义 call_x 和 call_y 方法，用于计算爱心的坐标
  call_x(radian) {
    return 10*(16*Math.sin(radian)*Math.sin(radian)*Math.sin(radian))
  }

  call_y(radian) {
    return -10 * (13*Math.cos(radian) - 5 * Math.cos(2 * radian) - 2 * Math.cos(3 * radian) - Math.cos(4 * radian));
  }
}

Canvas组件使用-画板demo

/**
 * 画板页面组件
 */
@Entry
@Component
struct PanelPage {
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);

  // 开始位置
  star_X = 0;
  star_Y = 0;

  // 结束位置
  end_X = 0;
  end_Y = 0;

  // 是否正在擦除
  isClear: boolean = false;

  // 坐标点数组
  points = [];

  /**
   * 创建文本组件
   * @param message 文本内容
   * @param patinColor 画笔和字体颜色
   */
  @Builder
  myText(message, patinColor) {
    Text(message)
      .fontSize(15)
      .backgroundColor(patinColor)
      .fontColor("#ffbfbaba")
      .borderRadius(180)
      .width(50)
      .height(50)
      .textAlign(TextAlign.Center)
      .margin({ left: "5%" })
      .fontWeight(FontWeight.Bold)
      .fontFamily("微软雅黑")
      .fontStyle(FontStyle.Normal)
      .onClick(() => {
        this.context.strokeStyle = patinColor;
        // 重置画笔
        this.context.beginPath();
        this.isClear = false;
      });
  }

  /**
   * 绘制贝塞尔曲线
   * @param x 终点横坐标
   * @param y 终点纵坐标
   */
  bezierDraw(x, y) {
    // 设置画笔的粗细和颜色
    this.context.lineWidth = 5;

    // 将坐标点放入到数组中
    this.points.push({ x: x, y: y });

    var endX;
    var endY;

    var startX;
    var startY;

    // 控制点
    var controlX;
    var controlY;

    if (this.points.length >= 3) {
      // 获取终点的坐标
      endX = (this.points[this.points.length - 1].x + this.points[this.points.length - 2].x) / 2;
      endY = (this.points[this.points.length - 1].y + this.points[this.points.length - 2].y) / 2;

      // 获取起点坐标
      startX = (this.points[this.points.length - 3].x + this.points[this.points.length - 2].x) / 2;
      startY = (this.points[this.points.length - 3].y + this.points[this.points.length - 2].y) / 2;

      controlX = this.points[this.points.length - 2].x;
      controlY = this.points[this.points.length - 2].y;

      // 将画笔移动到起点
      this.context.moveTo(startX, startY);
      // 绘制贝塞尔曲线
      this.context.quadraticCurveTo(controlX, controlY, endX, endY);
      this.context.stroke();
    }
  }

  /**
   * 创建画板页面组件
   */
  build() {
    Column() {
      // 获取画笔
      Canvas(this.context)
        .width("100%")
        .height("85%")
        .backgroundColor("#FF5555")
        .onReady(() => {

          this.context.lineWidth = 5;
					//忽视错误语法
          // @ts-ignore
          this.context.strokeStyle = Color.Green;

        })

          // 触摸事件
        .onTouch((event) => {
          switch (event.type) {
          // 点击的点
            case TouchType.Down:
              this.star_X = event.touches[0].screenX;
              this.star_Y = event.touches[0].screenY;
              break;
          // 点击后移动
            case TouchType.Move:
              this.end_X = event.touches[0].screenX;
              this.end_Y = event.touches[0].screenY;
              if (this.isClear) {
                this.context.clearRect(this.end_X - 20, this.end_Y - 20, 40, 40);
              } else {
                this.bezierDraw(this.end_X, this.end_Y);
              }
              break;
          // 点击后放开
            case TouchType.Up:
              this.points = [];
              break;
          // 误触发
            case TouchType.Cancel:
              break;
          }
        })

      Row() {
        // 颜色选择
        this.myText("Green", Color.Green);
        this.myText("Yellow", Color.Yellow);
        this.myText("Red", Color.Red);

        // 清空按钮
        Button("清空").onClick((event: ClickEvent) => {

          this.context.clearRect(0, 0, this.context.width, this.context.height);
          this.context.beginPath();
          this.isClear = false;
          console.info("清空成功");

        }).margin({ left: "5%" });

        // 橡皮擦按钮
        Image($r("app.media.icon")).width(50).height(50).margin({ left: "5%" }).onClick(() => {
          this.isClear = true;
        });
      }.width("100%").backgroundColor("#fffad8d8").height("15%").justifyContent(FlexAlign.Center);
    }.width("100%");
  }
}

3自定义组件使用-装饰器

3.1 @Component解析使用

@Component 注解是鸿蒙应用开发中用于标识组件类的注解，它通常用于声明一个组件类，并指定该组件的类型、名称、描述、图标等属性。在组件类中使用 @Component 注解可以让鸿蒙系统自动注册该组件，并将其添加到应用的组件清单中，从而使其他组件或页面可以通过该组件的名称或类型来调用它。

除了可以指定组件的基本属性之外，@Component 注解还支持一些其他的属性，例如 structField 属性。该属性用于指定该组件类需要接收的参数类型和名称，从而实现参数传递。在组件类中使用 @Component 注解的 structField 属性可以让鸿蒙系统自动将传递过来的参数转换为指定的结构体类型，并将其传递给组件类的相应方法。

3.2 struct**解析使用**

struct 结构体是鸿蒙应用开发中用于定义数据结构的关键字。它可以用于定义一个包含多个字段的数据结构，从而方便地传递复杂的数据类型。在组件类中使用 struct 结构体可以定义一个包含多个字段的数据结构

public struct MyParams {
    String param1;
    int param2;
}

3.2@Prop 解析使用

@Prop 注解是鸿蒙应用开发中用于标识组件属性的注解，它可以用于声明一个组件属性，并指定该属性的类型、名称、默认值等属性。在组件类中使用 @Prop 注解可以让鸿蒙系统自动将该属性添加到组件的属性列表中，从而使其他组件或页面可以通过该属性来访问它。通过使用 @Prop 注解，我们可以方便地声明和访问组件属性，从而实现组件之间的数据交互。简单说就是父容器更新通知子容器也更新,但是它是一个单项绑定。

@Prop age:number;

3.3@Link解析使用

@Link 注解是鸿蒙应用开发中用于声明组件之间关联关系的注解，它可以用于标识组件之间的父子关系、兄弟关系或其他关联关系。在组件类中使用 @Link 注解可以让鸿蒙系统自动建立组件之间的关联关系，从而实现组件之间的数据交互和事件传递,他简单说就是双向绑定。

3.4@Entry解析使用

@Entry 注解是鸿蒙应用开发中用于声明应用程序入口的注解，它可以用于标识应用程序的入口类和入口方法。在应用程序中使用 @Entry 注解可以让鸿蒙系统自动识别应用程序的入口，从而启动应用程序并执行入口方法。

//程序入口
@Entry
@Component
struct NewPage {
  @State message: string = 'Hello World'
  @State age: number = 0;
  @State test: number = 0;

  build() {
    Row() {
      Column() {
        Text(this.message + this.age + this.test)
          .fontSize(30)
          .fontWeight(FontWeight.Bold).onClick(() => {
          this.age++;
          this.test++;
        })
        MyComponent({ age: this.age, test: $test })
      }
      .width('100%')
    }
    .height('100%')
  }
}
//自定义组件
@Component
struct MyComponent {

//单项绑定
  @Prop age: number;
//双向绑定
  @Link test: number;

  build() {
    Column() {
//举例
      Text("这个是age" + this.age)
        .fontSize(20).onClick(() => {
        this.age++;
      })

      Text("这个是test" + this.test)
        .fontSize(20).onClick(() => {
        this.test++;

      })
    }
  }
}

3.5@Entry解析使用

@Builder 注解是鸿蒙应用开发中用于生成构建器模式的注解，它可以用于标识一个类，使得该类可以通过构建器模式来创建对象,简化对象创建,重复调用减少冗余快速生成多个布局内容。在类中使用 @Builder 注解可以让鸿蒙系统自动为该类生成一个构建器，从而方便地创建对象。

//装饰函数
@Builder myText(){
    Text("这是我的文本").fontSize(20)
  }  @Builder myButton(){
    Button("这是我的文本").fontSize(20)
  }

  build() {
    Column() {
      this.myText()
      this.myButton()
    }
  }

3.6@Extend解析使用

@Extend 注解是鸿蒙应用开发中用于扩展组件功能的注解，它可以用于标识一个类，使得该类可以扩展已有组件的功能。在类中使用 @Extend 注解可以让鸿蒙系统自动将该类与已有相关类型组件进行关联，从而实现组件功能的扩展。

//扩展Text文本
@Extend(Text) function testText() {
  .fontSize(10).fontColor(Color.Black)
}
//扩展Button按钮
@Extend(Button) function testButton() {
  .fontSize(10).fontColor(Color.Black).type(ButtonType.Normal)
}
//使用
//Button("这是我的文本").testButton()
//Text("这是我的文本").testText()

3.7@Styles解析使用

@Styles 注解是鸿蒙应用开发中用于定义样式的注解，它可以用于标识一个类，使得该类可以定义一组样式，并在应用中进行复用。在类中使用 @Styles 注解可以让鸿蒙系统将该类与样式进行关联，从而实现样式的统一管理和复用。如我们可以在一个类中定义一组样式，包括字体、颜色、大小等属性。

//定义通用样式
@Styles function ButtonStyle(){
  .width(200).height(200).backgroundColor(Color.Brown)
}

Button("这是我的文本").testButton().ButtonStyle()

3.8 @Provide和@Consume**解析使用、**

@Provide 注解用于标识能力提供者，即提供某项分布式能力的组件。通过使用 @Provide 注解，我们可以将一个组件标识为能力提供者，并指定其提供的能力类型和名称。在鸿蒙系统中，能力提供者通常是服务端组件，它们通过定义能力接口并实现相应的能力方法，来提供分布式能力服务。

@Consume 注解用于标识能力消费者，即消费某项分布式能力的组件。通过使用 @Consume 注解，我们可以将一个组件标识为能力消费者，并指定其需要消费的能力类型和名称。在鸿蒙系统中，能力消费者通常是客户端组件，它们通过调用能力接口来获取分布式能力服务。 通俗讲就是Provide 提供了一个全局值，但要通过Consume 来取。

struct NewPage {
  // 声明一个名为 test 的属性，并设置默认值为 10，使用 @Provide 注解将其标识为能力提供者
  @Provide test: number = 10;

  build() {
    Column() { 
      Text(this.test+"") 
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {
          this.test++; 
        })
      MyComponent({}) 
    }
    .height('100%') 
  }
}

// 定义一个自定义组件
@Component // 标识为组件，表示该组件可以被其他组件引用
struct MyComponent {
  // 声明一个名为 test 的属性，并使用 @Consume 注解将其标识为能力消费者
  @Consume("test") test: number;

  build() {
    Column() {
      Text("这个是test" + this.test) 
        .fontSize(20)
        .onClick(() => {
          this.test++; 
        })
    }
  }
}

自定义组件使用-生命周期

简单分为三个阶段

  1. aboutToAppear() 阶段：在组件即将显示时被调用，用于进行数据变化等操作。
  2. build() 阶段：组件的核心部分，用于构建组件的视图和行为。
  3. aboutToDisappear() 阶段：在组件即将消失时被调用，用于进行解绑操作等清理工作。

这三个阶段的执行顺序为：

  1. aboutToAppear() 阶段
  2. build() 阶段
  3. aboutToDisappear() 阶段

这三个阶段的执行顺序是不可逆的，即无法在 build() 阶段中修改 aboutToAppear() 和 aboutToDisappear() 阶段的执行顺序。

@Component
struct MyComponent {
  @Prop age: number;
  @Consume("test") test: number;

  //系统生命周期：一定在build 之前 一般用于数据变化
  aboutToAppear(){
    console.info("aboutToAppear")
  }
  //进行解绑：拥有资源释放
  aboutToDisappear(){
    console.info("aboutToDisappear")
  }

  build() {

  }
}

4. 多页面处理

4.1 页面跳转router.pushUrl({})使用

router.pushUrl() 是 鸿蒙页面路由框架中的一个方法，用于在应用程序中进行页面跳转。该方法接受一个对象作为参数，该对象包含要跳转的页面的 URL 和其他参数。

通过 params 参数传递了一些数据，包括 id 和 name

注意要注册页面不然跳转出错


router.pushUrl({
//要跳转的页面的 URL
  uri: 'pages/second/second',
// 传递给目标页面的参数
  params: {
    id: '123',
    name: 'John'
  },

});

//page2 页面接收 
@State message: string = router.getParams()["username"]

二. Ability开发

1. Ability生命周期

生命周期图

export default class EntryAbility extends UIAbility {
  /**
   * 当 Ability 创建时调用
   * @param want
   * @param launchParam
   */
  onCreate(want, launchParam) {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  }

  /**
   * 当 Ability 销毁时调用
   */
  onDestroy() {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
  }

  /**
   * 当窗口舞台创建时调用
   * @param windowStage 窗口舞台对象
   */
  onWindowStageCreate(windowStage: window.WindowStage) {
   
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
 // 主窗口创建完成后，为 Ability 设置主页面
    windowStage.loadContent('pages/LuckyPage', (err, data) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
    });
  }

  /**
   * 当窗口舞台销毁时调用
   */
  onWindowStageDestroy() {
    // 主窗口销毁后，释放与 UI 相关的资源
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
  }

  /**
   * 当 Ability 进入前台时调用
   */
  onForeground() {
    // Ability 进入前台
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
  }

  /**
   * 当 Ability 进入后台时调用
   */
  onBackground() {
    // Ability 进入后台
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
  }
}
  • onCreate(want, launchParam)：当 Ability 创建时调用，want 参数表示创建 Ability 时的意图，launchParam 参数表示启动参数。
  • onDestroy()：当 Ability 销毁时调用。
  • onWindowStageCreate(windowStage: window.WindowStage)：当窗口舞台创建时调用，windowStage 参数表示窗口舞台对象。
  • onWindowStageDestroy()：当窗口舞台销毁时调用。
  • onForeground()：当 Ability 进入前台时调用。
  • onBackground()：当 Ability 进入后台时调用。

2. Ability之间切换

Button("跳转到另一个").width(100).height(20).backgroundColor(Color.Blue).onClick(() => {
        // 获取当前 Ability 的上下文对象
        let context = getContext(this) as common.UIAbilityContext;

        // 指定要启动的 Ability 的包名和类名
        let want = {
          bundleName: "com.example.myapplication",
          abilityName: "HomeAbility"
        };

        // 启动指定的 Ability
        context.startAbility(want);
      });

三. 网络管理

链接查看

@ohos.net.connection (网络连接管理)-网络管理-ArkTS接口参考-ArkTS API参考-HarmonyOS应用开发

data() {
    return {
      dishName: '宫保鸡丁',
      dishDescription: '经典川菜，辣味十足，口感丰富。',
      price: 30
    }
  }

Vue.js 的核心特性之一是指令，这些指令以 v- 为前缀的特殊属性形式嵌入到 HTML 模板中。它们的主要作用是将 Vue 实例中的响应式数据绑定到 DOM 元素，或者对 DOM 元素执行特定的操作。通过 v- 指令，HTML 标签被赋予了额外的功能和行为，使得页面逻辑更加直观和高效。

相较于传统的 JavaScript 方法，Vue.js 利用指令极大地简化了创建响应式页面的过程，显著减少了所需的代码量。传统开发方式通常需要手动操作 DOM、监听事件和更新界面状态，这不仅代码繁琐、冗长，而且容易出错。尤其在处理复杂交互或数据频繁变化的场景下，手动管理 DOM 状态既低效又难以维护。Vue.js 的指令通过声明式语法，使数据和视图的绑定更加简洁明了。开发者只需关注数据的变化，Vue 会自动高效地更新 DOM，避免了冗余的操作和潜在的性能问题。此外，Vue 的虚拟 DOM 和高效的差异化更新机制进一步优化了页面性能，使得用户体验更加流畅。

Vue.js 提供了多种内置指令，涵盖数据绑定、事件处理、条件渲染、列表渲染等多个方面，方便开发者灵活构建各种应用场景：

数据绑定指令：

  • v-bind：动态绑定 HTML 属性，可根据数据变化实时更新属性值。
  • v-model：实现数据的双向绑定，通常用于表单输入，简化了输入与数据状态同步的过程。

条件渲染指令：

  • v-if：根据条件动态渲染或销毁元素，适合在需要频繁切换内容时使用。
  • v-else / v-else-if：与 v-if 配合使用，处理多条件分支逻辑。
  • v-show：通过切换 display 样式属性来控制元素的显示与隐藏，适合频繁切换但不销毁 DOM 的场景。

列表渲染指令：

  • v-for：基于数组或对象的数据源动态渲染列表项，语法简洁，易于操作。

事件处理指令：

  • v-on：用于绑定事件监听器，响应用户交互事件（如点击、输入等），支持简化写法 @。

这些丰富的指令极大地提升了开发效率，使得 Vue.js 成为构建现代 Web 应用的高效工具。开发者无需关心底层 DOM 操作，只需通过简洁的模板语法和数据驱动的方式，快速搭建出响应式、交互性强的页面。

表单事件是用户在与网页上的表单元素交互时触发的一系列动作。它们帮助开发者获取用户输入、验证数据以及响应用户的操作。以下是一些常见的表单事件类型及其定义：

  1. focus 和 blur
    • focus：当表单元素（如输入框、选择框等）获得焦点时触发。例如，用户点击输入框使其处于激活状态。
    • blur：当表单元素失去焦点时触发。例如，用户点击输入框之外的区域，输入框失去焦点。
  2. change
    • change：当表单元素的值被修改并且失去焦点时触发。通常用于检测文本框、选择框、单选按钮、复选框等的变化。
  3. input
    • input：当用户在输入框中输入字符时触发，实时检测用户输入。相比 change，input 事件会更频繁触发，因为它在每次按键时都会被触发。
  4. submit
    • submit：当表单提交时触发。通常发生在用户点击提交按钮时，但也可以通过 JavaScript 代码手动触发。
  5. reset
    • reset：当表单重置时触发。通常发生在用户点击重置按钮时，重置按钮会将表单中的所有元素恢复到其初始值。
# 鸿蒙 # 经验分享 # 开源
Logo
HarmonyOS开发者社区

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

更多推荐

cover

鸿蒙 ArkTS 实战：从零开发「舔狗模拟器」交互游戏

avatar HarmonyOS开发者社区
cover

鸿蒙原生 ArkTS 布局之 ColumnStart 垂直排列深度解析

avatar HarmonyOS开发者社区
cover

鸿蒙原生 ArkTS 布局深度解析：ColumnCenter 垂直居中排列实战

avatar HarmonyOS开发者社区