• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# JS卡片概述
2<!--Kit: Form Kit-->
3<!--Subsystem: Ability-->
4<!--Owner: @cx983299475-->
5<!--Designer: @xueyulong-->
6<!--Tester: @chenmingze-->
7<!--Adviser: @Brilliantry_Rui-->
8
9JS卡片是使用类Web范式（HML+CSS+JSON）开发页面的卡片，现在已经支持FA模型和Stage模型两种[应用模型](../application-models/application-models.md)。开发指导请参见[JS卡片开发指导（Stage模型）](js-ui-widget-development.md)和[JS卡片开发指导（FA模型）](widget-development-fa.md)。在开发新卡片时，推荐采用ArkTS声明式来构建UI，声明式和类web范式差异点可参考[ArkUI简介](../ui/arkui-overview.md)。
10
11## 实现原理
12
13JS卡片实现原理如图1所示。
14
15**图1** JS卡片实现原理
16
17![JSCardPrinciple](figures/JSCardPrinciple.png)
18
19卡片使用方包含以下模块：
20
21- 卡片使用：包含卡片的创建、删除、请求更新等操作。
22
23- 通信适配层：由OpenHarmony SDK提供，负责与卡片管理服务通信，用于将卡片的相关操作指令发送到卡片管理服务。
24
25卡片管理服务包含以下模块：
26
27- 周期性刷新：在卡片添加后，根据卡片的刷新策略启动定时任务周期性触发卡片的刷新。
28
29- 卡片缓存管理：在卡片添加到卡片管理服务后，对卡片的视图信息进行缓存，以便下次获取卡片时可以直接返回缓存数据，降低时延。
30
31- 卡片生命周期管理：对于卡片切换到后台或者被遮挡时，暂停卡片的刷新；以及卡片的升级/卸载场景下对卡片数据的更新和清理。
32
33- 卡片使用方对象管理：对卡片使用方的RPC对象进行管理，用于使用方请求进行校验以及对卡片更新后的回调处理。
34
35- 通信适配层：负责与卡片使用方和提供方进行RPC通信。
36
37卡片提供方包含以下模块：
38
39- 卡片服务：由卡片提供方开发者实现，开发者实现生命周期处理创建卡片、更新卡片以及删除卡片等请求，提供相应的卡片服务。
40
41- 卡片提供方实例管理模块：由卡片提供方开发者实现，负责对卡片管理服务分配的卡片实例进行持久化管理。
42
43- 通信适配层：由OpenHarmony SDK提供，负责与卡片管理服务通信，用于将卡片的更新数据主动推送到卡片管理服务。
44
45> **说明：**
46>
47> 实际开发时只需要作为卡片提供方进行卡片内容的开发，卡片使用方和卡片管理服务由系统自动处理。
48
49