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