【鸿蒙】OpenHarmony服务卡片的用法详解

卡片概述

卡片是一种界面展示情势，可以将应用的重要信息或操作前置到卡片，以达到服务直达，淘汰体验层级的目标。

卡片展示
卡片常用于嵌入到其他应用（当前仅支持系统应用，比方 Launcher）中作为其界面的一部分显示，并支持拉起页面，发送消息等基础的交互功能。
卡片的基本概念：
卡片提供方：提供卡片显示内容原子化服务，控制卡片的显示内容、控件布局以及控件点击变乱。
包含以下模块：

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

卡片使用方：显示卡片内容的宿主应用，负责显示卡片，控制卡片在宿主中展示的位置。
卡片管理服务：用于管理系统中所添加卡片的常驻署理服务，包括卡片对象的管理与使用，以及卡片周期性革新等。
包含以下模块：

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

卡片使用方和提供方不要求常驻运行，在必要添加/删除/请求更新卡片时，卡片管理服务会拉起卡片提供方获取卡片信息。
开发者仅需作为卡片提供方进行卡片内容的开发，卡片使用方和卡片管理服务由系统自动处置惩罚。
场景介绍

基于****FA 模子的卡片提供方开发，主要涉及如下功能逻辑：

• 开发卡片生命周期回调函数 LifecycleForm
  
  
• 创建卡片数据 FormBindingData 对象
  
  
• 通过 FormProvider 更新卡片
  
  
• 开发卡片页面
  基于****Stage 模子的卡片提供方开发，主要涉及如下功能逻辑：
  
  
• 卡片生命周期回调函数 FormExtension 开发
  
  
• 创建卡片数据 FormBindingData 对象
  
  
• 通过 FormProvider 更新卡片
  
  
• 卡片页面开发
  

卡片开发指导

卡片提供方创建卡片

1.打开 DevEco 3.0.0.993 新建一个项目
2.选择一个 module 创建卡片，每个 module 最多创建 16 张卡片，此处以 entry 为例。
选中 entry 文件夹，右键 New–>Extension Ability -->Service Widget

• FA 模子项目
  
  
  
  
• Stage 模子项目
  
  
  
  

3.任选一种卡片模板。OpenHarmony 目前支持以下三种卡片模板：
HelloWorld : 支持低代码开发的 HelloWorld 卡片。 Image With Information : 图文卡片。图文卡片模板主要在于展现图片和一定数量文本的搭配，在这种布局下，图片和文本属于同等重要的信息。在不同尺寸下，图片巨细和文本数量会发生一定变化，用于凸显关键信息。 Immersive Information : 沉浸式卡片。 沉浸式卡片的装饰性较强，能够较好的提升卡片品格感并起到装饰桌面的作用，合理的去布局信息与背景图片之间的空间比例，可以提升用户的个性化使用体验。

4.设置卡片信息。
Service widget name：卡片的名称，卡片名称不能重复，且只能包含数字、字母和下划线。
Description：卡片的描述信息。
Enable Super Visual：是否选择低代码方式开发。
Language：界面开发语言，目前只支持 js。
Support dimensions：选择卡片的规格。部分卡片支持同时设置多种规格。 Ability name：选择一个挂靠服务卡片的 Page Ability，或者创建一个新的 Page Ability。 Module name：卡片所属的模块。

5.点击 Finish，完成卡片的创建之后，会天生如下文件。

• FA 模子项目
  

• Stage 模子项目
  
  
  
  

6.安装应用到装备上，在装备的桌面上长按应用图标，等候出现服务卡片字样，点击后选择必要的卡片尺寸，添加到屏幕。

卡片页面文件说明

JS 卡片页面通过 hml+css+json 开发

• index.hml 文件：
  卡片的显示页面，卡片上显示的数据及变乱均在 index.json 中界说，在 FormAbility.ts 中修改和处置惩罚。
  index.hml 中标签为 OpenHarmony 专用，目前支持 div、list、list-item、swiper、stack、image、text、span、progress、button（定制：chart 、clock、calendar）。hml 文件中可使用雷同 vue 的模板语法，支持{  {}},if,show,for 等。
  代码示例：
  

