自适应卡片背景图像 NodeJS答案

【问题标题】：Adaptive Cards background image NodeJS自适应卡片背景图像 NodeJS
【发布时间】：2019-07-11 11:19:16
【问题描述】：

我正在使用 Bot Framework 在团队频道上呈现自适应卡片。它可以很好地渲染卡片，但桌面客户端和移动客户端的背景图像不同。第一张图是桌面客户端的渲染图，第二张图是移动端的。

https://i.stack.imgur.com/mKl1z.png

https://i.stack.imgur.com/HAumI.jpg

有没有办法可以改变它在手机上的呈现方式？或者将 CSS 添加到自适应卡片中？

这是我用来构建卡片的 JSON：

{  
   $schema:"http://adaptivecards.io/schemas/adaptive-card.json",
   type:"AdaptiveCard",
   version:"1.0",
   backgroundImage:"https://www.totalmortgage.com/images/claimed-blue.jpg",
   backgroundImageMode:"stretch",
   body:[  
      {  
         "type":"ColumnSet",
         "columns":[  
            {  
               "type":"Column",
               "items":[  
                  {  
                     "type":"TextBlock",
                     "size":"Large",
                     "weight":"bolder",
                     "text":"Application Offer",
                     "wrap":true,
                     "maxLines":0
                  }
               ]
            },

         ]
      },
      {  
         "type":"TextBlock",
         "size":"medium",
         "text":"**New Lead has arrived:**",
         "wrap":true,
         "maxLines":0
      },
      {  
         "type":"ColumnSet",
         "columns":[  
            {  
               "type":"Column",
               "items":[  
                  {  
                     "type":"TextBlock",
                     "spacing":"small",
                     "size":"default",
                     "text":"**First Name** : ",
                     "wrap":true,
                     "maxLines":0,
                     "seperator":true
                  },
                  {  
                     "type":"TextBlock",
                     "spacing":"small",
                     "size":"default",
                     "text":"**Last Name** : ",
                     "wrap":true,
                     "maxLines":0
                  }
               ]
            },

         ]
      },
      {  
         "type":"TextBlock",
         "spacing":"small",
         "size":"default",
         "text":"**Property State** : "+sfdata['property_state'],
         "wrap":true,
         "maxLines":0
      }
   ]
};

【问题讨论】：

您可以包含卡片的 JSON 吗？在移动设备上是 Android 还是 iOS？您不能将 CSS 添加到自适应卡片中，但我们可以研究为什么它的呈现方式不同
我已经为卡片添加了 JSON。它在 iOS 和 Android 上呈现相同的效果。
如果您对此有任何进展，想跟进吗？

标签： botframework microsoft-teams adaptive-cards

【解决方案1】：

使用 1.1 版

{  
   "$schema":"http://adaptivecards.io/schemas/adaptive-card.json",
   "type":"AdaptiveCard",
   "version":"1.1",
   "backgroundImage": {
       "url": "https://www.totalmortgage.com/images/claimed-blue.jpg",
        "fillMode": "repeat",
        "horizontalAlignment": "left",
        "VerticalAlignment ": "center"
   },
   "body":[  
      {  
         "type":"ColumnSet",
         "columns":[  
            {  
               "type":"Column",
               "items":[  
                  {  
                     "type":"TextBlock",
                     "size":"Large",
                     "weight":"bolder",
                     "text":"Application Offer",
                     "wrap":true,
                     "maxLines":0
                  }
               ]
            }
         ]
      },
      {  
         "type":"TextBlock",
         "size":"medium",
         "text":"**New Lead has arrived:**",
         "wrap":true,
         "maxLines":0
      },
      {  
         "type":"ColumnSet",
         "columns":[  
            {  
               "type":"Column",
               "items":[  
                  {  
                     "type":"TextBlock",
                     "spacing":"small",
                     "size":"default",
                     "text":"**First Name** : ",
                     "wrap":true,
                     "maxLines":0,
                     "seperator":true
                  },
                  {  
                     "type":"TextBlock",
                     "spacing":"small",
                     "size":"default",
                     "text":"**Last Name** : ",
                     "wrap":true,
                     "maxLines":0
                  }
               ]
            }
         ]
      },
      {  
         "type":"TextBlock",
         "spacing":"small",
         "size":"default",
         "text":"**Property State** : ",
         "wrap":true,
         "maxLines":0
      }
   ]
}

在此处检查问题： https://github.com/Microsoft/AdaptiveCards/issues/477

PS：您的 JSON 卡有一些无效代码。随时查看Visualizer！

【讨论】：