一、DEMO效果图
二、万能卡片开发说明
说明提示:卡片中的资源需要在卡片中的common文件中自行添加。
1.微卡widgetWK
横向布局,设置点击事件onclick
代码实现:
index.hml
<divclass="container"onclick="routerEvent">
<textclass="title"style="margin-end: 6px;">我爱你</text>
<textclass="title">{{ name }}</text>
</div>复制复制
index.css
.container {
flex-direction: row;
justify-content: center;
align-items: center;
width:100%;
height:100%;
background-color:#fffcbbbb;
}
.title{
font-size:16px;
}复制复制
index.json
{
"data": {
"name": "妈妈"
},
"actions": {
"routerEvent": {
"action": "router",
"bundleName": "com.example.showlove.hmservice",
"abilityName": "com.example.showlove.MainAbility",
"params": {
"message": "add detail"
}
}
}
}
2.小卡widget
左右布局,设置点击事件onclick
代码实现:
index.hml
<divclass="container">
<imageclass="img"src="{{imgPath}}"onclick="routerEvent"></image>
<divclass="right_box"onclick="routerEvent">
<textclass="title">{{ name }}</text>
<textclass="title"style="margin-top: 10px;">我爱你</text>
</div>
</div>复制复制
index.css
.container {
flex-direction: row;
justify-content: center;
align-items: center;
width:100%;
background-color:#fffcbbbb;
}
.img{
width:60px;
height:90px;
border-radius:4px;
}
.title{
font-size:16px;
}
.right_box{
margin-left:10px;
flex-direction: column;
justify-content: center;
align-items: center;
height:90px;
}
index.json
{
"data": {
"name": "妈妈",
"imgPath": "/common/images/mather.jpg"
},
"actions": {
"routerEvent": {
"action": "router",
"bundleName": "com.example.showlove.hmservice",
"abilityName": "com.example.showlove.MainAbility",
"params": {
"message": "add detail"
}
}
}
}
3.中卡widgetZK
横向布局,图文配合,设置点击事件onclick
代码实现:
index.hml
<divclass="container">
<imageclass="img"src="{{imgPath}}"onclick="routerEvent"></image>
<textclass="txt"onclick="routerEvent">{{ language }}</text>
<divclass="right_box"onclick="routerEvent">
<textclass="title">{{ name }}</text>
<textclass="title"style="margin-top: 10px;">我爱你</text>
</div>
</div>
index.css
.container {
flex-direction: row;
justify-content: center;
align-items: center;
width:100%;
background-color:#fffcbbbb;
}
.img{
width:70px;
height:100px;
border-radius:4px;
}
.txt{
height:100px;
font-size:14px;
max-lines:5;
text-overflow: ellipsis;
width:150px;
padding:0px 4px 0px 10px;
border-right-width:1px;
}
.title{
font-size:18px;
}
.right_box{
margin-left:4px;
flex-direction: column;
justify-content: center;
align-items: center;
height:90px;
}复制复制
index.json
{
"data": {
"name": "妈妈",
"imgPath": "/common/images/mather.jpg",
"language":"温暖如春的怀抱,甘露般的爱润泽着,每一份付出都是无悔的,为孩子点燃生命的火炬,无论日夜,她们都在,当我们迷失或受伤害,总有一双手紧握着,让我们坚强而勇敢,天下妈妈,是慈爱的象征,在岁月里,缝补着琐事,清晨的曙光,晚上的黑夜,都能看到她们最美的模样。"
},
"actions": {
"routerEvent": {
"action": "router",
"bundleName": "com.example.showlove.hmservice",
"abilityName": "com.example.showlove.MainAbility",
"params": {
"message": "add detail"
}
}
}
}
4.大卡widgetDK
顶部分出标题区域,下方文字图片呈左右布局,设置点击事件onclick
代码实现:
index.hml
<divclass="container">
<divclass="top"onclick="routerEvent">
<textclass="title">{{name}}</text>
<textclass="title"style="margin-left: 10px;">我爱你</text>
</div>
<divclass="bottom"onclick="routerEvent">
<imageclass="img"src="{{imgPath}}"></image>
<textclass="txt">{{ language }}</text>
</div>
</div>
index.css
.container {
flex-direction: column;
justify-content: center;
align-items: center;
width:100%;
background-color:#fffcbbbb;
}
.top{
flex-direction: row;
justify-content: center;
align-items: flex-end;
width:100%;
height:80px;
}
.bottom{
flex-direction: row;
justify-content: center;
align-items: center;
width:100%;
height:100%;
margin-start:12px;
margin-end:12px;
}
.title{
font-size:30px;
}
.img{
width:130px;
height:200px;
border-radius:4px;
}
.txt{
margin-left:15px;
width:130px;
font-size:16px;
max-lines:10;
text-overflow: ellipsis;
}
index.json
{
"data": {
"name": "妈妈",
"imgPath": "/common/images/mather.jpg",
"language":"温暖如春的怀抱,甘露般的爱润泽着,每一份付出都是无悔的,为孩子点燃生命的火炬,无论日夜,她们都在,当我们迷失或受伤害,总有一双手紧握着,让我们坚强而勇敢,天下妈妈,是慈爱的象征,在岁月里,缝补着琐事,清晨的曙光,晚上的黑夜,都能看到她们最美的模样。"
},
"actions": {
"routerEvent": {
"action": "router",
"bundleName": "com.example.showlove.hmservice",
"abilityName": "com.example.showlove.MainAbility",
"params": {
"message": "add detail"
}
}
}
}