HarmonyOS4.0系统性深入开发07创建一个ArkTS卡片

news2025/1/20 18:33:43

创建一个ArkTS卡片

在已有的应用工程中,创建ArkTS卡片,具体操作方式如下。

  1. 创建卡片。

    img

  2. 根据实际业务场景,选择一个卡片模板。

    img

  3. 在选择卡片的开发语言类型(Language)时,选择ArkTS选项,然后单击“Finish”,即可完成ArkTS卡片创建。

    img

ArkTS卡片创建完成后,工程中会新增如下卡片相关文件:卡片生命周期管理文件(EntryFormAbility.ts)、卡片页面文件(WidgetCard.ets)和卡片配置文件(form_config.json)。

img

配置卡片的配置文件

卡片相关的配置文件主要包含FormExtensionAbility的配置和卡片的配置两部分:

  1. 卡片需要在module.json5配置文件中的extensionAbilities标签下,配置FormExtensionAbility相关信息。FormExtensionAbility需要填写metadata元信息标签,其中键名称为固定字符串“ohos.extension.form”,资源为卡片的具体配置信息的索引。

    配置示例如下:

    {
      "module": {
        ...
        "extensionAbilities": [
          {
            "name": "EntryFormAbility",
            "srcEntrance": "./ets/entryformability/EntryFormAbility.ts",
            "label": "$string:EntryFormAbility_label",
            "description": "$string:EntryFormAbility_desc",
            "type": "form",
            "metadata": [
              {
                "name": "ohos.extension.form",
                "resource": "$profile:form_config"
              }
            ]
          }
        ]
      }
    }
    
  2. 卡片的具体配置信息。在上述FormExtensionAbility的元信息(“metadata”配置项)中,可以指定卡片具体配置信息的资源索引。例如当resource指定为$profile:form_config时,会使用开发视图的resources/base/profile/目录下的form_config.json作为卡片profile配置文件。内部字段结构说明如下表所示。

    表1 卡片form_config.json配置文件

    属性名称含义数据类型是否可缺省
    name表示卡片的类名,字符串最大长度为127字节。字符串
    description表示卡片的描述。取值可以是描述性内容,也可以是对描述性内容的资源索引,以支持多语言。字符串最大长度为255字节。该属性将显示在卡片预览界面上,以便用户识别不同卡片。字符串可缺省,缺省为空。
    src表示卡片对应的UI代码的完整路径。当为ArkTS卡片时,完整路径需要包含卡片文件的后缀,如:“./ets/widget/pages/WidgetCard.ets”。当为JS卡片时,完整路径无需包含卡片文件的后缀,如:“./js/widget/pages/WidgetCard”字符串
    uiSyntax表示该卡片的类型,当前支持如下两种类型:- arkts:当前卡片为ArkTS卡片。- hml:当前卡片为JS卡片。字符串可缺省,缺省值为hml
    window用于定义与显示窗口相关的配置。对象可缺省
    isDefault表示该卡片是否为默认卡片,每个UIAbility有且只有一个默认卡片。- true:默认卡片。- false:非默认卡片。布尔值
    colorMode表示卡片的主题样式,取值范围如下:- auto:自适应。- dark:深色主题。- light:浅色主题。字符串可缺省,缺省值为“auto”。
    supportDimensions表示卡片支持的外观规格,取值范围:- 1 * 2:表示1行2列的二宫格。- 2 * 2:表示2行2列的四宫格。- 2 * 4:表示2行4列的八宫格。- 4 * 4:表示4行4列的十六宫格。字符串数组
    defaultDimension表示卡片的默认外观规格,取值必须在该卡片supportDimensions配置的列表中。字符串
    updateEnabled表示卡片是否支持周期性刷新(包含定时刷新和定点刷新),取值范围:- true:表示支持周期性刷新,可以在定时刷新(updateDuration)和定点刷新(scheduledUpdateTime)两种方式任选其一,当两者同时配置时,定时刷新优先生效。- false:表示不支持周期性刷新。布尔类型
    scheduledUpdateTime表示卡片的定点刷新的时刻,采用24小时制,精确到分钟。> 说明:> updateDuration参数优先级高于scheduledUpdateTime,两者同时配置时,以updateDuration配置的刷新时间为准。字符串可缺省,缺省时不进行定点刷新。
    updateDuration表示卡片定时刷新的更新周期,单位为30分钟,取值为自然数。当取值为0时,表示该参数不生效。当取值为正整数N时,表示刷新周期为30*N分钟。> 说明:> updateDuration参数优先级高于scheduledUpdateTime,两者同时配置时,以updateDuration配置的刷新时间为准。数值可缺省,缺省值为“0”。
    formConfigAbility表示卡片的配置跳转链接,采用URI格式。字符串可缺省,缺省值为空。
    formVisibleNotify标识是否允许卡片使用卡片可见性通知。字符串可缺省,缺省值为空。
    metadata表示卡片的自定义信息,包含customizeData数组标签。对象可缺省,缺省值为空。

    配置示例如下:

    {
      "forms": [
        {
          "name": "widget",
          "description": "This is a service widget.",
          "src": "./ets/widget/pages/WidgetCard.ets",
          "uiSyntax": "arkts",
          "window": {
            "designWidth": 720,
            "autoDesignWidth": true
          },
          "colorMode": "auto",
          "isDefault": true,
          "updateEnabled": true,
          "scheduledUpdateTime": "10:30",
          "updateDuration": 1,
          "defaultDimension": "2*2",
          "supportDimensions": [
            "2*2"
          ]
        }
      ]
    }
    

