开发一个520的HarmonyOS元服务万能卡片DEMO

鸿蒙时代
发布于 2023-5-9 14:13
浏览
1收藏

一、DEMO效果图
开发一个520的HarmonyOS元服务万能卡片DEMO-鸿蒙开发者社区
二、DEMO视频
【点击链接查看视频】(https://ost.51cto.com/show/23790)
三、万能卡片开发说明
说明提示:卡片中的资源需要在卡片中的common文件中自行添加。
1.微卡widgetWK
开发一个520的HarmonyOS元服务万能卡片DEMO-鸿蒙开发者社区
横向布局,设置点击事件onclick
代码实现:
index.hml

<div class="container" onclick="routerEvent">
    <text class="title" style="margin-end: 6px;">我爱你</text>
    <text class="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
开发一个520的HarmonyOS元服务万能卡片DEMO-鸿蒙开发者社区
左右布局,设置点击事件onclick
代码实现:
index.hml

<div class="container">
    <image class="img" src="{{imgPath}}" onclick="routerEvent"></image>
    <div class="right_box" onclick="routerEvent">
        <text class="title">{{ name }}</text>
        <text class="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
开发一个520的HarmonyOS元服务万能卡片DEMO-鸿蒙开发者社区
横向布局,图文配合,设置点击事件onclick
代码实现:
index.hml

<div class="container">
    <image class="img" src="{{imgPath}}" onclick="routerEvent"></image>
    <text class="txt" onclick="routerEvent">{{ language }}</text>
    <div class="right_box" onclick="routerEvent">
        <text class="title">{{ name }}</text>
        <text class="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
开发一个520的HarmonyOS元服务万能卡片DEMO-鸿蒙开发者社区
顶部分出标题区域,下方文字图片呈左右布局,设置点击事件onclick
代码实现:
index.hml

<div class="container">
    <div class="top" onclick="routerEvent">
        <text class="title">{{name}}</text>
        <text class="title" style="margin-left: 10px;">我爱你</text>
    </div>
    <div class="bottom" onclick="routerEvent">
        <image class="img" src="{{imgPath}}"></image>
        <text class="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"
      }
    }
  }
}

标签
开发一个520的HarmonyOS元服务万能卡片DEMO.docx 1.29M 9次下载
2
收藏 1
回复
举报
1条回复
按时间正序
/
按时间倒序
鸿蒙时代
鸿蒙时代

​https://ost.51cto.com/show/23790​​ 完整视频,用代码来表示爱。

1
回复
2023-5-10 22:25:08
回复
    相关推荐