一种应用页面处理方法、装置及系统与流程

本发明涉及数据处理技术领域，具体涉及一种应用页面处理方法、装置及系统。

背景技术：

随着科技的不断发展，人们对智能设备的页面布局以及响应速度的要求也越来越高。

目前，智能设备的APP(应用)的页面布局在发生改变时，需要向后台服务器提交页面布局更新请求，并经过后台服务器的审核后，对当前APP进行重新下载，以替换原APP，实现APP页面布局的更新。

发明人发现，目前的APP页面布局更新方法需要较长的时间，页面更新效率较低。

因此，如何提供一种APP页面处理方法，提升应用的页面布局的更新速度，成为了本领域技术人员需要考虑的问题。

技术实现要素：

有鉴于此，本发明实施例提供一种应用页面处理方法、装置及系统，提升应用的页面布局的更新速度。

为实现上述目的，本发明实施例提供如下技术方案：

一种应用页面处理方法，包括：

获取目标应用的本地布局文件的属性信息，所述本地布局文件指示所述应用页面中模块的布局位置，所述属性信息包括所述本地布局文件的版本号；

根据所述本地布局文件的版本号，判断所述本地布局文件是否为CDN服务器预存的最新的布局文件，所述最新的布局文件指示所述应用页面中模块的最新布局位置；

若所述本地布局文件不为最新的布局文件，根据最新的布局文件的版本号，获取所述最新的布局文件，并将所述最新的布局文件设置成当前本地布局文件；

获取各模块的内容数据，根据所述当前本地布局文件，对页面中的各模块的内容数据进行展示。

一种应用页面处理装置，包括：

获取模块，用于获取应用的本地布局文件，所述本地布局文件指示有所述应用各页面中模块的布局位置；

判断模块，用于根据所述本地布局文件的版本号，判断所述本地布局文件是否为最新的布局文件，所述最新的布局文件至少包含所述应用各页面中模块的最新布局位置；

配置模块，用于当所述本地布局文件不为最新的布局文件时，根据最新的布局文件的版本号，获取所述最新的布局文件，并将所述最新的布局文件设置成当前本地布局文件。

一种应用页面处理系统，包括任意一项上述的应用页面处理装置。

基于上述技术方案，本发明实施例提供了一种应用页面处理方法，通过获取应用的本地布局文件的属性信息，其中，所述本地布局文件指示所述应用各页面中模块的布局位置，所述属性信息包括所述本地布局文件的版本号；然后，根据所述本地布局文件的版本号，判断所述本地布局文件是否为最新的布局文件，其中，所述最新的布局文件至少包含所述应用各页面中模块的最新布局位置；若所述本地布局文件不为最新的布局文件，根据最新的布局文件的版本号，获取所述最新的布局文件，并将所述最新的布局文件设置成当前本地布局文件。

可见，本方案在需要页面布局变更时，直接对本地布局文件进行替换。由于最新的布局文件JSbundle是在后台服务器预先下载后存储在CDN服务器上，当客户端更换页面布局时，直接进行本地布局文件的替换，缩短现有技术中应用更新的等待时间，提升了页面显示的流畅度。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。

图1为本发明实施例提供的应用页面处理系统的应用环境图；

图2为现有技术中一应用的界面示意图；

图3为本发明实施例提供的应用页面处理系统的信令流程图；

图4为本发明实施例提供的又一应用页面处理系统的信令流程图；

图5为本发明实施例提供的应用页面处理系统中布局文件的架构示意图；

图6为本发明实施例提供的又一应用页面处理系统的信令流程图；

图7为本发明实施例提供的应用页面处理系统的一产品界面示意图；

图8为本发明实施例提供的应用页面处理系统的又一产品界面示意图；

图9为本发明实施例提供的应用页面处理装置的结构示意图；

图10为本发明实施例提供的又一应用页面处理装置的结构示意图；

图11为本发明实施例提供的又一应用页面处理装置的结构示意图；

图12为本发明实施例提供的又一应用页面处理装置的结构示意图；

