HarmonyOS应用开发-自定义卡片 精华

鸿蒙时代
发布于 2021-10-29 11:20
浏览
1收藏

一.创建
创建工程之后,只要勾选Show in Service Center,所处项目中初始都会存在一个EntryCad文件与widget文件,这是初始的默认小卡与快照
HarmonyOS应用开发-自定义卡片-鸿蒙开发者社区
然后我们自定义创建卡片,选择在js文件下,创建mywidget文件夹
HarmonyOS应用开发-自定义卡片-鸿蒙开发者社区
HarmonyOS应用开发-自定义卡片-鸿蒙开发者社区
然后再该文件目录下面创建卡片所需的文件目录common(资源目录)、i18n目录、pages(文件编译目录,非必创建)
HarmonyOS应用开发-自定义卡片-鸿蒙开发者社区
然后再pages文件目录下创建可编译文件(可自行命名,这里默认index)index.css(样式文件)、index.hml(结构文件)、index.json(数据文本)
HarmonyOS应用开发-自定义卡片-鸿蒙开发者社区
当然,也有更加便捷的创建方式,那就是直接将widget文件在js目录下进行复制一遍,然后重命名即可!
二.注册
创建完文件后,需要将文件到config.json文件中进行注册才能进行使用(为卡片),在“js”数组中进行注册,注册的类型为卡片
HarmonyOS应用开发-自定义卡片-鸿蒙开发者社区
在“form”数组注册,这里是注册卡片的尺寸
HarmonyOS应用开发-自定义卡片-鸿蒙开发者社区
三.后台程序
注册完文件后,选择后台程序活动,在Java文件目录中可直接选择主活动MainAbility,也可以自行创建一个新的后台活动,如MyWidgetAbility,
HarmonyOS应用开发-自定义卡片-鸿蒙开发者社区
自行选择即可。然后这里也需要在config.json文件中进行注册,注意,这里的“icon”、“description”、“type”都是空的,需要自行补充类型与内容
HarmonyOS应用开发-自定义卡片-鸿蒙开发者社区
四.编译
最后对注册完且拥有后台程序的卡片进行编译
例:
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”
}
}
}
}
最后呈现效果:
HarmonyOS应用开发-自定义卡片-鸿蒙开发者社区
本文档材料主要参考官方文档学习体验整理

HarmonyOS应用开发-自定义卡片.docx 286.95K 13次下载
2
收藏 1
回复
举报
回复
    相关推荐