一种页面布局方法、装置和页面开发平台

摘要

本发明公开一种页面布局方法、装置和页面开发平台。本发明的方法包括：利用预先构建的页面开发平台接收用于页面布局的数据内容；将所述数据内容按照设定规则转换为标准json格式数据的报文，所述标准json格式数据的报文适用于不同操作系统平台的移动端页面设计；将所述标准json格式数据下发到移动端，所述移动端基于所述标准json格式数据生成页面并显示。本发明的技术方案利用预先构建的页面开发平台生成适用于不同操作系统的标准json格式数据的报文，使得具有不同操作系统的移动端可以使用同一套标准json格式数据的报文进行页面开发，彻底实现移动端的跨平台页面开发。

说明书

技术领域

本发明涉及计算机软件技术领域，特别涉及一种页面布局方法、装置和页面开发平台。

背景技术

目前，大部分开发人员会使用跨平台移动应用开发框架(ReactNavite，RN)去实现手机端的跨平台开发，但是目前了解到的ReactNavite技术还存在以下问题：

1、无法彻底跨平台：以iOS端和Android端为例，iOS端和Android端原生控件存在很大差异，无法通过一套JS代码完全实现两端的统一布局，因此绝大部分开发人员还是会使用两套JS，分别使用iOS和Android进行打包，并没有解决跨平台问题。

2、无法摆脱开发人员：使用ReactNavire时，如果要修改页面，则必须修改JS相关内容，重新发布，因此JS的修改需要相对有开发能力的人进行。

3、无法定制化页面操作：只能定制页面布局，对于功能来说是不完整的。

4、Json数据传输过程中可能会导致隐私信息泄露。

发明内容

本发明的目的在于提供了一种用于移动端跨平台的页面布局方法、装置和页面开发平台，至少部分的解决上述问题。

第一方面，本发明提供了一种页面布局方法，包括：

利用预先构建的页面开发平台接收用于页面布局的数据内容；

将所述数据内容按照设定规则转换为标准json格式数据的报文，所述标准json格式数据的报文适用于不同操作系统平台的移动端页面设计；

将所述标准json格式数据的报文下发到移动端，所述移动端基于所述标准json格式数据的报文生成页面并显示。

第二方面，本发明提供了一种页面布局装置，包括：

数据接收单元，利用预先构建的页面开发平台接收用于页面布局的数据内容；

数据整合单元，将所述数据内容按照设定规则转换为标准json格式数据的报文，所述标准json格式数据的报文适用于不同操作系统平台的移动端页面设计；

数据发送单元，将所述标准json格式数据的报文下发到移动端，所述移动端基于所述标准json格式数据的报文生成页面并显示。

第三方面，本发明提供了一种页面开发平台，包括：包括处理器和存储器；存储器，存储计算机可执行指令；处理器，所述计算机可执行指令在被执行时使处理器执行页面布局方法。

第四方面，本发明提供了一种计算机可读存储介质，计算机可读存储介质上存储有一个或多个计算机程序，一个或多个计算机程序被执行时实现页面布局方法。

本发明至少取得以下技术效果：利用预先构建的页面开发平台接收用于页面布局的数据内容，页面开发平台将接收到的数据内容按照设定规则转换为标准json格式数据的报文下发给移动端，使得不同操作系统平台的移动端都可以解析该报文，利用解析后的数据内容进行页面布局和展示，实现移动端的跨平台页面布局。

附图说明

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

图1为本发明实施例示出的页面布局方法流程图；

图2为本发明实施例示出的静态类型的出差请求页面示意图；

图3为本发明实施例示出的动态操作类型的搜索页面示意图；

图4为本发明实施例示出的对标准json格式数据的报文的处理流程图；

图5为本发明实施例示出的基于页面布局框架进行页面布局的示意图；

图6为本发明实施例示出的按钮事件卡片示意图；

图7为本发明实施例示出的多行事件卡片示意图；

图8为本发明实施例示出的图文事件卡片示意图；

图9为本发明实施例示出的语音事件卡片示意图；

图10为本发明实施例示出的页面布局装置结构示意图；

图11为本发明实施例示出的页面布局装置的硬件结构示意图。

具体实施方式

现在将参照附图来详细描述本发明的各种示例性实施例。应注意到：除非另外具体说明，否则在这些实施例中阐述的部件和步骤的相对布置、数字表达式和数值不限制本发明的范围。

以下对至少一个示例性实施例的描述实际上仅仅是说明性的，决不作为对本发明及其应用或使用的任何限制。

对于相关领域普通技术人员已知的技术、方法和设备可能不作详细讨论，但在适当情况下，技术、方法和设备应当被视为说明书的一部分。

在这里示出和讨论的所有例子中，任何具体值应被解释为仅仅是示例性的，而不是作为限制。因此，示例性实施例的其它例子可以具有不同的值。

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

<实施例一>

本发明实施例针对不同操作系统的移动端，例如iOS端和Android端，页面开发平台生成同一套json格式数据报文下发给手机端，iOS的手机端或和Android的手机端通过ReactNavite可以生成同样样式的页面布局。

图1为本发明实施例示出的页面布局方法流程图，如图1所示，本实施例的方法包括：

