什么是TPL

    TPL 是 Tmallgenie Presentation Language 的缩写，是为面向有屏音箱的技能开发者提供的一个新的解决方案，开发者在实现了自定义技能的完整语音对话功能后，可以创建一个 TPL 模板（屏显模板）为技能增加全屏的屏显交互体验。

TPL交互流程

和TPL1.0的区别

TPL的开发流程

创建屏显模板

访问智能应用平台访问技能详情，添加完白名单权限后，即可在技能的管理界面中看到“屏显模板”入口

点击新建屏显模板，输入模板相关信息，其中“模板标识”即为需要填充到渲染指令中的 template 标识，全局唯一，不可重复（创建的模板从属于账号，不与技能绑定，因此建议使用一个与业务相关的前缀，方便管理和使用）。

查看开发指引

创建完屏显模板后，您可以点击详情进入开发指引页面（如果您后续已经熟悉这套流程，也可以在当前列表页中完成其他按钮的操作）

进行源码开发

本地源码开发应用

源码开发，请参考Waft源码开发文档快速开始。

服务端开发

渲染指令

发布成功后，您可以在服务端的回复逻辑中指定一条渲染指令用于唤起屏显模板，指令内容如下示例：

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

TTS播报指令

// TTS 播报来自文本
{
    "commandDomain": "AliGenie.Speaker",
    "commandName": "Speak",
       "payload": {
          "expectSpeech": true, // 如果需要开麦，这里需要设置为 true
          "wakeupType": "continuity", // 如果需要开麦，这里需要设置为 continuity
          "type": "text",    // 如果播报内容来自文本，type 需要设置为 text
          "text": "这是您要播报的内容！",  // TTS 播报内容
    }
}

其他指令，可以参考这里。

发布模板

本地源码开发完，通过插件构建出最终的产物（.wasm 或 .aot 格式），回到平台侧完成上传，屏显模板即发布上线。

注意：如果您当前已经发布过一个线上屏显模板，针对当前源码的小改动（如 UI 部分）可重新打包上传，线上即生效，如果存在较大的改动建议您新建一个屏显模板来测试，测试通过后再返回到正式的屏显模板页面进行包的上传。

效果展示

当您的渲染指令配置生效后，通过技能唤醒词即可唤起屏显卡片，赶快试试让您的技能动起来吧～