TPL渲染指令（2.0协议）

2.0协议默认选用的模板为技能内模板，所以无需额外指定template

样例

  1. {
  2.     "version":"2.0",
  3.     "response":{
  4.         "outputSpeech":{
  5.           "type":"PlainText",
  6.             "text":"杭州未来四天内天气变化较大，周四会有雨。晚上气温较低请注意防寒保暖。"
  7.         },
  8.         "directive":[
  9.           {
  10.             "type":"TPL.RenderDocument",
  11.             "document":{
  12.               "pageType":"AliGenie.Page",
  13.               "data":{
  14.                 "layout":{
  15.                   "backgroundColor":"linear-gradient(180deg, #5BD7CD 0%, #3DBAD3 100%)"
  16.                 },
  17.                 "content":[{
  18.                   "dataSource":{} //waft包中需要用到的数据内容
  19.                 }]
  20.               }
  21.             }
  22.           }
  23.         ],
  24.         "shouldEndSession":true,
  25.         "expectSpeech":false
  26.     }
  27. }

参数说明

属性 描述
type 指令类型，固定字符串：TPL.RenderDocument
document 渲染页面信息
document.pageType 页面类型。目前支持
- AliGenie.Page：全屏页面
- AliGenie.Card：轻服务卡片
document.data 页面数据信息
document.data.layout 样式信息。
document.data.content 页面内容，暂时只支持单内容
document.data.content.datasource 页面需要用到的数据

TPL数据更新指令（2.0协议）

样例

  1. {
  2.     "version":"2.0",
  3.     "response":{
  4.         "directives":[
  5.             {
  6.                 "type":"TPL.UpdateDataSource",
  7.                   "dataSource":{}
  8.             }
  9.         ]
  10.     }
  11. }

参数说明

属性 描述
type 指令类型，固定字符串：TPL.UpdateDataSource
dataSource 要更新的数据

TPL模板渲染指令（1.0协议）

该指令用于在技能服务端的回复逻辑中指定模板进行显示，指令内容如下示例：

  1. {
  2.     "commandDomain": "AliGenie.Screen",
  3.     "commandName": "Render",
  4.     "payload": {
  5.           "pageType": "TPL.RenderDocument",  // 表示该渲染指令为模板渲染模式
  6.           "data": {
  7.                 "pageTitle": "TPL2.0屏显示例",   // 真机渲染时显示在顶部导航栏的标题
  8.                 'template': "tpl_code",  // 模板的唯一标识
  9.                 "dataSource": {  // 渲染模板所需的数据
  10.                 "imageUrl": "https://img.alicdn.com/tfs/TB1FHUFLqL7gK0jSZFBXXXZZpXa-720-405.jpg",
  11.                 "title": "模板标题",
  12.                 "detail": "模板描述"
  13.             },
  14.               "config": { //全局配置
  15.                   "header": {   // 标题栏配置, 没有该字段，则表示不展示native的标题栏。
  16.                         "enabled": true,  //  是否显示标题栏，默认为false
  17.                       "height": "100rpx",
  18.                       "foregroundColor": "#FF7383A2",  // 指定标题栏的文字和箭头icon颜色，格式：#AARRGGBB，默认为白色
  19.                       "backgroundColor": "#FFFFFFFF"   // 指定标题栏的背景格式：#AARRGGBB，默认为透明色     
  20.                   },
  21.                   "body": { 
  22.                       //卡片加载前的背景色：支持纯色和渐变色，默认灰白色#D4E0F0
  23.                       "backgroundColor":"linear-gradient(180deg, #5BD7CD 0%, #3DBAD3 100%)"//或#FF00FF
  24.                   }
  25.               }
  26.           }
  27.     }
  28. }