鴻蒙OS實戰開發：【多設備自適應服務卡片】

介紹

服務卡片的布局和使用，其中卡片內容顯示使用了一次開發，多端部署的能力實現多設備自適應。
用到了卡片擴展模塊接口，[@ohos.app.form.FormExtensionAbility] 。

卡片信息和狀態等相關類型和枚舉接口，[@ohos.app.form.formInfo]。

卡片數據綁定的能力接口[@ohos.app.form.formBindingData]。

效果預覽

使用說明

長按示例應用，等待出現服務卡片字樣，點擊后可左右滑動選擇需要的卡片尺寸，添加到屏幕。

更多鴻蒙開發應用知識已更新[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]參考前往。

具體實現

1、在module.json5文件添加拓展能力，類型為卡片，并設置卡片入口srcEntrance和卡片元數據metadata。[源碼參考] 如果失效請添加mau123789是v直接拿取。

/*

 * 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": [

      "default",

      "tablet"

    ],

    "deliveryWithInstall": true,

    "installationFree": false,

    "pages": "$profile:main_pages",

    "abilities": [

      {

        "name": "EntryAbility",

        "srcEntrance": "./ets/entryability/EntryAbility.ets",

        "description": "$string:EntryAbility_desc",

        "icon": "$media:icon",

        "label": "$string:EntryAbility_label",

        "startWindowIcon": "$media:icon",

        "startWindowBackground": "$color:start_window_background",

        "visible": true,

        "skills": [

          {

            "entities": [

              "entity.system.home"

            ],

            "actions": [

              "action.system.home"

            ]

          }

        ]

      }

    ],

    "extensionAbilities": [

      {

        "name": "EntryFormAbility",

        "srcEntrance": "./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"

      ]

    }

  ]

}

審核編輯 黃宇