HarmonyOS开发者创新大赛 《蘑菇实验室》案例——服务卡片(JS)开发步骤总结

一、服务卡片（JS）开发代码步骤

二、服务卡片（JS）页面展示

三、服务卡片（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. 服务卡片Java端核心代码

   • onCreateForm（创建卡片）

      

     

      

   • 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接参页面跳转

     ​​​​​​​​​​​​​​

     首先服务卡片JS技术路线，MainAbility 需要继承AceAbility。

     服务卡片触发【toLogin】后，跳转到MainAbility，触发onStart回调函数。

     使用intent.getParams().getParam(“params”)语句获取服务卡片的传值。

     页面跳转之前，使用setPageParams(url,paramsReturn)函数，确定目的页面和给页面传参数。​​​​​​​​​

5. 服务卡片（JS）编辑功能​​​​​​​

   

   服务卡片编辑功能，比较复杂，可参考DevEco-Studio 提供的模板进行研究学习。