CN113741891A - 一种页面处理方法、装置、电子设备及存储介质 - Google Patents

Abstract

本发明实施例适用于互联网技术领域，提供了一种页面处理方法、装置、电子设备及存储介质，其中，页面处理方法包括：获取第一页面的第一页面数据；所述第一页面表征为应用程序中的一个页面；所述第一页面数据表征构成所述第一页面的RN组件对应的代码；基于设定插件将所述第一页面数据转换为第二页面数据；所述设定插件用于将RN组件对应的代码转换为超文本标记语言HTML组件对应的代码；通过浏览器渲染第二页面数据对应的第二页面。

Description

一种页面处理方法、装置、电子设备及存储介质

技术领域

本发明涉及互联网技术领域，尤其涉及一种页面处理方法、装置、电子设备及存储介质。

背景技术

电商应用软件(APP，Application)通常基于RN(React Native)架构开发，通过用于设计电子商铺界面的设计平台，用户可以实现对电子商铺的个性化界面需求。为了使用户直观感受到设计的电子商铺界面在电商APP上呈现的视觉效果，相关技术中，每开发一个APP端的RN组件，就需要在设计平台上开发一个与RN组件相对应的H5(HTML5)组件，导致开发效率低。

发明内容

为了解决上述问题，本发明实施例提供了一种页面处理方法、装置、电子设备及存储介质，以至少解决相关技术每开发一个APP端的RN组件，就需要开发一个与RN组件相对应的H5组件的问题。

本发明的技术方案是这样实现的：

第一方面，本发明实施例提供了一种页面处理方法，该方法包括：

获取第一页面的第一页面数据；所述第一页面表征为应用程序中的一个页面；所述第一页面数据表征构成所述第一页面的RN组件对应的代码；

基于设定插件将所述第一页面数据转换为第二页面数据；所述设定插件用于将RN组件对应的代码转换为超文本标记语言HTML组件对应的代码；

通过浏览器渲染所述第二页面数据对应的第二页面。

在一实施例中，所述方法还包括：

获取第三页面数据；所述第三页面数据表征在所述浏览器中对构成所述第二页面的HTML组件进行操作的操作数据；

基于所述第三页面数据更新所述第二页面的页面内容。

在一实施例中，所述通过浏览器渲染所述第二页面数据对应的第二页面，包括：

创建与所述第一页面的尺寸一致的DIV容器；

在所述DIV容器中创建一个iframe页面框架；

基于所述iframe页面框架和所述第二页面数据，渲染得到所述第二页面。

在一实施例中，所述基于所述第三页面数据更新所述第二页面的页面内容，包括：

基于所述第三页面数据修改所述第二页面对应的所述第二页面数据；

通过所述浏览器渲染修改后的第二页面数据对应的第二页面。

在一实施例中，所述通过浏览器渲染所述第二页面数据对应的第二页面时，所述方法还包括：

从内容分发网络CDN中获取所述第二页面数据。

在一实施例中，对构成所述第二页面的HTML组件进行操作包括以下任意一项：

初始化HTML组件；

选择HTML组件；

新增HTML组件；

删除HTML组件；

调整HTML组件的顺序；

更新HTML组件。

在一实施例中，所述获取第三页面数据，包括：

从设定服务器中获取所述第三页面数据。

第二方面，本发明实施例提供了一种页面处理装置，该装置包括：

获取模块，用于获取第一页面的第一页面数据；所述第一页面表征为应用程序中的一个页面；所述第一页面数据表征构成所述第一页面的RN组件对应的代码；

转换模块，用于基于设定插件将所述第一页面数据转换为第二页面数据；所述设定插件用于将RN组件对应的代码转换为超文本标记语言HTML组件对应的代码；

渲染模块，用于通过浏览器渲染所述第二页面数据对应的第二页面。

第三方面，本发明实施例提供了一种电子设备，包括处理器和存储器，所述处理器和存储器相互连接，其中，所述存储器用于存储计算机程序，所述计算机程序包括程序指令，所述处理器被配置用于调用所述程序指令，执行本发明实施例第一方面提供的页面处理方法的步骤。

