5 TV卡片的开发

5.1 新建卡片

步骤1 选择新建卡片入口

① 在左侧资源管理器中，在src文件夹上右键选择“新建卡片”。

② 在菜单栏“文件”下选择“新建卡片”，打开新建卡片窗口。

③ 在资源管理器，点击“+”号选择“新建卡片”。

步骤2 选择卡片类型，填写相关信息[l1] 。

在下面填写卡片名称、ID、卡片文件名等参数，选择一个卡片选项。点击“高级选项”可选填其中参数。填写完毕后点击“确定”。

步骤3 新建卡片成功后，可在manifest.json和launch.json文件中看到widgets的相关配置。

提升代码兼容性，创建卡片时，创建页面文件统一使用.ux后缀；

打开工程时，自动修改wux后缀。

注意：已在manifest.json中配置过的路径，不可作为新建卡片的文件夹路径！例如：

“path”:”/c1”已存在，则不能选择”src/c1/”文件夹新建卡片，需要更改文件夹或者新建文件夹，如更改为”src/c2”/或”src/c1/d2/”。

5.2 卡片代码编写指导

以remoter卡片为例

步骤1 1.卡片文件结构

注意：不使⽤内联CSS，即：CSS不存在于模板所在⽂件(.ux)中

不使⽤内联script，即：script脚本的正⽂不直接写在模板所在⽂件(.ux)中

2.给卡片最外层的div添加 onfoucs事件，响应遥控事件。[g2]

3.keyevent 方法处理遥控器事件的逻辑

3.参考demo代码工程如下。

5.3 配置卡片

① 点击上方菜单栏下拉选项“配置”，进入卡片列表页面。

② 进入卡片列表，选择对应卡片，设置签名类型以及卡片的宽度，点击卡片名称右侧的进行配置参数。

① 添加卡片参数，完成后保存。

② 编辑卡片参数值，完成后点击保存。

③ 设置卡片运行参数值，完成后点击保存。

注：目前支持在新建卡片页和manifest.json中配置卡片参数。

5.4 运行卡片[W(3] [W(4]

方式一：首先在菜单栏下拉选项选择卡片，然后点击“构建”的“运行快应用”。

方式二：选择运行的卡片，点击既可在设备上运行卡片。

5.5 卡片响应遥控事件

方式一：首先在菜单栏下拉选项选择卡片，然后点击“构建”的“运行快应用”。

方式二：选择运行的卡片，点击既可在TV上运行卡片。

6 真机预览

步骤 1 电脑与TV成功连接，具体操作方式可以通过预览界面的链接跳转找到。

步骤2 在菜单栏的配置下拉框选择要编译的文件，点击“实时预览”按钮，页面右侧会出现TV预览界面显示所选文件的内容。

步骤3 rpk、卡片、页面的切换预览，在菜单栏的配置下拉框，更换编译的文件，显示发生变化。

注：点击菜单栏的“同步”按钮或“设备”按钮，可以对右侧的真机预览界面进行打开、关闭控制。

7 真机调试

① 选择调试文件。

② 点击调试开始按钮开始调试。

③ 查看调试服务启动过程中控制台的日志输出。

① 调试进程启动完成，启动调试窗口

② 再次点击调试按钮，先关闭之前的调试窗口，然后重新启动

③ 点击停止按钮，调试窗口关闭。

8 inspect

6 选择运行文件

方式一：点击inspect按钮 。

方式二：在主菜单里点击“构建”->“运行快应用”。

7 编译打包并会在输出窗口打印出打包日志。

8 检查全部通过后，TV上引擎会先启动，输出窗口会给出启动日志（见上图），然后快应用IDE弹出窗口展示TV上app画面，可以通过右侧的开发者工具进行查看元素等操作。

9 元素审查。

10 控制台输出。

11 点击停止按钮，Inspector窗口关闭。

9 查看应用日志

场景1： IDE启动时连接有设备，IDE会自动启动读取快应用日志的进程, 请查看“OUTPUT”的“app console”面板。

场景2： IDE启动后，连接设备，或者设备断连后再次接入设备，快应用日志会自动启动。

场景3： “app console”日志进程启动后，启动调试，快应用日志不会再在“app console”输出，而是在调试窗口的开发者工具console终端输出。

10 打包[l5]

● debug包

点击菜单“构建”，点击下拉菜单“构建快应用”，用于打包debug版本rpk。在“输出”窗口可以查看构建结果。

① 构建成功，则在“输出”窗口打印COMPILE RESULT:SUCCESS；

② 构建失败，则在“输出”窗口会红色文字打印COMPILE RESULT:FAIL以及错误个数和错误描述；

③ 在“问题”窗口查看error和warning具体所在行。

● release包

1、点击菜单“构建”，点击下拉菜单“打包正式版本”，用于打包release版本rpk。

2、如果没有签名证书，则会先创建签名证书

3、构建日志：

4、rpk创建完成会弹出rpk所在目录

注：

1、debug工程自动创建的debug签名是公开签名，无法保证安全性。请勿使用在正式版本上；

2、打包正式版本前必须已完成签名。