图13为本发明实施例提供的又一应用页面处理装置的结构示意图；

图14为本发明实施例提供的又一应用页面处理装置的结构示意图；

图15为本发明实施例提供的应用页面处理装置的硬件结构框图。

具体实施方式

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

本发明实施例提供了一种应用页面处理方法，通过获取应用的本地布局文件，然后，根据所述本地布局文件的版本号，判断所述本地布局文件是否为最新的布局文件，其中，所述最新的布局文件至少包含所述应用各页面中模块的最新布局位置；若所述本地布局文件不为最新的布局文件，根据最新的布局文件的版本号，获取所述最新的布局文件，并将所述最新的布局文件设置成当前本地布局文件。可见，本方案在需要页面布局变更时，直接对本地布局文件进行替换。由于最新的布局文件JSbundle是在后台服务器预先下载后存储在CDN服务器上，当客户端更换页面布局时，直接进行本地布局文件的替换，缩短现有技术中应用更新的等待时间，提升了页面显示的流畅度。

请参阅图1，图1为本发明实施例提供的应用页面处理系统的结构框图，本发明实施例提供的应用页面处理方法可基于图1所示系统实现，参照图1，本发明实施例提供的应用页面处理系统可以包括：CDN服务器10，至少一个客户端20；

CDN服务器10可以为单台服务器，也可以为由多台服务器组成的服务器群组或者是一个云计算服务中心。CDN服务器10预先下载有最新的布局文件(JSbundle)。

至少一个客户端20为用户侧的用于发送业务请求的设备，如手机、平板电脑、笔记本电脑等。在本方案中，客户端20可以具体为安装有应用(APP)的客户端，APP可以为客户端上加载的应用商店、浏览器、QQ、微信等。

需要说明的是，本实施例中涉及的应用页面为客户端上安装的APP的显示界面，该显示界面通过预设的布局架构以模块的方式进行显示。本实施例提供的应用页面处理方法是如何更新客户端的本地应用的页面架构，而非网页应用界面的显示内容的更新。

现以APP为QQ为例，其应用页面为用户在打开QQ应用后，呈现的界面，如图2所示，该应用界面的布局架构包括模块“联系人”、“搜索框”、“新朋友”、“群聊”、“公众号”以及“好友组”。

其中，“联系人”、“搜索框”、“新朋友”、“群聊”、“公众号”以及“好友组”这些模块的位置关系是固定的，由开发人员在发布APP前设定，即一个版本的APP的布局位置(底层架构)是固定的。每个模块用于展示不同的数据内容，当该APP的模块对应的数据内容发生变化时，对该APP进行数据刷新，如，“好友组1”中的好友在线人数变为3人时，则刷新当前数据为3/25。或者，当好友组1的好友总数量发生变化时，更新当前数据，如1/26。

即目前的APP只能更新模块数据，其模块的布局位置不变，当需要对模块的布局位置进行调整时，只能向后台服务器发送更换页面布局请求，待后台服务器审核通过后，由开发人员重新制定模块布局位置，并将更换模块布局位置后的新版本的APP反馈至用户端，替换原APP，这一页面更新过程较为复杂，效率低。

因此，本方案着重快速更新模块的布局位置，即“联系人”、“搜索框”、“新朋友”、“群聊”、“公众号”以及“好友组”等模块的位置关系，如将“联系人”放在图1页面的左下角。

又或者，用户打开一个浏览器的web应用，本方案是更新该web应用中各模块的布局位置，如目前web页面的上方设置有搜索栏，通过本方案，可以将该搜索栏设置在web页面的右上角，又如，将原web页面左上角设置的“前进”、“后退”按键更改到现web页面的正中央等位置。

具体的，基于图1所示系统，图3示出了本发明实施例提供的应用页面处理系统的信令流程图，该应用页面处理系统包括：客户端和CDN服务器，其中，客户端包括javascript模块，结合图1和图3所示，该信令交互过程可以包括：

步骤S100、javascript模块获取应用的本地布局文件。