第四方面，本发明实施例提供了一种计算机可读存储介质，包括：所述计算机可读存储介质存储有计算机程序。所述计算机程序被处理器执行时实现如本发明实施例第一方面提供的页面处理方法的步骤。

本发明实施例通过获取第一页面的第一页面数据，基于设定插件将第一页面数据转换为第二页面数据，通过浏览器渲染第二页面数据对应的第二页面。其中，第一页面表征为应用程序中的一个页面；第一页面数据表征构成第一页面的RN组件对应的代码；设定插件用于将RN组件对应的代码转换为HTML组件对应的代码。本发明实施例通过设定插件对第一页面数据进行代码转换，因此只需要开发一套RN组件，就可以实现在设计平台上显示电商APP上的电子商铺界面，不需要在设计平台上开发与RN组件相对应的H5组件，减小了开发工作量，提高了开发效率。

附图说明

图1是本发明实施例提供的一种电子商铺界面的设计流程示意图；

图2是本发明实施例提供的一种电子商铺界面的设计流程示意图；

图3是本发明实施例提供的一种页面处理方法的实现流程示意图；

图4是本发明实施例提供的另一种页面处理方法的实现流程示意图；

图5是本发明实施例提供的另一种页面处理方法的实现流程示意图；

图6是本发明实施例提供的另一种页面处理方法的实现流程示意图；

图7是本发明应用实施例提供的一种电子商铺界面的设计流程示意图；

图8是本发明应用实施例提供的一种H5页面的渲染流程示意图；

图9是本发明应用实施例提供的一种电子商铺界面的设计流程示意图；

图10是本发明应用实施例提供的一种电子商铺界面的设计流程示意图；

图11是本发明实施例提供的一种页面处理装置的示意图；

图12是本发明一实施例提供的电子设备的示意图。

具体实施方式

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

RN(React Native)是一个混合移动应用开发框架，电商APP通常基于RN组件进行开发，但是设计平台和HTML页面只能使用H5组件进行开发，这就导致每开发一个APP端的RN组件，就需要在设计平台上开发一个与RN组件相对应的H5组件，这样才能够使得设计平台上设计的电子商铺界面和电商APP上显示的电子商铺界面一致。但是，这需要开发两个版本的组件，开发效率低。

针对上述相关技术的缺点，本发明实施例提供了一种页面处理方法，至少能够减少开发工作量，提高开发效率。为了说明本发明所述的技术方案，下面通过具体实施例来进行说明。

参考图1，图1是本发明实施例提供的一种电子商铺界面的设计流程示意图。在相关技术中，电商平台提供了用于设计电子商铺界面的设计平台，设计平台通常是运行在PC端的全球广域网(WEB，World Wide Web)浏览器中，设计平台中有一个组件选择面板和一个预览区域，组件选择面板提供了一些组件模板供用户设计使用，网页页面中的每个部件，比如头部、内容区、弹出框甚至确认按钮都可以成为一个组件，每个组件有独立的HTML、CSS、JS代码。一个组件可以简单理解为网页页面的一块，多个组件构成一个完整的网页页面。预览区域用于对设计的电子商铺界面在电商APP上呈现的视觉效果进行预览，用户可以使用组件选择面板中的组件模板来设计预览区域中显示的电子商铺界面，也可以对预览区域显示的构成电子商铺界面的组件进行操作。用户对预览区域显示的设计的电子商铺界面满意时，就将设计结果发布到电商APP上进行展示。例如在图1中，用户选择组件1模板和组件2模板设计电子商铺界面，则在预览区域内则显示对应的组件1实例和组件2实例，在将设计结果发布到电商APP上后，在电商APP的电子商铺界面中显示组件1楼层和组件2楼层。由于在电商APP上呈现的电子商铺界面一般是竖向列表形式布局，类似于楼房一样，因此将每个组件在电子商铺界面中展示的一块区域称为楼层。

参考图2，图2是本发明实施例提供的一种电子商铺界面的设计流程示意图。图2中的设计数据数组即设计平台中用户对电子商铺界面最终的设计结果，设计数据数组包括多个楼层数据，一个楼层数据对应一个RN组件，比如楼层1数据对应RN组件1。将设计数据数组下发到RN页面，RN页面即电商APP中展示的电子商铺界面，对RN页面进行渲染，即可以在电商APP中展示设计后的电子商铺界面。

