| 为自己的鸿蒙应用增加卡片【鸿蒙专题08】 | 您所在的位置：网站首页 › 鸿蒙系统调整服务卡片大小 › 为自己的鸿蒙应用增加卡片【鸿蒙专题08】 |
为自己的鸿蒙应用增加卡片【鸿蒙专题08】
|
“作者：坚果 华为云享专家，InfoQ签约作者，阿里云专家博主，51CTO博客首席体验官，开源项目GVA成员之一，专注于大前端技术的分享，包括Flutter,小程序,安卓，VUE，JavaScript。” Java卡片开发在开始之前可以先看下这张图，我们不仅陷入思索，这种卡片是如何制作的，接下来我们就一探究竟，当然，由于我是刚开始做，所以布局这方面如果做的不好，还是希望大家见谅。  image-20220120213441454 在此之前，我们先来了解一下 什么是服务卡片服务卡片是FA的一种主要信息呈现形式，开发者可以在卡片中展示用户最关心的FA数据，并可以通过点击卡片内容直接打开FA。例如， 支付类FA，可以在服务卡片中展示付钱，收钱功能，点击就可以直接启动，支付类FA,天气类FA，可以在服务卡片中展示当前的基本天气信息，点击卡片启动天气FA，支持的尺寸包括：12、22、24和44。 服务卡片提供了多种类型的模板，开发者可以根据需要展示的信息类型灵活选择模板，快速构建服务卡片。 https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide_service_widget-0000001078566997 使用方面需要了解到的每个FA最多可以配置16张服务卡片。其实16张完全用不到，3.5个足以。JS卡片不支持调试。我在本文用的Java，但是你也要了解js相关的不是。创建服务卡片DevEco Studio提供服务卡片的一键创建功能，可以快速创建和生成服务卡片模板。 对于创建新工程，可以在工程向导中勾选“Show in service center”，该参数表示是否在服务中心露出，勾选该参数会同步创建服务卡片模板。如果Project type为Atomic service，则会同步创建一个2*2的服务卡片模板，同时还会创建入口卡片。如果Project type为Application，则只会创建一个2*2的服务卡片模板。 image-20220120223450648 卡片创建完成后，会在工程目录下生成EntryCard目录。  image-20220120223631423 在该目录下，每个拥有EntryCard的模块，都会生成一个和模块名相同的文件夹，同时还会默认生成一张2x2的快照型EntryCard图片（png格式）。 开发者可以将其替换为提前设计好的2x2快照图：将新的快照图拷贝到上图目录下，删除默认图片，新图片命名遵循格式“卡片名称-2x2.png”。 在已有工程中，新添加服务卡片，可以通过如下方法进行创建。打开一个工程，创建服务卡片，创建方法包括如下两种方式：选择模块（如entry模块）下的任意文件，点击菜单栏File > New > Service Widget创建服务卡片。选择模块（如entry模块）下的任意文件，点击右键 > New > Service Widget创建服务卡片。在Choose a Template for Your Service Widget界面中，选择卡片模板，点击Next。 说明如果选择带有Super Visual的卡片模板，则支持使用低代码进行开发，具体请参考使用低代码开发服务卡片。 img 在Configure Your Service Widget界面中，配置卡片的基本信息，包括： img Service widget name：卡片的名称，在同一个FA中，卡片名称不能重复，且只能包含数字、字母和下划线。Description：卡片的描述信息。**Module name：**卡片所属的模块。Select ability/New ability ：选择一个挂靠服务卡片的Page Ability，或者创建一个新的Page Ability。 说明 如果选择的Ability是继承AceAbility时，请参考JS卡片开发指导的步骤2进行修改。Type：卡片的开发语言类型。JS component name：Type选择JS时需要设置卡片的JS Component名称。Support dimensions：选择卡片的规格，同时还可以查看卡片的效果图预览。部分卡片支持同时设置多种规格。点击Finish完成卡片的创建。创建完成后，工具会自动创建出服务卡片的布局文件，并在config.json文件中写入服务卡片的属性字段，关于各字段的说明请参考应用配置文件说明。 点击放大 卡片创建完成后，请根据Java卡片开发指导或JS卡片开发指导，完成服务卡片的开发，详情请参考服务卡片开发指南。预览服务卡片在开发服务卡片过程中，支持对卡片进行实时预览。服务卡片通过XML或JS文件进行布局设计，在开发过程中，可以对布局XML/JS文件进行实时预览，只要在XML/JS布局文件中保存了修改的源代码，在预览器中就可以实时查看布局效果。在Phone和Tablet服务卡片的预览效果中，每个尺寸的服务卡片提供3种预览效果，分别为极窄（Minimum）、标准（Default）、极宽(Maximum)，开发者应确保三种尺寸的显示效果均正常，以便适应不同屏幕尺寸的设备。  image-20220120224435995 config.json文件"abilities"配置forms模块细节如下，各属性详情可见表1。 代码语言：javascript复制"forms": [ { "name": "Form_Java", "description": "form_description", "type": "Java", "colorMode": "auto", "isDefault": true, "updateEnabled": true, "scheduledUpdateTime": "10:30", "updateDuration": 1, "defaultDimension": "2*2", "formVisibleNotify": true, "supportDimensions": [ "1*2", "2*2", "2*4", "4*4" ], "landscapeLayouts": [ "$layout:form_ability_layout_1_2", "$layout:form_ability_layout_2_2", "$layout:form_ability_layout_2_4", "$layout:form_ability_layout_4_4" ], "portraitLayouts": [ "$layout:form_ability_layout_1_2", "$layout:form_ability_layout_2_2", "$layout:form_ability_layout_2_4", "$layout:form_ability_layout_4_4" ], "formConfigAbility": "ability://SecondFormAbility", "metaData": { "customizeData": [ { "name": "originWidgetName", "value": "com.huawei.weather.testWidget" } ] } } ]说明 "forms"模块中的name为卡片名，即在onCreateForm中根据AbilitySlice.PARAM_FORM_NAME_KEY可取到的值。 在卡片所在的"abilities"中还需要配置"visible": true和"formsEnabled": true。 参考文档 https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ability-service-widget-provider-java-0000001104082220 |
【本文地址】