HarmonyOS鸿蒙NEXT中桌面卡片实现案例

HarmonyOS鸿蒙NEXT中桌面卡片实现案例 HarmonyOS Next应用开发案例（持续更新中……）

本案例完整代码，请访问：完整代码

介绍

桌面卡片是比较常见的功能，本案例详细列举了卡片开发的大部分功能，如使用postCardAction接口快速拉起卡片提供方应用的指定UIAbility，通过message事件刷新卡片内容等，为开发者提供了卡片功能的展示。

效果图预览

桌面卡片效果

使用说明

  1. 长按应用，添加卡片到桌面。
  2. 卡片内可滑动选择案例，点击可进入案例详情。
  3. 部分案例无详情页时，点击跳转到首页瀑布流。

实现思路

  1. 新建卡片
  2. 配置formconfig
  3. 编写卡片UI代码
  4. 触发刷新事件
  5. 触发点击事件

实现步骤

本例涉及的关键特性和实现方案如下：

  1. 新建卡片。右键点击entry目录，选择新建->Service Widget->Dynamic Widget，其中Dynamic Widget为动态卡片，Static Widget为静态卡片。此时会生成几个文件：配置文件form_config.json；卡片AbilityEntryFormAbility.ets；卡片组件WidgetCard.ets。

  2. 新建卡片后，根据需要（如卡片大小，刷新时间，动态静态卡片设置）配置form_config.json。

  3. 编写卡片UI代码。在主文件WidgetCard.ets中添加UI组件，需要注意的是：ArkTS卡片存在较多约束（如不支持导入共享包），较多逻辑不可在卡片中使用，在使用时需要根据文档进行操作。

  4. 编写跳转事件：当应用未被拉起时，点击某个卡片时跳转到具体的案例页面。在EntryAbility.ets中补充逻辑：onCreate生命周期内获取want.parameters.params判断卡片内容的跳转。

  5. 编写跳转事件：当应用在后台时，点击某个卡片时跳转到具体的案例页面。可从onNewWant生命周期获取want.parameters.params判断卡片内容的跳转。

  6. 具体跳转逻辑编写。在onWindowStageCreate生命周期内进行具体的跳转逻辑。

  7. 编写跳转事件：在EntryAbility.ets编写事件后，同时在接收案例参数的EntryView.ets内处理页面跳转逻辑。通过和DynamicsRouter内的数据对比，判断通过storage传入的页面是哪一个，然后执行pushUri跳转。

  8. 判断卡片大小：获取卡片详情，根据宽高比获取卡片的规格，不同规格显示内容不同。在EntryFormAbility.ets中补充点击卡片进入时查找对应案例的逻辑。在onAddForm生命周期内做卡片生成时，createFormBindingData方法传递属性。

  9. 编写刷新事件：当定时更新或定点更新触发时，需要更新卡片内容。onUpdateForm生命周期发生在定时更新/定点更新/卡片使用方主动请求更新时，在方法内增加获取案例数据的功能。

  10. 编写刷新事件：手动刷新内容时，需要更新卡片内容。onFormEvent生命周期发生在卡片主动通过postCardAction接口触发message事件。

  11. 编写刷新事件：参数传到卡片组件内，组件接收参数。处理WidgetCard.ets卡片内逻辑。卡片页面中使用LocalStorageProp装饰需要刷新的卡片数据。

高性能知识点

不涉及

参考资料


更多关于HarmonyOS鸿蒙NEXT中桌面卡片实现案例的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

大佬，第十条和第十一条的代码显示貌似有点问题，看着好别扭

更多关于HarmonyOS鸿蒙NEXT中桌面卡片实现案例的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙NEXT中，桌面卡片（Widget）的实现主要依赖于ArkUI框架。桌面卡片是用户在主屏幕上快速访问应用信息或功能的一种方式。实现桌面卡片的步骤如下：

  1. 创建卡片提供者（FormProvider）：卡片提供者是一个Ability，负责管理卡片的生命周期和数据更新。在config.json中配置卡片提供者的相关信息，包括卡片名称、尺寸、刷新频率等。

  2. 定义卡片布局：使用ArkUI的声明式UI语法定义卡片的布局。卡片布局通常使用@Component装饰器来定义组件，并通过build方法构建UI结构。布局文件可以使用XML或JSON格式。

  3. 卡片数据绑定：通过@State、@Prop等装饰器实现数据与UI的绑定。卡片的数据可以通过FormProvider从后台服务或本地存储中获取，并实时更新到UI上。

  4. 卡片事件处理：卡片可以响应点击、滑动等用户交互事件。通过@Watch装饰器监听数据变化，并在事件触发时执行相应的逻辑，如跳转到应用内特定页面或更新卡片内容。

  5. 卡片发布与更新：卡片提供者通过FormManager发布卡片实例，并可以通过updateForm方法更新卡片数据。卡片的更新可以基于时间、事件或用户交互触发。

  6. 卡片权限管理：在config.json中声明卡片所需的权限，如网络访问、存储读写等。确保卡片在运行时能够正常获取所需资源。

通过以上步骤，开发者可以在HarmonyOS鸿蒙NEXT中实现功能丰富、交互灵活的桌面卡片，提升用户体验。

在HarmonyOS鸿蒙NEXT中，桌面卡片（Widget）的实现主要依赖于FormAbility和FormProvider。以下是一个简单的实现步骤：

  1. 创建FormAbility：继承Ability类，实现卡片的生命周期管理。
  2. 配置卡片信息：在config.json中定义卡片的尺寸、更新频率等元数据。
  3. 实现FormProvider：通过FormProvider类提供卡片的UI和数据更新逻辑。
  4. 渲染卡片：使用ArkUI框架（如JS UI）编写卡片的布局和样式。
  5. 数据绑定：通过FormBindingData实现卡片数据的动态更新。
  6. 发布卡片：将卡片发布到桌面，用户可长按桌面添加。

示例代码片段：

// FormAbility.js
export default class FormAbility extends Ability {
    onCreate(want) {
        console.log('FormAbility onCreate');
    }
}

// FormProvider.js
export default class FormProvider extends FormProvider {
    onUpdate(formId) {
        let obj = {
            "title": "Hello World",
            "content": "This is a HarmonyOS widget."
        };
        let formBindingData = new FormBindingData(obj);
        this.updateForm(formId, formBindingData);
    }
}

通过以上步骤，开发者可以实现一个简单的桌面卡片，并在HarmonyOS桌面上展示动态内容。

回到顶部