图3是本发明实施例提供的一种页面处理方法的实现流程示意图，所述页面处理方法的执行主体为电子设备，电子设备包括台式电脑、笔记本电脑和服务器等。参考图3，页面处理方法包括：

S301，获取第一页面的第一页面数据；所述第一页面表征为应用程序中的一个页面；所述第一页面数据表征构成所述第一页面的RN组件对应的代码。

这里，应用程序指电商APP，第一页面指电商APP中的一个电子商铺界面，第一页面由RN组件构成，第一页面数据表征构成第一页面的RN组件对应的代码。

第一页面数据可以从APP端获取，每次用户在设计平台设计完店铺页面后，将第一页面的第一页面数据存储在服务器中，从服务器中获取第二页面数据。

S302，基于设定插件将所述第一页面数据转换为第二页面数据；所述设定插件用于将RN组件对应的代码转换为超文本标记语言HTML组件对应的代码。

这里，设定插件为RNW(React Native Web)插件，RNW插件可以将RN组件做一个WEB端的实现，并打包出一份可以运行在WEB端的代码。通过RNW插件对第一页面数据进行处理，得到第二页面数据。第二页面数据表征对应的HTML页面的HTML组件的代码。

在一实施例中，所述基于设定插件将所述第一页面数据转换为第二页面数据后，将所述第二页面数据存储在内容分发网络CDN中。

S303，通过浏览器渲染所述第二页面数据对应的第二页面。

这里，浏览器为WEB浏览器，第二页面的页面内容与应用程序中的第一页面的页面内容相同。

在一实施例中，所述通过浏览器渲染所述第二页面数据对应的第二页面时，所述方法还包括：

从内容分发网络CDN中获取所述第二页面数据。

基于设定插件将所述第一页面数据转换为第二页面数据，将得到的第二页面数据存储在内容分发网络(CDN，Content Delivery Network)中。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

在实际应用中，通过RNW插件对RN组件的代码进行编译，输出静态的JS文件和CSS文件，输出的静态资源有对所有RN组件进行H5渲染的能力，将静态资源存储在CDN中，WEB浏览器从CDN中获取静态资源生成HTML网页，可以提高HTML网页的加载速度，使得WEB浏览器能够快速生成网页内容。

设计电子商铺界面的设计平台可以通过WEB浏览器进行访问，由于第二页面数据对应HTML组件对应的代码，因此通过WEB浏览器可以渲染第二页面数据对应的第二页面，第二页面的页面内容与应用程序中的第一页面的页面内容相同。这样，用户可以在设计平台直观感受到设计的电子商铺界面在电商APP上呈现的视觉效果。

参考图4，在一实施例中，所述通过浏览器渲染所述第二页面数据对应的第二页面，包括：

S401，创建与所述第一页面的尺寸一致的DIV容器。

这里，DIV是块级元素，它是可用于组合其他HTML元素的容器。<div>标签定义HTML文档中的一个分隔区块或者一个区域部分。

在实际应用中，可以通过WEB浏览器打开设计平台，在设计平台的预览区域中创建一个DIV容器。预览区域可以是一个类似终端屏幕的矩形区域，DIV容器的宽度可以是与手机屏幕类似的像素宽度，比如像素宽度为375px或者414px。DIV容器高度和H5页面高度保持一致，H5页面即第二页面。设定区域的页面背景设置定位方式为fixed，上下左右边距为0。然后设置overflow-y为auto允许纵向滚动。这样设定区域的H5页面高度如果超过现有显示的高度，则可以通过整页背景的向下滚动实现类似手机屏幕的向下滚动查看操作。

S402，在所述DIV容器中创建一个iframe页面框架。

<iframe>标签规定一个内联框架，一个内联框架被用来在当前HTML文档中嵌入另一个文档。在DIV容器中创建一个iframe页面框架，iframe页面框架的宽度与DIV一致。采用iframe页面框架是因为iframe页面框架可以单独的加载一个页面，并且页面的沙箱和作用域可以与设定平台实现隔离，避免变量和命名等冲突。这样能更好的加载和模拟一个手机端的H5页面。

S403，基于所述iframe页面框架和所述第二页面数据，渲染得到所述第二页面。

