Erlo

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

收藏 2022-08-30 10:30:21   44   开源中国
页面报错/反馈
点赞

一、服务卡片(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 提供的模板进行研究学习。

     

登录查看全部

参与评论

评论留言

还没有评论留言,赶紧来抢楼吧~~

返回顶部

给这篇文章打个标签吧~

棒极了 糟糕透顶 好文章 PHP JAVA JS 小程序 Python SEO MySql 确认