HarmonyOS实战—初识服务卡片

[本文正在参与“有奖征文| HarmonyOS征文大赛”活动]

目录

服务卡片概述

基本概念

运作机制

 1.基础步骤

 2.创建服务卡片

3. 2*2的音乐卡片设计

 4. 2*4的运动出行卡片

 5.修改应用启动卡片代码

6.创建服务卡片控制代码 

 7.运行步骤

8.运行效果

---

服务卡片概述

服务卡片（以下简称“卡片”）是FA的一种界面展示形式，将FA的重要信息或操作前置到卡片，以达到服务直达，减少体验层级的目的。

卡片常用于嵌入到其他应用（当前只支持系统应用）中作为其界面的一部分显示，并支持拉起页面，发送消息等基础的交互功能。卡片使用方负责显示卡片。

FA示例如下图所示。

基本概念

• 卡片提供方

  提供卡片显示内容的HarmonyOS应用或原子化服务，控制卡片的显示内容、控件布局以及控件点击事件。

• 卡片使用方

  显示卡片内容的宿主应用，控制卡片在宿主中展示的位置。

• 卡片管理服务

  用于管理系统中所添加卡片的常驻代理服务，包括卡片对象的管理与使用，以及卡片周期性刷新等。

运作机制

卡片管理服务包含以下模块：

• 周期性刷新：在卡片添加后，根据卡片的刷新策略启动定时任务周期性触发卡片的刷新。
• 卡片缓存管理：在卡片添加到卡片管理服务后，对卡片的视图信息进行缓存，以便下次获取卡片时可以直接返回缓存数据，降低时延。
• 卡片生命周期管理：对于卡片切换到后台或者被遮挡时，暂停卡片的刷新；以及卡片的升级/卸载场景下对卡片数据的更新和清理。
• 卡片使用方对象管理：对卡片使用方的RPC对象进行管理，用于使用方请求进行校验以及对卡片更新后的回调处理。
• 通信适配层：负责与卡片使用方和提供方进行RPC通信。

卡片提供方包含以下模块：

• 卡片服务：由卡片提供方开发者实现，开发者实现onCreateForm、onUpdateForm和onDeleteForm处理创建卡片、更新卡片以及删除卡片等请求，提供相应的卡片服务。
• 卡片提供方实例管理模块：由卡片提供方开发者实现，负责对卡片管理服务分配的卡片实例进行持久化管理。
• 通信适配层：由HarmonyOS SDK提供，负责与卡片管理服务通信，用于将卡片的更新数据主动推送到卡片管理服务。

 1.基础步骤

• 打开DevEco Studio软件，新建项目

•  创建手机应用，使用java编程语言

• 填写项目信息

• 展示项目目录列表

 2.创建服务卡片

• 鸿蒙系统开发提供了很多卡片样式供开发者选择

 

• 这里选择网格卡片样式

•  填写设置卡片信息

•  这里我选择了2*2和2*4的卡片，卡片创建完成后，在config.json项目配置文件中会发到卡片的配置信息

• 在layout文件夹下可以看到系统自动创建的所选择的卡片布局文件，开发者可以直接在该布局上设计自己的卡片效果 

3. 2*2的音乐卡片设计

•  其对应的布局代码如下

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#66000000"
    ohos:orientation="vertical"
    ohos:remote="true">

    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:alignment="vertical_center"
        ohos:orientation="horizontal"
        ohos:weight="1">

        <Image
            ohos:height="60vp"
            ohos:width="60vp"
            ohos:image_src="$media:campuslife_bg"
            ohos:scale_mode="zoom_start"
            ohos:start_margin="12vp"
            ohos:top_margin="12vp"/>

        <DirectionalLayout
            ohos:height="60vp"
            ohos:margin="5fp"
            ohos:width="match_parent"
            ohos:alignment="center"
            ohos:orientation="vertical">

            <Text
                ohos:height="match_content"
                ohos:width="match_parent"
                ohos:text="歌名"
                ohos:text_color="#E5FFFFFF"
                ohos:text_size="19fp"
                ohos:text_weight="900"
                ohos:truncation_mode="ellipsis_at_end"/>

            <Text
                ohos:height="match_content"
                ohos:width="match_parent"
                ohos:text="歌手名称"
                ohos:text_color="#aaFFFFFF"
                ohos:text_size="15fp"
                ohos:text_weight="600"
                ohos:top_margin