以下内容均学习自：鸿蒙开发者日杭州站下午的日服务卡片实验的操作文档

一、操作手册

链接：https://pan.baidu.com/s/1u8IPZNnxloSeNFLREi9dmg
提取码：zrtk
–来自百度网盘超级会员V4的分享

二、环境说明

1. 开发平台：Win10
2. 已经安装好了DevEco Studio
3. 真机：昨天买的华为Mate40 Pro+，并且第一时间升级到了鸿蒙2.0

三、卡片的架构

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

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

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

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

手机端证书申请

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide_debug_device-0000001053822404
使用真机设备进行调试前，需要对HAP进行签名后进行调试。

通过DevEco Studio自动化签名的方式对应用进行签名

进入File > Project Structure > Project > Signing Configs界面，点击“Sign In”按钮进行登录

1. 演练场景一：第一个服务卡片。

核心要点：服务卡片工程创建，生命周期，编译运行等，桌面入口
任务说明:

1. 创建一个携带服务卡片的HarmonyOS应用工程
2. 在模拟机上运行HarmonyOS应用，并在模拟器上操作呼出服务卡片。
3. 改变服务卡片显示的文本。（自由发挥）

步骤：

1. 菜单栏选择File > New > New Project来创建一个新工程（JS空项目）
   
   配置项目:
   

打开Show in Service Center开关，可以自动创建服务卡片。

点击Finish

1.1 打开工程项目的json文件

在abilities的json配置中，配置了forms属性值

"forms": [
          {
            "jsComponentName": "widget",
            "isDefault": true,
            "scheduledUpdateTime": "10:30",
            "defaultDimension": "2*2",
            "name": "widget",
            "description": "This is a service widget",
            "colorMode": "auto",
            "type": "JS",
            "supportDimensions": [
              "2*2"
            ],
            "updateEnabled": true,
            "updateDuration": 1
          }
        ],

• forms配置在哪个Ability上，服务卡片生命周期回调方法就会在哪个Ability上回调执行。
• formsEnable的值若设置为true，则表示该Ability支持服务卡片显示。
• forms的值是一个json 数组，表示可配置多张服务卡片。
• jsComponentName是JS服务卡片名字，仅JS服务卡片上需要配置（Java卡片不需要配置），其名字需要和js配置的name一致，表示js组件实例。
• isDefault为true表示该卡片是一个默认卡片。Ability可以配置多张服务卡片，其中仅有一张是默认卡片，即在图标上滑呼出的卡片。
• scheduledUpdateTime表示卡片定时/定点触发更新的时间。
• defaultDimension表示默认卡片的尺寸是22，其他的可选12,24,44尺寸。对于需要在服务中心露出的卡片，默认规格必须设置成2*2。
• type表示服务卡片类型，有JS和Java两种，本次配置选择为JS。
• updateDuration表示服务卡片刷新的时间间隔，以30min作为单位，1表示30min，2表示1个小时，以此类推。

1.2 JS服务卡片的工程目录

• common目录主要存放公共资源；
• i18n目录是存放国际化资源；
• pages.index目录存放服务卡片界面开发主要文件，里面采用hml+css+json文件组合，构成JS服务卡片界面。

1.3 生命周期回调：

在config.json中配置有forms的Ability

当卡片创建、删除、更新时，会执行相应的生命周期，需要实现生命周期函数，如MainAbility的onCreateForm()方法。

1.4 编译与安装运行

远程模拟器：通过Tools –> Device Manager中启动远程模拟器 —> Debug运行

1.5 修改默认数据

再次编译运行

2. 演练场景二：多尺寸卡片的原子化服务程序。

核心要点：卡片UI开发，卡片尺寸配置，服务中心入口，服务卡片模板

任务：
• 创建一个具有多个尺寸的服务卡片，默认卡片尺寸是2*2
• 创建多张卡片，并设置其中一张卡片为默认卡片。
• 实现卡片跳转、卡片内响应的卡片交互。

思路：首先创建一个HarmonyOS应用工程，利用服务卡片模板添加一张具有多尺寸的卡片，再利用卡片模块添加一张新的功能卡片。用已经创建好的模板代码进行界面修改和实现界面交互

步骤：

• 点击Create HarmonyOS Project–选择设备类型和模板–选择Empty Feature Ability(JS)—点击Next。
• 填写项目相关信息，点击Finish。（Show in Service Center不要打开)
  

2.1 创建一个服务卡片

• 右击项目的entry目录：New –> Service Widget，利用服务卡片模板创建一个多尺寸卡片
  
• 此处的服务卡片模板选择Basic中的Image with Information，点“Next”进入下一步。
  
• 配置服务卡片
  
  

Service Widget Name：卡片的名称
Description：卡片的描述，主要描述卡片的功能
在Select Ability/New Ability中选择一个或者创建一个Ability，此Ability用于服务卡片的生命周期函数回调。
JS Component Name表示JS卡片的实例名称，该名称和工程目录对应。
Support Dimensions表示支持的服务卡片尺寸，多尺寸卡片可以选择多尺寸。

2.2 在模拟器中运行

2.3 新增其他功能的服务卡片

在选择服务卡片模板时，需要选择“Advanced”，并且滚动到第二行模板，选择Music Player模板。Next进入下一步：

此时config.json中就出现2个卡片配置:

• 将widget1卡片的isDefault的配置修改为true，同时修改widget卡片的配置为false。（注：一个应用只能有一个默认卡片）

"forms": [
          {
            "jsComponentName": "widget",
            "isDefault": false,
            "scheduledUpdateTime": "10:30",
            "defaultDimension": "2*2",
            "name": "widget",
            "description": "This is a service widget",
            "colorMode": "auto",
            "type": "JS",
            "supportDimensions": [
              "1*2",
              "2*2",
              "2*4",
              "4*4"
            ],
            "updateEnabled": true,
            "updateDuration": 1
          },
          {
            "jsComponentName": "widget1",
            "isDefault": true,
            "scheduledUpdateTime": "10:30",
            "defaultDimension": "2*4",
            "name": "widget1",
            "description": "This is a service widget",
            "colorMode": "auto",
            "type": "JS",
            "supportDimensions": [
              "2*4"
            ],
            "updateEnabled": true,
            "updateDuration": 1
          }
        ]

编译运行，呼出服务卡片

2.4 实现界面交互

在widget1/pages/index/index.json中配置action跳转事件：

"actions": {
    "enterDetail": {
      "action": "router",
      "abilityName": "com.example.mysecondcard.MainAbility"
    },
    "getDetail": {
      "action": "message",
      "params": {
        "mAction": "get_detail_info"
      }
    },

• “enterDetail”是自定义名称
• 跳转的action必须是“router”
• abilityName是要跳转过去的ability的完整包名和类名，可以在config.json中拷贝过来。

在widget1/pages/index/index.hml中配置响应的控件：将“enterDetail”填入on:click事件中

<div class="card_root_layout" onclick="enterDetail">

编译运行—点击卡片，可以进入MainAbility界面：

第三个实验好像遇到了些问题，打算从头再走一遍