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

一、DEMO效果图

二、DEMO视频

爱的表达视频

三、万能卡片开发说明
说明提示：卡片中的资源需要在卡片中的common文件中自行添加。
1.微卡widgetWK

横向布局，设置点击事件onclick
代码实现：
index.hml

    我爱你    {{ name }}

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

        
 {{ name }} 我爱你    

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

        {{ language }}    
 {{ name }} 我爱你    

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

    
 {{name}} 我爱你    
    
  {{ language }}    

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"      }    }  }}