在实现了自定义技能的语音对话功能，对话流程完善后，您还可以使用TPL模板（屏显模板）为技能增加屏显交互的体验。当用户在带屏天猫精灵上使用您的技能时，就可以在屏幕上看到TPL渲染出来的页面。

您可以通过对比 普通自定义技能 和 使用TPL模板的自定义技能 的时序图，来快速理解TPL屏显功能在自定义技能对话中的实现原理。
普通自定义技能单轮对话时序图：
自定义技能单轮对话时序图.png

使用TPL模板的自定义技能单轮对话时序图：红色字体部分为TPL模板功能实现的步骤。
TPL功能时单轮对话时序图.png

为了开发者可以快速上手使用屏显模板功能，我们提供了一批开箱即用的精选模板，开发者只需在回复中增加引用屏显模板的渲染指令，按照模板要求的字段结构传输数据，即可快速为技能添加屏显交互界面。

屏显模板目前还处于邀请内测阶段，如果您想成为第一批参与测试的开发者，请加入我们的开发者钉钉交流群申请（31630820）。

入门：精选模板

在您加入参与内测后，在原有技能创建流程中的“语音交互模型创建”的下一阶段，即可看到“屏显模板”入口。

点击进入后，首先会展示平台现阶段提供的精选模板，可以点击预览，查看模板的效果。
1592848274142-c02782bf-3c02-47f7-8434-d61c99e7e052.png

  • 进入预览模式后，可以看到模板需要填充的数据结构，以及模拟效果。修改左侧的模拟数据，可以实时看到模板的渲染效果。

1592848364865-32c30f9a-11a0-4a26-9910-5a11eb392afb.png
左侧为编辑器区域， data.json 为模板的数据定义，在调用时，需要按照这个定义来传输实际的数据。
右侧为模拟器区域，可以实时预览模板的渲染效果（在线模拟器可能会与实际真机效果有一些差异）
右上角为操作栏区域，在预览模式下，可以完成“定制”、“真机预览”、及“复制指令”操作。

  • 定制：在该模板的基础上，创建一个新的模板
  • 真机预览：在当前技能绑定的真机测试设备中预览模板效果（基于模拟数据 data.json），可以在编辑器中修改模拟数据，查看不同数据下的渲染效果
  • 复制指令：复制引用该模板的渲染指令，可以将该指令复制到技能回复逻辑代码中进行参考开发
    • 使用模板的步骤：

  • 在模板的预览页面，点击”复制指令”按钮，可以将使用该模板的指令复制到系统的剪贴板中，指令内容如下示例：

    1. {
    2. "commandDomain": "AliGenie.Screen",
    3. "commandName": "Render",
    4. "payload": {
    5. "pageType": "TPL.RenderTemplate",  // 表示该渲染指令为模板渲染模式
    6. "data": {
    7.  "template": "Genie_ImageText3",  // 模板的唯一标识
    8.  "pageTitle": "图文模板",   // 真机渲染时显示在顶部导航栏的标题
    9.  "dataSource": {  // 渲染模板所需的数据，即 data.json 中定义的字段
    10.    "imageUrl": "https://img.alicdn.com/tfs/TB1FHUFLqL7gK0jSZFBXXXZZpXa-720-405.jpg",
    11.    "title": "图文模板",
    12.    "detail": "目前提供了 3 个简单图文类模板，分别为左图右文、右图左文、突出重点这3种布局模式"
    13.  }
    14. }
    15. }
    16. }

  • 屏显模板渲染能力的意图回复数据，示例如下：

    1. {
    2. "returnCode": "0",
    3. "returnErrorSolution": "",
    4. "returnMessage": "",
    5. "returnValue": {
    6.    "reply": "",  // 该属性在使用gwCommands后失效，请使用 Speak 指令来设置
    7.    "resultType": "RESULT",
    8.    "executeCode": "SUCCESS",
    9.    "msgInfo": "",
    11.    // 以下为指令
    12.    "gwCommands": [{  
    13.      "commandDomain": "AliGenie.Speaker",  // 播报指令
    14.      "commandName": "Speak",
    15.      "payload": {   
    16.        "type": "text",
    17.        "text": "目前提供了 3 个简单图文类模板，分别为左图右文、右图左文、突出重点这3种布局模式",  // TTS 播报内容  
    18.        // "expectSpeech": true, // 如果需要开麦，这里需要设置为 true，默认为 false
    19.        // "wakeupType": "continuity", // 如果需要开麦，这里需要设置为 continuity
    20.      }
    21.    }, {  
    22.      "commandDomain":"AliGenie.Screen",
    23.      "commandName":"Render",  
    24.      "payload":{
    25.        "pageType":"TPL.RenderTemplate",
    26.        "data": { 
    27.          "template": "Genie_ImageText3",  // 模板的唯一标识
    28.          "pageTitle": "图文类模板",   // 真机渲染时显示在顶部导航栏的标题
    29.          "dataSource": {  // 渲染模板所需的数据，即 data.json 中定义的字段
    30.            "imageUrl": "https://img.alicdn.com/tfs/TB1FHUFLqL7gK0jSZFBXXXZZpXa-720-405.jpg",
    31.            "title": "图文类模板",
    32.            "detail": "目前提供了 3 个简单图文类模板，分别为左图右文、右图左文、突出重点这3种布局模式"
    33.          }
    34.        }
    35.      }
    36.    }]
    37. }
    38. }

