DPL

# 快速升级

# 介绍

这份文档是给基于旧版本(1.0)开发者使用的（使用新版本可以跳过），用来对照旧协议升级到最新的 dpl 版本以体验更多的最新功能。

基于 DPL2.0 的新版本的提供了更多的组件和指令能力：

1、更多的复合组件： 基于开发中遇到的实际需求场景，提供了如弹幕、单选框、复选框、菜单栏、按钮等等多种基于 UE 规范设计后，封装好功能完备的组件类型，并提供了一套完备的组件展现与事件交互能力，让你不用再过多的基于基础组件去拼装展现和功能，而是通过标准文档中对复合组件的描述输出规范的组件协议内容，通过提供的组件事件接口和方法接口，完成自己想要的交互功能。

2、组件协议结构优化： 在 1.0 版本中，我们对组件协议制定了一套扁平化的协议描述规范，随着组件中相关内容的增多和功能的增强，扁平化的数据结构带来了一些问题：parser 解析处理的成本越来越大，对性能造成了影响，且不便于升级和维护；在原本组件结构中，缺少类似作用域的概念，不便于语义化和快速理解属性的用途；

3、基础组件升级 对于基础组件，考虑到它们的通用性，为其增加了可自由定义的更多的能力，如 video 组件提供了多层级的槽位，方便在其中不同层次呈现更丰富的内容（如弹幕、与控制按键同层级的自定义 icon 等）；为 container 组件加上了点击事件绑定特定语音话术的能力，丰富了交互的方式和加快响应速度（query 响应不用通过服务端而是在设备端上预设绑定事件在匹配后执行）；

# 如何升级到DPL 2.0？

  1. 需要把原本 document 中对应的 "version": "1.0" 升级成 "version": "2.0", 服务端会基于不同的版本号进行解析，使用 2.0 版本 DPL 必须明确指明 version 字段为 2.0：
// 1.0 版本 version
{
    "type":"DPL",
    "version":"1.0",
    "mainTemplate":{
        ...
    },
    ...
}

// 2.0 版本 version，必须明确指明
{
    "type":"DPL",
    "version":"2.0",
    "mainTemplate":{
        ...
    },
    ...
}
  1. 需要进行组件协议格式调整

# 组件协议格式调整

在 1.0 版本中，我们对组件协议制定了一套扁平化的协议描述规范，随着组件中相关内容的增多和功能的增强，扁平化的数据结构带来了一些问题：parser 解析处理的成本越来越大，对性能造成了影响，且不便于升级和维护；在原本组件结构中，缺少类似作用域的概念，不便于语义化和快速理解属性的用途，因此，我们做了 2.0 版本的升级；

组件内的调整主要在这几部分：

注意：如何将原本 1.0 对应的组件协议数据区分整合到不同的对象属性（styles、props、events）中，请参考下目前文档中的对应组件描述，里面详细描述了目前基于不同组件的可用 props 属性和 events 事件类型，所以可以将在 1.0 版本中非这两类的属性都放在 styles 中。

# 将样式属性整合到 styles 对象中

// 1.0 版本，样式属性片段
{
    "type":"Container",
    "componentId": "demo_container_box",
    "width": "100dp",
    "height": "80dp",
    ...
}
// 将样式属性收集到 styles 对象中

// 2.0 版本，样式属性片段
{
    "type":"Container",
    "componentId": "demo_container_box",
    "styles": {
        "width": "100dp",
        "height": "80dp"
    },
    "props": {...},
    "events": {...},
    ...
}

# 将组件属性整合到 props 中

// 1.0 版本，组件属性片段
{
    "type":"Text",
    "componentId": "demo_text",
    "text": "demo测试",
    ...
}
// 将组件属性收集到 props 中

// 2.0 版本，组件属性片段
{
    "type":"Text",
    "componentId": "demo_text",
    "props": {
        "text": "demo测试"
    },
    "styles": {...},
    "events": {...}
    ...
}

# 将事件绑定整合到 events 中

// 1.0 版本，事件绑定片段
{
    "type":"Container",
    "componentId": "demo_container_box",
    "onClick": [{
        "type": "SendEvent",
        "componentId": "demo_container_box",
        "arguments": ["argument1", "argument2"]
    }],
    ...
}
// 将事件整合到 events 中

// 2.0 版本，事件绑定片段
{
    "type":"Container",
    "componentId": "demo-container-box",
    "events": {
        "onClick": [{
            "type": "SendEvent",
            "componentId": "demo_container_box",
            "arguments": ["argument1", "argument2"]
        }]
    },
    "props": {...},
    "styles": {...},
    ...
}

# 2.0版本标准组件协议字段描述

{
    "type":"Container",
    "componentId": "demo_container_box",
    "styles": {
        "width": "100dp",
        "height": "80dp"
    },
    "props": {
        "enableVoice": true,
        "voiceAction": "select",
        "voiceConfig": "select.name: 测试盒子;"
    },
    "events": {
        "onClick": [{
            "type": "SendEvent",
            "componentId": "demo_container_box",
            "arguments": ["argument1", "argument2"]
        }]
    },
    "items": [{
        "type":"Text",
        "componentId": "demo_text",
        "styles": {
            "font-size": "28dp",
            "color": "red"
        },
        "props": {
            "text": "demo测试"
        },
        "events": {
            "onClick": [{
                "type": "SendEvent",
                "componentId": "demo_text",
                "arguments": ["argument3", "argument4"]
            }]
        }
    }]
}

← DPL 渲染指令结构(RenderDocument) →