一.创建
创建工程之后,只要勾选Show in Service Center,所处项目中初始都会存在一个EntryCad文件与widget文件,这是初始的默认小卡与快照
![](https://harmonyos.oss-cn-beijing.aliyuncs.com/images/202110/13e73169358df25893742023edcd06e322fcac.png?x-oss-process=image/resize,w_321,h_331)
然后我们自定义创建卡片,选择在js文件下,创建mywidget文件夹
![](https://harmonyos.oss-cn-beijing.aliyuncs.com/images/202110/5436269107776d6fc73217103d4a136aa7eb81.png?x-oss-process=image/resize,w_362,h_195)
然后再该文件目录下面创建卡片所需的文件目录common(资源目录)、i18n目录、pages(文件编译目录,非必创建)
![](https://harmonyos.oss-cn-beijing.aliyuncs.com/images/202110/812058e202b2386151597049e8ce2f8f6aee8b.png?x-oss-process=image/resize,w_337,h_289)
然后再pages文件目录下创建可编译文件(可自行命名,这里默认index)index.css(样式文件)、index.hml(结构文件)、index.json(数据文本)
![](https://harmonyos.oss-cn-beijing.aliyuncs.com/images/202110/a824406841a64fc1f66912946d09fce1f4c842.png?x-oss-process=image/resize,w_325,h_306)
当然,也有更加便捷的创建方式,那就是直接将widget文件在js目录下进行复制一遍,然后重命名即可!
二.注册
创建完文件后,需要将文件到config.json文件中进行注册才能进行使用(为卡片),在“js”数组中进行注册,注册的类型为卡片
![](https://harmonyos.oss-cn-beijing.aliyuncs.com/images/202110/a6234cb527cc45fa9bb7973555c65a55945ae9.png?x-oss-process=image/resize,w_820,h_868)
在“form”数组注册,这里是注册卡片的尺寸
![](https://harmonyos.oss-cn-beijing.aliyuncs.com/images/202110/a14c01a884412505954450617dcfd5ad379481.png?x-oss-process=image/resize,w_721,h_826)
三.后台程序
注册完文件后,选择后台程序活动,在Java文件目录中可直接选择主活动MainAbility,也可以自行创建一个新的后台活动,如MyWidgetAbility,
![](https://harmonyos.oss-cn-beijing.aliyuncs.com/images/202110/33b402c82f8705ffdc2279ebf994e71e499a9d.png?x-oss-process=image/resize,w_336,h_206)
自行选择即可。然后这里也需要在config.json文件中进行注册,注意,这里的“icon”、“description”、“type”都是空的,需要自行补充类型与内容
![](https://harmonyos.oss-cn-beijing.aliyuncs.com/images/202110/d7179e098a4302e0a50875f47cc9ed137d064d.png?x-oss-process=image/resize,w_820,h_707)
四.编译
最后对注册完且拥有后台程序的卡片进行编译
例:
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”
}
}
}
}
最后呈现效果:
![](https://harmonyos.oss-cn-beijing.aliyuncs.com/images/202110/11f2c7513ca631edaf99283abdfed1d61050e9.png?x-oss-process=image/resize,w_482,h_337)
本文档材料主要参考官方文档学习体验整理
附件: