HarmonyOS開發者創新大賽 《蘑菇實驗室》案例——服務卡片(JS)開發步驟總結

語言: CN / TW / HK

一、服務卡片(JS)開發程式碼步驟

cke_19446.jpg

二、服務卡片(JS)頁面展示

cke_32161.png

三、服務卡片(JS)開發步驟核心程式碼

  1. 新建專案:使用hml+css+json開發JS卡片頁面,使用DevEco Studio建立卡片工程。詳情參考官方文件

  2. 配置config.json

     

    • 服務卡片JS相關資源配置
      "js": [{
          "pages": [
            "pages/index/index"
          ],
          "name": "seedlingWidget",
          "window": {
            "designWidth": 720,
            "autoDesignWidth": true
          },
          "type": "form"
        }
      ]

       

    • 服務卡片編輯功能配置,“abilities”配置forms模組
      {
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ],
        "visible": true,
        "name": "com.future.myapplication.MainAbility",
        "icon": "$media:icon",
        "description": "$string:mainability_description",
        "orientation": "portrait",
        "formsEnabled": true,
        "label": "$string:entry_MainAbility",
        "type": "page",
        "forms": [
          {
            "jsComponentName": "seedlingWidget",
            "isDefault": true,
            "scheduledUpdateTime": "10:30",
            "defaultDimension": "2*2",
            "name": "seedlingWidget",
            "description": "This is a service widget",
            "colorMode": "auto",
            "formConfigAbility": "ability://TypeAbility",
            "type": "JS",
            "supportDimensions": [
              "2*2",
              "2*4"
            ],
            "updateEnabled": true,
            "updateDuration": 1
          }
        ],
        "launchType": "standard"
      },

      說明:

      forms標籤:表示服務卡片的屬性。該標籤僅當formsEnabled“true”時,才能生效

      【formConfigAbility】標籤:表示卡片的配置跳轉連結

      【supportDimensions】標籤:表示卡片支援的外觀規格。本案例支援兩種規格。

    • serviceAbility後臺執行許可權配置
      {
        "reason": "",
        "usedScene": {
          "ability": [
            "com.future.myapplication..ServiceAbility"
          ],
          "when": "always"
        },
        "name": "ohos.permission.KEEP_BACKGROUND_RUNNING"
      }

       

  3. 服務卡片JS端核心程式碼

    • 卡片佈局開發

       

      4.png

    • 卡片路由開發

       

      5.png

  4. 服務卡片Java端核心程式碼

    • onCreateForm(建立卡片)

       

      6.png

       

    • ServiceAbility(定時服務)

      MainAbility的onStart方法中呼叫拉起ServiceAbility的方法。
      private void startServiceAbility() {
          Intent intent = new Intent();
          Operation operation = new Intent.OperationBuilder()
                  .withDeviceId("")
                  .withBundleName(getBundleName())
                  .withAbilityName(ServiceAbility.class.getName())
                  .build();
          intent.setOperation(operation);
          startAbility(intent);
      }
       

      ServiceAbility在onStart方法中啟動定時器。

      @Override
      public void onStart(Intent intent) {
      
          super.onStart(intent);
          setApplication(getContext());
          startTimer();
      }
      private void startTimer() {
          Timer timer = new Timer();
          timer.schedule(
                  new TimerTask() {
                      public void run() {
                          refreshData();
                      }
                  },
                  0, PERIOD
          );
      }

      ​​​​​​​​

    • updateForm(卡片資訊更新)

      for (FormInformation form : formInformationlist){
              result.put("formId", form.getFormId());
              result.put("isTologin",true);
              result.put("networkNK",false);
              result.put("show2x2", false);
              result.put("show2x4", false);
              result.put("initShow", false);
      
              try {
                  updateForm(form.getFormId(), new FormBindingData(result));
              } catch (FormException e) {
                  e.printStackTrace();
              }
          }

      refreshData更新卡片的方法,此方法中先從資料庫中查詢卡片列表,然後遍歷卡片列表,逐個更新卡片資訊。

    • MainAbility接參頁面跳轉

      ​​​​​​​​​​​​​​7.png

      首先服務卡片JS技術路線,MainAbility 需要繼承AceAbility。

      服務卡片觸發【toLogin】後,跳轉到MainAbility,觸發onStart回撥函式。

      使用intent.getParams().getParam("params")語句獲取服務卡片的傳值。

      頁面跳轉之前,使用setPageParams(url,paramsReturn)函式,確定目的頁面和給頁面傳引數。​​​​​​​​​

  5. 服務卡片(JS)編輯功能​​​​​​​

    9.png

    服務卡片編輯功能,比較複雜,可參考DevEco-Studio 提供的模板進行研究學習。