PC端调试

介绍

在电视端进行网页开发调试相对繁琐，建议开发者先在PC端上进行开发调试，当网页项目的功能模块、UI布局及业务逻辑完成后再在电视上测试验收，这可显著提升开发效率。

安装依赖

npm install -S @ccos/ccsdk

API

调用方法	功能说明
ccDebug.setDeviceInfo	设置设备信息
ccDebug.setUserInfo	设置用户信息
ccDebug.setAccessToken	设置token信息
ccDebug.setLoginStatus	设置登录信息
ccDebug.setSystemAppVersion	设置系统应用版本
ccDebug.getDeviceInfo	获取设备信息
ccDebug.getUserInfo	获取用户信息
ccDebug.getAccessToken	获取token信息
ccDebug.getLoginStatus	获取登录信息
ccDebug.getSystemAppVersion	获取系统应用版本

焦点切换

介绍

电视端网页与移动端、PC端网页最大不同就是交互方式的区别，电视使用遥控器来操控，如何使网页元素之间能方便切换焦点变得非常重要，当开发的网页有元素焦点切换需求时，推荐开发者使用该插件，该插件又名ccMap插件。

WARNING

不推荐开发者使用 button、input 等标签作为落焦元素，尽管浏览器内核会自动寻址这些标签元素，但不利于控制，也存在兼容性问题。推荐使用 <div> 标签作为落焦元素。

安装与环境依赖

直接下载并用<script>标签引入，开发版本链接， ccMap会被注册为一个全局变量。在开始使用ccmap.js之前，请确保先引入jQuery：下载链接
推荐使用脚手架工具ccos-cli，通过import ccMap from @ccos/ccmap使用插件

特点

ccMap为全局单例对象
支持链式调用
支持指定寻焦和自动寻焦
支持遥控器按键，鼠标点击和触屏多种交互
支持模拟数字按键输入【待实现】

API与使用

调用方法	功能说明
ccMap.init	初始化焦点，调用其他接口前必须先调用init
ccMap.reset	重置焦点
ccMap.setFocus	指定落焦元素
ccMap.add	添加需落焦元素
ccMap.remove	删除落焦元素
ccMap.setSupportTouch	设置是否支持触摸点击事件
ccMap.setSupportClick	设置是否支持鼠标点击事件【暂不支持】
ccMap.setDebugFlag	设置是否开启调试打印
ccMap.setOnKeydownListener	设置遥控器按键监听
ccMap.setFocusClass	设置元素落焦样式名称

ccMap.init(目标元素组，落焦元素，落焦样式)

初始化焦点

参数	类型	默认值	必填	说明
目标元素组	`String`		是	用同一class标识
落焦元素	`String`	`''`	否	用id或class标识，若不指定，插件会从目标元素组中自动指定
落焦样式	`String`	`hover`	否	自定义落焦样式名称

示例代码

	<div id="container">
		<div id="first" class="coocaa_btn">元素一</div>
		<div id="second" class="coocaa_btn">元素二</div>
		<div id="third" class="coocaa_btn">元素三</div>
	</div>

	ccMap.init(".coocaa_btn", '#second', "btn-focus")

ccMap.reset(目标元素组)

重置焦点

参数	类型	默认值	必填	说明
目标元素组	`String`		是	用同一class标识

示例代码

	<div id="container">
		<div id="first" class="coocaa_btn">元素一</div>
		<div id="second" class="coocaa_btn">元素二</div>
		<div id="third" class="coocaa_btn">元素三</div>
	</div>
	<div id="container">
		<div id="fourth" class="coocaa_btn2">元素四</div>
		<div id="fifth" class="coocaa_btn2">元素五</div>
		<div id="sixth" class="coocaa_btn2">元素六</div>
	</div>

	ccMap.reset(".coocaa_btn2")

ccMap.setFocus(落焦元素)

指定落焦元素

参数	类型	默认值	必填	说明
落焦元素	`String`		是	用id或class标识

示例代码

	<div id="container">
		<div id="first" class="coocaa_btn">元素一</div>
		<div id="second" class="coocaa_btn">元素二</div>
		<div id="third" class="coocaa_btn">元素三</div>
	</div>

	ccMap.setFocus("#third")

ccMap.add(目标元素)

添加需落焦元素

参数	类型	默认值	必填	说明
目标元素	`String`		是	用id或class标识

示例代码

	<div id="container">
		<div id="first" class="coocaa_btn">元素一</div>
		<div id="second" class="coocaa_btn">元素二</div>
		<div id="third" class="coocaa_btn">元素三</div>
	</div>
	<div id="fourth">元素四</div>

	ccMap.init(".coocaa_btn", '#second', "btn-focus").add("#fourth")

ccMap.remove(目标元素)

删除落焦元素

参数	类型	默认值	必填	说明
目标元素	`String`		是	用id或class标识

示例代码

	<div id="container">
		<div id="first" class="coocaa_btn">元素一</div>
		<div id="second" class="coocaa_btn">元素二</div>
		<div id="third" class="coocaa_btn">元素三</div>
	</div>

	ccMap.init(".coocaa_btn", '#second', "btn-focus").remove("#third")

ccMap.setSupportTouch(Boolean)

设置是否支持触摸点击事件