进阶：自定义模板

当平台提供的精选模板无法满足您的业务需求和场景时，您可以选择开发个性化的自定义模板。
开发模板使用的语法，是基于支付宝小程序开发语法的一个子集，具体的语法支持情况请参考自定义模板开发语法。
模板由 4 部分组成：布局（layout.axml）、样式（style.acss）、逻辑（logic.js）、数据（data.json）。

下面介绍下自定义模板的开发流程：

  • 创建模板
    • 如果您需要基于平台提供的精选模板进行定制，可以在精选模板列表中选取需要的模板进行定制

1594315166204-3802ccab-6857-4d88-8719-168466f74224.png

  • 如果您需要从零开始打造模板，可以进入自定义模板页面，点击 + 号进行创建

1594315346427-1e03410c-1114-4448-9494-4e746bb162ca.png

  • 填写模板基本信息完成创建

1594315496013-350e9f02-6624-4927-b8de-104aea9aa750.png
其中”模板标识”即为需要填充到渲染指令中的 template 标识，全局唯一，不可重复。创建的模板从属于账号，不与技能绑定，因此建议使用一个与业务相关的前缀，方便管理和使用。

  • 完成创建后，即可进入在线编辑器进行开发

1594316293114-58c10cfa-1111-4d82-9974-0115dc9c81b0.png

  • 在开发过程中，除了通过模拟器查看效果，还可以点击右上角的“真机预览”，将模板推送到自己的设备上进行测试

1594316454750-8b194890-58d8-4b4d-8a91-ca1fb53b1048.png
使用真机预览时，平台需要先对模板代码进行编译，请耐心等待片刻。编译完成后，会出现已绑定的的真机测试设备列表。若未绑定过设备，需要先按照操作提示进行绑定。
1594316574230-44dfbfc3-a4da-4ba8-90a7-6ba68fe55e5e.png
绑定完成后，即可选定相应设备进行预览推送。

  • 在开发过程中，可以点击“保存”来暂存模板代码，在未发布前，不会影响之前已经发布过的内容。由于在线编辑器暂时还不支持自动保存代码功能，请记得定时保存代码，避免误操作关闭页面，导致未保存的代码丢失。

  • 开发完成后，可以点击“发布”上线新的模板代码。在模板发布后，用户才能体验到新的屏显效果。引用了该模板的技能，会自动使用最新发布的版本，如果模板涉及到数据字段的不兼容更新，建议基于旧模板创建出一个新模板来进行迭代，避免因数据不兼容问题，导致技能的新版本在未上线前，当前版本的技能屏显效果受到影响。

我们将尽快推出模板的多版本能力，以规避模板更新后的兼容问题