页面搭建方法、装置和电子终端与流程

本发明涉及计算机技术领域，具体而言，涉及一种页面搭建方法、装置和电子终端。

背景技术：

经发明人研究发现，现有的androidpro版的首页推荐页在搭建过程中存在诸多问题，比如逻辑流程复杂，后期重构、维护难度高等，因此，如何解决上述问题成为本领域技术人员急需解决的技术问题。

技术实现要素：

有鉴于此，本发明提供一种基于reactnative平台实现的页面搭建方法、装置和电子终端，能够有效简化页面搭建流程，降低后期重构、维护的难度。

本发明较佳实施例提供一种页面搭建方法，应用于基于reactnative平台的电子终端，所述电子终端包括页面渲染组件，所述方法包括：

通过运行构造函数constructor对页面架构实现初始化；

执行页面渲染组件函数render对初始化后的所述页面架构进行渲染，以在该页面架构中创建房间和滑动页；

对创建的所述房间和所述滑动页加载对应的页面数据；

执行componentdidmount函数以完成所述页面的搭建。

进一步地，所述房间为多个，创建所述房间的步骤包括：

获取用于创建多个所述房间的参数值和背景图像，发送该参数值和背景图像给所述页面架构以在该页面架构上形成用于表征多个房间的第一布局；

获取与多个所述房间对应的点击事件并添加至所述第一布局上的各房间；

获取与多个所述房间对应的边缘属性并根据所述边缘属性对所述第一布局上的各房间进行设置。

进一步地，创建所述滑动页的步骤包括：

获取初始图片并发送给所述页面架构以在该页面架构上形成表征滑动图片的第二布局；

获取所述初始图片的参数值以对所述第二布局上的各初始图片进行设置；

对设置完成的各所述初始图片添加滑动属性和可点击性，以得到滑动图片；

将各所述滑动图片链接至对应的房间以完成所述滑动页的创建。

进一步地，所述初始图片的参数值包括图片数量和图片尺寸，所述获取所述初始图片参数值以对所述第二布局上的各初始图片进行设置的步骤，包括：

获取所述图片数量并根据所述图片数量对各图片进行页面赋值；

获取所述图片尺寸以根据该图片尺寸对赋值后的各图片进行尺寸设置。

进一步地，所述对创建的所述房间和滑动页加载页面数据的步骤包括：

获取与所述滑动页对应的页面数据，并通过第一api接口加载至所述滑动页；

获取与所述房间对应的页面数据，并通过第二api接口加载至所述房间。

本发明较佳实施例还提供一种页面搭建装置，应用于基于reactnative平台的电子终端，所述电子终端包括页面渲染组件，所述装置包括：

初始化模块，用于通过运行构造函数constructor对页面架构实现初始化；

第一执行模块，用于执行页面渲染组件函数render对初始化后的所述页面架构进行渲染，以在该页面架构中创建房间和滑动页；

数据加载模块，用于对创建的所述房间和所述滑动页加载对应的页面数据；

第二执行模块，用于执行componentdidmount函数以完成所述页面地搭建。

进一步地，所述房间为多个，所述第一执行模块包括：

房间参数获取单元，用于获取用于创建多个房间的参数值和背景图像，发送该参数值和背景图像给所述页面架构以在该页面架构上形成用于表征多个房间的第一布局；

点击事件添加单元，用于获取与多个所述房间对应的点击事件并添加至所述第一布局上的各房间；

房间创建单元，用于获取与多个所述房间对应的边缘属性并根据所述边缘属性对所述第一布局上的各房间进行设置以完成所述多个房间的创建。

进一步地，所述数据加载模块包括：

第一加载单元，用于获取与所述滑动页对应的页面数据，并通过第一api接口加载至所述滑动页；

第二加载单元，用于获取与所述房间对应的页面数据，并通过第二api接口加载至所述房间。

本发明较佳实施例还提供一种电子终端，基于reactnative平台实现，所述电子终端包括存储器、处理器及上述的页面搭建装置，所述页面搭建装置安装于所述存储器并包括一个或多个由所述处理器执行的软件功能模块。