其中，所述本地布局文件指示有所述应用各页面中模块的布局位置。在本方案中可以是通过接收到用户的触发指令后，获取客户端本地布局文件。该触发指令可以是用户基于客户端APP界面的某个操控指令，如点击了界面上的某个按键，从APP进入到本方案的native编辑界面。也可以是当APP启动的时候，自动获取本地布局文件，即加载本地JSbundle文件。当然，并不局限于上述触发动作，应用设计人员可以根据具体的设计需求进行设定触发条件。

步骤S101、根据所述本地布局文件的版本号，判断所述本地布局文件是否为最新的布局文件；

此步骤在触发native编辑界面后，校验客户端的本地JSbundle文件是否为最新的版本。具体的，根据所述本地布局文件的版本号，判断所述本地布局文件是否为最新的布局文件，其可以通过如下方式实现：

向效验服务器发送布局文件的版本比对请求，其中，所述版本比对请求包括所述本地布局文件的版本号。然后接收效验服务器将所述版本号与最新版本号进行比对后的比对结果。需要说明的是，最新的布局文件至少包含所述应用各页面中模块的最新布局位置。而比对结果通常可以为本地布局文件的版本与最新布局文件的版本相同，或，本地布局文件的版本与最新布局文件的版本不同。当本地布局文件的版本与最近布局文件的版本不同时，认定本地布局文件不是最新的布局文件。

步骤S102、若所述本地布局文件不为最新的布局文件，根据最新的布局文件的版本号，获取所述最新的布局文件，并将所述最新的布局文件设置成当前本地布局文件。

结合步骤S101，当所述比对结果表示本地布局文件的版本号与最新版本号不一致时，获取CDN服务器存储的与所述最新版本号相对应的最新的布局文件。即，此时客户端拉取CDN服务器上存储的最新的JSbundle文件。

本方案中，在本地JSbundle文件不为最新的JSbundle文件时，拉取CDN服务器上存储的最新的JSbundle文件，之后，可以直接将最新的JSbundle文件替换原本地JSbundle文件，还可以对JSbundle文件的摘要信息进行验证，进一步确定最新的JSbundle文件是否损毁，如果CDN服务器上存储的最新的JSbundle文件发生损毁，则不执行任何操作，如果CDN服务器上存储的最新的JSbundle文件没有损坏，则将最新的布局文件设置成当前本地布局文件

需要说明的是，本方案中，可以通过检测最新的布局文件的摘要信息是否为预设的字段来实现，如进行MD5校验。

可见，本方案在需要页面布局变更时，直接对本地布局文件进行替换。由于最新的布局文件JSbundle是在后台服务器预先下载后存储在CDN服务器上，当客户端更换页面布局时，直接进行本地布局文件的替换，缩短现有技术中应用更新的等待时间，提升了页面显示的流畅度。

在本申请的另一个实施例中，对客户端如何对页面中的各模块的内容数据进行展示的过程进行介绍。参照图3，图3为本申请示例的又一种应用页面处理系统的信令交互示意图，该信令交互过程包括：

步骤S103、获取各模块的内容数据，根据所述当前本地布局文件，对页面中的各模块的内容数据进行展示。

如图4所示，布局文件里指示了页面中各模块的布局位置，图中每一个方框代表一个模块，各模块的位置布局可以自行设定，如图中模块1、2、3、4可以用来展示图片内容，模块5、6、7可以用来展示游戏内容。

具体的，本方案是根据列表控件Listview，将所述当前本地布局文件解析成虚拟文档对象模型树，将所述模块的内容数据按照所述虚拟文档对象模型树的架构进行展示。

即，将列表控件当做容器，将列表控件中的展示模块填充预设的模块数据，实现页面展示。具体的，在Native编辑界面中，UI是一个component树，而列表控件Listview是component的一种，Native通过将component编译成一个virtual-DOM。然后UI通过virtual-DOM实现页面展示。

