DTV SDK 文档

> ⚠️ DTV SDK 已经迁移到 @envision-digital/dtv-sdk，请前往新页面获取最新版本信息。

描述

利用此SDK可以在宿主页面和DTV创建的页面之间构建通信通道，提供比如
* 切换显示模式
* 添加删除Widget
* 修改个人信息等

安装

使用 yarn
``
yarn add enos-dtv-sdk
`
使用 npm

`
npm install enos-dtv-sdk
`

引用

`
import DTVPage from 'enos-dtv-sdk'
`

Usage

初始化页面实例

创建页面实例

`ts
const instance = new DTVPage(pageId: string, targetWindow: Window);
`

#### 参数
* pageId: 对应渲染页面的id，识别和校验数据(安全考虑)
* targetWindow: 渲染了DTV页面的window实例，用来定位页面

#### class interface

详情见最后

接口

实例对象暴露的接口列表

$3

注册page页面的事件接收


#### 示例
`ts
instance.subscribeActions({ onWidgetEdit,  onWidgetDelete,  onWidgetSave,  onWidgetCancel,  onPageChage})
`

#### 参数
* onWidgetEdit
当用户点击某个widget开始编辑时调用
* widgeId: 编辑的widget的id
* link： 编辑的渲染页面URL
* onWidgetDelete
当用户点击某个widget，想要移除widget时调用
* widgetId: 想要删除Widget的Id
* onWidgetSave
当某个用户进入widget编辑态， 保存编辑时调用
* widgetId：这次保存的widget的id
* status: 这次保存的状态，成功或者失败
* onWidgetCancel
当某个用户进入widget编辑态，取消编辑时调用
* widgetId: 取消编辑的widget的Id
* onPageChage
当用户修改了页面的profile(改变了filter，改变了背景等)是调用
* profile: 记录一些用户行为对于页面的改变

#### 声明

`ts
type PageProfile = {   
filters: any[];
}

type onWidgetEditFn = (widgetId: string, link: string) => void;
type onWidgetDeleteFn = (widgetId：stirng) => void;
type onWidgetSaveFn = (widgetId, status: status) => void;
type onWidgetCancelFn= (widgetId： string) => void;
type onPageChangeFn = (profile: PageProfile) => void;
`

$3

无返回

$3

进入编辑模式

#### 示例
`ts
instance.switchToEdit(): Promise
`

#### 参数
无

#### 返回
Promise

`TS
type FunctionReturn = {   
code: status;   // 请求是否成功
message?: string;    // 请求失败的message
data?: any // 请求返回的数据
}

enum status {  
success = 1,  
error = -1
}
`




$3


回到只读模式
#### 示例
`ts
instance.switchToDisplay(): Promise
`

#### 参数
无

#### 返回

Promise

`TS
type FunctionReturn = {   
code: status;   // 请求是否成功
message?: string;    // 请求失败的message
data?: any // 请求返回的数据
}

enum status {  
success = 1,  
error = -1
}
`




$3

获取可选的业务组件模板
#### 示例
`ts
instance.getBusinessWidgets(): Promise
`

#### 参数
无

#### 返回

* code: -1 | 1; 标记请求成功或者失败
* message: string； 如果成功则为空，如果失败，会有失败的message
* data: 返回的数据，格式如下
`ts
type BusinessWidgetTemplate = {   
name: string;   
id: string;   
tags: string[];   
thumbnail: string; // a url
}

interface BusinessWidgetsReturn extends FunctionReturn {   
data: BusinessWidgetTemplate[] | [];
}
`

$3


添加 business widget到当前 page
#### 示例
`ts
instance.addWidgetFromTemplate(templateId: string): Promise
`

#### 参数
* templateId: 需要添加的business widget Id

#### 返回

Promise

`TS
type FunctionReturn = {   
code: status;   // 请求是否成功
message?: string;    // 请求失败的message
data?: any // 请求返回的数据
}

enum status {  
success = 1,  
error = -1
}
`




$3


重新渲染page中的某个widget，一般需要在widget修改之后调用
#### 示例
`ts
instance.refreshWidget(widgetId：string): Promise
`

#### 参数
* widgetId： 需要刷新的widget的ID

#### 返回

Promise

`TS
type FunctionReturn = {   
code: status;   // 请求是否成功
message?: string;    // 请求失败的message
data?: any // 请求返回的数据
}

