目录

万能卡片生成

基于AI大模型理解开发者的卡片需求信息，通过对话式的交互智能生成HarmonyOS万能卡片工程。

使用约束

  1. 建议从以下维度描述卡片需求：

    序号

    建议描述维度

    说明

    举例

    1

    卡片用途

    卡片的用途/业务场景，比如电商购物、娱乐、生活服务类等。

    例如“电商购物卡片”、“娱乐类卡片”。

    2

    卡片功能

    卡片包含的组件，如图标、标题、按钮等。

    组件的状态信息，如图标主题、标题内容、按钮显示的文字等。

    例如“新品上市主标题”、“商品搜索按钮”、“热门电影子板块入口”等。

    3

    卡片尺寸

    HarmonyOS官网提供的四种卡片尺寸：1*2（微卡片）、2*2（小卡片）、2*4（中卡片）、4*4（大卡片）。

    卡片尺寸为非必选项，AI会根据前两个维度描述的信息，智能选择效果最佳的尺寸。

    例如“2*2尺寸的卡片”、“中卡片”等。
  2. 当前不支持在生成卡片预览图后，继续描述需求进行增量修改。

万能卡片生成

  1. 点击页面右侧菜单栏CodeGenie图标完成登录后，可以通过如下两种方式进入卡片生成窗口。在窗口输入万能卡片的需求，并点击发送，根据模型提示进行多轮交互，不断完善需求。

    • 在对话区域输入"/"调出命令，选择Service Widget。从DevEco Studio 6.1.0 Beta2版本开始不支持。
    • 在输入框左下角的下拉框选择Service Widget。DevEco Studio 6.0.1 Beta1版本新增。

  2. 需求描述完成后，可以根据提示信息进一步细化卡片尺寸、用途、展示元素等，以及预览卡片效果图。生成效果示例：

万能卡片保存

  1. 点击，可查看生成卡片的UI代码、配置信息和下载静态资源文件。
  2. 保存卡片工程有两种方式：

    方式一：使用代码/配置查看窗口的“复制”、“插入”或“创建文件”等按钮，手动保存卡片代码和配置信息。

    方式二：点击“保存工程”按钮，自动保存卡片工程，卡片代码、配置、静态资源文件等会自动保存到工程对应目录中。默认勾选保存逻辑代码，逻辑代码用于配置卡片事件及卡片数据等信息，具体请参考自定义配置逻辑代码。

    流程示例：

    工程保存完成后，工程中会新增如下卡片相关文件：

自定义配置逻辑代码

逻辑代码包含实现卡片数据交互和卡片事件两类。

[h2]目录结构

在module > src > main > ets 路径下， formcommon目录用于存放生成卡片的逻辑代码。

[h2]自定义配置卡片事件

1. 在FormAction.ets文件中，配置触发卡片router事件时具体的页面分发规则。

2. 在EntryAbility.ets文件的onWindowStageCreate方法中，会插入页面分发接口的调用，示例如下：

此接口默认插入到方法开头，开发者可根据当前工程onWindowStageCreate逻辑来将此接口移动至合适的位置，保证页面能正常跳转。