鸿蒙应用框架开发【多设备自适应服务卡片】程序框架

最新推荐文章于 2024-08-31 11:29:14 发布

爱桥代码的程序媛

最新推荐文章于 2024-08-31 11:29:14 发布

阅读量366

点赞数 5

分类专栏：鸿蒙文章标签： harmonyos 鸿蒙开发鸿蒙结构体服务卡片程序框架鸿蒙系统

本文链接：https://blog.csdn.net/2301_76813281/article/details/140721449

版权

鸿蒙专栏收录该内容

435 篇文章 8 订阅

订阅专栏

多设备自适应服务卡片

介绍

本示例展示Js工程中服务卡片的布局和使用，其中卡片内容显示使用了一次开发，多端部署的能力实现多设备自适应。
用到了卡片扩展模块接口@ohos.app.form.FormExtensionAbility。

卡片信息和状态等相关类型和枚举接口@ohos.app.form.formInfo。

卡片数据绑定的能力接口@ohos.app.form.formBindingData。

效果预览

使用说明

1.部分设备的桌面不支持卡片，可以通过自己的开发卡片使用方，进行卡片的创建、更新和删除等操作。

2.安装应用，并在桌面上长按本应用的桌面图标，长按后弹出选项列表。

3.点击弹出列表中的服务卡片选项进入卡片添加界面。

4.点击正下方的添加到桌面按钮，卡片就会出现在桌面上。

工程目录

├──entry/src/main/ets                         // ets代码区
│  ├──entryability  
│  │  └──EntryAbility.ets         
│  ├──entryformability                                   
│  │  └──EntryFormAbility.ets                 // 定义卡片对象首次被创建时需要做的操作
│  ├──pages  
│  │  └──index.ets                            // 首页
│  └──utils  
│     └──Logger.ets                           // 日志工具类
├──entry/src/main/js                          // js代码区
│  └──complex/pages/index                     // 定义卡片内容                 
│     ├──index.hml                                                   
│     ├──index.css                          
│     └──index.json                         
├──entry/src/main/resources                   // 应用资源目录 
└──module.json5                               // 添加卡片拓展能力

具体实现

1、在module.json5文件添加拓展能力，类型为卡片，并设置卡片入口srcEntrance和卡片元数据metadata。[源码参考]

/*
 * Copyright (c) 2023 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

{
  "module": {
    "name": "entry",
    "type": "entry",
    "description": "$string:module_desc",
    "mainElement": "EntryAbility",
    "deviceTypes": [
      "phone",
      "tablet"
    ],
    "deliveryWithInstall": true,
    "installationFree": false,
    "pages": "$profile:main_pages",
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ets",
        "description": "$string:EntryAbility_desc",
        "icon": "$media:icon",
        "label": "$string:EntryAbility_label",
        "startWindowIcon": "$media:icon",
        "startWindowBackground": "$color:start_window_background",
        "exported": true,
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ]
      }
    ],
    "extensionAbilities": [
      {
        "name": "EntryFormAbility",
        "srcEntry": "./ets/entryformability/EntryFormAbility.ets",
        "label": "$string:EntryFormAbility_label",
        "description": "$string:EntryFormAbility_desc",
        "type": "form",
        "metadata": [
          {
            "name": "ohos.extension.form",
            "resource": "$profile:form_config"
          }
        ]
      }
    ]
  }
}

例如：“metadata”: [ { “name”: “ohos.extension.form”, “resource”: “$profile:form_config” }。

2、初始化卡片：通过实现@ohos.app.form.FormExtensionAbility卡片操作类，在卡片对象首次被创建时，初始化卡片绑定数据为空，并将卡片状态设置为就绪状态READY。例如：onCreate(){ formBindingData.createFormBindingData({}) onAcquireFormState(want) { return formInfo.FormState.READY }。
3、配置卡片：用js编写相应的卡片，将卡片配置到resources/base/profile/form_config, [源码参考]。

{
  "forms": [
    {
      "name": "complex",
      "description": "This is a service widget.",
      "src": "./js/complex/pages/index/index",
      "window": {
        "designWidth": 720,
        "autoDesignWidth": true
      },
      "colorMode": "auto",
      "isDefault": true,
      "updateEnabled": true,
      "scheduledUpdateTime": "10:30",
      "updateDuration": 1,
      "defaultDimension": "2*2",
      "supportDimensions": [
        "2*2",
        "4*4"
      ]
    },
    {
      "name": "test",
      "description": "This is a service widget.",
      "src": "./js/test/pages/index/index",
      "window": {
        "designWidth": 720,
        "autoDesignWidth": true
      },
      "colorMode": "auto",
      "isDefault": false,
      "updateEnabled": true,
      "scheduledUpdateTime": "10:30",
      "updateDuration": 1,
      "defaultDimension": "2*2",
      "supportDimensions": [
        "2*2"
      ]
    },
    {
      "name": "immersive",
      "description": "This is a service widget.",
      "src": "./js/immersive/pages/index/index",
      "window": {
        "designWidth": 720,
        "autoDesignWidth": true
      },
      "colorMode": "auto",
      "isDefault": false,
      "updateEnabled": true,
      "scheduledUpdateTime": "10:30",
      "updateDuration": 1,
      "defaultDimension": "2*2",
      "supportDimensions": [
        "2*2"
      ]
    },
    {
      "name": "grid",
      "description": "This is a service widget.",
      "src": "./js/grid/pages/index/index",
      "window": {
        "designWidth": 720,
        "autoDesignWidth": true
      },
      "colorMode": "auto",
      "isDefault": false,
      "updateEnabled": true,
      "scheduledUpdateTime": "10:30",
      "updateDuration": 1,
      "defaultDimension": "2*2",
      "supportDimensions": [
        "2*2"
      ]
    },
    {
      "name": "imgText",
      "description": "This is a service widget.",
      "src": "./js/imgText/pages/index/index",
      "window": {
        "designWidth": 720,
        "autoDesignWidth": true
      },
      "colorMode": "auto",
      "isDefault": false,
      "updateEnabled": true,
      "scheduledUpdateTime": "10:30",
      "updateDuration": 1,
      "defaultDimension": "2*2",
      "supportDimensions": [
        "2*2",
        "2*4"
      ]
    }
  ]
}

以上就是本篇文章所带来的鸿蒙开发中一小部分技术讲解；想要学习完整的鸿蒙全栈技术。可以在结尾找我可全部拿到！
下面是鸿蒙的完整学习路线，展示如下：