> 文档中心 > 【HarmonyOS】FA服务卡片中如何给List添加消息事件

【HarmonyOS】FA服务卡片中如何给List添加消息事件

 【关键字】

消息事件、JS UI、服务卡片

【介绍】

HarmonyOS使用JS UI进行Java服务卡片开发大家一定不陌生,如果还有没有接触过服务卡片开发的可以参考以下文档:

文档中心

【技术实现点】

一、FA卡片消息事件

目前使用JS UI服务卡片覆盖了大部分HarmonyOS机型,首先我们回顾一下JS UI卡片提供方处理卡片消息事件的方式。即通过onTriggerFormEvent我们可以把卡片的消息事件在MainAbility中进行处理,具体操作如下。

1. 首先我们在卡片widget的index.hml中给要触发的控件上添加onclick,比如:οnclick="sendMessageEvent"

{{ itemTitle0 }} {{ itemContent0 }}
{{ itemTitle1 }} {{ itemContent1 }}

2.然后在index.json中,添加对应的actions,action为“message”的事件将在MainAbility的onTriggerFormEvent函数中触发。

{  "data": {  },  "actions": {    "sendMessageEvent0": {      "action": "message",      "params": { "p1": "left", "index": "{{index}}"      }    },    "sendMessageEvent1": {      "action": "message",      "params": { "p1": "right", "index": "{{index}}"      }    }  }}

二、新的问题——如何在列表中使用消息事件

但是这样我们就遇到了一个问题,如果我们的卡片是有很多重复元素组成的一个列表list,并且想要把index.json中的data数据与列表绑定,通过点击列表中的item获得此item对应的数据传递到onTriggerFormEvent方法中,该如何操作呢?

 

三、实现步骤

首先我们需要对index.hml的卡片布局模板做以下改造:

{{ $item.title }}

 上述代码中我们添加了一个list组件在index.hml中,并且绑定了index.json中的data里面的listdata数据。data部分代码如下:

{  "data": {    "listdata":[{"title":"title1","url":"url1"},      {"title":"title2","url":"url2"},      {"title":"title3","url":"url3"}]  }}

但是我们的list中只有一个onclick事件,在点击的时候我们希望可以获取到listdata中每一项的url,并将此传递给MainAbility的onTriggerFormEvent,官方文档对此并没有相关的描述。

四、重点来了

其实我们可以通过idx获取到hml页面list的索引,通过item获取其中元素的对应数据。然后把这些数据在index.json的message事件中作为参数,就可以传递给onTriggerFormEvent方法。完整index.json如下:

{  "data": {    "list":[{"title":"title1","url":"url1"},      {"title":"title2","url":"url2"},      {"title":"title3","url":"url3"}]  },  "actions": {    "sendMessageEvent": {      "action": "message",      "params": { "url": "{{$item.url}}", "index": "{{$idx}}"      }    }  }}

最后我们在MainAbility的onTriggerFormEvent中添加如下代码就可以获取到item点击传递过来的数据:

@Overrideprotected void onTriggerFormEvent(long formId, String message) {    HiLog.info(TAG, "onTriggerFormEvent: " + message);    ZSONObject data=ZSONObject.stringToZSON(message);    String index=data.getString("index");    String url=data.getString("url");    HiLog.info(TAG, "index: " + index+" url:"+url);}

【相关参考】

服务卡片开发简介

 欲了解更多更全技术文章,欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh