CN111277889A

CN111277889A - 一种电视端页面预览方法及系统

Info

Publication number: CN111277889A
Application number: CN202010102558.6A
Authority: CN
Inventors: 杨大为; 刘晓天; 包美玲
Original assignee: Beijing QIYI Century Science and Technology Co Ltd
Current assignee: Beijing QIYI Century Science and Technology Co Ltd
Priority date: 2020-02-19
Filing date: 2020-02-19
Publication date: 2020-06-12
Anticipated expiration: 2040-02-19
Also published as: CN111277889B

Abstract

本发明涉及一种电视端页面预览方法及系统，预览方法包括：获取所述电视端页面中各个区域的页面布局属性；将电视端页面划分为多个组件，每个组件包含一个页面区域；任意两个所述页面区域中有至少预设个数的页面布局属性相同；分别获取页面区域的页面描述数据；将与预览相关的页面描述数据的数据格式转换为网页格式；将具有所述网页格式的所有页面描述数据进行拼接，得到网页数据，并在网页上显示。本发明实施例把只能在电视端上展示的页面描述数据，通过核心数据内容抽取，数据转换拼接的方法，转换成可以在电脑端浏览器上直接查看的网页数据，开发人员通过对所编写的代码的运行效果进行实时预览，大大提升了开发电视端页面的效率。

Description

一种电视端页面预览方法及系统

技术领域

本发明涉及电视页面制作技术领域，尤其涉及一种电视端页面预览方法及系统。

背景技术

目前互联网电视已经普及到千家万户，用户打开互联网电视后，首先进入一个首页，然后还可以切换到各种频道页，以及一些其它页面。上述页面一般都是在一个页面制作发布平台上来制作的。

但是在实际开发过程中，传统的TV端页面制作过程中，由于TV端上的引擎只能在TV上运行，所以新的页面制作好之后，预览页面的操作只能在电视上来进行，在不存在电视展示所研发的页面的情况下，研发人员无法直观的了解到所开发的页面在电视上的显示效果，这给研发人员带来许多不便，页面开发效率较低。

发明内容

为了解决现有技术存在的问题，本发明的至少一个实施例提供了一种电视端页面预览方法及系统。

第一方面，本发明实施例提供了一种电视端页面预览方法，所述方法包括：

获取所述电视端页面中各个区域的页面布局属性；

将电视端页面划分为多个组件，每个组件包含一个页面区域；任意两个所述页面区域中有至少预设个数的页面布局属性相同；

分别获取所述页面区域的页面描述数据；

将与预览相关的所述页面描述数据的数据格式转换为网页格式；

将具有所述网页格式的所有页面描述数据进行拼接，得到网页数据，并在网页上显示。

基于上述技术方案，本发明实施例还可以做出如下改进。

结合第一方面，在第一方面的第一种实施例中，所述分别获取所述页面区域的页面描述数据，包括：

获取每个所述页面区域的页面结构数据和页面显示数据，作为所述页面描述数据；

所述页面结构数据包括：行间距、字体格式、边距宽度、边距高度。

结合第一方面的第一种实施例，在第一方面的第二种实施例中，所述将与预览相关的所述页面描述数据的数据格式转换为网页格式，包括：

将所述页面显示数据按所述页面结构数据进行整合，得到待显示数据；

将所述待显示数据的数据格式转换为网页格式。

结合第一方面的第二种实施例，在第一方面的第三种实施例中，所述将所述页面显示数据按所述页面结构数据进行整合，得到待显示数据，包括：

针对每个所述页面区域，根据所述页面区域的页面结构数据建立页面布局模板；

将所述页面区域的页面显示数据合并进所述页面布局模板的对应区域，得到所述待显示数据。

结合第一方面的第二种实施例，在第一方面的第四种实施例中，所述将所述页面显示数据按所述页面结构数据进行整合，得到待显示数据，包括：

获取所有所述页面区域均具有的页面布局属性；

根据所述页面布局属性建立页面布局模板；

针对每个页面区域，基于所述页面布局模板，将所述页面区域的页面结构数据和所述页面显示数据合并进所述页面布局模板的对应区域，得到所述待显示数据。

第二方面，本发明实施例提供了一种电视端页面预览系统，所述预览系统包括：

第一数据获取单元，用于获取所述电视端页面中各个区域的页面布局属性；

