鸿蒙开发:简单实现一个服务卡片

简介: form_config配置文件里面可选的属性非常之多,以上的表格,并未列举全面,大家在写的时候,一定要去官方文档进行查阅。

前言


本文基于Api13


上篇文章,我们简单了解了服务卡片的相关知识,那么这篇文章,我们就从0到1实现一个服务卡片。


创建卡片


创建卡片很简单,可以在Application或者在元服务中,在你的主模块下,任意的文件下进行右键,选择New->Service Widget,选择你要实现静态或者动态卡片,这里,大家不用纠结,因为在创建完成之后,我们可以在form_config.json配置文件中,通过isDynamic参数修改卡片类型,为空或者true,则是动态卡片,false则为静态卡片,所以,在这里,你选择哪一个都没问题。



目前静态提供了5个模版,动态提供了4个,大家可以根据实际的业务需求,选择其中一个即可。



选择好一个模版之后,就进入到了如下的页面,也就是服务卡片的配置页面,从上到下分别为,Service widget name:服务卡片的名字;Display name,卡片显示的名字;description:卡片的描述信息;Language:开发语言,这里建议ArkTs;supportDimensions:卡片支持的外观规,1 * 2:表示1行2列的二宫格,以此类推;Ability name:卡片生命周期管理文件。



配置填完之后,点击底部的Finish,我们就完成了一个默认的服务卡片,可以直接运行,运行之后,长按桌面图标后,就会显示卡片的选项:



点击卡片后,就会展示出默认的卡片UI,我们可以点击添加至桌面:



这样就会在桌面上显示我们刚才创建的服务卡片:


卡片目录结构


创建完之后,会在我们原有的项目中生成如下文件,首先是entryformability包下的EntryFormAbility文件,它是卡片扩展模块,主要提供卡片创建、销毁、刷新等生命周期回调;widget包的pages下的WidgetCard,主要是基于ArkUI提供卡片UI开发能力;resources下的form_config.json配置文件,主要用于配置WidgetCard相关信息。


主要文件介绍


一个卡片的配置,主要是通过三个文件,也就是上面目录结构中的EntryFormAbility文件、WidgetCard文件和form_config.json配置文件,我们逐一进行分析一下:


EntryFormAbility文件


主要是卡片扩展模块,提供卡片创建、销毁、刷新等生命周期回调,继承于FormExtensionAbility,源码如下:


export default class EntryFormAbility extends FormExtensionAbility {
  onAddForm(want: Want) {
    // Called to return a FormBindingData object.
    const formData = '';
    return formBindingData.createFormBindingData(formData);
  }
  onCastToNormalForm(formId: string) {
    // Called when the form provider is notified that a temporary form is successfully
    // converted to a normal form.
  }
  onUpdateForm(formId: string) {
    // Called to notify the form provider to update a specified form.
  }
  onFormEvent(formId: string, message: string) {
    // Called when a specified message event defined by the form provider is triggered.
  }
  onRemoveForm(formId: string) {
    // Called to notify the form provider that a specified form has been destroyed.
  }
  onAcquireFormState(want: Want) {
    // Called to return a {@link FormState} object.
    return formInfo.FormState.READY;
  }
}


onAddForm:卡片提供方接收创建卡片的通知接口,formBindingData.FormBindingData对象,是卡片要显示的数据;onCastToNormalForm:卡片提供方接收临时卡片转常态卡片的通知接口;onUpdateForm:卡片提供方接收携带参数的更新卡片的通知接口,获取最新数据后调用formProvider的updateForm接口刷新卡片数据;onFormEvent:卡片提供方接收处理卡片事件的通知接口;onRemoveForm:卡片提供方接收销毁卡片的通知接口;onAcquireFormState:卡片提供方接收查询卡片状态通知接口,默认返回卡片初始状态(该方法可以选择性重写)。


WidgetCard文件


主要是卡片UI视图,可以在这里对卡片进行绘制,支持声明式范式的部分组件、事件、动效、数据管理、状态管理能力,在使用的时候,可以查看官方Api中是否标记了“卡片能力”的标记,如果标记了,证明是可以在ArkTS卡片中使用。



form_config.json配置文件


form_config配置文件,就是服务卡片配置填的那些信息,如下所示:


{
  "forms": [
    {
      "name": "widget",
      "displayName": "$string:widget_display_name",
      "description": "$string:widget_desc",
      "src": "./ets/widget/pages/WidgetCard.ets",
      "uiSyntax": "arkts",
      "window": {
        "designWidth": 720,
        "autoDesignWidth": true
      },
      "colorMode": "auto",
      "isDynamic": true,
      "isDefault": true,
      "updateEnabled": false,
      "scheduledUpdateTime": "10:30",
      "updateDuration": 1,
      "defaultDimension": "2*2",
      "supportDimensions": [
        "2*2"
      ]
    }
  ]
}

各个字段概述如下:

相关总结

form_config配置文件里面可选的属性非常之多,以上的表格,并未列举全面,大家在写的时候,一定要去官方文档进行查阅。


本文标签:HarmonyOS/服务卡片,参考资料:官方文档之服务卡片指导。

相关文章
|
9月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
仓颉语言实战分享,教你如何用仓颉开发外卖App界面。内容包括页面布局、导航栏自定义、搜索框实现、列表模块构建等,附完整代码示例。轻松掌握Scroll、List等组件使用技巧,提升HarmonyOS应用开发能力。
|
8月前
|
安全 JavaScript API
鸿蒙开发核心要素
鸿蒙开发核心要素
|
5月前
|
移动开发 前端开发 Android开发
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
973 12
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
5月前
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
781 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
5月前
|
移动开发 Rust JavaScript
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
976 4
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
9月前
|
存储 IDE 定位技术
【HarmonyOS 5】鸿蒙组件&模板服务详解 - 助力高效开发的利器
在移动应用开发领域,效率与质量始终是开发者追求的核心目标。鸿蒙系统作为新兴的操作系统,为开发者提供了丰富且强大的开发资源,其中鸿蒙组件&模板服务更是成为开发者快速构建高质量应用的得力助手。
324 0
HarmonyOS NEXT仓颉开发语言实战案例:电影App
周末好!本文分享使用仓颉语言重构ArkTS实现的电影App案例,对比两者在UI布局、组件写法及语法差异。内容包括页面结构、列表分组、分类切换与电影展示等。通过代码演示仓颉在HarmonyOS开发中的应用。##仓颉##ArkTS##HarmonyOS开发
|
9月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:健身App
本期分享一个健身App首页的布局实现,顶部采用Stack容器实现重叠背景与偏移效果,列表部分使用List结合Scroll实现可滚动内容。代码结构清晰,适合学习HarmonyOS布局技巧。
HarmonyOS NEXT仓颉开发语言实战案例:小而美的旅行App
本文分享了一个旅行App首页的设计与实现,使用List容器搭配Row、Column布局完成个人信息、功能列表及推荐模块的排版,详细展示了HarmonyOS下的界面构建技巧。
|
6月前
|
存储 缓存 5G
鸿蒙 HarmonyOS NEXT端云一体化开发-云存储篇
本文介绍用户登录后获取昵称、头像的方法,包括通过云端API和AppStorage两种方式,并实现上传头像至云存储及更新用户信息。同时解决图片缓存问题,添加上传进度提示,支持自动登录判断,提升用户体验。
281 1

热门文章

最新文章