在iframe页面框架中加载第二页面数据，WEB浏览器渲染第二页面数据得到第二页面。这里，第二页面是一个HTML页面，具体可以为H5(HTML5)页面。

在实际应用中，可以基于以下代码实现在iframe页面框架中展示一个H5页面。

iframe页面框架中加载的页面为一个WEB页面，页面内容需要包含H5页面的静态资源的引入和H5页面内容入口。

通过link和script引入H5页面的静态资源，同时在body中创建id为J_app(必须与HTML的容器绑定入口名称相同)的DIV容器元素。这样在静态资源加载完成并执行后，所有的H5页面内容就会自动显示在DIV容器中。具体执行代码如下：

其中，H5页面的静态资源存储在CDN中。

通过上述步骤，可以将第二页面数据对应的H5页面加载并展示在设定平台的预览区域中。

本发明实施例通过获取第一页面的第一页面数据，基于设定插件将第一页面数据转换为第二页面数据，通过浏览器渲染第二页面数据对应的第二页面。其中，第一页面表征为应用程序中的一个页面；第一页面数据表征构成第一页面的RN组件对应的代码；设定插件用于将RN组件对应的代码转换为HTML组件对应的代码。本发明实施例通过设定插件将第一页面数据转换为第二页面数据，因此只需要开发一套RN组件，就可以实现在设计平台上显示电商APP中的电子商铺界面，不需要在设计平台上单独开发与RN组件相对应的H5组件，减小了开发工作量，提高了开发效率。

参考图5，在一实施例中，页面处理方法还包括：

S501，获取第三页面数据；所述第三页面数据表征在所述浏览器中对构成所述第二页面的HTML组件进行操作的操作数据。

设计平台可以通过WEB浏览器运行，通过WEB浏览器打开设计平台后，在设计平台的预览区域显示第二页面。第二页面的页面内容与电商APP上的电子商铺界面相同。

用户可以通过设计平台对第二页面显示的电子商铺页面进行设计操作，获取用户在设计平台上输入的操作数据。第二页面是一个HTML页面，第二页面由HTML组件构成。对第二页面进行设计，即对构成第二页面的HTML组件进行操作。

这里，在一实施例中，对构成所述第二页面的HTML组件进行操作包括以下任意一项：

初始化HTML组件；

选择HTML组件；

新增HTML组件；

删除HTML组件；

调整HTML组件的顺序；

更新HTML组件。

在一实施例中，所述获取第三页面数据，包括：

从设定服务器中获取所述第三页面数据。

每次用户在设计平台上对电子商铺界面进行设计操作后，将操作数据发送到设定服务器进行保存。这样，用户更换电子设备后，也可以从设定服务器获取到操作数据设计电子商铺界面。

在实际应用中，可以基于xml Http Request的异步请求加载第三页面数据。

S502，基于所述第三页面数据更新所述第二页面的页面内容。

根据第三页面数据对第二页面中的H5组件数据进行更新，然后浏览器重新渲染，以实现更新第二页面，使得用户能够直观感受到设计的电子商铺页面在电商APP上呈现的视觉效果。

在一实施例中，所述基于所述第三页面数据更新所述第二页面的页面内容，包括：

S601，基于所述第三页面数据修改所述第二页面对应的所述第二页面数据。

用户在设计平台输入操作数据对电子商铺界面进行设计，电子商铺界面最终的设计结果需要体现在设计平台的预览区域。在一实施例中，因为iframe页面构架将设计平台和预览区域隔离成了父框架和子框架，两者无论是代码模块，还是页面沙箱都是不同的，因此需要创建一个通信模块(通信层)，来将设计结果最终应用到预览区域。

在实际应用中，通信模块是通过H5页面实现的，首先在WEB浏览器的window.parent对象中，注册一个renderMessager对象，然后创建一个sendMessage2APP的方法，sendMessage2APP方法包含2个参数，一个是msg操作信息，是一个对象；一个是{code:xxx,data:xxx}，其中，code代表操作类型，data代表更新第二页面需要的操作数据。第二个参数是callback，作为当前操作的回调。

根据第三页面数据修改第二页面对应的所述第二页面数据，首先确定第三页面数据对应的操作类型，根据操作类型和第三页面数据对构成第二页面的组件进行调整。