参数	类型	默认值	必填	说明
开关	`Boolean`	`true`	否	默认支持触屏点击事件

示例代码

	<div id="container">
		<div id="first" class="coocaa_btn">元素一</div>
		<div id="second" class="coocaa_btn">元素二</div>
		<div id="third" class="coocaa_btn">元素三</div>
	</div>

	ccMap.init(".coocaa_btn", '#second', "btn-focus").setSupportTouch(false)

ccMap.setDebugFlag(Boolean)

设置是否开启调试打印

参数	类型	默认值	必填	说明
开关	`Boolean`	`true`	否	可以查看插件内打印信息

示例代码

	ccMap.setDebugFlag(false)

ccMap.setOnKeydownListener(Function)

设置遥控器按键监听

参数	类型	默认值	必填	说明
参数	`Function`		是	监听遥控器按键事件

示例代码

	ccMap.setOnKeydownListener(function (e) {
		console.log(e)
	})

ccMap.setFocusClass(String)

设置元素落焦样式名称

参数	类型	默认值	必填	说明
	`String`		是	设置自定义样式class名称

示例代码

	.btn-focus {
		color: #ff0000;
	}

	ccMap.init(".coocaa_btn", '#second', "btn-focus")

指定落焦使用

	<div class="main">
		<div id="f1" class="item coocaa_btn" downTarget="#subf1" rightTarget="#f2" upTarget="#" leftTarget="#">F1</div>
		<div id="f2" class="item coocaa_btn" downTarget="#" rightTarget="#f3" upTarget="#" leftTarget="#f1">F2(default)</div>
		<div id="f3" class="item coocaa_btn" downTarget="#" rightTarget="#f4" upTarget="#" leftTarget="#f2">F3</div>
		<div id="f4" class="item coocaa_btn" downTarget="#subf4" rightTarget="#" upTarget="#" leftTarget="#f3">F4</div>
	</div>

	<div class="nav">
		<div class="item">down<br />↓</div>
		<div class="item">↑<br />up</div>
		<div class="item">↖<br />up</div>
		<div class="item">down<br />↓</div>
	</div>

	<div class="sub">
		<div id="subf1" class="item coocaa_btn" downTarget="#" rightTarget="#subf2" upTarget="#" leftTarget="#">F1</div>
		<div id="subf2" class="item coocaa_btn" downTarget="#" rightTarget="#subf3" upTarget="#f2" leftTarget="#subf1">F2</div>
		<div id="subf3" class="item coocaa_btn" downTarget="#" rightTarget="#subf4" upTarget="#f2" leftTarget="#subf2">F3</div>
		<div id="subf4" class="item coocaa_btn" downTarget="#" rightTarget="#sub" upTarget="#" leftTarget="#subf3">F4</div>
	</div>

	ccMap.init(".coocaa_btn", "#f2", "btn-focus")

重置焦点元素: ccMap.reset(目标元素)

<div id="container">
	<div id="first" class="coocaa_btn">第一组#1</div>
	<div id="second" class="coocaa_btn">第一组#2</div>
</div>
<div id="container2">
	<div id="first2" class="coocaa_btn2">第二组#1</div>
	<div id="second2" class="coocaa_btn2">第二组#2</div>
</div>

ccmap.init(".coocaa_btn", '#second', "btn_class")
    .reset('.coocaa_btn2');

指定元素落焦可以提升焦点切换速度

效果：

CCSDK Lite版

API 调用说明

所有 API 通过_liteNativeApi对象来调用，在页面window.onload后使用。

调用方法	功能说明
_liteNativeApi.start	跳转其他页面
_liteNativeApi.check	检测应用是否存在,如存在可获取版本信息
_liteNativeApi.getInfo	获取设备信息
_liteNativeApi.getProperties	获取系统属性
_liteNativeApi.exit	退出当前页面
_liteNativeApi.exitAll	退出所有页面

在线运行

Vue与ccsdk

Vue与ccmap

CURL 组件

CURL 组件是一个非常有用的组件。主要用于在编写 API 时更好的显示 curl 命令时使用。

例如下面的内容将会渲染成右侧的形式：

<CURL>
```bash
curl -X POST http://api.example.com/api/auth/login \
  --data '{
    "username": "my-username",
    "password": "my-password"
  }'
```
</CURL>

CURL 组件会在组件下方自动生成一个按钮，当点击按钮时，会通过分析 curl 命令内的参数，通过 JS 发送请求到对应的地址上。并将其请求信息输出到浏览器开发者工具中的控制台上。方便进行快速测试和预览。

curl -X POST http://api.example.com/api/auth/login \
  --data '{
    "username": "my-username",
    "password": "my-password"
  }'

# PC端调试

# 介绍

# 安装依赖

# API

# 焦点切换

# 介绍

# 安装与环境依赖

# 特点

# API与使用

# 指定落焦使用

# CCSDK Lite版

# API 调用说明

# 在线运行

# Vue与ccsdk

# Vue与ccmap

# CURL 组件

PC端调试

介绍

安装依赖

API

焦点切换

介绍

安装与环境依赖

特点

API与使用

指定落焦使用

CCSDK Lite版

API 调用说明

在线运行

Vue与ccsdk

Vue与ccmap

CURL 组件