页面划分单元，用于将电视端页面划分为多个组件，每个组件包含一个页面区域；任意两个所述页面区域中有至少预设个数的页面布局属性相同；

第二数据获取单元，用于分别获取所述页面区域的页面描述数据；

数据转换单元，用于将与预览相关的所述页面描述数据的数据格式转换为网页格式；

数据处理单元，用于将具有所述网页格式的所有页面描述数据进行拼接，得到网页数据，并在网页上显示。

结合第二方面，在第二方面的第一种实施例中，所述第二数据获取单元，具体用于，获取每个所述页面区域的页面结构数据和页面显示数据，作为所述页面描述数据；所述页面结构数据包括：行间距、字体格式、边距宽度、边距高度。

结合第二方面的第一种实施例，在第二方面的第二种实施例中，所述数据转换单元，具体用于将所述页面显示数据按所述页面结构数据进行整合，得到待显示数据；将所述待显示数据的数据格式转换为网页格式。

结合第二方面的第二种实施例，在第二方面的第三种实施例中，所述数据转换单元，具体用于针对每个所述页面区域，根据所述页面区域的页面结构数据建立页面布局模板；将所述页面区域的页面显示数据合并进所述页面布局模板的对应区域，得到所述待显示数据。

结合第二方面的第三种实施例，在第二方面的第四种实施例，所述数据转换单元，具体用于获取所有所述页面区域均具有的页面布局属性；根据所述页面布局属性建立页面布局模板；针对每个页面区域，基于所述页面布局模板，将所述页面区域的页面结构数据和所述页面显示数据合并进所述页面布局模板的对应区域，得到所述待显示数据。

本发明的上述技术方案与现有技术相比具有如下优点：本发明实施例把只能在电视端上展示的页面描述数据，通过核心数据内容抽取，数据转换拼接的方法，转换成可以在电脑端浏览器上直接查看的网页数据，开发人员通过对所编写的代码的运行效果进行实时预览，大大提升了开发电视端页面的效率。

附图说明

图1是本发明实施例提供的一种电视端页面预览方法流程示意图；

图2是本发明另一实施例提供的一种电视端页面预览方法流程示意图；

图3是本发明又一实施例提供的一种电视端页面预览方法流程示意图其一；

图4是本发明又一实施例提供的一种电视端页面预览方法流程示意图其二；

图5是本发明又一实施例提供的一种电视端页面预览系统结构示意图；

图6是本发明又一实施例提供的一种电视端页面预览装置结构示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明的一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

如图1所示，本发明实施例提供的一种电视端页面预览方法。参照图1，所述方法包括如下步骤：

S11、获取所述电视端页面中各个区域的页面布局属性。

在本实施例中，由于在编写电视端页面时，需要对各种电视节目进行展示，一般在大的页面上显示多个窗口以展示不同的节目，而展示节目并不需要创建不同类型的窗口，所以在本步骤中，获取各个区域的页面布局属性，方便系统通过页面布局属性将较大的页面划分为小的页面，以提高数据的提取效率。

在本实施例中，页面布局属性可以是页面结构数据，比如，行间距、字体格式、边距宽度、边距高度，还可以包括页面区域各边的变长、页面显示图片链接、页面显示文字等布局属性。

S12、将电视端页面划分为多个组件，每个组件包含一个页面区域；任意两个所述页面区域中有至少预设个数的页面布局属性相同。

在本实施例中，由于电视端页面的开发还是在电脑端上进行的，但是电脑端的运行环境与电视端不同，所以在电脑端上无法直接运行代码以查看所编辑的电视端页面的情况，开发人员需要在所有代码完成后，将其加载至电视端上才能查看电视端页面的真实情况，所以，在电视端页面开发过程中十分容易出现真实呈现的电视端页面与预想所编辑的代码出现偏差的情况。

在本实施例中，在电视端页面过程中，会按照电视节目的分类不同将页面划分为一个一个的小的“窗口”，在用户点选“窗口”按钮后，跳转至某一分类的电视节目的页面中，各个节目依次排布在新的页面中，在底层代码中，各个“窗口”的布局是可以进行重用的，只是“窗口”中所显示的内容不一致，在本步骤中，按页面布局将电视端页面划分为页面区域，以实现复用。

在本实施例中，由于后续需要提取页面描述数据，页面布局相同的位置可以通过相同的方式提取数据，通过页面布局属性将大的页面划分为小的页面，在小的页面中对具有相同页面布局属性的位置采用相同的数据提取方式提取数据。

