【学习打卡】Day8 鸿蒙开发者日服务卡片实验笔记

发布于 2021-8-5 22:49
浏览
1收藏

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

一、操作手册

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

二、环境说明

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

三、卡片的架构

【学习打卡】Day8 鸿蒙开发者日服务卡片实验笔记-开源基础软件社区
卡片管理服务包含以下模块:

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

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

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

手机端证书申请

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide_debug_device-0000001053822404
使用真机设备进行调试前,需要对HAP进行签名后进行调试。
【学习打卡】Day8 鸿蒙开发者日服务卡片实验笔记-开源基础软件社区

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

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

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

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

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

步骤:

  1. 菜单栏选择File > New > New Project来创建一个新工程(JS空项目)
    【学习打卡】Day8 鸿蒙开发者日服务卡片实验笔记-开源基础软件社区
    配置项目:
    【学习打卡】Day8 鸿蒙开发者日服务卡片实验笔记-开源基础软件社区

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

点击Finish

1.1 打开工程项目的json文件

【学习打卡】Day8 鸿蒙开发者日服务卡片实验笔记-开源基础软件社区
在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服务卡片的工程目录

【学习打卡】Day8 鸿蒙开发者日服务卡片实验笔记-开源基础软件社区

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

1.3 生命周期回调:

在config.json中配置有forms的Ability
【学习打卡】Day8 鸿蒙开发者日服务卡片实验笔记-开源基础软件社区
当卡片创建、删除、更新时,会执行相应的生命周期,需要实现生命周期函数,如MainAbility的onCreateForm()方法。
【学习打卡】Day8 鸿蒙开发者日服务卡片实验笔记-开源基础软件社区

1.4 编译与安装运行

远程模拟器:通过Tools –> Device Manager中启动远程模拟器 —> Debug运行
【学习打卡】Day8 鸿蒙开发者日服务卡片实验笔记-开源基础软件社区

1.5 修改默认数据

【学习打卡】Day8 鸿蒙开发者日服务卡片实验笔记-开源基础软件社区
再次编译运行

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

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

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

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

步骤:

  • 点击Create HarmonyOS Project–选择设备类型和模板–选择Empty Feature Ability(JS)—点击Next。
  • 填写项目相关信息,点击Finish。(Show in Service Center不要打开)
    【学习打卡】Day8 鸿蒙开发者日服务卡片实验笔记-开源基础软件社区

2.1 创建一个服务卡片

  • 右击项目的entry目录:New –> Service Widget,利用服务卡片模板创建一个多尺寸卡片
    【学习打卡】Day8 鸿蒙开发者日服务卡片实验笔记-开源基础软件社区
  • 此处的服务卡片模板选择Basic中的Image with Information,点“Next”进入下一步。
    【学习打卡】Day8 鸿蒙开发者日服务卡片实验笔记-开源基础软件社区
  • 配置服务卡片
    【学习打卡】Day8 鸿蒙开发者日服务卡片实验笔记-开源基础软件社区
    【学习打卡】Day8 鸿蒙开发者日服务卡片实验笔记-开源基础软件社区

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

2.2 在模拟器中运行

【学习打卡】Day8 鸿蒙开发者日服务卡片实验笔记-开源基础软件社区

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

在选择服务卡片模板时,需要选择“Advanced”,并且滚动到第二行模板,选择Music Player模板。Next进入下一步:
【学习打卡】Day8 鸿蒙开发者日服务卡片实验笔记-开源基础软件社区

此时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跳转事件:
【学习打卡】Day8 鸿蒙开发者日服务卡片实验笔记-开源基础软件社区

"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事件中
【学习打卡】Day8 鸿蒙开发者日服务卡片实验笔记-开源基础软件社区

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

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

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

已于2021-8-5 22:49:16修改
3
收藏 1
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