除此，Native可以通过用户提供的state变量改变DOM组件，由于DOM中模块发生变化，因此，能够重新绘制UI。

在本申请的另一个实施例中，对客户端如何获取数据的过程进行介绍。参照图5，图5为本申请示例的又一种应用页面处理系统的信令交互示意图，该信令交互过程包括：

步骤S501、获取数据服务器生成的模块配置表，所述模块配置表包括模块与模块函数的对应关系，所述模块函数用于调取模块的内容数据；

步骤S501、在获取模块的内容数据时，将待获取模块的模块函数转化为目标模块地址信息，并将所述目标模块地址信息发送至所述数据服务器；

步骤S503、接收所述数据服务器发送的与目标模块函数对应的内容数据，所述目标模块函数为所述数据服务器根据所述目标模块地址信息，查找所述模块配置表得到。

在本方案中，Native用ios自带的JavaScriptCore作为javascript的解析引擎，客户端的javascript模块与数据服务器中的objective-c模块通信，进行数据交互。具体的，数据服务器生成模块配置表，其中，模块配置表包括模块与模块函数的对应关系，模块函数是用来调取模块的内容数据。

在本方案中，javascript模块与objective-c模块各设置有一个bridge，两个bridge都保存了同一个模块配置表，这样，在javascript模块调用objective-c模块的模块函数时，通过bridge里的配置表把模块函数转化为模块ID传给objective-c模块，objective-c模块通过bridge里的模块配置表找到与模块ID对应的模块函数并执行。

具体的，javascript模块调用objective-c模块的模块函数的详细流程为：

1、javascript模块调用某个objective-c模块暴露出来的模块函数

具体分解为ModuleName，MethodName，arguments，再交给MessageQueue处理。

2、将javascript模块的callback函数缓存在MessageQueue的一个成员变量中，用CallbackID代表callback。

3、将上述步骤得到的ModuleID，MethodID，CallbackID和其他参数argus传给objective-c模块。

4、objective-c模块接收到上述ID消息，通过模块配置表拿到对应的模块和模块函数。

5、RCTModuleMethod对javascript模块传来的每一个参数进行处理。

6、objective-c模块的模块函数调用完，执行block回调。

7、调用RCTModuleMethod生成的block，需要注意的是，该block根据CallbackID和block传来的参数去调取javascript模块里的MessageQueue的函数invokeCallback。

8、然后，MessageQueue通过CallbackID找到相应的javascript的Callback函数。调用Callback函数，并把objective-c模块包含的参数一起传给javascript模块，完成回调。

9、Javascript模块通过返回值，将数据传给objective-c模块。

具体的，结合本方案的一个产品，进行说明：

APP的页面根据原本地布局文件，显示为如图6所示，其中，模块1、2、3和4平分页面的上半部分。而当该布局方式需要更新时，客户端直接从CDN服务器拉取布局文件的最新版本，然后在页面上进行显示，如图7所示，其中，模块1在图中的左上角，模块2和模块3设置在模块1的右侧，在模块1和模块3的正下方，即页面的模块展示内容取决于布局文件中模块的布局位置。

下面对本发明实施例提供的应用页面处理装置进行介绍，下文描述的应用页面处理装置可与上文描述的应用页面处理方法相互对应参照。

图8为本发明实施例提供的应用页面处理装置的结构框图，参照图8，该装置可以包括：

获取模块100，用于获取应用的本地布局文件，所述本地布局文件指示有所述应用各页面中模块的布局位置；

判断模块200，用于根据所述本地布局文件的版本号，判断所述本地布局文件是否为最新的布局文件，所述最新的布局文件至少包含所述应用各页面中模块的最新布局位置；

配置模块300，用于当所述本地布局文件不为最新的布局文件时，根据最新的布局文件的版本号，获取所述最新的布局文件，并将所述最新的布局文件设置成当前本地布局文件。

可选的，如图9所示，所述判断模块200包括：

请求单元201，用于向效验服务器发送布局文件的版本比对请求，所述版本比对请求包括所述本地布局文件的版本号；

