[文章]HarmonyOS应用开发-自定义卡片

一．创建
创建工程之后，只要勾选Show in Service Center，所处项目中初始都会存在一个EntryCad文件与widget文件，这是初始的默认小卡与快照

然后我们自定义创建卡片，选择在js文件下，创建mywidget文件夹


然后再该文件目录下面创建卡片所需的文件目录common（资源目录）、i18n目录、pages（文件编译目录，非必创建）

然后再pages文件目录下创建可编译文件（可自行命名，这里默认index）index.css（样式文件）、index.hml（结构文件）、index.json（数据文本）

当然，也有更加便捷的创建方式，那就是直接将widget文件在js目录下进行复制一遍，然后重命名即可!
二．注册
创建完文件后，需要将文件到config.json文件中进行注册才能进行使用（为卡片），在“js”数组中进行注册，注册的类型为卡片

在“form”数组注册，这里是注册卡片的尺寸

三．后台程序
注册完文件后，选择后台程序活动，在Java文件目录中可直接选择主活动MainAbility，也可以自行创建一个新的后台活动，如MyWidgetAbility，

自行选择即可。然后这里也需要在config.json文件中进行注册，注意，这里的“icon”、“description”、“type”都是空的，需要自行补充类型与内容

四．编译
最后对注册完且拥有后台程序的卡片进行编译
例：
Index.hml
<div class=“container”>
<text class=“title”>
<span>{{title}}</span>
</text>
</div>
Index.css
.container {
flex-direction: column;
justify-content: center;
align-items: center;
}
.title {
font-size: 18px;
font-weight: bold;
/* text-overflow: ellipsis;*/
max-lines: 1;
}
Index.json
{
“data”: {
“title”: “你好，程序猿！”,
},
“actions”: {
“routerEvent”: {
“action”: “router”,
“bundleName”: “com.example.musiccard”,
“abilityName”: “com.example.musiccard.MainAbility”,
“params”: {
“message”: “add detail”
}
}
}
}
最后呈现效果：

本文档材料主要参考官方文档学习体验整理
附件：[attach]1106317[/attach]