鴻蒙OS實(shí)戰(zhàn)開發(fā)：【多設(shè)備自適應(yīng)服務(wù)卡片】

介紹

服務(wù)卡片的布局和使用，其中卡片內(nèi)容顯示使用了一次開發(fā)，多端部署的能力實(shí)現(xiàn)多設(shè)備自適應(yīng)。
用到了卡片擴(kuò)展模塊接口，[@ohos.app.form.FormExtensionAbility] 。

卡片信息和狀態(tài)等相關(guān)類型和枚舉接口，[@ohos.app.form.formInfo]。

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

效果預(yù)覽

使用說(shuō)明

長(zhǎng)按示例應(yīng)用，等待出現(xiàn)服務(wù)卡片字樣，點(diǎn)擊后可左右滑動(dòng)選擇需要的卡片尺寸，添加到屏幕。

更多鴻蒙開發(fā)應(yīng)用知識(shí)已更新[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]參考前往。

具體實(shí)現(xiàn)

1、在module.json5文件添加拓展能力，類型為卡片，并設(shè)置卡片入口srcEntrance和卡片元數(shù)據(jù)metadata。[源碼參考] 如果失效請(qǐng)?zhí)砑觤au123789是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、初始化卡片：通過(guò)實(shí)現(xiàn)@ohos.app.form.FormExtensionAbility卡片操作類，在卡片對(duì)象首次被創(chuàng)建時(shí)，初始化卡片綁定數(shù)據(jù)為空，并將卡片狀態(tài)設(shè)置為就緒狀態(tài)READY。 例如：onCreate(){ formBindingData.createFormBindingData({}) onAcquireFormState(want) { return formInfo.FormState.READY }。
3、配置卡片：用js編寫相應(yīng)的卡片，將卡片配置到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"

      ]

    }

  ]

}

審核編輯 黃宇