S13、分别获取所述页面区域的页面描述数据。

在本实施例中，为方便预览电视端页面，在本方案中获取与预览相关的数据，比如，页面区域的页面描述数据可以是页面的尺寸、页面背景图、页面文字等数据，上述数据的显示方式、显示位置是开发人员需要核对的部分，获取上述数据以便于开发人员直观的观察。

在本实施例中，获取每个所述页面区域的页面结构数据和页面显示数据，作为所述页面描述数据；所述页面结构数据包括：行间距、字体格式、边距宽度、边距高度。

在本实施例中，在确认所开发的代码的功能和显示效果时，需要获取到代码所渲染的页面的各个区域的结构、区域内所显示的内容、区域内各个单元的点击跳转方式和跳转页面的地址等，而页面显示数据就是获取区域内所显示的内容的数据。

在本方案中，在电视端页面中，一般页面跳转后是进入下一页面，只需保证各个页面的结构准确，点击单元所跳转的页面的地址和跳转方式可以自由进行调整，所以，本步骤中，获取的页面结构数据包括：行间距、字体格式、边距宽度、边距高度等限制页面中各个单元的显示区域的条件，基于本步骤可以得到页面的其他限制条件也应在本方案的范围内，比如，字体大小、页面内各单元的尺寸等。

S14、将与预览相关的所述页面描述数据的数据格式转换为网页格式。

在本实施例中，上述每个组件包含很多页面布局属性，确定哪些属性和电脑端网页端页面预览相关，如组件尺寸，背景图，标题文字等，由于上述步骤中获取的数据还是传统的电视端页面描述数据，该数据可以被电视端的引擎解析和渲染，但是无法被其他程序或引擎解析，所以，在本方案中，通过将上述步骤获取的页面描述数据的数据格式转换为网页格式，比如，html数据结构，数据转换方式可以通过现有技术中提供的视频转换工具。

S15、将具有所述网页格式的所有页面描述数据进行拼接，得到网页数据，并在网页上显示。

在本实施例中，在本步骤中，通过对电视端页面进行划分得到多个页面区域，以此，通过同一模板或者模型即可完成对电视端页面各个页面区域的数据采集，而不需要构建一个大型的模板或模型一次对电视端页面进行采集，降低了数据采集模板的大小，提高工作效率。

在本实施例中，通过上述步骤完成对各个页面区域的页面描述数据的采集和格式转换后，将各个页面描述数据进行拼接，得到新的网页数据，在网页上显示页面，以此实现开发人员在电脑端上也可以实时查看所开发的代码的显示效果，实现实时纠偏，提高电视端页面的开发效率。

如图2所示，在本实施例中，所述将与预览相关的所述页面描述数据的数据格式转换为网页格式，包括如下步骤：

S21、将所述页面显示数据按所述页面结构数据进行整合，得到待显示数据。

在本实施例中，可以通过与页面关联的业务逻辑代码，构建页面的布局模板和从页面数据源获取数据的数据模板，分别获取每个所述页面区域的页面结构数据和页面显示数据，作为所述页面描述数据。

对于页面中的一个具体的单元，通过布局模板得到该单元的结构后，创建一个组件，在通过数据模板获取该单元的数据，再将数据按一定规则依次把每个单元的数据合并到组件中，即得到完整的该单元的显示数据。

S22、将所述待显示数据的数据格式转换为网页格式。

在本实施例中，上述合并过程结束后，即得到“传统的组件描述数据”，说“传统”的原因是这个数据只能被电视端上的页面渲染引擎识别并渲染成页面，电脑网页端的浏览器是无法识别这个数据的。

在本实施例中，在得到待显示数据后，将该待显示数据的数据格式进行转换，得到网页格式的待显示数据。

上面的待显示数据，是以确定的通用数据格式来保存的(本例中是以json格式保存)。因此使用业内的json解析器可以很容易地解析和处理json格式的待显示数据。

我们是可以预先确定，待显示数据中，哪些属性和页面预览相关的。

因此在解析待显示数据后，就可以很容易地访问和提取出和页面预览相关的属性，而后以此转换为网页格式的数据以方便在网页中显示。

如图3所示，本发明实施例提供了一种电视端页面预览方法。与图1所示预览方法相比，区别在于，将所述页面显示数据按所述页面结构数据进行整合，得到待显示数据，包括：

