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