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

创建一个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通知卡片进行刷新。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

mxxWechatBot微信机器人V2使用教程(图文)最全最详细

大家伙,我是雄雄,欢迎关注微信公众号:雄雄的小课堂。 先看这里 mxxWechatBot功能列表一、前言二、适用人群三、准备工作四、获取账号五、下载资料 六、安装相关软件七、启动客户端八、注入并启动微信九、机器人的基本配置十、自定义接口开发 …

spring核心与思想

spring核心与思想 Spring 是什么?什么是容器?什么是 IoC?传统程序开发传统程序开发的缺陷解决传统开发中的缺陷控制反转式程序开发对⽐总结规律 理解 Spring IoCDI 概念说明 Spring 是什么? Spring 指的是 Spring Framework&…

子网划分问题(实战超详解)_主机分配地址

文章目录: 子网划分的核心思想 第一步,考虑借几位作为子网号 第二步,确定子网的网络地址 第三步,明确网络地址,广播地址,可用IP地址范围 一些可能出现的疑问 实战 题目一 子网划分的核心思想 网络号不变,借用主机号来产生新的网络 划分前的网络:网络号主机号 划分后的网络:原网…

MapboxGL请求加载512尺寸瓦片

作者:yx 文章目录 前言一、关键代码二、完整代码三、结果验证 前言 平常我们使用更多的是256* 256尺寸的瓦片出图,但有的客户需要以512* 512尺寸大小的瓦片出图,对于leaflet可以直接修改tilesize参数为512,例如: 但是…

网络通信-入门1

网口框架 100M 2. 物理层解读 2.1 同步的方法:编码 为了让接收方在没有外部时钟参考的情况也能确定每一位的起始、结束和中间位置,在传输信号时不直接采用二进制编码。在 10BASE-T 的传输方式中采用曼彻斯特编码,在 100BASE-T 中则采用 4B/…

rime中州韵 easyEnglish输入法

根据前面的几个自定义配置的练手,想必大家已经熟悉了所谓的 程序文件夹,用户文件夹,custom.yam 文档这几个概念了。在接下来的自定义配置讲述中,将默认大家是懂得所做的修改应该在哪个文件中进行的,讲述的速度将会有所加快。 今天…

基于QT开发的温室气体数据记录软件

1、概述 温室气体分析仪数据记录软件用于实现温室气体分析仪数据的获取与存储,阀箱数据的获取与存储、冷阱数据的获取与存储、采样单元数据的获取与存储、阀箱和采样单元的远程操作以及系统功能的管理。其主操作界面如下: 上述软件界面分为2各区域&…

数据结构与算法教程,数据结构C语言版教程!(第二部分、线性表详解:数据结构线性表10分钟入门)二

第二部分、线性表详解:数据结构线性表10分钟入门 线性表,数据结构中最简单的一种存储结构,专门用于存储逻辑关系为"一对一"的数据。 线性表,基于数据在实际物理空间中的存储状态,又可细分为顺序表&#xff…

使用anaconda创建爬虫spyder工程

1.由于每个工程使用的环境都可能不一样,因此一个好的习惯就是不同的工程都创建属于自己的环境,在anaconda中默认的环境是base,我们现在来创建一个名为spyder的环境,专门用于爬虫工程: //括号中名字,代表当…

shell编程一

shell 定义 Shell 也是一种程序设计语言,它有变量,关键字,各种控制语句,有自己的语法结构,利用shell程序设计语 可以编写功能强、代码简短的程序 #! Shebang 定义解释器 shell的分类和切换 # cat /etc/shells /bin/sh…

ZYNQ 7020 之 FPGA知识点重塑笔记一——串口通信

目录 一:串口通信简介 二:三种常见的数据通信方式—RS232串口通信 2.1 实验任务 2.2 串口接收模块的设计 2.2.1 代码设计 2.3 串口发送模块的设计 2.3.1 代码设计 2.4 顶层模块编写 2.4.1 代码设计 2.4.2 仿真验证代码 2.4.3 仿真结果 2.4.4…

门控循环单元(GRU)-多输入回归预测

目录 一、程序及算法内容介绍: 基本内容: 亮点与优势: 二、实际运行效果: 三、部分程序: 四、全部代码数据分享: 一、程序及算法内容介绍: 基本内容: 本代码基于Matlab平台编译…

HR-net学习与实现

这里会用到预训练模型所以先了解一下预训练是什么以及它的作用是什么,详细内容可以参考教程 1.预训练是什么 深入理解:什么是预训练?预训练有什么作用?预训练和训练的本质区别???-CSDN博客 预…

机器学习、人工智能、深度学习的关系

人工智能(Artificial Intelligence,AI) 人工智能范围很广,它是一门新的科学与工程,是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的技术科学,研究内容涵盖语音识别、图像识别、自然语言处理、智能搜索和…

【node-express】在commonjs的项目中使用esm和ts开发的sdk

在commonjs的项目中使用esm和ts开发的sdk 效果实现步骤 效果 在一些demo中, 大部分代码是commonjs规范开发的,但是要用到的sdk是ts开发的并且仅支持esm, 又不想配置很复杂的工程项目,可以这么做。如果你有更好的建议,希望能得到你…

系统账号注册

登录/注册地址:https://id.sf.163.com/login?hshufanqz&tshufanqz&localezh_CN&referrerhttps%3A%2F%2Fcommunity.codewave.163.com%2Frest%2Fcommunity%2Flogin注册成功并登录后,即可进入设计器中。低代码开发者可在设计器中按需要搭建一个…

List集合格式转换

最近遇到一个任务: 需要把A集合数据转成 B集合的形式: A集合: B集合: 代码: package com.example.juc.test;import com.example.juc.entity.Ld; import com.example.juc.entity.Student;import java.lang.reflect.F…

Vue-Vben-Admin:打造高效中大型项目后台解决方案

Vue-Vben-Admin:打造高效中大型项目后台解决方案 摘要: Vue-Vben-Admin是一个基于Vue3.0、Vite、Ant-Design-Vue和TypeScript的开源项目,旨在为开发中大型项目提供一站式的解决方案。它涵盖了组件封装、实用工具、钩子函数、动态菜单、权限验…

conda环境下face_alignment.LandmarksType._2D AttributeError: _2D解决方法

1 问题描述 运行retalking模型时&#xff0c;代码抛出异常&#xff0c;信息如下所示&#xff1a; Traceback (most recent call last):File "D:/ml/video-retalking/inference.py", line 345, in <module>main()File "D:/ml/video-retalking/inference.…

【Vue2+3入门到实战】(18)VUE之Vuex状态管理器概述、VueX的安装、核心概念 State状态代码实现 详细讲解

目录 一、[Vuex](https://vuex.vuejs.org/zh/) 概述1.是什么2.使用场景3.优势4.注意&#xff1a; 二、需求: 多组件共享数据1.创建项目2.创建三个组件, 目录如下3.源代码如下 三、vuex 的使用 - 创建仓库1.安装 vuex2.新建 store/index.js 专门存放 vuex3.创建仓库 store/index…