S31、针对每个所述页面区域，根据所述页面区域的页面结构数据建立页面布局模板。

在本实施例中，根据页面区域的页面结构数据建立页面布局模板，对从电视端页面中提取的页面结构数据完成重构，得到与电视端页面相同的显示框架。

S32、将所述页面区域的页面显示数据合并进所述页面布局模板的对应区域，得到所述待显示数据。

具体的，业务代码拿到传入的组件数据源的数据，可理解为一组项目的信息，包含节目标签，节目标题，节目封面图地址链接等，会根据一定规则依次把每个节目的信息，合并到组件布局模板的项目里，以得到待显示数据。

如图4所示，本发明实施例提供了一种电视端页面预览方法。与图1所示预览方法相比，区别在于，将所述页面显示数据按所述页面结构数据进行整合，得到待显示数据，包括：

S41、获取所有所述页面区域均具有的页面布局属性。

S42、根据所述页面布局属性建立页面布局模板。

在本实施例中，由于各个页面区域中有至少预设个数的页面布局属性相同，通过页面布局属性建立的页面布局模板可以被各个页面区域的通用，降低对页面区域的重构的耗时，提高页面重建效率。

S43、针对每个页面区域，基于所述页面布局模板，将所述页面区域的页面结构数据和所述页面显示数据合并进所述页面布局模板的对应区域，得到所述待显示数据。

如图5所示，本发明实施例提供了一种电视端页面预览系统。参照图5，所述预览系统包括：第一数据获取单元11、页面划分单元12、第二数据获取单元13、数据转换单元14和数据处理单元15。

在本实施例中，所述第一数据获取单元，用于获取所述电视端页面中各个区域的页面布局属性。

在本实施例中，所述页面划分单元，用于将电视端页面划分为多个组件，每个组件包含一个页面区域；任意两个所述页面区域中有至少预设个数的页面布局属性相同。

在本实施例中，所述第二数据获取单元，用于分别获取所述页面区域的页面描述数据。

在本实施例中，在本实施例中，由于电视端页面的开发还是在电脑端上进行的，但是电脑端的运行环境与电视端不同，所以在电脑端上无法直接运行代码以查看所编辑的电视端页面的情况，开发人员需要在所有代码完成后，将其加载至电视端上才能查看电视端页面的真实情况，所以，在电视端页面开发过程中十分容易出现真实呈现的电视端页面与预想所编辑的代码出现偏差的情况。

在本实施例中，所述数据转换单元14，用于将与预览相关的所述页面描述数据的数据格式转换为网页格式。

在本实施例中，由于上述步骤中获取的数据还是传统的电视端页面描述数据，该数据可以被电视端的引擎解析和渲染，但是无法被其他程序或引擎解析，所以，在本方案中，通过将上述步骤获取的页面描述数据的数据格式转换为网页格式，比如，html数据结构，数据转换方式可以通过现有技术中提供的视频转换工具。

在本实施例中，所述数据处理单元15，用于将具有所述网页格式的所有页面描述数据进行拼接，得到网页数据，并在网页上显示。

在本实施例中，所述第二数据获取单元13，具体用于，获取每个所述页面区域的页面结构数据和页面显示数据，作为所述页面描述数据；所述页面结构数据包括：行间距、字体格式、边距宽度、边距高度。

在本实施例中，所述数据转换单元14，具体用于将所述页面显示数据按所述页面结构数据进行整合，得到待显示数据；将所述待显示数据的数据格式转换为网页格式。

在本实施例中，所述数据转换单元14，具体用于针对每个所述页面区域，根据所述页面区域的页面结构数据建立页面布局模板；将所述页面区域的页面显示数据合并进所述页面布局模板的对应区域，得到所述待显示数据。

在本实施例中，所述数据转换单元14，具体用于获取所有所述页面区域均具有的页面布局属性；根据所述页面布局属性建立页面布局模板；针对每个页面区域，基于所述页面布局模板，将所述页面区域的页面结构数据和所述页面显示数据合并进所述页面布局模板的对应区域，得到所述待显示数据。

如图6所示，本发明实施例提供了一种电视端页面预览装置，包括处理器1110、通信接口1120、存储器1130和通信总线1140，其中，处理器1110，通信接口1120，存储器1130通过通信总线1140完成相互间的通信；

