【关键字】

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

【介绍】

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

文档中心

【技术实现点】

一、FA卡片消息事件

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

1. 首先我们在卡片widget的index.hml中给要触发的控件上添加onclick,比如:οnclick="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

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