S1100，利用预先构建的页面开发平台接收用于页面布局的数据内容。

其中页面开发平台可以包括前端和后端，例如包括前端的页面布局框架，该页面布局框架可以为构建在前端的浏览器上，用于接收用户输入的数据内容。而后端对应为服务器，通过服务器开放相应的接口，用户通过调用该接口进行数据内容的输入，进而使得页面开发平台可以接收到数据内容。

S1200，将数据内容按照设定规则转换为标准json格式数据的报文，标准json格式数据的报文适用于不同操作系统平台的移动端页面设计。

本实施例的设定规则用于规定：报文的数据结构以及规定报文中的命令字；例如规定的报文的数据结构包括报文头和数据体，通过命令字action的取值标识报文对应的页面为静态类型的页面，抑或页面为动态操作类型的页面，图2为一种静态类型的出差请求页面示例，图3为一种动态操作类型的搜索页面的示例。以及，通过命令字actiontype标识操作含义，通过命令字callapp标识打开新应用或调取原生功能的操作，通过命令字newweb标识打开并加载H5页面的操作，通过命令字callbackurl标识加载对应url地址的操作，通过命令字rn标识下载并打开对应的React Native包文件并打开的操作。

当然，本实施例的设定规则还可以用于规定：报文的加密规则和解密规则等内容。标准json格式数据的报文适用于不同操作系统平台的移动端页面设计，例如iOS操作系统平台、Android操作系统平台。

S1300，将标准json格式数据的报文下发到移动端，移动端基于标准json格式数据的报文生成页面并显示。

本实施例利用预先构建的页面开发平台接收用于页面布局的数据内容，页面开发平台将接收到的数据内容按照设定规则转换为标准json格式数据的报文下发给移动端，使得不同操作系统平台的移动端都可以解析该报文，利用解析后的数据内容进行页面布局和展示。

在一个实施例中，如图4所示，上述步骤S1300将标准json格式数据的报文下发到移动端，移动端基于标准json格式数据的报文生成页面并显示进一步包括：

S1310，将标准json格式数据的报文加密后封装到protocol buffer文件中，以文件流的形式进行数据下发。

S1320，移动端接收到protocol buffer文件时，解析protocol buffer文件获得protocol buffer对象后，对该protocol buffer对象进行解密获得标准json格式数据的报文，以及按照设定规则解析该标准json格式数据的报文，获得数据内容并利用ReactNavite方法将该数据内容组装成页面，并将页面加载到相应的应用中进行显示。

在一个实施例中，上述步骤S1100利用预先构建的页面开发平台接收用于页面布局的数据内容进一步包括：

利用页面开发平台的页面布局框架接收所述数据内容，和/或，利用页面开发平台的开放接口接收所述数据内容。

即本实施例中的页面开发平台包括页面布局框架和开放接口，一个示例中，页面布局框架构建在前端浏览器上，开放接口构建在后端服务器上。这样用户可以通过两种渠道向页面开发平台输入数据内容。例如，在页面布局框架能够满足用户需求时，用户即可通过页面布局框架向页面开发平台输入数据内容，当页面布局框架不能满足用户需求时，用户可以调用该开放接口，通该开放接口向页面开发平台输入数据内容。

本实施例中的页面布局框架包括标题组件、副标题组件、内容组件，如图5所示，上述利用页面开发平台的页面布局框架接收所述数据内容进一步包括：

分别接收输入到标题组件、副标题组件、内容组件中的输入数据，并为输入到标题组件、副标题组件、内容组件中的输入数据分别设置相应的标识；将标题组件、副标题组件、内容组件中的输入数据及其对应的标识组成数据内容。这样页面开发平台即可根据输入数据的标识并参照设定规则将数据内容转换为标准json格式数据的报文。

当然，本实施例中的页面布局框架还包括应用消息卡片的操作指令组件，操作指令组件中的操作指令规定应用消息卡片的操作方式。其中，操作指令包括但不限于：打开webview加载指定H5页面、跳转app内部页面或外部应用、使用移动端本身功能(拨打电话、选取相册照片等)。

例如参考图6所示的按钮事件卡片、图7所示多行事件卡片、图8所示的图文卡片和图9所示的语音卡片；

如图6所示，按钮事件卡片上示例出命令字“title”、“type”、“content”“actionArray”、“actionType”，并且对涉及的这些命令字进行了解释，“title”标识卡片主体，为非空字段；“type”标识卡片类型，即多按钮卡片；“content”标识待显示的文本，可以为空值；“actionType”标识操作类型，例如打开网页(webview)、打开React Native包文件(rn)、回调url(callback)等等。

如图7所示，多行事件卡片示例出命令字“title”、“type”、“actionArray”、“actionType”，并且对涉及的这些命令字进行了解释，“title”标识卡片主体，为非空字段；“type”标识卡片类型，即多行事件卡片；“actionType”标识操作类型，例如打开网页(webview)、打开React Native包文件(rn)、回调url(callback)等等。