本发明较佳实施例还提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序在执行时实现上述的页面搭建方法中的步骤。

与现有技术相比，本发明实施例提供的基于reactnative平台实现的页面搭建方法、装置和电子终端，能够有效简化页面搭建流程，降低对页面后期重构、维护的难度，且页面显示更加明了。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1为本发明实施例提供的页面搭建装置的应用场景示意图。

图2为本发明实施例提供的页面搭建方法的流程示意图。

图3为图2中所示的步骤s104的子流程示意图。

图4为图2中所示的步骤s104的另一子流程示意图。

图5为图2中所示的步骤s106的子流程示意图。

图6为本发明实施例提供的页面搭建装置的方框结构示意图。

图7为图6中所示的第一执行模块的方框结构示意图。

图标：10-电子终端；100-页面搭建装置；102-初始化模块；104-第一执行模块；1040-房间参数获取单元；1042-点击事件添加单元；1044-房间创建单元；106-数据加载模块；1060-第一加载单元；1062-第二加载单元；108-第二执行模块；200-存储器；300-存储控制器；400-处理器。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。

因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

如图1所示，为本发明实施例提供的页面搭建装置100的应用场景示意图。其中，电子终端10包括页面搭建装置100、存储器200、存储控制器300以及处理器400。其中，所述电子终端10可以是，但不限于，电脑、移动上网设备(mobileinternetdevice，mid)等具有处理功能的电子设备，还可以是服务器等。

可选地，所述存储器200、存储控制器300、处理器400各元件相互之间直接或间接地电性连接，以实现数据的传输或交互。例如，这些元件之间通过一条或多条通讯总线或信号线实现电性连接。所述页面搭建装置100包括至少一个可以软件或固件的形式存储于所述存储器200中或固化在所述电子终端10的操作系统中的软件功能模块。所述处理器400在所述存储控制器300的控制下访问所述存储器200，以用于执行所述存储器200中存储的可执行模块，例如所述页面搭建装置100所包括的软件功能模块及计算机程序等。

可以理解，图1所示的结构仅为示意，所述电子终端10还可包括比图1中所示更多或者更少的组件，或者具有与图1所示不同的配置。图1中所示的各组件可以采用硬件、软件或其组合实现。

进一步地，请结合参阅图2，本发明实施例还提供一种可应用于所述页面搭建装置100的页面搭建方法，其中，下面将以斗鱼reactnativepro版app首页推荐页的页面搭建过程为例，对图2所示的具体流程进行详细阐述。所应说明的是，本发明所述的页面搭建方法并不以图2以及以下所述的具体顺序为限制。应当理解，本发明所述的页面搭建方法其中部分步骤的顺序可以根据实际需要相互交换，或者其中的部分步骤也可以省略或删除。

步骤s102，通过运行构造函数constructor对页面架构实现初始化。

本实施例中，根据reactnative的生命周期，运行构造函数constructor构建状态机，以对页面渲染组件中的涉及到的变量实现初始化，即在进行页面搭建时先对页面架构实现初始化。

步骤s104，执行页面渲染组件函数render对初始化后的所述页面架构进行渲染，以在该页面架构中创建房间和滑动页。

本实施例中，以斗鱼rnpro版app中的首页推荐页为例，该页面主要由位于顶部的滑动页部分和可通过点击直接进入对应直播间的房间列表构成。因此，在对所述页面架构实现初始化后，需顺序执行页面渲染组件函数render对所述页面架构进行渲染，以在该页面架构中创建房间和滑动页。其中，render函数中包括多个用于实现页面渲染的子函数。

需要说明的是，render是一个组件必须有的方法，以函数的形式体现，用以渲染界面，并返回jsx或其他组件来构成dom，和android的xml布局、wpf的xaml布局类似，只能返回一个顶级元素。

具体地，如图3所示，本实施例中，首先在初始化后的所述页面架构上进行房间创建，所述房间可以为多个，具体创建过程包括以下步骤。

步骤s1040，获取用于创建多个所述房间的参数值和背景图像，发送该参数值和背景图像给所述页面架构以在该页面架构上形成用于表征多个房间的第一布局。

