基于JS卡片开发的代码示例项目JsFACard和StepsCard解析Hot，从服务卡片征文开始，然后从《一文看懂HarmonyOS服务卡片运行原理和开发方法》到《鸿蒙卡片开发超细致总结》，再到7.31开发者日的推送，最后直播昨天张二龙老师的?课。服务卡的体验模式和开发方法我觉得非常值得掌握，降低了服务等级。因此，对代码示例工程的两个JS开发实例进行了全面分析。1.JS开发和Java开发综上所述，JS卡片比Java卡片支持更多的控件和能力：Java卡片：适合直接入口，不需要复杂的页面和事件。JSCards：适用于接口复杂的卡片。做一个预演，下一篇山海经系列就是分析Java卡开发的例子。2.代码样例项目介绍JsFACard本样例展示了服务卡功能。用户应用的重要信息通过服务卡片显示在桌面上。用户可以通过快捷手势使用卡片，实现直接服务，减少跳级。JS计步卡基于HarmonyOSJSUI，实现了桌面卡数据的可视化。三、JsFACard（一）效果演示（二）页面分析1、应用界面（默认）就是简单的自带的Helloworld。2.服务卡界面4X4(jscardtemplate)需要注意的是源项目设计了五个item-div，但是页面只能容纳三个，多出的两个不知道是干什么用的。3、服务卡2X4（jsmusictemplate）对于html上无法显示的部分也有其他设计。4.服务卡2X4（卡）同部分不显示，感觉应该保留。(3)工程目录分析(4)MainAbility分析MainAbility中需要注意这几个方法：**onTriggerFormEvent()**卡片相关的回调函数，JS卡片点击事件**ZSONObject()**提供对象处理JSON结构化数据的方法。该类基于标准的JSON数据结构，封装了一系列不同数据类型的读写方法，如int、float等基本数据类型，以及一些自定义数据类型。它还提供了在字符串和对象之间进行转换的方法。使用这些方法，您可以轻松处理JSON结构化数据。**FormBindingData()**代表JS表单的数据结构。该类用于承载创建和更新JS表单时要传递的数据。**updateForm()**AbilityextendsAbilityContext实现了ILifecycle下Ability的方法。用于更新卡片数据。4.StepsCard(1)效果展示(2)页面分析1.服务卡2X2(card2X2)2.服务卡2X4(card2X4)3.应用页面(MainAbilitySlice)(3)工程目录分析(4)权限声明本应用使用获取的两个权限是SystemPermission中的权限，获取步数是敏感权限，需要用户同意。后台运行权限设置：手机管家>应用启动管理>计步服务卡片>点击右侧滑块>选择“允许后台活动”，开启后台运行权限。添加到配置中的权限部分。整个项目涉及：窗口截图：获得权限后，会启动计步器服务。（5）数据库（FormDatabase）（6）StepSensorService接收、存储数据和更新卡片1.整体分析2.onStart分析（7）卡片中绘制折线图的组件（ChartDataUtils）为：src/main/js/card2X4/pages/index/index.hml中的图表组件入口：updateForms更新卡片信??息中的ZSONObjectresult=ChartDataUtils.getZsonObject(value,form.getDimension(),connect);数据说明：数据集：折线图点集；options:折线图的X轴和Y轴显示；步骤：步骤数；percent：步数的进度百分比，为了演示方便，本codelab使用1000步作为目标步数；mileage：里程（米），计算方法为steps*0.6。具体实现示例代码有注释。为了本文的完整性，贴在这里：获取图表折线图点集根据步数获取某个点的数据：Json数据处理（组装）（八）StepFormability5.补充开发JS卡片事件和行动。JS卡片支持对组件设置动作，包括路由事件和消息事件，其中路由事件用于应用程序跳转，消息事件用于卡片开发者自定义点击事件。关键步骤描述如下：在html中为组件设置onclick属性，其值对应json文件的actions字段。如果设置了路由器事件，则action属性值为“router”；abilityName为卡片提供者应用的跳转目标Ability名称；params中的值按要求填写，使用时可以通过intent.getStringParam("params")获取值即可；如果设置了message事件，action属性值为“message”，params为json格式的值。本文总结：存在一个问题：在JsFACard中，hml中的js中的组件会比较多。示例文档是用于其他目的，还是只是多余的？不太懂hml+css+json开发JS卡片页面，配合数据库和Java分析完两个卡片进入整体应用的开发，准备开始开发一些思路丰富的卡片！！之后，我将分析开发Java卡的两个例子。虽然分析起来很累，但是无论是对各种API的理解，整个项目的搭建，hml+css+json在JS页面的应用，Java封装继承的思想都改善了！文章相关附件可点击下方链接下载JsFACard.StepsCard。更多信息请访问：Harmonyos技术社区https://harmonyos.51cto.com与华为官方共建