具体参考表1，不同的操作类型需要不同的参数，操作类型通常包括初始化楼层(fill)、选择一个楼层(select)，新增一个楼层(add)、删除楼层(del)、调整楼层顺序(position)，和更新楼层(update)这6种操作类型。这里，楼层指第二页面的H5组件，每一个楼层都设置唯一的floorId。

表1

其中，在新增楼层时，可以选中预览区域中显示的H5组件，对其进行复制操作，从而可以实现在第二页面中新增一个H5组件。

由上表可见，上述6种操作都是对预览区域中展示的H5组件进行操作，并不需要设计平台新开发H5组件，由此可以避免开发H5组件，减少开发工作量，提高开发效率。

S602，通过所述浏览器渲染修改后的第二页面数据对应的第二页面。

在实际应用中，设计平台在用户进行设计操作后，获取对应操作类型需要的参数，参数如上表格中设计类型对应的参数。然后调用send Message2APP方法将操作类型和对应的参数传递给预览界面中的第二页面。第二页面通过上述表格第3列，对第二页面中的组件数据进行修改，最后渲染修改后的第二页面的组件数据，实现对用户设计操作的响应。

在完成电子商铺页面的设计后，创建一个update CallBack的数组作为操作完成的返回队列。

参考图7，图7是本发明应用实施例提供的一种电子商铺界面的设计流程示意图，用户在设计平台上进行电子商铺界面的设计操作，设计平台获取用户的操作类型和对应的操作数据，在图7中包括初始化楼层(fill)、选择一个楼层(select)，新增一个楼层(add)、删除楼层(del)、调整楼层顺序(position)，和更新楼层(update)这6种操作类型。将操作类型对应的操作数据通过通信模块发送给第二页面，第二页面根据操作数据更新楼层数据，浏览器渲染更新后的第二页面的楼层数据，实现对用户设计的响应。其中，楼层数据指组件数据。

参考图8，图8是本发明应用实施例提供的一种H5页面的渲染流程示意图。图8中的H5页面是用于显示在设计平台的预览区域中的，在实际应用中，在APP端一般通过FlatList来实现组件渲染，FlatList是RN提供的一个高性能的列表组件。在创建H5页面时，先创建一个View容器替代FlatList，View容器跟HTML代码中的DIV一样，可以包裹其他的组件，也可以被包裹在其他的组件内部。View容器采用Flex布局的纵向布局方式来设定内部布局为纵向列表布局。然后从上向下的渲染所有的楼层数据。View容器不设置固定高度，其高度为所有内部楼层高度之和。其中，楼层指组件。

在图8中，楼层数据数组包括多个楼层数据，楼层数据为组件数据，每一个楼层数据对应一个组件数据，每个楼层数据需要一个View容器来为最外层容器，View容器需要设置key属性避免渲染引擎警告和diff算法对比失败，diff算法用于计算出复杂渲染节点中被改变的部分，然后针对该部分进行原子化的更新操作，而不用重新渲染整个页面。key属性值为所有楼层的唯一ID(floorId)。View容器下包含2个子节点：楼层对应的组件；2、遮罩。遮罩尺寸与楼层渲染出来尺寸一致，遮罩有2个状态：选中态(呈现半透明的颜色)和非选中态(呈现全透明)。

然后设置HTML的容器绑定入口，该入口定义了电商APP的RN页面通过RNW插件再编译后，在H5页面中显示在什么网页元素容器中。通过网页选择器document.getElementById(WEB浏览器的ID选择器)选择出名称为J_app属性的元素，然后作为参数传入AppRegistry的runApplication方法中。

通过RNW插件对RN代码工程进行编译，输出静态资源的JS、CSS文件文件，RN使用到的所有组件都是在本代码工程中，因此输出的静态资源有对所有RN组件进行H5渲染的能力。最后，将静态资源打包发布到CDN中。

