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

飞奔的炮台

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

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

三、服务卡片（JS）开发步骤核心代码

  

• 新建项目：使用hml+css+json开发JS卡片页面，使用DevEco Studio创建卡片工程。详情参考官方文档。
    
  
• 配置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"
    }

    
       
    
     
  
• 服务卡片JS端核心代码
  
     
  
  • 卡片布局开发
    
    
       
    
  • 卡片路由开发
    
    
       
    
     
  
• 服务卡片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)函数，确定目的页面和给页面传参数。​​​​​​​​​

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