HarmonyOS鸿蒙Next应用开发-自定义卡片

HarmonyOS鸿蒙Next应用开发-自定义卡片 一． 创建
创建工程之后，只要勾选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"
            }
        }
    }
}