在用户完成对电子商铺页面的设计操作后，RN的渲染引擎会调用component DidUpdate生命周期方法，在方法中取出update Call Back队列中头部元素。因为设计的回调往往会涉及到设计平台台部分UI的更新，这样可以避免用户很短时间内频繁设计导致回调调用顺序混乱问题，保证进入请求和回调顺序的正常。当一个设计操作请求进入的时候，可能上一个设计操作的请求还未执行完成，如果callback存储为一个全局变量，可能上一次设计操作完成后执行的回调回次本次设计操作的回调。

参考图9，图9是本发明应用实施例提供的一种电子商铺界面的设计流程示意图。图9中的设计平台包括组件面板和预览区域，组件面板提供了组件模板给用户设计电子商铺界面，预览区域用于显示用户设计的电子商铺界面。预览区域是iframe页面构架，在需要在设计平台的预览区域加载电商APP中的电子店铺界面时，从CDN中获取静态资源生成H5页面，将H5页面加载并展示在设计平台的预览区域的iframe页面框架中。

参考图10，图10是本发明应用实施例提供的一种电子商铺界面的设计流程示意图。

首先，获取电商APP中的RN页面，RN页面即电子商铺界面，基于RNW插件对RN页面进行处理，RNW插件用于将RN组件对应的代码转换为HTML组件对应的代码，将HTML组件对应的代码中的静态数据存储在CDN中，同时通过WEB服务器创建一个H5页面，H5页面引用了CDN中的静态资源，将H5页面在设计平台的预览区域进行展示。基于上述操作，可以将APP中的电子商铺界面在设计平台进行展示。

然后，用户可以通过浏览器登陆设计平台，通过设计平台设计电子商铺界面，设计平台将用户的设计操作对应的操作数据通过通信模块发送给预览区域中的H5页面，H5页面根据操作数据进行组件数据更新，然后重新渲染，实现对用户设计操作的响应。

本发明应用实施例只需要开发一套RN组件，就可以实现在设计平台上显示电商APP中的电子商铺界面，用户在设计平台设计电子商铺界面，并不需要设计平台新开发H5组件，由此可以避免开发H5组件，减少开发工作量，提高了开发效率。

应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本发明实施例的实施过程构成任何限定。

应当理解，当在本说明书和所附权利要求书中使用时，术语“包括”和“包含”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。

需要说明的是，本发明实施例所记载的技术方案之间，在不冲突的情况下，可以任意组合。

另外，在本发明实施例中，“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。

参考图11，图11是本发明实施例提供的一种页面处理装置的示意图，如图11所示，该装置包括：获取模块、转换模块和渲染模块。

获取模块，用于获取第一页面的第一页面数据；所述第一页面表征为应用程序中的一个页面；所述第一页面数据表征构成所述第一页面的RN组件对应的代码；

转换模块，用于基于设定插件将所述第一页面数据转换为第二页面数据；所述设定插件用于将RN组件对应的代码转换为超文本标记语言HTML组件对应的代码；

渲染模块，用于通过浏览器渲染所述第二页面数据对应的第二页面。

所述装置还包括：

第三页面数据获取模块，用于获取第三页面数据；所述第三页面数据表征在所述浏览器中对构成所述第二页面的HTML组件进行操作的操作数据；

更新模块，用于基于所述第三页面数据更新所述第二页面的页面内容。

所述渲染模块具体用于：

创建与所述第一页面的尺寸一致的DIV容器；

在所述DIV容器中创建一个iframe页面框架；

基于所述iframe页面框架和所述第二页面数据，渲染得到所述第二页面。

所述更新模块具体用于：

基于所述第三页面数据修改所述第二页面对应的所述第二页面数据；

通过所述浏览器渲染修改后的第二页面数据对应的第二页面。

所述渲染模块，还用于从内容分发网络CDN中获取所述第二页面数据。

对构成所述第二页面的HTML组件进行操作包括以下任意一项：

初始化HTML组件；

选择HTML组件；

新增HTML组件；

删除HTML组件；

调整HTML组件的顺序；

更新HTML组件。

所述第三页面数据获取模块，用于从设定服务器中获取所述第三页面数据。

实际应用时，所述获取模块、转换模块和渲染模块可通过电子设备中的处理器，比如中央处理器(CPU，Central Processing Unit)、数字信号处理器(DSP，Digital SignalProcessor)、微控制单元(MCU，Microcontroller Unit)或可编程门阵列(FPGA，Field－Programmable Gate Array)等实现。

