《作者：坚果华为云分享专家，签约作者，阿里云专家博主，博客首席体验官，开源项目GVA成员之一，专注于分享大前端技术，包括小程序、、VUE等》

Java卡开发

在开始之前，大家可以看一下这张图，我们不禁好奇这种卡片是怎么做出来的，接下来我们来看一下，当然，由于我才刚刚起步，如果排版做得不好还请大家多多包涵。

-

在此之前，我们先来了解一下

什么是服务卡？

服务卡片是FA中信息呈现的主要形式，开发者可以将用户最关注的FA数据展示在卡片中，用户点击卡片内容即可直接打开FA。例如：

支持的尺寸包括：12、22、24 和 44。

服务卡片提供丰富的模板，开发者可以根据需要展示的信息类型灵活选择模板，快速构建服务卡片。

关于制作服务卡你需要知道的事

提供服务卡一键创建功能，可以快速创建并生成服务卡模板。

-

卡片创建完成后会在项目目录下生成一个目录。

-

在此目录下会为每个模块生成一个与模块同名的文件夹，并默认生成一张2x2的快照图片（png格式）。

开发者可以将其替换为预先设计好的2x2快照图像：将新的快照图像复制到上述目录，删除默认图像，并以“卡牌名称-2x2.png”格式命名新图像。

打开项目，创建服务卡片。创建服务卡片有两种方式： 在“您的”界面，选择卡片模板，点击“下一步”。 注意：如果选择带有 的卡片模板，则可以使用低代码开发。具体操作请参见使用低代码开发服务卡片。

图片

在您的界面中，配置卡片的基本信息，包括：

图片

点击完成卡片创建，创建完成后工具会自动创建服务卡片的布局文件，并将服务卡片的属性字段写入.json文件中，各字段说明请参考应用配置文件的说明。

点击放大

卡片创建完成后，请按照Java卡片开发指南或JS卡片开发指南完成业务卡片的开发，具体请参见业务卡片开发指南。预览业务卡片

业务卡片开发过程中支持卡片实时预览。业务卡片通过XML或者JS文件设计，开发过程中可以实时预览布局XML/JS文件，只要在XML/JS布局文件中保存修改后的源代码，即可在预览器中实时查看布局效果。在业务卡片预览效果中，每种尺寸的业务卡片提供了3种预览效果，分别是超窄（）、标准（）、超宽（），开发者需保证三种尺寸的显示效果正常，以适配不同屏幕尺寸的设备。

-

.json文件的配置模块详情如下，各个属性的详情见表1。

代码语言：

复制

"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" } ] } } ]

阐明

“”模块中的名称为卡牌名称，也就是根据 可以获取到的值。

还需要在卡所在的“”中配置“”：true和“”：true。

参考文档