卡片生命周期管理

创建ArkTS卡片,需实现FormExtensionAbility生命周期接口。

  1. 在EntryFormAbility.ts中,导入相关模块。

    import formInfo from '@ohos.app.form.formInfo';
    import formBindingData from '@ohos.app.form.formBindingData';
    import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
    import formProvider from '@ohos.app.form.formProvider';
    
  2. 在EntryFormAbility.ts中,实现FormExtensionAbility生命周期接口,其中在onAddForm的入参want中可以通过FormParam取出卡片的相关信息。

    import formInfo from '@ohos.app.form.formInfo';
    import formBindingData from '@ohos.app.form.formBindingData';
    import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
    import formProvider from '@ohos.app.form.formProvider';
    
    export default class EntryFormAbility extends FormExtensionAbility {
      onAddForm(want) {
        console.info('[EntryFormAbility] onAddForm');
        // 在入参want中可以取出卡片的唯一标识:formId
        let formId: string = want.parameters[formInfo.FormParam.IDENTITY_KEY];
        // 使用方创建卡片时触发,提供方需要返回卡片数据绑定类
        let obj = {
          'title': 'titleOnAddForm',
          'detail': 'detailOnAddForm'
        };
        let formData = formBindingData.createFormBindingData(obj);
        return formData;
      }
    
      onCastToNormalForm(formId) {
        // Called when the form provider is notified that a temporary form is successfully
        // converted to a normal form.
        // 使用方将临时卡片转换为常态卡片触发,提供方需要做相应的处理
        console.info(`[EntryFormAbility] onCastToNormalForm, formId: ${formId}`);
      }
    
      onUpdateForm(formId) {
        // 若卡片支持定时更新/定点更新/卡片使用方主动请求更新功能,则提供方需要重写该方法以支持数据更新
        console.info('[EntryFormAbility] onUpdateForm');
        let obj = {
          'title': 'titleOnUpdateForm',
          'detail': 'detailOnUpdateForm'
        };
        let formData = formBindingData.createFormBindingData(obj);
        formProvider.updateForm(formId, formData).catch((err) => {
          if (err) {
            // 异常分支打印
            console.error(`[EntryFormAbility] Failed to updateForm. Code: ${err.code}, message: ${err.message}`);
            return;
          }
        });
      }
    
      onChangeFormVisibility(newStatus) {
        // Called when the form provider receives form events from the system.
        // 需要配置formVisibleNotify为true,且为系统应用才会回调
        console.info('[EntryFormAbility] onChangeFormVisibility');
      }
    
      onFormEvent(formId, message) {
        // Called when a specified message event defined by the form provider is triggered.
        // 若卡片支持触发事件,则需要重写该方法并实现对事件的触发
        console.info('[EntryFormAbility] onFormEvent');
      }
    
      onRemoveForm(formId) {
        // Called to notify the form provider that a specified form has been destroyed.
        // 当对应的卡片删除时触发的回调,入参是被删除的卡片ID
        console.info('[EntryFormAbility] onRemoveForm');
      }
    
      onConfigurationUpdate(config) {
        // 当系统配置信息置更新时触发的回调
        console.info('[EntryFormAbility] configurationUpdate:' + JSON.stringify(config));
      }
    
      onAcquireFormState(want) {
        // Called to return a {@link FormState} object.
        // 卡片提供方接收查询卡片状态通知接口,默认返回卡片初始状态。
        return formInfo.FormState.READY;
      }
    }
    