本实施例中，所述参数值可以是房间数量、id、大小等用以在所述页面架构上形成房间布局的任意参数。实际实施时，可通过render函数中的子函数_renderrow函数实现，首先通过调用_renderroom函数定义房间的rowdata,、rowid，再通过定义marginstyle的值来定义多个所述房间的间距，然后返回roomholder函数定义房间id，从而实现对第一布局的创建。应理解，房间参数值的设定、传递不限于上述方式。

步骤s1042，获取与多个所述房间对应的点击事件并添加至所述第一布局上的各房间。

本实施例中，通过在所述房间上添加点击事件实现在用户点击该房间时直接跳转至对应的直播间，实际实施时，可通过{this._onroompress}定义房间的可点击性，使房间加入点击事件。

步骤s1044，获取与多个所述房间对应的边缘属性并根据所述边缘属性对所述第一布局上的各房间进行设置。

本实施例中，在完成步骤s1040和步骤s1042之后，还需对房间的宽度等边缘属性进行设置。具体地，可通过使用(layoututils.screen_width-21)/2设置房间的宽度，然后通过margin＝{marginstyle}语句，将设置好的marginstyle赋值给margin，从而完成整个_renderroom函数的主要功能。应理解，在完成多个所述房间的创建后，所述第一布局上形成由多个房间构成的房间列表，用户可根据点击对应的房间进入直播间。

需要说明的是，在进行房间创建时，通过render函数中的子函数_renderrow调用_renderroom函数实现上述房间创建功能，而该_renderroom函数中涉及的具体参数传递等可根据实际情况进行灵活设计。

进一步地，如图4所示，为所述滑动页的创建流程示意图，具体包括以下步骤。

步骤s1046，获取初始图片并发送给所述页面架构以在该页面架构上形成表征滑动图片的第二布局。

步骤s1048，获取所述初始图片参数值以对所述第二布局上的各初始图片进行设置。

本实施例中，首先获取初始图片完成所述第二布局的创建，再根据所述初始图片数量对各图片进行页面赋值，然后获取所述图片尺寸以根据该图片尺寸对赋值后的各图片进行尺寸设置。实际实施时，可通过调用render的子函数_renderheader进行滑动页的创建。例如，在renderheader函数中首先判断滑动图片数量，在有图片的情况下将this.state.piclist.map赋值给pages页面，在返回值部分定义滑动页的宽高，可通过{layoututils.screen_width*9/16}autoplay设置。

步骤s1050，对设置完成的各所述初始图片添加滑动属性和可点击性，以得到滑动图片。

本实施例中，在完成步骤s1048中对初始图片的设置后，需要对初始图片添加滑动属性和可点击性，以得到滑动图片。实际实施时，可通过调用函数_swiperitem以设置滑动页属性。

步骤s1052，将各所述滑动图片链接至对应的房间以完成所述滑动页的创建。

本实施中，由于所述滑动页用于使得用户在登入app后，更加直观、方便的了解目前直播平台上相对热门的直播内容，进而通过直接点击滑动页快速进入对应房间，因此，需要将所述各滑动图片链接至对应的房间。实际实施时，可在_swiperitem函数中首先定义<touchableopacity>，然后再定义_onroompress点击功能函数使滑动图片可以点击跳转，并且通过<image>函数导入pic_url参数实现导入图片数据，从而完成整个滑动页的创建。需要说明的是，在本实施例中，整个滑动页创建部分的功能主要通过_renderheader和_swiperitem来实现。

步骤s106，对创建的所述房间和所述滑动页加载对应的页面数据。

本实施例中，在完成上述房间和滑动页的基本设置后，需要通过数据接口将相对应的页面数据传递至对应的位置，具体地，如图5所示，在对创建的所述房间和所述滑动页加载对应的页面数据时包括以下步骤。

步骤s1060，获取与所述滑动页对应的页面数据，并通过第一api接口加载至所述滑动页。

步骤s1062，获取与所述房间对应的页面数据，并通过第二api接口加载至所述房间。

实际实施时，可通过render函数调用_onrequestdata子函数进行数据加载。具体地，在对所述滑动页加载数据时，可通过调用_onrequestdata函数的子函数_getslidedata实现。而在对所述房间加载数据时，可通过调用_onrequestdata函数的子函数_getrecommenddata实现，从而完成对整个页面的数据加载。

