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 提供的模板进行研究学习。