需要说明的是：上述实施例提供的页面处理装置在进行页面处理时，仅以上述各模块的划分进行举例说明，实际应用中，可以根据需要而将上述处理分配由不同的模块完成，即将装置的内部结构划分成不同的模块，以完成以上描述的全部或者部分处理。另外，上述实施例提供的页面处理装置与页面处理方法实施例属于同一构思，其具体实现过程详见方法实施例，这里不再赘述。

基于上述程序模块的硬件实现，且为了实现本申请实施例的方法，本申请实施例还提供了一种电子设备。图12为本申请实施例电子设备的硬件组成结构示意图，如图12所示，电子设备包括：

通信接口，能够与其它设备比如网络设备等进行信息交互；

处理器，与所述通信接口连接，以实现与其它设备进行信息交互，用于运行计算机程序时，执行上述电子设备侧一个或多个技术方案提供的方法。而所述计算机程序存储在存储器上。

当然，实际应用时，电子设备中的各个组件通过总线系统耦合在一起。可理解，总线系统用于实现这些组件之间的连接通信。总线系统除包括数据总线之外，还包括电源总线、控制总线和状态信号总线。但是为了清楚说明起见，在图12中将各种总线都标为总线系统。

本申请实施例中的存储器用于存储各种类型的数据以支持电子设备的操作。这些数据的示例包括：用于在电子设备上操作的任何计算机程序。

可以理解，存储器可以是易失性存储器或非易失性存储器，也可包括易失性和非易失性存储器两者。其中，非易失性存储器可以是只读存储器(ROM，Read Only Memory)、可编程只读存储器(PROM，Programmable Read-Only Memory)、可擦除可编程只读存储器(EPROM，Erasable Programmable Read-Only Memory)、电可擦除可编程只读存储器(EEPROM，Electrically Erasable Programmable Read-Only Memory)、磁性随机存取存储器(FRAM，ferromagnetic random access memory)、快闪存储器(Flash Memory)、磁表面存储器、光盘、或只读光盘(CD-ROM，Compact Disc Read-Only Memory)；磁表面存储器可以是磁盘存储器或磁带存储器。易失性存储器可以是随机存取存储器(RAM，Random AccessMemory)，其用作外部高速缓存。通过示例性但不是限制性说明，许多形式的RAM可用，例如静态随机存取存储器(SRAM，Static Random Access Memory)、同步静态随机存取存储器(SSRAM，Synchronous Static Random Access Memory)、动态随机存取存储器(DRAM，Dynamic Random Access Memory)、同步动态随机存取存储器(SDRAM，SynchronousDynamic Random Access Memory)、双倍数据速率同步动态随机存取存储器(DDRSDRAM，Double Data Rate Synchronous Dynamic Random Access Memory)、增强型同步动态随机存取存储器(ESDRAM，Enhanced Synchronous Dynamic Random Access Memory)、同步连接动态随机存取存储器(SLDRAM，SyncLink Dynamic Random Access Memory)、直接内存总线随机存取存储器(DRRAM，Direct Rambus Random Access Memory)。本申请实施例描述的存储器130旨在包括但不限于这些和任意其它适合类型的存储器。

上述本申请实施例揭示的方法可以应用于处理器中，或者由处理器实现。处理器可能是一种集成电路芯片，具有信号的处理能力。在实现过程中，上述方法的各步骤可以通过处理器中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器可以是通用处理器、DSP，或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。处理器可以实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者任何常规的处理器等。结合本申请实施例所公开的方法的步骤，可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于存储介质中，该存储介质位于存储器，处理器读取存储器中的程序，结合其硬件完成前述方法的步骤。

可选地，所述处理器执行所述程序时实现本申请实施例的各个方法中由电子设备实现的相应流程，为了简洁，在此不再赘述。

在示例性实施例中，本申请实施例还提供了一种存储介质，即计算机存储介质，具体为计算机可读存储介质，例如包括存储计算机程序的第一存储器，上述计算机程序可由电子设备的处理器执行，以完成前述方法所述步骤。计算机可读存储介质可以是FRAM、ROM、PROM、EPROM、EEPROM、Flash Memory、磁表面存储器、光盘、或CD-ROM等存储器。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置、电子设备和方法，可以通过其它的方式实现。以上所描述的设备实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，如：多个单元或组件可以结合，或可以集成到另一个系统，或一些特征可以忽略，或不执行。另外，所显示或讨论的各组成部分相互之间的耦合、或直接耦合、或通信连接可以是通过一些接口，设备或单元的间接耦合或通信连接，可以是电性的、机械的或其它形式的。

