1. 概述

本文档主要帮助开发者能够快速开发一个能够运行于TV的快应用或者卡片。包括开发环境的搭建，项目的新建、调试、打包以及卡片的开发

快应用或者卡片支持多屏幕能力

2. 环境搭建[l(1]

2.1 安装快应用IDE

工具下载地址

2.2 连接TV

2.2.1网线直连：

1. pc双网口之一连接到tv板网口

2.更改pc“未识别网络”适配器设置，如图:

3.设置tv板网络，如图:

4.pc端输入adb connect 192.168.1.4 即adb连接到tv板，完成

2.2.2无线连接：

1.确保TV与PC处于同一网段

2.TV输入adb connect [ip]:[port] 连接机顶盒（默认端口为5555）

连接成功，显示如图：

2.3 安装TV快应用加载器

adb install FastappLoaderTV.apk

2.4华为快应用IDE使用指导，请参考：

3. 创建项目[l2]

3.1 操作指导

步骤 1 打开IDE，点击“文件”菜单，在下拉菜单中选择“新建项目”（或者点击欢迎使用界面的“新建项目”），开启新建项目的窗口。

步骤 2 填入“项目名称”、“rpk包名”，在“工作空间”选择代码存放的硬盘路径，在“模板”选项中选择项目模板（已提供Hello World，阅读，新闻，电商，外卖，儿童教育，H5游戏模板，快应用示例使用）（窗口右侧可以看到已选择模板的概览），点击“创建”按钮，完成新建项目。

注：rpk包名的命名规则如下，长度3~100，支持小写英文字母和数字，推荐采用com.company.module格式。

4. 新增支持TV开发规范

4.1 获取系统字体

增加获取系统字体，时区和EMUI版本号的获取，监听字体变化接口提供(1040+,，华为特有，非厂商规范)

device.getInfo()返回新增3个字段：

timeZone (1040+)	String	当前的系统时区，如GMT+08:00。
emuiVer（1040+）	String	EMUI的系统版本号，如9.0.0
fontScale(1040+)	Number	用户字体大小设置。以“系统-设置-通用-字体大小”中的设置为准，例如0.9， 1，1.1，1.3，1.5等
characteristics(String) (1040+)	String	终端类型，通过读取ro.build. characteristics获取： default，tv，tablet，phone，default也代表为phone

device组件新增监听接口用于监听系统字体变化：

device.onFontScaleChange(OBJECT)

用于监听系统字体设置的比例改变的接口，当系统字体设置改变时，触发callback回调

参数

参数名	类型	必填	说明
callback	Function	否	每次系统字体设置的比例发生变化，都会被回调
fail	Function	否	失败回调

success返回值

参数值	类型	说明
fontScale	String	字号

示例

device.onFontScaleChange({
callback: function(ret) {

console.log('fontScale ==' + ret.fontScale);

}[g3]
});

4.2 响应遥控事件

快应用中，提供左、右、上、下、确定、返回、HOME（暂不实现）、onfocus，onMenuButtonPress，onblur,按键的事件处理接口及focus方法

1 返回事件和菜单事件开放：

复用快应用已经开放的onBackPress事件，快应用通过实现这个事件回调来处理返回键

onBackPress

Function

无

Boolean

监听返回按钮动作

当用户点击返回按钮时触发。
● 返回true表示页面自己处理返回逻辑。
● 返回false表示使用默认的返回逻辑。
● 不返回值会作为false处理。

onMenuButtonPress(TV特有，1040+，非厂商规范)

Function

无

Boolean

监听菜单按钮动作

用户点击遥控器的菜单按键会触发

返回true表示页面自己处理返回逻辑。
● 返回false表示使用默认的返回逻辑。
● 不返回值会作为false处理。

[g4]

2 左、右、上、下，确定事件开放(TV特有，1040+，非厂商规范)：

增加onkeydown的通用事件：

名称	参数	描述
keydown	KeyEvent	遥控器按键事件（非厂商联盟规范）

KeyEvent类型说明，继承与BaseEvent(1040+)：

属性

类型

说明

code

Int

按键按钮：

19: 上

20：下

21：左

22：右

23：确定

3 onfocus，onblur需要扩展为通用事件，都需要支持，而不仅仅是用户输入的组件，包括onfocus对应的伪类支持(1040+，非厂商规范)

4 所有组件都支持通用方法focus()用于设置焦点：(1040+，非厂商规范)

名称

参数

描述

focus

Object，非必选

{focus:true|false}，focus不传默认为true 设置焦点

针对组件设置焦点

[g5]

4.3 新增获取主题信息接口

device新增主题获取接口，依赖于应用底层的一个xml文件，假如获取失败走fail分支，这种场景下建议配置缺省样式确保程序正常运行：

device.getTheme(OBJECT)

参数名	类型	必填	说明
success	Function	否	成功回调
fail	Function	否	失败回调
complete	Function	否	执行结束后的回调

success返回值

参数值	类型	必填	说明
title	String	是	当前主题名字
title-cn	String	否	当前主题中文名字
author	String	是	当前主题的作者
designer	String	否	当前主题的设计师

version	String	否	当前主题的版本号
[g6] font	String	否	当前主题的字体
font-cn	String	否	当前主题的字体中文名字
darkMode	Boolean	是	是否为深色模式

示例代码：

device.getTheme({
success: function(ret) {

console.log('theme title' + ret.title);

}
});

4.4 MediaQuery规范(多屏自适应规范)

实现CSS3的 Media Query功能：

（1）可以针对不同的屏幕尺寸设计匹配不同的布局样式。

（2）当屏幕动态改变（比如横屏、竖屏切换），页面可以响应匹配不同的样式。

（3）支持卡片模式。

CSS语法规则：

@ media方式引入媒体查询

@media [media type] [and|not|only] [(media feature)] {

CSS-Code;

}

例如：

@media (max-width: 30) { ... } // level3的写法。

@media (width <= 30) { ... } // level4的写法，比level3更清晰简洁。

@media screen and (min-width: 400) and (max-width: 700) { … } //多条件写法。

@media (400 <= width <= 700) {… } // 多条件level4写法。

@import 方式引入媒体查询

@import ‘./css_file_name.css’ [media type] [and|not|only] [(media feature)];

例如：

@import './style.css' screen and (min-width: 400) and (max-width: 700);

接口

{'name': 'system.mediaquery'}

导入接口

import mediaquery from '@system.mediaquery' 或 var mediaquery = require('@system.mediaquery')

示例：

var mql = mediaquery.matchMedia('(max-width: 600)');

MedaQueryList接口属性

属性名	类型	描述
matches	Boolean	如果匹配当前查询条件返回true，否则返回false。只读。
media	String	代表一个序列化的媒体查询条件。只读。
onchange	Function	如果设置了该函数，matches状态变化会触发该函数执行。

MedaQueryList. addListener (callback)

向MediaQueryList添加一个监听函数。

参数名	类型	默认值	必填	描述
callback	Function		是	匹配条件发生变化，响应函数

示例：

var mql = mediaquery.matchMedia('(max-width: 600)');

function screenTest(e) {

if (e.matches) {

// change element style

} else {

// change element style

}

mql.addListener(screenTest);[g7]

移除监听：

mql.removeListener(screenTest);

[l(1]新增TV环境搭建

[l2]更换新建项目图片

[g3]卡片上怎么用？针对每一个设置字体大小的地方修改class？

[g4]全局事件卡片无法处理,

卡片内嵌在各超级应用中，不适合监听back事件。

[g5]如何设置，初始化焦点如何配置？相应前后左右按键的时候卡片上相应的元素查找逻辑是如何？

[g6]这个是为了卡片可以根据当前的主题自适应的设置卡片主题色?是否会有根据品牌适配一下的问题引入？

[g7]监听媒体变化后需要卡片自己设置相应的css？如何设置？回调函数中的e是指符合该条件的元素么？