如图8所示，图文卡片示例出命令字“title”、“type”、“content”、“actionType”，并且对涉及的这些命令字进行了解释，“title”标识卡片主体，为非空字段；“type”标识卡片类型，即图文卡片；“content”标识待显示的文本，可以为空值；“actionType”标识操作类型，例如打开网页(webview)、打开React Native包文件(rn)、回调url(callback)等等。

如图9所示，语音卡片示例出命令字“title”、“type”、“content”、“url”，并且对涉及的这些命令字进行了解释，“title”标识卡片主体，为非空字段；“type”标识卡片类型，即语音卡片；“content”标识待显示的文本，可以为空值；“url”标识图片或语音的下载地址。

结合图8至图9，通过设置应用消息卡片的操作指令组件，使得页面布局框架支持样式众多，包含不限于文字、图文混排、表格、语音，同时支持字体加粗，变色等标准HTML标签，可以方便的实现应用消息卡片样式的定制和展现。

由此，本实施例中的移动端接收到的protocol buffer文件时，即可自动解析和处理，无需做二次处理，且iOS操作系统平台与Android操作系统平台的移动端都可以使用，在页面组件过程中，可以使用页面自带的功能，例如通过reactnative中的方法组装页面，无需移动端单独做配套开发，从而使得本发明实施例的页面布局方法更加便于推广和使用。

<实施例二>

图10为本发明实施例示出的页面布局装置结构示意图，如图10所示，本实施例的装置包括：

数据接收单元，利用预先构建的页面开发平台接收用于页面布局的数据内容；

数据整合单元，将所述数据内容按照设定规则转换为标准json格式数据的报文，所述标准json格式数据的报文适用于不同操作系统平台的移动端页面设计；

数据发送单元，将所述标准json格式数据的报文下发到移动端，所述移动端基于所述标准json格式数据的报文生成页面并显示。

在一个实施例中，数据整合单元，将所述标准json格式数据的报文加密后封装到protocol buffer文件中，相应的，数据发送单元，以文件流的形式将所述protocol buffer文件进行数据下发。

在一个实施例中，页面布局框架包括标题组件、副标题组件、内容组件，数据接收单元，利用分别接收输入到所述标题组件、副标题组件、内容组件中的输入数据，并为输入到所述标题组件、副标题组件、内容组件中的输入数据分别设置相应的标识；将所述标题组件、副标题组件、内容组件中的输入数据及其对应的标识组成所述数据内容。

本发明装置实施例中各单元的具体实现方式可以参见本发明方法实施例中的相关内容，在此不再赘述。

<实施例三>

图11为本发明实施例示出的页面开发平台的硬件结构示意图，如图10所示，在硬件层面，该页面开发平台包括处理器，可选地还包括内部总线、网络接口、存储器。其中，存储器可能包含内存，例如高速随机存取存储器(Random-Access Memory，RAM)，也可能还包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器等。当然，该页面开发平台还可能包括其他业务所需要的硬件。

处理器、网络接口和存储器可以通过内部总线相互连接，该内部总线可以是ISA(Industry Standard Architecture，工业标准体系结构)总线、PCI(PeripheralComponent Interconnect，外设部件互连标准)总线或EISA(Extended Industry StandardArchitecture，扩展工业标准结构)总线等。所述总线可以分为地址总线、数据总线、控制总线等。为便于表示，图11中仅用一个双向箭头表示，但并不表示仅有一根总线或一种类型的总线。

存储器，用于存放程序。具体地，程序可以包括程序代码，所述程序代码包括计算机可执行指令。存储器可以包括内存和非易失性存储器，并向处理器提供指令和数据。

处理器从非易失性存储器中读取对应的计算机程序到内存中然后运行，在逻辑层面上形成页面布局装置。处理器，执行存储器所存放的程序实现如上文描述的页面布局方法。

上述如本说明书图11所示实施例揭示的页面开发平台执行的方法可以应用于处理器中，或者由处理器实现。处理器可能是一种集成电路芯片，具有信号的处理能力。在实现过程中，上文描述的页面布局方法的各步骤可以通过处理器中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器可以是通用处理器，包括中央处理器(CentralProcessing Unit，CPU)、网络处理器(Network Processor，NP)等；还可以是数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific IntegratedCircuit，ASIC)、现场可编程门阵列(Field－Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本说明书实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本说明书实施例所公开的方法的步骤可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器，闪存、只读存储器，可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器，处理器读取存储器中的信息，结合其硬件完成上述页面布局方法的步骤。

本发明还提供了一种计算机可读存储介质。

该计算机可读存储介质存储一个或多个计算机程序，该一个或多个计算机程序包括指令，该指令当被处理器执行时，能够实现上文描述的页面布局方法。

为了便于清楚描述本发明实施例的技术方案，在发明的实施例中，采用了“第一”、“第二”等字样对功能和作用基本相同的相同项或相似项进行区分，本领域技术人员可以理解“第一”、“第二”等字样并不对数量和执行次序进行限定。

以上所述，仅为本发明的具体实施方式，在本发明的上述教导下，本领域技术人员可以在上述实施例的基础上进行其他的改进或变形。本领域技术人员应该明白，上述的具体描述只是更好的解释本发明的目的，本发明的保护范围应以权利要求的保护范围为准。