上述作为分离部件说明的单元可以是、或也可以不是物理上分开的，作为单元显示的部件可以是、或也可以不是物理单元，即可以位于一个地方，也可以分布到多个网络单元上；可以根据实际的需要选择其中的部分或全部单元来实现本实施例方案的目的。

另外，在本申请各实施例中的各功能单元可以全部集成在一个处理单元中，也可以是各单元分别单独作为一个单元，也可以两个或两个以上单元集成在一个单元中；上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能单元的形式实现。

本领域普通技术人员可以理解：实现上述方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成，前述的程序可以存储于一计算机可读取存储介质中，该程序在执行时，执行包括上述方法实施例的步骤；而前述的存储介质包括：移动存储设备、ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。

或者，本申请上述集成的单元如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请实施例的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机、服务器、或者网络设备等)执行本申请各个实施例所述方法的全部或部分。而前述的存储介质包括：移动存储设备、ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。

需要说明的是，本申请实施例所记载的技术方案之间，在不冲突的情况下，可以任意组合。

另外，在本申请实例中，“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。

以上所述，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以所述权利要求的保护范围为准。

Claims (10)

1.一种页面处理方法，其特征在于，所述方法包括：

获取第一页面的第一页面数据；所述第一页面表征为应用程序中的一个页面；所述第一页面数据表征构成所述第一页面的RN组件对应的代码；

基于设定插件将所述第一页面数据转换为第二页面数据；所述设定插件用于将RN组件对应的代码转换为超文本标记语言HTML组件对应的代码；

通过浏览器渲染所述第二页面数据对应的第二页面。

2.根据权利要求1所述的方法，其特征在于，所述方法还包括：

获取第三页面数据；所述第三页面数据表征在所述浏览器中对构成所述第二页面的HTML组件进行操作的操作数据；

基于所述第三页面数据更新所述第二页面的页面内容。

3.根据权利要求1所述的方法，其特征在于，所述通过浏览器渲染所述第二页面数据对应的第二页面，包括：

创建与所述第一页面的尺寸一致的DIV容器；

在所述DIV容器中创建一个iframe页面框架；

基于所述iframe页面框架和所述第二页面数据，渲染得到所述第二页面。

4.根据权利要求2所述的方法，其特征在于，所述基于所述第三页面数据更新所述第二页面的页面内容，包括：

基于所述第三页面数据修改所述第二页面对应的所述第二页面数据；

通过所述浏览器渲染修改后的第二页面数据对应的第二页面。

5.根据权利要求1所述的方法，其特征在于，所述通过浏览器渲染所述第二页面数据对应的第二页面时，所述方法还包括：

从内容分发网络CDN中获取所述第二页面数据。

6.根据权利要求2所述的方法，其特征在于，对构成所述第二页面的HTML组件进行操作包括以下任意一项：

初始化HTML组件；

选择HTML组件；

新增HTML组件；

删除HTML组件；

调整HTML组件的顺序；

更新HTML组件。

7.根据权利要求2所述的方法，其特征在于，所述获取第三页面数据，包括：

从设定服务器中获取所述第三页面数据。

8.一种页面处理装置，其特征在于，包括：

获取模块，用于获取第一页面的第一页面数据；所述第一页面表征为应用程序中的一个页面；所述第一页面数据表征构成所述第一页面的RN组件对应的代码；

转换模块，用于基于设定插件将所述第一页面数据转换为第二页面数据；所述设定插件用于将RN组件对应的代码转换为超文本标记语言HTML组件对应的代码；

渲染模块，用于通过浏览器渲染所述第二页面数据对应的第二页面。

9.一种电子设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至7任一项所述的页面处理方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机程序，所述计算机程序包括程序指令，所述程序指令当被处理器执行时使所述处理器执行如权利要求1至7任一项所述的页面处理方法。

Images