1. <div class="container">
2.       <stack >
3.           <div class="container-inner" onclick="routerPage" >
4.               <!-- $t('strings.temperature') 是从string.json资源文件中读取值-->
5.               <!-- temperature 是获取index.json文件的data中定义的变量 -->
6.               <text class="title" show="true">{
7.    {
8.     $t('strings.temperature') }}{
9.    {
10.    temperature}} ℃</text>
11.               <text class="title" onclick="onUpdateEvent">{
12.    {
13.     $t('strings.time') }} {
14.    {
15.    time}}</text>
16.           </div>
17.       </stack>
18.   </div>

复制代码

​

• index.css 文件：
  存放 index.hml 页面中使用的 css 样式。
  代码示例：
  

1. .container {
2.    
3.     flex-direction: column;
4.     justify-content: center;
5.     align-items: center;
6. }

复制代码

​

• index.json 文件：
  存放卡片页面 index.hml 中的变量及变乱。
  内部字段结构说明：
  data：存放的是 index.hml 中使用到的变量
  代码示例：
  

1. "data": {
2.    
3.     "temperature": "0",
4.     "time": "00:00:00"
5. }

复制代码

​

• actions: 存放的是 index.hml 中使用的变乱，有两种类型：router 和 message。
  router 类型变乱：用于卡片提供方进行跳转，需相应配置 abilityName 属性用于存放目标 Ability 名称。
  message 类型变乱：用于卡片与卡片提供方进行交互，会触发卡片生命周期中的 onEvent 方法。
  代码示例：
  

1. "actions": {
2.    
3.     "routerPage": {
4.    
5.         "action": "router",
6.         "abilityName": "ohos.samples.FormApplication.MainAbility",
7.         "params": {
8.    
9.             "message": "add detail"
10.         }
11.     },
12.     "onUpdateEvent": {
13.    
14.         "action": "message",
15.         "params": {
16.    
17.             "name" : "onUpdateEvent",
18.             "message": "add detail"
19.         }
20.     },
21. }

复制代码

​
卡片配置文件

Stage 模子下的卡片配置文件

module.json5
卡片必要在应用配置文件 module.json5 中的 extensionAbilities 标签下，配置 ExtensionAbility 相关信息。
内部字段结构说明：
    属性名称   寄义   数据类型   是否可缺省         name   表现 ExtensionAbility 的名字。   字符串   否       srcEntrance   表现 ExtensionAbility 所对应的生命周期代码的路径。   字符串   否       description   表现 ExtensionAbility 的描述。可以是表现描述内容的字符串，也可以是对描述内容的资源索引以支持多语言。   字符串   可缺省，缺省值为空。       icon   表现 ExtensionAbility 的图标资源文件的索引。   字符串   可缺省，缺省值为空。       label   表现 ExtensionAbility 的标签信息，即 ExtensionAbility 对外显示的笔墨描述信息。取值可以是描述性内容，也可以是标识 label 的资源索引。   字符串   可缺省，缺省值为空。       type   表现 ExtensionAbility 的类型，对于当前 FormExtensionAbility 的开发，必要将其配置为 form。   字符串   否       permissions   表现其他应用的 Ability 调用此 ExtensionAbility 时必要申请的权限。   字符串数组   可缺省，缺省值为空。       metadata   表现 ExtensionAbility 的元信息，用于描述 ExtensionAbility 的配置信息。   对象   可缺省，缺省值为空       uri   为当前 ExtensionAbility 提供的 uri 数据。   字符串   可缺省，缺省值为空。       readPermission   另一个应用程序的 ExtensionAbility 调用当前 ExtensionAbility 所需的读权限。   字符串   可缺省，缺省值为空。       writePermission   另一个应用程序的 ExtensionAbility 调用当前 ExtensionAbility 所需的写权限。   字符串   可缺省，缺省值为空。       visible   表明当前 ExtensionAbility 可否被其他应用调起。   布尔   false   对于 FormExtensionAbility 来说，必要填写 metadata 元信息标签，其中键名称为固定字符串"ohos.extension.form"，资源为卡片的具体配置信息的索引。
示例：

1. "extensionAbilities": [
2.    

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。