接收单元202，用于接收效验服务器将所述版本号与最新版本号进行比对后的比对结果；

相应的，所述配置模块300包括：

获取单元301，用于当所述比对结果表示本地布局文件的版本号与最新版本号不一致时，获取CDN服务器存储的与所述最新版本号相对应的最新的布局文件。

可选的，如图10所示，所述配置模块300还包括：

判断单元302，用于根据所述最新的布局文件的摘要信息，判断所述最新的布局文件是否损坏；若未损坏，将所述最新的布局文件设置成当前本地布局文件。

可选的，如图11所示，本方案提供的应用页面处理装置，还包括：

展示模块400，用于获取各模块的内容数据，根据所述当前本地布局文件，对页面中的各模块的内容数据进行展示。

可选的，如图12所示，所述展示模块400包括：

解析单元401，用于根据列表控件，将所述当前本地布局文件解析成虚拟文档对象模型树；

展示单元402，用于将所述模块的内容数据按照所述虚拟文档对象模型树的架构进行展示。

可选的，如图13所示，所述展示单元402包括：

获取子单元4021，用于获取数据服务器生成的模块配置表，所述模块配置表包括模块与模块函数的对应关系，所述模块函数用于调取模块的内容数据；

处理子单元4022，用于在获取模块的内容数据时，将待获取模块的模块函数转化为目标模块地址信息，并将所述目标模块地址信息发送至所述数据服务器；

接收子单元4023，用于接收所述数据服务器发送的与目标模块函数对应的内容数据，所述目标模块函数为所述数据服务器根据所述目标模块地址信息，查找所述模块配置表得到。

除此，本方案实施例还提供了一种应用页面处理系统，包括任意一项上述的应用页面处理装置。

本发明实施例还提供有一种数据处理设备，该数据处理设备可以包括上述所述的数据项相关的高效用项集挖掘装置。

可选的，图14示出了数据处理设备的硬件结构框图，参照图14，该数据处理设备可以包括：处理器1，通信接口2，存储器3和通信总线4；

其中处理器1、通信接口2、存储器3通过通信总线4完成相互间的通信；

可选的，通信接口2可以为通信模块的接口，如GSM模块的接口；

处理器1，用于执行程序；

存储器3，用于存放程序；

程序可以包括程序代码，所述程序代码包括计算机操作指令。

处理器1可能是一个中央处理器CPU，或者是特定集成电路ASIC(Application Specific Integrated Circuit)，或者是被配置成实施本发明实施例的一个或多个集成电路。

存储器3可能包含高速RAM存储器，也可能还包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器。

其中，程序可具体用于：

获取应用的本地布局文件，所述本地布局文件指示有所述应用各页面中模块的布局位置；

根据所述本地布局文件的版本号，判断所述本地布局文件是否为最新的布局文件，所述最新的布局文件至少包含所述应用各页面中模块的最新布局位置；

若所述本地布局文件不为最新的布局文件，根据最新的布局文件的版本号，获取所述最新的布局文件，并将所述最新的布局文件设置成当前本地布局文件。

综上所述，本发明实施例提供了一种应用页面处理方法，通过获取应用的本地布局文件，其中，所述本地布局文件指示有所述应用各页面中模块的布局位置；然后，根据所述本地布局文件的版本号，判断所述本地布局文件是否为最新的布局文件，其中，所述最新的布局文件至少包含所述应用各页面中模块的最新布局位置；若所述本地布局文件不为最新的布局文件，根据最新的布局文件的版本号，获取所述最新的布局文件，并将所述最新的布局文件设置成当前本地布局文件。

可见，本方案在需要页面布局变更时，直接对本地布局文件进行替换。由于最新的布局文件JSbundle是在后台服务器预先下载后存储在CDN服务器上，当客户端更换页面布局时，直接进行本地布局文件的替换，缩短现有技术中应用更新的等待时间，提升了页面显示的流畅度。

本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。

专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(RAM)、内存、只读存储器(ROM)、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的存储介质中。

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。