存储器1130，用于存放计算机程序；

处理器1110，用于执行存储器1130上所存放的程序时，实现如下所述的电视端页面预览方法：

将电视端页面按页面布局划分为多个组件，每个组件包含一个页面区域；

分别获取所述页面区域的页面描述数据；

将网页格式的所有页面描述数据进行拼接，得到网页数据，并在网页上显示。

本发明实施例提供的电子设备，处理器1110通过执行存储器1130上所存放的程序实现了把只能在电视端上展示的页面描述数据，通过核心数据内容抽取，数据转换拼接的方法，转成可以在电脑端浏览器上直接查看的网页数据，开发人员通过对所编写的代码的运行效果进行实时预览，大大提升了开发电视端页面的效率。

上述电子设备提到的通信总线1140可以是外设部件互连标准(PeripheralComponentInterconnect，简称PCI)总线或扩展工业标准结构(ExtendedIndustryStandardArchitecture，简称EISA)总线等。该通信总线1140可以分为地址总线、数据总线、控制总线等。为便于表示，图中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

通信接口1120用于上述电子设备与其他设备之间的通信。

存储器1130可以包括随机存取存储器(RandomAccessMemory，简称RAM)，也可以包括非易失性存储器(non-volatilememory)，例如至少一个磁盘存储器。可选的，存储器1130还可以是至少一个位于远离前述处理器1110的存储装置。

上述的处理器1110可以是通用处理器，包括中央处理器(CentralProcessingUnit，简称CPU)、网络处理器(NetworkProcessor，简称NP)等；还可以是数字信号处理器(DigitalSignalProcessing，简称DSP)、专用集成电路(ApplicationSpecificIntegratedCircuit，简称ASIC)、现场可编程门阵列(Field-ProgrammableGateArray，简称FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。

本发明实施例提供了一种计算机可读存储介质，所述计算机可读存储介质存储有一个或者多个程序，所述一个或者多个程序可被一个或者多个处理器执行，以实现上述任一实施例所述的电视端页面预览方法。

在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行计算机程序指令时，全部或部分地产生按照本发明实施例的流程或功能。计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，DVD)、或者半导体介质(例如固态硬盘SolidStateDisk(SSD))等。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims

1.一种电视端页面预览方法，其特征在于，所述方法包括：

获取所述电视端页面中各个区域的页面布局属性；

分别获取所述页面区域的页面描述数据；

2.根据权利要求1所述的预览方法，其特征在于，所述分别获取所述页面区域的页面描述数据，包括：

3.根据权利要求2所述的预览方法，其特征在于，所述将与预览相关的所述页面描述数据的数据格式转换为网页格式，包括：

将所述待显示数据的数据格式转换为网页格式。

4.根据权利要求3所述的预览方法，其特征在于，所述将所述页面显示数据按所述页面结构数据进行整合，得到待显示数据，包括：

5.根据权利要求3所述的预览方法，其特征在于，所述将所述页面显示数据按所述页面结构数据进行整合，得到待显示数据，包括：

获取所有所述页面区域均具有的页面布局属性；

根据所述页面布局属性建立页面布局模板；

6.一种电视端页面预览系统，其特征在于，所述预览系统包括：

7.根据权利要求6所述的预览系统，其特征在于，所述第二数据获取单元，具体用于，获取每个所述页面区域的页面结构数据和页面显示数据，作为所述页面描述数据；所述页面结构数据包括：行间距、字体格式、边距宽度、边距高度。

8.根据权利要求7所述的预览系统，其特征在于，所述数据转换单元，具体用于将所述页面显示数据按所述页面结构数据进行整合，得到待显示数据；将所述待显示数据的数据格式转换为网页格式。

9.根据权利要求8所述的预览系统，其特征在于，所述数据转换单元，具体用于针对每个所述页面区域，根据所述页面区域的页面结构数据建立页面布局模板；将所述页面区域的页面显示数据合并进所述页面布局模板的对应区域，得到所述待显示数据。

10.根据权利要求8所述的预览系统，其特征在于，所述数据转换单元，具体用于获取所有所述页面区域均具有的页面布局属性；根据所述页面布局属性建立页面布局模板；针对每个页面区域，基于所述页面布局模板，将所述页面区域的页面结构数据和所述页面显示数据合并进所述页面布局模板的对应区域，得到所述待显示数据。