应注意，本实施例中，所述第一api接口和所述第二api接口为虚拟的函数调用接口，本实施例中，所述第一api接口可以理解为_onrequestdata函数，所述第二api接口可以理解为_getrecommenddata函数。

步骤s108，执行componentdidmount函数以完成所述页面的搭建。

在reactnative中，通过所述render完成对整个界面的渲染后，需顺序调用componentdidmount函数并执行，从而开始对reactnative中的其他框架进行初始化。

基于对上述页面搭建方法的描述，本发明实施例还给出了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序在执行时实现上述的页面搭建方法中的步骤。

进一步地，请结合参阅图6，本发明实施例提供的页面搭建装置100包括初始化模块102、第一执行模块104、数据加载模块106和第二执行模块108。

所述初始化模块102，用于通过运行构造函数constructor对页面架构实现初始化。

本实施例中，图2中的步骤s102由所述初始化模块102执行，具体过程请参考步骤s102，在此不再赘述。

所述第一执行模块104，用于执行页面渲染组件函数render对初始化后的所述页面架构进行渲染，以在该页面架构中创建房间和滑动页。

本实施例中，图2中的步骤s104由所述第一执行模块104执行，具体过程请参考步骤s104，在此不再赘述。其中，如图7所示，所述第一执行模块104包括房间参数获取单元1040、点击事件添加单元1042和房间创建单元1044、

所述房间参数获取单元1040，用于获取用于创建多个房间的参数值和背景图像，发送该参数值和背景图像给所述页面架构以在该页面架构上形成用于表征多个房间的第一布局。

本实施例中，图3中的步骤s1040由所述房间参数获取单元1040执行，具体过程请参考步骤s1040，在此不再赘述。

所述点击事件添加单元1042，用于获取与多个所述房间对应的点击事件并添加至所述第一布局上的各房间。

本实施例中，图3中的步骤s1042由所述点击事件添加单元1042执行，具体过程请参考步骤s1042，在此不再赘述。

所述房间创建单元1044，用于获取与多个所述房间对应的边缘属性并根据所述边缘属性对所述第一布局上的各房间进行设置以完成所述多个房间的创建。

本实施例中，图3中的步骤s1044由所述房间创建单元1044执行，具体过程请参考步骤s1044，在此不再赘述。

所述数据加载模块106，用于对创建的所述房间和所述滑动页加载对应的页面数据。本实施例中，图2中的步骤s106由所述数据加载模块106执行，具体过程请参考步骤s106，在此不再赘述。实际实施时，所述数据加载模块106包括第一加载单元1060和第二加载单元1062。

所述第一加载单元1060，用于获取与所述滑动页对应的页面数据，并通过第一api接口加载至所述滑动页。

本实施例中，图5中的步骤s1060由所述第一加载单元1060执行，具体过程请参考步骤s1060，在此不再赘述。

所述第二加载单元1062，用于获取与所述房间对应的页面数据，并通过第二api接口加载至所述房间。

本实施例中，图5中的步骤s1062由所述第二加载单元1062执行，具体过程请参考步骤s1062，在此不再赘述。

所述第二执行模块108，用于执行componentdidmount函数以完成所述页面地搭建。

本实施例中，图2中的步骤s108由所述第二执行模块108执行，具体过程请参考步骤s108，在此不再赘述。

综上所述，本发明提供的页面搭建方法、装置、电子终端10和计算机可读存储介质，其中，基于reactnative开发框架，能够有效简化页面搭建流程，降低对页面后期重构、维护的难度，同时，本发明给出的页面搭建方法具有较强的可扩展性。

在本发明的描述中，术语“设置”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。

在本发明实施例所提供的几个实施例中，应该理解到，所揭露的装置和方法，也可以通过其他方式实现。以上所描述的装置和方法实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本发明的预设数量个实施例的装置、方法和计算机程序产品可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分。所述模块、程序段或代码的一部分包含一个或预设数量个用于实现规定的逻辑功能。

也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。