enum status {  
success = 1,  
error = -1
}
`

$3


重新渲染整个页面，一般在保存之后，可能需要调用
#### 示例
`ts
instance.refreshPage(): Promise
`

#### 参数
无

#### 返回

Promise

`TS
type FunctionReturn = {   
code: status;   // 请求是否成功
message?: string;    // 请求失败的message
data?: any // 请求返回的数据
}

enum status {  
success = 1,  
error = -1
}
`

$3

保存布局修改
#### 示例
`ts
instance.saveLayout(isSaveNew: boolean): Promise
`

#### 参数
- isSaveNew: 是否保存为新页面

#### 返回

Promise

`TS
type FunctionReturn = {   
code: status;   // 请求是否成功
message?: string;    // 请求失败的message
data?: any // 请求返回的数据
}

enum status {  
success = 1,  
error = -1
}
`

$3

修改页面展示的内容，页面ID

#### 示例
`ts
instance.changePage({
id: 'new-page-id',
filters: {
test: 'app-portal'
}
});
`

#### 参数
`ts
export type PageChangeParams = {
id: string;
filters: {
[key: string]: string;
};
}
`

$3

改变页面filter

#### 示例

`ts
instance.changeFilter({test: 'apim-web'});
`

#### 参数
`ts
type filters = {
[key:string]: string
}
`

$3

删除组件

#### 示例
`ts
instance.deleteWidget(widgetId: string, widgetType?: string): Promise
`

#### 参数
- widgetId: 组件id
- widgetType: 组件类型

$3

退出编辑态

#### 示例
`ts
instance.cancelEdit(): Promise
`

#### 参数
无

$3

绑定通用事件处理函数

#### 示例
`ts
instance.on(eventType: EventType, handler: EventHandler)
`

#### 参数
* eventType: 事件类型
* handler: 事件处理函数

`ts
type EventType = 'custom' | '...'; // 待扩展

type EventInfo = {
source: 'dtd' | 'dtm';
pageId: string;
timestamp: string;
eventType: string; // 事件类型
payload: any; // 事件携带信息，依据事件类型而定
}

interface EventHandler {
(eventInfo: EventInfo): void
}

`

$3

解绑通用事件处理函数

#### 示例
`ts
instance.off(eventType, handler: EventHandler)
`

#### 参数
参考 on 方法

版本依赖

|SDK 版本 | DTV 版本|
| :-| :- |
|0.0.10 | >= SP202206|

Change log

$3


* 增加 on 和 off 方法用于监听 DT 通用事件

$3

* 修改saveLayout方法，接收参数 isSaveNew

$3

* 修改switchToedit方法，接受参数{disableDelete: boolean, disableEdit: boolean}

$3

* 添加changePage 接口，可以实时修改展示的页面
* 添加修改外部filter接口，无缝修改数据

$3

* 初始化接口

Interface

#### 成员
` TS
enum PageMode {  
DISPLAY = 0,  
EDIT = 1,  
INPLACE_EDIT = 2,  
PREVIEW = 3
}

type PageProfile = {   
filters: any[];
}

type onWidgetEditFn = (widgetId: string, link: string) => void;
type onWidgetDeleteFn = (widgetId) => void;
type onWidgetSaveFn = (widgetId, status: status) => void;
type onWidgetCancelFn= (widgetId) => void;
type onPageChangeFn = (profile: PageProfile) => void;


type actions = {   
onWidgetEdit: onWidgetEditFn;   
onWidgetDelete: onWidgetDeleteFn;   
onWidgetSave: onWidgetSaveFn;   
onWidgetCancel: onWidgetCancelFn;   
onPageChange: onPageChangeFn
}

type BusinessWidgetTemplate = {   
name: string;   
id: string;   
tags: string[];   
thumbnail: string; // a url
}

type FunctionReturn = {   
code: status;   // 请求是否成功
message?: string;    // 请求失败的message
data?: any // 请求返回的数据
}

interface BusinessWidgetsReturn extends FunctionReturn {   
data: BusinessWidgetTemplate[] | [];
}


enum status {  
success = 1,  
error = -1
}


interface SDKConsumer {   
targetWindow: Window;   
pageId: string;   
mode: PageMode = PageMode.DISPLAY;   
onWidgetEdit: onWidgetEditFn;   
onWidgetDelete: onWidgetDeleteFn;   
onWidgetSave: onWidgetSaveFn;   
onWidgetCancel: onWidgetCancelFn;   
onPageChange: onPageChangeFn;
}
``