# codelab

**Repository Path**: g00823339/codelab

## Basic Information

- **Project Name**: codelab
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-19
- **Last Updated**: 2025-06-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 高级卡片控件开发与应用
## 1. 任务介绍
### 高级卡片控件简介
在需要展示内容（标题、描述、图片、应用信息）并在点击后跳转至对应来源时，可以使用内容卡片快速的展示信息。开发者只需要调用[ContentFormCard](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkdata/js-apis-data-UdmfComponents.md#contentformcard)接口，传入[ContentForm](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkdata/js-apis-data-uniformDataStruct.md#contentform14)数据、卡片宽高、点击事件回调函数即可获得良好的展示效果。

### 本篇Codelab将实现的内容
- 利用ContentFormCard进行卡片内容的跨应用/跨设备交互。

## 2. 环境准备
### 2.1 硬件要求
- 1或2台华为MatePad/华为手机

### 2.2 工具下载
- [DevEcoStudio](https://cmc-szver-artifactory.cmc.tools.huawei.com/artifactory/cmc-sz-inner/DevEco%20Developer%20Suite/DevEco%20Developer%20Suite%206.0/DevEco%20Studio%206.0.0.417SP6/dev/deveco-studio-6.0.0.417SP6.win.zip?_t=1750400017680&artifact_signature=eyJ0eXAiOiJhcnRpZmFjdF90b2tlbiIsImFsZyI6IlJTMzg0In0.eyJzdWIiOiJnMDA4MjMzMzkiLCJzY3AiOiJiYSw1Iiwic3JjIjoiYjYzODgxODJlMmU1YzM5Yzk4YzBhYWVjZTZjYmFkYjFjYWIxODIzYSIsImlzcyI6IkFydGlmYWN0Q21jXzAyIiwiYWN0aW9uIjpbInIiXSwiZXhwIjoxNzUwNDAwMzE3LCJkaXNwIjoidHJ1ZSIsImlhdCI6MTc1MDQwMDAxNywidGlkIjoiNzBlZjdhZTctYmJjNC00NzBjLWI5NmUtOGNiN2VmZjdjODU0In0.qCi7tgscNoyaz75W8fViOU_L6dZGk_xrO5Zc8YKo6UNKk2EqtYaxByxWRmLVC-ZNv5zpAodrKPDYcZPQQvLFUuyqsdT4xaU_tLDvHkQ72wxkREVMu1dIScIsrSdQxaj0haZqJUWlM1SwLgSyo__h3JD2FdR-sb7186SGaOooiiZ1WxUHRh6SEsFcWdQZFWS48C_hOqxoXvModIcdyvC1Yvs5bfpELxRCkpbAGkgvemdODvWq1f6kMfIvbt35C_4Cp9pz42jKUTjWVZZLpJL56NoktmzMAW1lyjj6PE1_UVA6h7pKSQ8SHoeP3q0Dp6toXy5HXr6VmggHXIZVouWaa-0j4X06Pcw_RLB_gNMXaf6x-cAyH1LTum6EY0k69e-jmZ_UWStvOOoX_9JBL-7MXVfy7xll1XO8hPsgGVbRREcmqCosYRtmVCXgNcOgsHEuCq91WPe1sH7MW3S0_5U36ALKWY-hYdgXU3m0dXIocUVSNlh6jZj2DVRMj-oMFWMi)
- [SDK](https://cmc-szver-artifactory.cmc.tools.huawei.com/artifactory/cmc-software-release/HarmonyOS%206.0/HarmonyOS%206.0%20V100R001/HarmonyOS%20SDK%206.0.0.35(SP39)/cmc/Software/full/harmonyos-next-beta1-windows-full.zip?_t=1750400071677&artifact_signature=eyJ0eXAiOiJhcnRpZmFjdF90b2tlbiIsImFsZyI6IlJTMzg0In0.eyJzdWIiOiJnMDA4MjMzMzkiLCJzY3AiOiJhNyw3Iiwic3JjIjoiYjYzODgxODJlMmU1YzM5Yzk4YzBhYWVjZTZjYmFkYjFjYWIxODIzYSIsImlzcyI6IkFydGlmYWN0Q21jXzAyIiwiYWN0aW9uIjpbInIiXSwiZXhwIjoxNzUwNDAwMzcxLCJkaXNwIjoidHJ1ZSIsImlhdCI6MTc1MDQwMDA3MSwidGlkIjoiZmY1NTExNTEtOGM4MS00Njg5LTgyZDMtYTMxMTVjNmY5Yzg1In0.MsDtngG--DppB7GAv06IXO-XpE2XhaGs2ywVGHiQsQSL8wSxbBJ1rrBsaoKWYwrIX3g-DjUmxIiYmP7wDK5jYT7ObPkY-Gd6VsOKiNNidSPrRPgTEwvOblfBiX0G5n3MS9WeabOubtRNls1TLN_nfss8R-0MXExUkYl8WtoS2OIJJqzTZ37J44Yo-Z4BfZjjkm1D2IEWdKzGjj3d2lGKtRizB3nMXAd9KB52lUdHcQP4MFpF257RQFDo-I__RBgYR8YzDwDAYOiLTz1R9oKAYtvGYMFHw27X435H4xYK7OmhKd0BRbTNgHa7KK-TyVIutKjwsM4Wj7uvmqH1k3dOGfQPdu3swn4kj73YAG9UCyoBcig8ZpERA2gS-PScO8k7TwV9GOv1CeO8wMSxksDMBhZveJ0hRx0ZU3lYUXCqpNkMQt6cXRA6aKnFuBvvp63fqEN0wr9zR_k5tZQRGia2_xI2WosuzRifHZ0h2vX5q46STAYrNZBWdJlpkSwJL6DC)

## 3. 开发适配
### 3.1 涉及修改的文件
```
contentfromsrc/entry/src/main/ets/pages/Index.ets
```

### 3.2 修改内容
a. 构造函数说明

跨应用/跨设备传输时，传输的是UnifiedData对象，UnifiedData对象的构造方法如下：
```
/**
 * Create a empty unified data.
 *
 * @syscap SystemCapability.DistributedDataManager.UDMF.Core
 * @crossplatform
 * @atomicservice
 * @since 14
 */
constructor();
```

b. addRecord接口说明

addRecord接口可以将UnifiedRecord对象存入UnifiedData对象中，接口定义及参数解释如下：
```
/**
 * Add a record into unified data
 *
 * @param { UnifiedRecord } record - Record will add into unified data.
 * @throws { BusinessError } 401 - Parameter error. Possible causes:1.Mandatory parameters are left unspecified;
 * <br>2.Incorrect parameters types.
 * @syscap SystemCapability.DistributedDataManager.UDMF.Core
 * @crossplatform
 * @atomicservice
 * @since 14
 */
addRecord(record: UnifiedRecord): void;
```

c. ContentForm结构

ContentForm是跨应用/跨设备传输卡片时的主要内容，包含数据类型、描述、标题等。
```
/**
 * Uniform data type, which has a fixed value of general.content-form.
 *
 * @interface ContentForm
 * @syscap SystemCapability.DistributedDataManager.UDMF.Core
 * @since 14
 */
interface ContentForm {
    /**
     * Indicates the uniform data type of this data struct.
     *
     * @type { 'general.content-form' }
     * @readonly
     * @syscap SystemCapability.DistributedDataManager.UDMF.Core
     * @since 14
     */
    readonly uniformDataType: 'general.content-form';
    /**
     * Indicates the thumb data of content form.
     *
     * @type { Uint8Array }
     * @syscap SystemCapability.DistributedDataManager.UDMF.Core
     * @since 14
     */
    thumbData?: Uint8Array;
    /**
     * Indicates the description of content form.
     *
     * @type { string }
     * @syscap SystemCapability.DistributedDataManager.UDMF.Core
     * @since 14
     */
    description?: string;
    /**
     * Indicates the title of content form.
     *
     * @type { string }
     * @syscap SystemCapability.DistributedDataManager.UDMF.Core
     * @since 14
     */
    title: string;
    /**
     * Indicates the app icon of content form.
     *
     * @type { Uint8Array }
     * @syscap SystemCapability.DistributedDataManager.UDMF.Core
     * @since 14
     */
    appIcon?: Uint8Array;
    /**
     * Indicates the app name of content form.
     *
     * @type { appName }
     * @syscap SystemCapability.DistributedDataManager.UDMF.Core
     * @since 14
     */
    appName?: string;
    /**
     * Indicates the link url of content form.
     *
     * @type { linkUri }
     * @syscap SystemCapability.DistributedDataManager.UDMF.Core
     * @since 14
     */
    linkUri?: string;
}
```

- 使用示例：
```
import { unifiedDataChannel, uniformDataStruct } from '@kit.ArkData';
let unifiedData = new unifiedDataChannel.UnifiedData();
let contentFormRecord = new unifiedDataChannel.UnifiedRecord();
unifiedData.addRecord(contentFormRecord);
```

## 4. 调试
使用数据线连接开发机与鸿蒙PC/手机设备后（需连接鸿蒙PC设备右侧type-C接口），并运行，正常安装后，设备上将自动打开安装的应用。

## 5. 效果演示
成功将发送端的卡片传递给接收端，并且可以点击接收端卡片打开超链接，那么你就成功了！
![alt text](screenShot_20250620_145550.jpeg)