【关键字】
消息事件、JS UI、服务卡片
【介绍】
HarmonyOS使用JS UI进行Java服务卡片开发大家一定不陌生，如果还有没有接触过服务卡片开发的可以参考以下文档：
【技术实现点】
一、FA卡片消息事件
目前使用JS UI服务卡片覆盖了大部分HarmonyOS机型，首先我们回顾一下JS UI卡片提供方处理卡片消息事件的方式。即通过onTriggerFormEvent我们可以把卡片的消息事件在MainAbility中进行处理，具体操作如下。
1. 首先我们在卡片widget的index.hml中给要触发的控件上添加onclick，比如：onclick="sendMessageEvent"
<div class="div" onclick="sendMessageEvent0">
<image class="item_image" src="{{ src0 }}"></image>
<text class="item_title">{{ itemTitle0 }}</text>
<text class="item_content">{{ itemContent0 }}</text>
</div>
<div class="div" onclick="sendMessageEvent1">
<image class="item_image" src="{{ src1 }}"></image>
<text class="item_title">{{ itemTitle1 }}</text>
<text class="item_content">{{ itemContent1 }}</text>
</div>
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的卡片布局模板做以下改造：
<div class="container">
<stack>
<list class="list" else>
<list-item for="{{listdata}}" class="list-item">
<div class="div" onclick="sendMessageEvent">
<text class="item_title">{{ $item.title }}</text>
</div>
</list-item>
</list>
</stack>
</div>上述代码中我们添加了一个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点击传递过来的数据：
@Override
protected 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
标签：index,卡片,FA,url,List,HarmonyOS,onTriggerFormEvent,message,data From： https://www.cnblogs.com/developer-huawei/p/17218726.html