HarmonyOS鸿蒙Next开发卡片事件心得体会

HarmonyOS鸿蒙Next开发卡片事件心得体会 服务卡片

作者：坚果

欢迎大家加入坚果组织一起学习鸿蒙开发。

学习了老师关于原子化服务的课程让我明白关于卡片的一些基础知识。同时也能开发卡片事件

开发卡片事件

卡片支持为组件设置交互事件（action），包括router事件和message事件，其中router事件用于Ability跳转，message事件用于卡片开发人员自定义点击事件。

关键步骤说明如下：

1. 在HML中为组件设置onclick属性，其值对应到JSON文件的actions字段中。
2. 设置router事件：
   • action属性值为"router"。
   • abilityName为跳转目标的Ability名（支持跳转FA模型的PageAbility组件和Stage模型的UIAbility组件），如目前DevEco Studio创建的Stage模型的UIAbility默认名为EntryAbility。
   • params为传递给跳转目标Ability的自定义参数，可以按需填写。其值可以在目标Ability启动时的want中的parameters里获取。如Stage模型MainAbility的onCreate生命周期里的入参want的parameters字段下获取到配置的参数。
3. 设置message事件：
   • action属性值为"message"。
   • params为message事件的用户自定义参数，可以按需填写。其值可以在卡片生命周期函数onFormEvent()中的message里获取。

HML文件

<div class="container">
  <stack>
    <div class="container-img">
      <image src="" class="bg-img"></image>
    </div>
    <div class="container-inner">
      <text class="title" onclick="routerEvent">{{title}}</text>
      <text class="detail_text" onclick="messageEvent">{{detail}}</text>
    </div>
  </stack>
</div>

CSS文件

.container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.bg-img {
  flex-shrink: 0;
  height: 100%;
}

.container-inner {
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  height: 100%;
  width: 100%;
  padding: 12px;
}

.title {
  font-size: 19px;
  font-weight: bold;
  color: white;
  text-overflow: ellipsis;
  max-lines: 1;
}

.detail_text {
  font-size: 16px;
  color: white;
  opacity: 0.66;
  text-overflow: ellipsis;
  max-lines: 1;
  margin-top: 6px;
}

JSON文件

{
  "data": {
    "title": "TitleDefault",
    "detail": "TextDefault"
  },
  "actions": {
    "routerEvent": {
      "action": "router",
      "abilityName": "EntryAbility",
      "params": {
        "info": "router info",
        "message": "router message"
      }
    },
    "messageEvent": {
      "action": "message",
      "params": {
        "detail": "message detail"
      }
    }
  }
}

在UIAbility中接收router事件并获取参数

import UIAbility from '@ohos.app.ability.UIAbility'

export default class EntryAbility extends UIAbility {
    onCreate(want, launchParam) {
        // 获取router事件中传递的info参数
        if (want.parameters.info === "router info") {
            // do something
            // console.log("router info:" + want.parameters.info)
        }
        // 获取router事件中传递的message参数
        if (want.parameters.message === "router message") {
            // do something
            // console.log("router message:" + want.parameters.message)
        }
    }
    // ...
};

在FormExtensionAbility中接收message事件并获取参数

import FormExtension from '@ohos.app.form.FormExtensionAbility';

export default class FormAbility extends FormExtension {
    // ...
    onFormEvent(formId, message) {
        // 获取message事件中传递的detail参数
        let msg = JSON.parse(message)
        if (msg.params.detail === "message detail") {
            // do something
            // console.log("message info:" + msg.params.detail)
        }
    }
    // ...
};