基于JavaScript实现HarmonyOS备忘录服务卡片
本文介绍如何在HarmonyOS中使用JavaScript开发服务卡片。通过DevEco Studio创建JS项目，利用list组件实现备忘录内容的滚动展示，并配置CSS样式优化界面。文章涵盖从工程创建、卡片生成到IDE调试预览的完整流程，帮助开发者快速掌握服务卡片开发技能。
一、前言
随着HarmonyOS的发布，服务卡片成为其显著特性之一。对于开发者而言，除了常规应用开发，掌握服务卡片技术已成为必备技能。备忘录是智能手机的标配应用，用户查看备忘事项通常需打开应用。服务卡片能简化这一操作，直接在桌面展示关键信息。下文将详细讲解如何使用JavaScript构建此类服务卡片。
二、实现效果
为了在有限的屏幕空间内展示更多信息，我们采用列表形式呈现每条备忘事项。
具体效果如图所示：
如图所示的服务卡片支持上下滑动以浏览所有备忘事项。超出屏幕范围的内容通过省略号截断显示，以适配空间限制，同时保留足够信息供用户快速回忆。接下来将介绍具体的实现步骤。
三、创建工程
首先，使用IDE（DevEco Studio）创建一个JavaScript项目。由于服务卡片依附于应用存在，需先建立应用工程，再添加服务卡片模块。在IDE中选择“Create HarmonyOS Project”，并选取“Empty Ability(JS)”模板。该空JS项目适合Web前端开发人员快速上手，完成Hello World应用的创建。
四、生成服务卡片
在已生成的工程基础上，添加服务卡片模块，操作如下图所示：
选中“Service Widget”，选择相应模板，填写服务卡片的基本信息后即可生成。
生成后，项目目录中会出现一个名为“widget”的文件夹，这是服务卡片的核心代码目录。打开“widget/page/index/index.hml”文件，可以看到系统生成的模板代码。由于该模板并非我们所需的备忘录布局，需将其删除并重新设计。根据效果图，布局分为两部分：头部显示标题，中间区域展示可滚动的内容。头部使用div组件，内容区域使用list组件实现。
相关代码如下：
<div class="image_with_info_layout">
<div class="header">
<text>
<span class="header-text">备忘录</span>
</text>
</div>
<list class="list">
<list-item class="list-item">
<text class="list-text">
<span>18号要参加618活动</span>
</text>
</list-item>
<list-item class="list-item">
<text class="list-text">
<span>某某某欠我2块钱</span>
</text>
</list-item>
<list-item class="list-item">
<text class="list-text">
<span>论坛账号密码是123xxxxxxxx</span>
</text>
</list-item>
<list-item class="list-item">
<text class="list-text">
<span>震惊！这件事的真相居然是这样</span>
</text>
</list-item>
<list-item class="list-item">
<text class="list-text">
<span>隐藏的备忘，你看到了吗</span>
</text>
</list-item>
</list>
</div>在“index.css”文件中定义样式，以实现预期的视觉效果：
.header{
width: 100%;
height: 35px;
background-color: #ff9900;
padding-left: 10px;
}
.header-text{
font-size: 16px;
color: #fff;
}
.list{
width: 100%;
height: 140px;
padding-left: 10px;
}
.list-item{
padding: 5px 1px 5px 2px;
border-bottom: 1px solid #ddd;
}
.list-text{
font-size: 14px;
text-overflow:ellipsis;
}五、调试预览
至此，一个基于JavaScript的应用服务卡片开发完成。在IDE中，可通过菜单栏“View->Tool Windows->previewer”进行页面调试与预览。修改代码后保存即可实时刷新效果。开发完成后，通过菜单栏“Tools->device manager”启动手机模拟器（需先登录账号）。
运行应用后，JS应用将安装至模拟器中。
在应用图标上滑动，即可看到实现的服务卡片。至此，卡片功能基本完成。当前代码仅实现了备忘录的查看功能，如需编辑或删除功能，有兴趣的读者可尝试进一步开发。
本文介绍了基于JavaScript实现HarmonyOS备忘录服务卡片的全过程。如需了解更多JS实现服务卡片的相关内容，请搜索本站历史文章或浏览后续内容，感谢大家的支持！
JavaScript异步发送HTTP请求时怎么优雅地处理错误
2026-11-05 17:10:44
5款主流JS在线运行工具对比：CodePen、JSFiddle与StackBlitz怎么选
2026-11-05 17:04:04
JavaScript入门书籍避坑：这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00