说明

FormExtensionAbility进程不能常驻后台,即在卡片生命周期回调函数中无法处理长时间的任务,在生命周期调度完成后会继续存在5秒,如5秒内没有新的生命周期回调触发则进程自动退出。针对可能需要5秒以上才能完成的业务逻辑,建议拉起主应用进行处理,处理完成后使用updateForm通知卡片进行刷新。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1339748.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

动态规划 多源路径 字典树 LeetCode2977:转换字符串的最小成本

涉及知识点 动态规划 多源最短路径 字典树 题目 给你两个下标从 0 开始的字符串 source 和 target ,它们的长度均为 n 并且由 小写 英文字母组成。 另给你两个下标从 0 开始的字符串数组 original 和 changed ,以及一个整数数组 cost ,其中…

FreeRTOS基础知识(一)任务调度

1任务调度器简介(熟悉) 1.1抢占式调度 特点: 1、 高优先级抢占低优先级 2、高优先级任务不停止,低优先级无法运行 3、被抢占的任务会进入就绪态 举例 阐述一下啊Task1 2 3 任务优先级分别为1 2 3 (freertos中数值越…

C1189#error: WinSock.h has already been included解决方案

最近在做项目移植过程中遇到这个报错&#xff0c;解决了半天。简单记录下解决方案&#xff0c;以供给大家提供一个思路。 原因&#xff1a; 在工程中使用了Boot库之后&#xff0c;使用了socket、tcp相关的头文件&#xff0c;在其他地方还是包括了头文件<windows.h>&…

leetcode的vscode插件无法登陆问题及解决办法

最近打算使用leetcode的vscode提升一下写代码的体验以及尝试debug。但是发现死活登录不上去&#xff0c;无论是账号登录还是cookies登录&#xff0c;尝试百遍都不行&#xff0c;在查阅资料之后&#xff0c;找到了解决办法。 文章目录 1.账号密码正确&#xff0c;插件无法登陆&a…

16-网络安全框架及模型-BiBa完整性模型

目录 BiBa完整性模型 1 背景概述 2 模型原理 3 主要特性 4 优势和局限性 5 应用场景 BiBa完整性模型 1 背景概述 Biba完整性模型是用于保护数据完整性的模型&#xff0c;它的主要目标是确保数据的准确性和一致性&#xff0c;防止未授权的修改和破坏。在这个模型中&#…

Apache Jackrabbit漏洞浅析

Apache Jackrabbit是一个Java开源内容存储库&#xff0c;1.0.0 < 版本 < 2.20.11、2.21.0 < 版本 < 2.21.18存在RMI功能导致的远程代码执行漏洞。 补丁分析 对比补丁前后两个版本&#xff08;https://github.com/apache/jackrabbit/compare/jackrabbit-2.20.10..…

LSTM Siamese neural network

本文中的代码在Github仓库或Gitee仓库中可找到。 Hi, 你好。我是茶桁。 大家是否还记得&#xff0c;在「核心基础」课程中&#xff0c;我们讲过CNN以及LSTM。 卷积神经网络&#xff08;CNN&#xff09;已经在计算机视觉处理中得到广泛应用&#xff0c;不过&#xff0c;2017年…

事务管理解析:掌握Spring事务的必备技能!

AOP事务管理 1.1 Spring事务简介1.1.1 相关概念介绍1.1.2 转账案例-需求分析1.1.3 转账案例-环境搭建步骤1:准备数据库表步骤2:创建项目导入jar包步骤3:根据表创建模型类步骤4:创建Dao接口步骤5:创建Service接口和实现类步骤6:添加jdbc.properties文件步骤7:创建JdbcConfig配置…

axios配置请求头content-type 和 get/post请求方式

axios配置请求头content-type https://blog.csdn.net/wojiushiwo945you/article/details/107653962 axios 是Ajax的一个插件&#xff0c;axios虽然是一个插件&#xff0c;但是我们不需要通过Vue.use(axios)来使用&#xff0c;下载完成后&#xff0c;只需在项目中引入即可。(一…

用Html和js和layui写一个简单猜拳小游戏

简单学习技术&#xff0c;写了一个小游戏&#xff0c;用html和js写一个简单的小游戏。玩家点击按钮出拳&#xff0c;玩家胜利结果显示绿色&#xff0c;玩家输了结果显示红色&#xff0c;平局结果显示蓝色。 页面效果&#xff1a; 代码&#xff1a; <!DOCTYPE html> <…

【C语言】数组

㊙️小明博客主页&#xff1a;➡️ 敲键盘的小明 ㊙️ ✅关注小明了解更多知识☝️ 文章目录 前言一、什么是数组&#xff1f;二、一维数组的创建和初始化2.1 一维数组的创建2.2 一维数组的初始化2.3 一维数组的使用3.3 一维数组的存储 三、二维数组的创建和初始化3.1 二维数组…

深度学习 | DRNN、BRNN、LSTM、GRU

1、深度循环神经网络 1.1、基本思想 能捕捉数据中更复杂模式并更好地处理长期依赖关系。 深度分层模型比浅层模型更有效率。 Deep RNN比传统RNN表征能力更强。 那么该如何引入深层结构呢&#xff1f; 传统的RNN在每个时间步的迭代都可以分为三个部分&#xff1a; 1.2、三种深层…

虚函数的讲解

文章目录 虚函数的声明与定义代码演示基类Person派生类Man派生类Woman 测试代码动态绑定静态绑定访问私有虚函数总结一下通过成员函数指针调用函数的方式 虚函数的声明与定义 虚函数存在于C的类、结构体等中&#xff0c;不能存在于全局函数中&#xff0c;只能作为成员函数存在…

❀My小学习之排序算法❀

目录 排序算法&#xff08;Sorting algorithm&#xff09;:) 一、定义 二、分类 三、评价标准 排序算法&#xff08;Sorting algorithm&#xff09;:) 一、定义 所谓排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或递减的…

【网络技术】【Kali Linux】Wireshark嗅探(一)ping和ICMP

一、实验目的 本次实验使用wireshark流量分析工具进行网络嗅探&#xff0c;旨在了解ping命令的原理及过程。 二、网络环境设置 本系列实验均使用虚拟机完成&#xff0c;主机操作系统为Windows 11&#xff0c;虚拟化平台选择Oracle VM VirtualBox&#xff0c;组网模式选择“N…

c语言的数组

#在这一篇中介绍三个数组 1.一维数组 2.字符数组 3.二维数组 1.一维数组 数组的定义&#xff1a; 类型 数组名[元素个数] ----这个为数组的定义 #include <stdio.h> int main() {int a[4];//在这里&#xff0c;我定义了一个只能装载4个整数类型元素的数组char b[5…

WPF+Halcon 培训项目实战(1-5):Halcon安装,图像处理,Halcon简单模板匹配

文章目录 前言相关链接项目专栏我个人对就业市场的评价Halcon安装实战1-4&#xff1a;Halcon基础实战5&#xff1a;模板匹配[形状匹配]实战代码 结尾 前言 为了更好地去学习WPFHalcon&#xff0c;我决定去报个班学一下。原因无非是想换个工作。相关的教学视频来源于下方的Up主…

IDEA 开发中常用的快捷键

目录 Ctrl 的快捷键 Alt 的快捷键 Shift 的快捷键 Ctrl Alt 的快捷键 Ctrl Shift 的快捷键 其他的快捷键 Ctrl 的快捷键 Ctrl F 在当前文件进行文本查找 &#xff08;必备&#xff09; Ctrl R 在当前文件进行文本替换 &#xff08;必备&#xff09; Ctrl Z 撤…

excel 函数技巧

1&#xff1a;模糊查询 LOOKUP(1,0/FIND(F1062,Sheet1!C$2:Sheet1!C$9135),Sheet1!B$2:Sheet1!B$9135) 函数含义&#xff1a;寻找F列1062行和sheet1中的C2行到C9135行进行模糊查询&#xff0c;返回该行对应的B2行到B9135行的结果。未查到返回结果0 函数公式&#xff1a; LO…

基于Mbed Studio环境下开发STM32

基于Mbed Studio环境下开发STM32 &#x1f4cd;Mbed官网&#xff1a;https://os.mbed.com/ ✨mbed OS是ARM出的一个免费开源的&#xff0c;面向物联网的操作系统。提供了一个定义良好的API来开发C应用程序&#xff1b;集成度很高&#xff0c;类似Arduino&#xff0c;目前并不兼…