Skip to content

公共事件汇总

案例举例

  • 在这里面,我们以一个简单的例子来展示如何使用公共事件。
js

import { commonEventManager } from "@kit.BasicServicesKit";   // 引入事件包

@Entry @Component struct Index {

  @State text: string = "";
  @State publish: string = "";

  private subscriber = null;

  private createSubscriber() {
    if (this.subscriber) {
      this.text = "subscriber already created";
    } else {
      commonEventManager.createSubscriber({            // 创建订阅者
        events: ["testEvent"]                   // 指定订阅的事件名称
      }, (err, subscriber) => {                 // 创建结果的回调
        if(err) {
          this.text = "create subscriber failure"
        } else {
          this.subscriber = subscriber;         // 创建订阅成功
          this.text = "create subscriber success";
        }
      })
    }
  }

  private subscribe() {
    if (this.subscriber) {
      // 根据创建的subscriber开始订阅事件
      commonEventManager.subscribe(this.subscriber, (err, data) => {
        if(err) {
          // 异常处理
          this.text = "subscribe event failure: " + err;
        } else {
          // 接收到事件
          this.text = "subscribe event success: " + data.event + ", " + data;
        }
      })
    } else {
      this.text = "please create subscriber";
    }
  }

  private unsubscribe() {
    if (this.subscriber) {
      commonEventManager.unsubscribe(this.subscriber, (err) => {// 取消订阅事件
        if(err) {
          this.text = "unsubscribe event failure: " + err;
        } else {
          this.subscriber = null;
          this.text = "unsubscribe event success: ";
        }
      })
    } else {
      this.text = "already subscribed";
    }
  }

  private publishEvent() {
    commonEventManager.publish("testEvent", (err) => {// 发布事件,事件名称为testEvent
      if(err) {// 结果回调
        this.publish = "publish event error: " + err.code + ", " + err.message + ", " + err.name + ", " + err.stack;
      } else {
        this.publish = "publish event success";
      }
    })
  }

  private publishEventWithData() {
    commonEventManager.publish("testEvent", {         // 发布事件,事件名称为testEvent
      code: 10086,                             // 事件携带的参数
      data: "publish with data"                // 事件携带的参数
    }, (err) => {                              // 结果回调
      if(err) {
        this.publish = "publish event error: " + err.code + ", " + err.message + ", " + err.name + ", " + err.stack;
      } else {
        this.publish = "publish event with data success";
      }
    })
  }


  build() {
    Column({space: 10}) {
      Button("创建订阅者")
        .size({width: 260, height: 50})
        .onClick(() => {
          this.createSubscriber();
        })
      Button("订阅公共事件")
        .size({width: 260, height: 50})
        .onClick(() => {
          this.subscribe();
        })

      Button("取消订阅")
        .size({width: 260, height: 50})
        .onClick(() => {
          this.unsubscribe();
        })

      Text(this.text)
        .size({width: 260, height: 150})
        .fontSize(22)
        .backgroundColor("#dbdbdb")

      Divider()
        .size({width: 260, height: 5})

      Button("发布公共事件")
        .size({width: 260, height: 50})
        .onClick(() => {
          this.publishEvent();
        })

      Button("发布公共事件指定公共信息")
        .size({width: 260, height: 50})
        .onClick(() => {
          this.publishEventWithData();
        })

      Text(this.publish)
        .size({width: 260, height: 150})
        .fontSize(22)
        .backgroundColor("#dbdbdb")

    }
    .padding(10)
    .size({width: "100%", height: '100%'})
  }
}

样例很简单,首先创建一个订阅者,然后订阅指定事件,当有匹配的事件时,会回调给订阅者,运行结果如下图所示: