跨栈应用处理与页面渲染方法、装置、设备及存储介质与流程

1.本技术涉及互联网技术领域，尤其涉及一种跨栈应用处理与页面渲染方法、装置、设备及存储介质。


背景技术：

2.页面布局系统是一种对页面的背景、布局或字号大小等进行设计的系统，页面局部系统通常采用一种技术栈进行开发，例如，页面局部系统的开发可以采用包含构建用户界面的渐进式框架(vue)的技术栈来进行，也可以使用包含构建用户界面的javascript库(react)的技术栈来进行。
3.在需要通过页面布局系统进行页面设计时，只能按照页面局部系统的技术栈对页面进行设计，局限性较强，若采用其它技术栈进行页面设计，则需要较高的成本将其它技术栈接入页面局部系统。


技术实现要素：

4.本技术的多个方面提供一种跨栈应用处理与页面渲染方法、装置、设备及存储介质，用以节省生成应用的成本。
5.本技术实施例提供一种跨栈应用处理方法，应用于应用开发平台，方法包括：导入目标组件的描述文件，描述文件具有第一技术栈和第二技术栈均可识别的中间态语法格式，第一技术栈用于开发目标应用的后端代码，后端代码描述目标应用的后端逻辑，目标应用的前端视图依赖第二技术栈的前端组件库中的目标组件；基于目标组件的描述文件，在开发界面上呈现目标组件对应的第一节点对象，第一节点对象可体现目标组件的属性信息；响应对第一节点对象的编辑操作，基于中间态语法格式生成目标应用的前端代码，前端代码描述目标应用的前端视图所依赖的目标组件的标识、样式以及布局信息。
6.本技术实施例还提供一种跨栈应用的页面渲染方法，应用于电子设备，电子设备上安装有目标应用，目标应用是基于第一技术栈和至少一种第二技术栈开发的，方法包括：运行目标应用，目标应用包括至少一个前端代码和后端代码，后端代码是基于第一技术栈开发的，后端代码描述目标应用的后端逻辑，在至少一个前端代码的数量为大于或等于两个的情况下，至少一个前端代码对应于至少两个不同第二技术栈或相同第二技术栈，至少一个前端代码中的目标前端代码描述目标应用针对目标前端代码的前端视图所依赖的目标组件的标识、样式以及布局信息；在运行到目标前端代码时，加载渲染目标前端代码所需的目标组件，利用目标前端代码对应的目标技术栈的渲染引擎针对目标组件渲染出针对目标前端代码的前端视图。
7.本技术实施例还提供一种跨栈应用处理装置，包括：导入模块、呈现模块以及生成模块；导入模块，用于导入目标组件的描述文件，描述文件具有第一技术栈和第二技术栈均可识别的中间态语法格式，第一技术栈用于开发目标应用的后端代码，后端代码描述目标应用的后端逻辑，目标应用的前端视图依赖第二技术栈的前端组件库中的目标组件；呈现
模块，用于基于目标组件的描述文件，在开发界面上呈现目标组件对应的第一节点对象，第一节点对象可体现目标组件的属性信息；生成模块，用于响应对第一节点对象的编辑操作，基于中间态语法格式生成目标应用的前端代码，前端代码描述目标应用的前端视图所依赖的目标组件的标识、样式以及布局信息。
8.本技术实施例还提供一种跨栈应用的页面渲染装置，跨栈应用的页面渲染装置上安装有目标应用，目标应用是基于第一技术栈和至少一种第二技术栈开发的，跨栈应用的页面渲染装置包括：运行模块和加载模块；运行模块，用于运行目标应用，目标应用包括至少一个前端代码和后端代码，后端代码是基于第一技术栈开发的，后端代码描述目标应用的后端逻辑，在至少一个前端代码的数量为大于或等于两个的情况下，至少一个前端代码对应于至少两个不同第二技术栈或相同第二技术栈，至少一个前端代码中的目标前端代码描述目标应用针对目标前端代码的前端视图所依赖的目标组件的标识、样式以及布局信息；加载模块，用于在运行到目标前端代码时，加载渲染目标前端代码所需的目标组件，利用目标前端代码对应的目标技术栈的渲染引擎针对目标组件渲染出针对目标前端代码的前端视图。
9.本技术实施例还提供一种跨栈应用处理设备，包括：存储器和处理器；存储器，用于存储计算机程序；处理器，与存储器耦合，用于执行计算机程序，以实现本技术实施例提供的跨栈应用处理方法中的步骤。
10.本技术实施例还提供一种跨栈应用的页面渲染设备，跨栈应用的页面渲染设备上安装有目标应用，目标应用是基于第一技术栈和至少一种第二技术栈开发的，跨栈应用的页面渲染设备包括：存储器和处理器；存储器，用于存储计算机程序；处理器，与存储器耦合，用于执行计算机程序，以实现本技术实施例提供的跨栈应用的页面渲染方法中的步骤。
11.本技术实施例还提供一种存储有计算机程序的计算机可读存储介质，当计算机程序被处理器执行时，致使处理器实现本技术实施例提供的跨栈应用处理方法和/或跨栈应用的页面渲染方法中的步骤。
12.在本技术实施例中，通过中间态语法格式，对不同的技术栈的组件进行统一规范的描述，得到组件对应的描述文件，应用开发平台可以根据组件对应的描述文件，呈现该组件对应的节点对象，基于对该节点对象的编辑操作，生成应用的前端代码。整个过程中，在通过应用开发平台生成应用的情况下，应用开发平台使用的第一技术栈生成应用的后端代码，基于不同于第一技术栈的第二技术栈生成应用的前端代码，无需针对第二技术栈重新生成应用开发平台，节省了生成应用的成本。
附图说明
13.此处所说明的附图用来提供对本技术的进一步理解，构成本技术的一部分，本技术的示意性实施例及其说明用于解释本技术，并不构成对本技术的不当限定。在附图中：
14.图1为本技术示例性实施例提供的一种跨栈应用处理方法的流程示意图；
15.图2a为本技术示例性实施例提供的一种目标组件的描述文件的示意图；
16.图2b为本技术示例性实施例提供的一种中间态语法树的描述信息；
17.图2c为本技术示例性实施例提供的一种目标组件的描述文件转化成中间态语法树的描述信息的示意图；
18.图3a为本技术示例性实施例提供的一种跨栈应用处理过程的示意图；
19.图3b为本技术示例性实施例提供的另一种跨栈应用处理过程的示意图；
20.图3c为本技术示例性实施例提供的一种渲染引擎生成前端视图的示意图；
21.图4为本技术示例性实施例提供的一种跨栈应用的页面渲染方法的流程示意图；
22.图5a为本技术示例性实施例提供的一种跨栈应用处理装置的结构示意图；
23.图5b为本技术示例性实施例提供的一种跨栈应用的页面渲染装置的结构示意图；
24.图6为本技术示例性实施例提供的一种跨栈应用处理设备的结构示意图；
25.图7为本技术示例性实施例提供的一种跨栈应用的页面渲染设备的结构示意图。
具体实施方式
26.为使本技术的目的、技术方案和优点更加清楚，下面将结合本技术具体实施例及相应的附图对本技术技术方案进行清楚、完整地描述。显然，所描述的实施例仅是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
27.针对现有技术不同技术栈需要重新生成应用开发平台，以生成前端代码的问题，在本技术实施例中，通过中间态语法格式，对不同的技术栈的组件进行统一规范的描述，得到组件对应的描述文件，应用开发平台可以根据组件对应的描述文件，呈现该组件对应的节点对象，基于对该节点对象的编辑操作，生成应用的前端代码。整个过程中，不同的开发团队在通过应用开发平台生成应用的情况下，若开发团队使用的技术栈与应用开发平台使用的技术栈不相同，该开发团队可以基于使用的技术栈接入应用开发平台，而不用针对现有的技术栈重新生成应用开发平台，节省了生成应用的成本。例如，开发团队在通过应用开发平台生成应用的情况下，应用开发平台使用的第一技术栈生成应用的后端代码，基于不同于第一技术栈的第二技术栈(可以为开发团队使用的技术栈)生成应用的前端代码，无需针对第二技术栈重新生成应用开发平台，节省了生成应用的成本。
28.以下结合附图，详细说明本技术各实施例提供的技术方案。
29.图1为本技术示例性实施例提供的一种跨栈应用处理方法的流程示意图。该方法应用于应用开发平台，如图1所示，该方法包括：
30.101、导入目标组件的描述文件，描述文件具有第一技术栈和第二技术栈均可识别的中间态语法格式，第一技术栈用于开发目标应用的后端代码，后端代码描述目标应用的后端逻辑，目标应用的前端视图依赖第二技术栈的前端组件库中的目标组件；
31.102、基于目标组件的描述文件，在开发界面上呈现目标组件对应的第一节点对象，第一节点对象可体现目标组件的属性信息；
32.103、响应对第一节点对象的编辑操作，基于中间态语法格式生成目标应用的前端代码，前端代码描述目标应用的前端视图所依赖的目标组件的标识、样式以及布局信息。
33.在本实施例中，应用开发平台是以第一技术栈为基础的一种软件，该应用开发平台是一个开发应用的框架，应用开发人员可以基于应用开发平台进行各种类型的应用的开发。该应用开发平台作为一个浏览器插件内嵌在浏览器中，或者应用开发平台可以作为应用软件的软件开发工具包(software development kit，sdk)包。其中，第一技术栈是该应用开发平台使用的技术栈。在应用开发平台开发目标应用的情况下，可基于第一技术栈开
发目标应用的后端代码，后端代码描述目标应用的后端逻辑。
34.在本实施例中，应用开发人员可以基于第二技术栈开发目标应用的前端代码，目标应用的前端视图依赖第二技术栈的前端组件库中的目标组件。
35.其中，该描述文件具有第一技术栈和第二技术栈均可识别的中间态语法格式，描述文件是通过对目标组件的属性信息进行抽象及重新表达得到的具有中间态语法格式(通用数据格式)的无平台特性的描述文件，即描述文件不依赖目标应用的前端视图所应用的具体平台。该描述文件用于描述目标组件的名称、标识、样式、布局、功能、属性等。需要说明的是，目标组件的描述文件具有默认的初始值，后续可基于目标组件对应的第一节点对象对目标组件的描述文件进行修改。例如，描述文件可以实现为领域特定语言(domain specific language，dsl)对象，即组件描述对象。如图2a为一种目标组件的描述文件的示例性展示。其中，目标组件的描述文件包括：组件名称(name)：“image”，中文名称(cname)，组件版本(version)：“0.0.1”，组件描述(desc)，图片描述(imgdesc)，作者/负责人(author)，组件类型(type)：“通用(common)”，属性(props)用于定义属性名和类型，包含宽度(width)：“数字(number)类型”，源地址(src)：“字符串(string)”，其中，组件类型包括：通用(common)、布局(layout)、表单(from)以及自定义(custom)。
36.图2a中的内容包括：
37.[0038][0039]
在本实施例中，在导入目标组件的描述文件之后，可基于目标组件的描述文件在开发界面上呈现目标组件对应的第一节点对象，其中，第一节点对象可体现目标组件的属性信息，目标组件的属性信息包括但不限于：目标组件的名称、标识、版本、类型、以及目标组件在前端视图上的布局或样式等。第一节点对象可以是文字、列表、图片或图标等，对此不做限定。在第一节点对象被触发的情况下，可响应对第一节点对象的编辑操作，基于中间态语法格式生成目标应用的前端代码。其中，前端代码描述目标应用的前端视图所依赖的目标组件的标识、样式以及布局信息。其中，对第一节点对象的编辑操作可以包含但不限于：拖拽、修改、增加、删除、点击或跳转等操作。例如，在对第一节点对象进行拖拽操作的情况下，可获取拖拽操作后第一节点对象的属性信息，基于该中间态语法格式对该属性信息进行描述，以得到目标应用的前端代码。
[0040]
在本技术实施例中，通过中间态语法格式，对不同的技术栈的组件进行统一规范的描述，得到组件对应的描述文件，应用开发平台可以根据组件对应的描述文件，呈现该组件对应的节点对象，基于对该节点对象的编辑操作，生成应用的前端代码。整个过程中，在通过应用开发平台生成应用的情况下，应用开发平台使用的第一技术栈生成应用的后端代码，基于不同于第一技术栈的第二技术栈生成应用的前端代码，无需针对第二技术栈重新生成应用开发平台，节省了生成应用的成本。
[0041]
在本实施例中，并不限定目标组件对应的描述文件的生成方式。在一可选实施例中，在将目标组件的描述文件导入应用开发平台之前，可针对第二技术栈的前端组件库中的目标组件，利用中间态语法格式对目标组件进行描述，以得到目标组件的描述文件。在另一可选实施例中，在将目标组件的描述文件导入应用开发平台之前，可针对第二技术栈的前端组件库中的各组件，利用中间态语法格式对前端组件库中的各组件进行描述，以得到各组件对应的描述文件；根据第二技术栈的前端组件库中各组件的描述文件，生成组件描述信息库。在需要目标组件对应的描述文件的情况下，从组件描述信息库中将目标组件对应的描述文件导入至应用开发平台，以供应用开发平台据此生成目标应用的前端代码，或
者，在需要根据第二技术栈的前端组件库中各组件生成应用的情况下，将组件描述信息库导入应用开发平台，以供应用开发平台据此生成目标应用的前端代码。
[0042]
其中，并不限定利用中间态语法格式对第二技术栈的前端组件库中的各组件进行描述，以得到各组件对应的描述文件的实施方式。可选地，第二技术栈的前端组件库中的组件，可以包含但不限于：容器、文字、图片、表格、图标、对话框、进度条或面板等，描述文件可以包含但不限于：组件的属性、逻辑、动画、行为以及数据等信息。前端代码描述的前端视图上可以包括组件、组件的样式、布局、逻辑、行为、动画或数据等信息。
[0043]
在一可选实施例中，一种基于目标组件的描述文件，在开发界面上呈现目标组件对应的第一节点对象的实施方式，包括：基于中间态语法格式，对目标组件的描述文件进行解析，得到目标组件在第二技术栈下的属性信息；基于目标组件在第二技术栈下的属性信息，生成第一技术栈可识别的第一节点对象，并将第一节点对象呈现在开发界面上，以供应用开发人员基于第一节点对象进行编辑操作。
[0044]
可选地，基于目标组件在第二技术栈下的属性信息，生成第一技术栈可识别的第一节点对象的实施方式，包括：基于目标组件在第二技术栈下的属性信息，将目标组件解析为容器、文字或图片，作为第一技术栈可识别的第一节点对象。例如，目标组件在第二技术栈下的属性信息包含：目标组件的名称、布局以及尺寸信息，若组件的属性信息包括：名称：容器、布局：页面视图的中央、尺寸：300x500，该属性信息指向容器组件，则可以在页面的侧边栏中显示容器对应的图标，将该图标作为容器组件对应的第一节点对象，以供应用开发人员对该图标进行编辑。
[0045]
在本实施例中，并不限定响应对第一节点对象的编辑操作，基于中间态语法格式生成目标应用的前端代码的实施方式。下面分情况进行说明。
[0046]
在一可选实施例中，在生成目标应用的前端代码所需节点对象的数量为1的情况下，在第一节点对象被编辑的情况下，可响应对第一节点对象的编辑操作，获取第一节点对象的属性信息，根据第一节点对象的属性信息，生成中间态语法树作为目标应用的前端代码，中间态语法树上的节点及其属性信息分别表示第一节点对象及其属性信息。
[0047]
在另一可选实施例中，在生成目标应用的前端代码所需节点对象的数量为多个的情况下，生成目标应用的前端代码所需的节点对象包含第一节点对象、与第一节点对象存在层级关系的第二节点对象，为了便于区分和描述，将生成目标应用的前端代码所需的节点对象记为第三节点对象，也即第三节点对象包括第一节点对象和第二节点对象，第二节点对象的数量为一个或多个，第三节点对象的属性信息表示其对应目标组件在第二技术栈下的属性信息，第一节点对象与第二节点对象之间的层级关系表示其对应目标组件在第二技术栈之间的层级关系。在第一节点对象被编辑的情况下，可响应对第一节点对象的编辑操作，获取第一节点对象的属性信息以及第一节点对象与第二节点对象之间的层级关系；根据第一节点对象的属性信息以及第一节点对象与第二节点对象之间的层级关系，生成中间态语法树作为目标应用的前端代码，该中间态语法树上的节点及其属性信息分别表示第三节点对象及其属性信息，第三节点对象的属性信息至少包括第三节点对象的标识和样式，除此之外，第三节点对象的属性信息还包括：位置信息和尺寸信息等。
[0048]
需要说明的是，应用开发系统在生成中间态语法树的过程中，除了需要目标组件的描述文件之前，还需要目标组件对应渲染引擎的描述文件，该渲染引擎可识别中间态语
法树，并基于中间态语法树进行渲染，得到前端视图，关于渲染引擎渲染的过程，可参见后续实施例，在此不再赘述。
[0049]
其中，前端视图也即用户界面(user interface，ui)布局以树的形式进行解析和渲染，因此，本实施例中，采用中间态语法树对前端视图进行描述，得到目标应用的前端代码。中间态语法树中的节点需要符合ui节点的特性，且还需具有可扩展性，例如，中间态语法树的节点使用的模块、节点的样式、父子节点的关系、节点对应组件的属性等符合相应ui节点的特性。优选地，可采用对象简谱(javascript object notation，json)这种轻量级的数据交换格式，对中间态语法树进行描述。如图2b所示，为一种以json格式对中间态语法树进行描述的信息，其中，对中间态语法树中节点的名称、唯一标识、样式及布局描述以及节点关系进行了描述。视图(view)组件的名称为“view”，唯一标识(id)为“1”，样式及布局描述(style)包括：显示(display)为“灵活(flex)”、横轴对齐方式(justify content)为居中(center)，视图(view)组件的子节点为图片，图片的名称为“image”，唯一标识为：“2”，组件的属性(props)包含：网络地址(url)为图片地址(image url)。
[0050]
图2b中的内容包括：
[0051][0052][0053]
在本实施例中，目标组件的描述文件可体现目标组件的属性信息，图2c为一种目标组件的描述文件转为中间态语法树上的节点的示例性展示。在图2c中，目标组件的属性信息可参见对图2a的描述，中间态语法树上的节点主要包括：名称(name)：“image”，类型(type)：“common”，唯一标识(id)：“uuid”，样式(style)，属性(props)：宽度(width)：“100％”，源地址(src)：“url”以及事件(event)。
[0054]
在一可选实施例中，一种响应对第一节点对象的编辑操作，获取第一节点对象的属性信息以及第一节点对象与第二节点对象之间的层级关系的实施方式，包括：在应用开发人员针对第一节点对象的属性信息进行编辑操作的情况下，可响应于对第一节点对象的输入操作，获取第一节点对象的属性信息，并维持第一节点对象与第二节点对象之间的层级关系；或者在应用开发人员针对第一节点对象的层级关系进行编辑操作的情况下，可响
应于对第一节点对象的拖动操作，确定第一节点对象的层级信息，并建立第一节点对象与第二节点对象之间的层级关系；或者在应用开发人员针对第一节点对象的属性信息和层级关系进行编辑操作的情况下，响应于对第一节点对象的修改操作，获取第一节点对象的属性信息和第一节点对象的层级信息，并建立第一节点对象与第二节点对象之间的层级关系。
[0055]
其中，对第一节点对象的修改操作并不限定。例如，响应对第一节点对象的编辑操作，获取第一节点对象的至少一个属性项及其对应的初始属性值，通过浮层、弹框或滚动框等显示至少一个属性项及其对应的初始属性值；响应对任一属性项对应的初始属性值的编辑操作，获取任一属性项对应的目标属性信息，每个属性项为是否关联组件、层级信息、长度、宽度、颜色或展示位置中的一个。
[0056]
在一可选实施例中，应用开发平台接入至少一个第二技术栈，通过不同的第二技术栈，分别生成目标应用对应的前端代码，基于同一个第二技术栈可以生成一个或多个前端代码，不同第二技术栈可以生成不同的前端代码；在目标应用对应的前端代码的数量为大于或等于两个的情况下，目标应用的前端代码对应于至少两个不同第二技术栈或者目标应用的前端代码对应于相同的第二技术栈。在目标应用的前端代码的数量为一的情况下，该前端代码对应于一个第二技术栈。第二技术栈可以实现为：渐进式框架vue或javascript库react。如图3a和图3b所示，以第二技术栈的数量为2，两个第二技术栈分别是：web-vue和web-react为例进行图示，但并不限于此。
[0057]
其中，在生成目标应用对应的至少一个前端代码之后，可以将至少一个前端代码与后端代码进行封装，得到跨技术栈开发的目标应用的安装代码；并根据目标应用的安装代码安装并运行该目标应用。例如，该目标应用的安装代码实现为浏览器的插件，则可以将该目标应用的安装代码导入浏览器中，并在浏览器中安装并运行该目标应用。又例如，该目标应用实现为终端设备的应用程序，可以基于该安装代码在终端设备上安装并运行该目标应用。
[0058]
其中，针对至少一个前端代码中的目标前端代码，在运行到目标前端代码时，加载渲染目标前端代码所需的目标组件，利用目标前端代码对应的目标技术栈的渲染引擎针对目标组件渲染出针对目标前端代码的前端视图。
[0059]
其中，图3c为一种基于vue的渲染引擎以及react的渲染引擎分别对应用开发平台生成的中间态语法树进行渲染得到前端视图。其中，应用开发平台生成的中间态语法树是存在层级关系的容器、图片以及文字，vue的渲染引擎或react的渲染引擎用于递归中间态语法树中的前端节点，生成一个个前端的文档对象模型(document object model，dom)节点，对dom节点进行渲染，得到html5(h5)页面，并显示在终端设备上。
[0060]
可选地，加载渲染目标前端代码所需的目标组件的实施方式，包括：获取目标前端代码所需的目标组件的描述文件；基于描述文件动态加载目标前端代码所需的目标组件；或者，直接从目标技术栈的前端组件库中加载目标前端代码所需的目标组件。
[0061]
可选地，利用目标前端代码对应的目标技术栈的渲染引擎针对目标组件渲染出针对目标前端代码的前端视图的实施方式，包括：在目标前端代码实现为中间态语法树的情况下，识别中间态语法树中包含的多个第三节点对象的属性信息以及多个第三节点对象之间的层级关系；将多个第三节点对象的属性信息转换为目标技术栈所能识别的多个目标组
件的描述信息，其中，目标组件的描述信息可以体现目标组件在目标技术栈下的属性信息；将多个第三节点对象之间的层级关系转换为多个目标组件对应的页面布局信息，该页面布局信息可体现页面上有哪些组件，以及组件的样式、布局、逻辑、行为等信息；根据页面布局信息和多个目标组件的描述信息，利用多个目标组件进行页面渲染，以得到目标前端代码的前端视图。
[0062]
在本实施例中，在生成目标应用对应的前端代码的情况下，不是将目标组件导入应用开发平台，而是将目标组件的描述文件导入应用开发平台，这样可以实现应用开发平台与第二技术栈的前端组件库的解耦，解耦设计无需应用开发人员针对每个组件库都生成一个应用开发平台，即不同的前端组件库均可接入一个应用开发平台，以节省成本，并且可防止第二技术栈对现有应用开发平台的侵入性，保障目标应用的安全。同时，基于解耦设计，可在生成目标应用的过程中，动态切换第二技术栈，以得到不同第二技术栈对应的前端代码。进一步，由于第二技术栈的前端组件库与应用开发系统已经解耦，在应用开发平台初始化或使用过程中，前端组件库可以不存在，在需要时可加载相应的组件，例如，对中间态语法树进行渲染过程中，加载所需组件以实现对中间态语法树的渲染操作，实现编辑与预览的结合。
[0063]
图4为本技术示例性实施例提供的一种跨栈应用的页面渲染方法的流程示意图，应用于电子设备，电子设备上安装有目标应用，目标应用是基于第一技术栈和至少一种第二技术栈开发的，如图4所示，该方法包括：
[0064]
401、运行目标应用，目标应用包括至少一个前端代码和后端代码，后端代码是基于第一技术栈开发的，后端代码描述目标应用的后端逻辑，在至少一个前端代码的数量为大于或等于两个的情况下，至少一个前端代码对应于至少两个不同第二技术栈或相同第二技术栈，至少一个前端代码中的目标前端代码描述目标应用针对目标前端代码的前端视图所依赖的目标组件的标识、样式以及布局信息；
[0065]
402、在运行到目标前端代码时，加载渲染目标前端代码所需的目标组件，利用目标前端代码对应的目标技术栈的渲染引擎针对目标组件渲染出针对目标前端代码的前端视图。
[0066]
在一可选实施例中，加载渲染目标前端代码所需的目标组件，包括：获取目标前端代码所需的目标组件的描述文件；基于描述文件动态加载目标前端代码所需的目标组件；或者，直接从目标技术栈的前端组件库中加载目标前端代码所需的目标组件。
[0067]
在一可选实施例中，利用目标前端代码对应的目标技术栈的渲染引擎针对目标组件渲染出针对目标前端代码的前端视图，包括：在目标前端代码实现为中间态语法树的情况下，识别中间态语法树中包含的多个第三节点对象的属性信息以及多个第三节点对象之间的层级关系；将多个第三节点对象的属性信息转换为目标技术栈所能识别的多个目标组件的描述信息；将多个第三节点对象之间的层级关系转换为多个目标组件对应的页面布局信息；根据页面布局信息和多个目标组件的描述信息，利用多个目标组件进行页面渲染，以得到目标前端代码的前端视图。
[0068]
需要说明的是，上述实施例所提供方法的各步骤的执行主体均可以是同一设备，或者，该方法也由不同设备作为执行主体。比如，步骤101至步骤103的执行主体可以为设备a；又比如，步骤101和102的执行主体可以为设备a，步骤103的执行主体可以为设备b；等等。
[0069]
另外，在上述实施例及附图中的描述的一些流程中，包含了按照特定顺序出现的多个操作，但是应该清楚了解，这些操作可以不按照其在本文中出现的顺序来执行或并行执行，操作的序号如101、102等，仅仅是用于区分开各个不同的操作，序号本身不代表任何的执行顺序。另外，这些流程可以包括更多或更少的操作，并且这些操作可以按顺序执行或并行执行。需要说明的是，本文中的“第一”、“第二”等描述，是用于区分不同的消息、设备、模块等，不代表先后顺序，也不限定“第一”和“第二”是不同的类型。
[0070]
图5a为本技术示例性实施例提供的一种跨栈应用处理装置的结构示意图，如图5a所示，该跨栈应用处理装置，包括：导入模块51a、呈现模块52a以及生成模块53a。
[0071]
导入模块51a，用于导入目标组件的描述文件，描述文件具有第一技术栈和第二技术栈均可识别的中间态语法格式，第一技术栈用于开发目标应用的后端代码，后端代码描述目标应用的后端逻辑，目标应用的前端视图依赖第二技术栈的前端组件库中的目标组件；
[0072]
呈现模块52a，用于基于目标组件的描述文件，在开发界面上呈现目标组件对应的第一节点对象，第一节点对象可体现目标组件的属性信息；
[0073]
生成模块53a，用于响应对第一节点对象的编辑操作，基于中间态语法格式生成目标应用的前端代码，前端代码描述目标应用的前端视图所依赖的目标组件的标识、样式以及布局信息。
[0074]
在一可选实施例中，跨栈应用处理装置还包括：描述模块；描述模块，用于针对第二技术栈的前端组件库中的目标组件，利用中间态语法格式对目标组件进行描述，以得到目标组件的描述文件。
[0075]
在一可选实施例中，呈现模块52a具体用于：基于中间态语法格式，对目标组件的描述文件进行解析，得到目标组件在第二技术栈下的属性信息；基于目标组件在第二技术栈下的属性信息，生成第一技术栈可识别的第一节点对象，并将第一节点对象呈现在开发界面上，以供应用开发人员基于第一节点对象进行编辑操作。
[0076]
在一可选实施例中，生成模块53a具体用于：响应对第一节点对象的编辑操作，获取第一节点对象的属性信息以及第一节点对象与第二节点对象之间的层级关系，第二节点对象是生成前端代码所需的第三节点对象中除去第一节点对象的其它节点对象；根据第一节点对象的属性信息以及第一节点对象与第二节点对象之间的层级关系，生成中间态语法树作为前端代码，中间态语法树上的节点及其属性信息分别表示第三节点对象及其属性信息，第三节点对象的属性信息至少包括第三节点对象的标识和样式；其中，第三节点对象的属性信息表示其对应目标组件在第二技术栈下的属性信息，第一节点对象与第二节点对象之间的层级关系表示其对应目标组件在第二技术栈之间的层级关系。
[0077]
在一可选实施例中，生成模块53a具体用于：响应于对第一节点对象的输入操作，获取第一节点对象的属性信息，并维持第一节点对象与第二节点对象之间的层级关系；或者响应于对第一节点对象的拖动操作，确定第一节点对象的层级信息，并建立第一节点对象与第二节点对象之间的层级关系；或者响应于对第一节点对象的修改操作，获取第一节点对象的属性信息和第一节点对象的层级信息，并建立第一节点对象与第二节点对象之间的层级关系。
[0078]
在一可选实施例中，呈现模块52a具体用于：基于目标组件在第二技术栈下的属性
信息，将目标组件解析为容器、文字或图片，作为第一技术栈可识别的第一节点对象。
[0079]
在一可选实施例中，跨栈应用处理装置还包括：封装模块、处理模块和加载模块；封装模块，用于将至少一个前端代码与后端代码进行封装，得到跨技术栈开发的目标应用的安装代码；在至少一个前端代码的数量为大于或等于两个的情况下，至少一个前端代码对应于至少两个不同第二技术栈或相同第二技术栈；处理模块，用于根据目标应用的安装代码安装并运行目标应用；加载模块，用于针对至少一个前端代码中的目标前端代码，在运行到目标前端代码时，加载渲染目标前端代码所需的目标组件；处理模块，还用于利用目标前端代码对应的目标技术栈的渲染引擎针对目标组件渲染出针对目标前端代码的前端视图。
[0080]
在一可选实施例中，加载模块具体用于：获取目标前端代码所需的目标组件的描述文件；基于描述文件动态加载目标前端代码所需的目标组件；或者，直接从目标技术栈的前端组件库中加载目标前端代码所需的目标组件。
[0081]
在一可选实施例中，处理模块具体用于：在目标前端代码实现为中间态语法树的情况下，识别中间态语法树中包含的多个第三节点对象的属性信息以及多个第三节点对象之间的层级关系；将多个第三节点对象的属性信息转换为目标技术栈所能识别的多个目标组件的描述信息；将多个第三节点对象之间的层级关系转换为多个目标组件对应的页面布局信息；根据页面布局信息和多个目标组件的描述信息，利用多个目标组件进行页面渲染，以得到目标前端代码的前端视图。
[0082]
在一可选实施例中，第二技术栈包括渐进式框架vue或javascript库react。
[0083]
图5b为本技术示例性实施例提供的一种跨栈应用的页面渲染装置的结构示意图，该跨栈应用的页面渲染装置上安装有目标应用，目标应用是基于第一技术栈和至少一种第二技术栈开发的，跨栈应用的页面渲染装置包括：运行模块51b、加载模块52b和处理模块53b。
[0084]
运行模块51b，用于运行目标应用，目标应用包括至少一个前端代码和后端代码，后端代码是基于第一技术栈开发的，后端代码描述目标应用的后端逻辑，在至少一个前端代码的数量为大于或等于两个的情况下，至少一个前端代码对应于至少两个不同第二技术栈或相同第二技术栈，至少一个前端代码中的目标前端代码描述目标应用针对目标前端代码的前端视图所依赖的目标组件的标识、样式以及布局信息；
[0085]
加载模块52b，用于在运行到目标前端代码时，加载渲染目标前端代码所需的目标组件；
[0086]
处理模块53b，用于利用目标前端代码对应的目标技术栈的渲染引擎针对目标组件渲染出针对目标前端代码的前端视图。
[0087]
在一可选实施例中，加载模块52b具体用于：获取目标前端代码所需的目标组件的描述文件；基于描述文件动态加载目标前端代码所需的目标组件；或者，直接从目标技术栈的前端组件库中加载目标前端代码所需的目标组件。
[0088]
在一可选实施例中，处理模块53b具体用于：在目标前端代码实现为中间态语法树的情况下，识别中间态语法树中包含的多个第三节点对象的属性信息以及多个第三节点对象之间的层级关系；将多个第三节点对象的属性信息转换为目标技术栈所能识别的多个目标组件的描述信息；将多个第三节点对象之间的层级关系转换为多个目标组件对应的页面
布局信息；根据页面布局信息和多个目标组件的描述信息，利用多个目标组件进行页面渲染，以得到目标前端代码的前端视图。
[0089]
图6为本技术示例性实施例提供的一种跨栈应用处理设备的结构示意图。如图6所示，该设备包括：存储器64和处理器65。
[0090]
存储器64，用于存储计算机程序，并可被配置为存储其它各种数据以支持在跨栈应用处理设备上的操作。这些数据的示例包括用于在跨栈应用处理设备上操作的任何应用程序或方法的指令。
[0091]
存储器64可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(sram)，电可擦除可编程只读存储器(eeprom)，可擦除可编程只读存储器(eprom)，可编程只读存储器(prom)，只读存储器(rom)，磁存储器，快闪存储器，磁盘或光盘。
[0092]
处理器65，与存储器64耦合，用于执行存储器64中的计算机程序，以用于：导入目标组件的描述文件，描述文件具有第一技术栈和第二技术栈均可识别的中间态语法格式，第一技术栈用于开发目标应用的后端代码，后端代码描述目标应用的后端逻辑，目标应用的前端视图依赖第二技术栈的前端组件库中的目标组件；基于目标组件的描述文件，在开发界面上呈现目标组件对应的第一节点对象，第一节点对象可体现目标组件的属性信息；响应对第一节点对象的编辑操作，基于中间态语法格式生成目标应用的前端代码，前端代码描述目标应用的前端视图所依赖的目标组件的标识、样式以及布局信息。
[0093]
在一可选实施例中，在导入目标组件的描述文件之前，处理器65还用于：针对第二技术栈的前端组件库中的目标组件，利用中间态语法格式对目标组件进行描述，以得到目标组件的描述文件。
[0094]
在一可选实施例中，在基于目标组件的描述文件，在开发界面上呈现目标组件对应的第一节点对象时，处理器65具体用于：基于中间态语法格式，对目标组件的描述文件进行解析，得到目标组件在第二技术栈下的属性信息；基于目标组件在第二技术栈下的属性信息，生成第一技术栈可识别的第一节点对象，并将第一节点对象呈现在开发界面上，以供应用开发人员基于第一节点对象进行编辑操作。
[0095]
在一可选实施例中，在响应对第一节点对象的编辑操作，基于中间态语法格式生成目标应用的前端代码时，处理器65具体用于：响应对第一节点对象的编辑操作，获取第一节点对象的属性信息以及第一节点对象与第二节点对象之间的层级关系，第二节点对象是生成前端代码所需的第三节点对象中除去第一节点对象的其它节点对象；根据第一节点对象的属性信息以及第一节点对象与第二节点对象之间的层级关系，生成中间态语法树作为前端代码，中间态语法树上的节点及其属性信息分别表示第三节点对象及其属性信息，第三节点对象的属性信息至少包括第三节点对象的标识和样式；其中，第三节点对象的属性信息表示其对应目标组件在第二技术栈下的属性信息，第一节点对象与第二节点对象之间的层级关系表示其对应目标组件在第二技术栈之间的层级关系。
[0096]
在一可选实施例中，在响应对第一节点对象的编辑操作，获取第一节点对象的属性信息以及第一节点对象与第二节点对象之间的层级关系时，处理器65具体用于：响应于对第一节点对象的输入操作，获取第一节点对象的属性信息，并维持第一节点对象与第二节点对象之间的层级关系；或者响应于对第一节点对象的拖动操作，确定第一节点对象的
层级信息，并建立第一节点对象与第二节点对象之间的层级关系；或者响应于对第一节点对象的修改操作，获取第一节点对象的属性信息和第一节点对象的层级信息，并建立第一节点对象与第二节点对象之间的层级关系。
[0097]
在一可选实施例中，在基于目标组件在第二技术栈下的属性信息，生成第一技术栈可识别的第一节点对象时，处理器65具体用于：基于目标组件在第二技术栈下的属性信息，将目标组件解析为容器、文字或图片，作为第一技术栈可识别的第一节点对象。
[0098]
在一可选实施例中，处理器65还用于：将至少一个前端代码与后端代码进行封装，得到跨技术栈开发的目标应用的安装代码；在至少一个前端代码的数量为大于或等于两个的情况下，至少一个前端代码对应于至少两个不同第二技术栈或相同第二技术栈；根据目标应用的安装代码安装并运行目标应用；以及针对至少一个前端代码中的目标前端代码，在运行到目标前端代码时，加载渲染目标前端代码所需的目标组件，利用目标前端代码对应的目标技术栈的渲染引擎针对目标组件渲染出针对目标前端代码的前端视图。
[0099]
在一可选实施例中，处理器65在加载渲染目标前端代码所需的目标组件时，具体用于：获取目标前端代码所需的目标组件的描述文件；基于描述文件动态加载目标前端代码所需的目标组件；或者，直接从目标技术栈的前端组件库中加载目标前端代码所需的目标组件。
[0100]
在一可选实施例中，处理器65在利用目标前端代码对应的目标技术栈的渲染引擎针对目标组件渲染出针对目标前端代码的前端视图时，具体用于：在目标前端代码实现为中间态语法树的情况下，识别中间态语法树中包含的多个第三节点对象的属性信息以及多个第三节点对象之间的层级关系；将多个第三节点对象的属性信息转换为目标技术栈所能识别的多个目标组件的描述信息；将多个第三节点对象之间的层级关系转换为多个目标组件对应的页面布局信息；根据页面布局信息和多个目标组件的描述信息，利用多个目标组件进行页面渲染，以得到目标前端代码的前端视图。
[0101]
在一可选实施例中，第二技术栈包括渐进式框架vue或javascript库react。
[0102]
进一步，如图6所示，该跨栈应用处理设备还包括：通信组件66、显示器67、电源组件68、音频组件69等其它组件。图6中仅示意性给出部分组件，并不意味着跨栈应用处理设备只包括图6所示组件。需要说明的是，图6中虚线框内的组件为可选组件，而非必选组件，具体可视跨栈应用处理设备的产品形态而定。
[0103]
图7为本技术示例性实施例提供的一种跨栈应用的页面渲染设备的结构示意图，跨栈应用的页面渲染设备上安装有目标应用，目标应用是基于第一技术栈和至少一种第二技术栈开发的，如图7所示，该设备包括：存储器74和处理器75。
[0104]
存储器74，用于存储计算机程序，并可被配置为存储其它各种数据以支持在跨栈应用处理设备上的操作。这些数据的示例包括用于在跨栈应用处理设备上操作的任何应用程序或方法的指令。
[0105]
存储器74可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(sram)，电可擦除可编程只读存储器(eeprom)，可擦除可编程只读存储器(eprom)，可编程只读存储器(prom)，只读存储器(rom)，磁存储器，快闪存储器，磁盘或光盘。
[0106]
处理器75，与存储器74耦合，用于执行存储器74中的计算机程序，以用于：运行目
标应用，目标应用包括至少一个前端代码和后端代码，后端代码是基于第一技术栈开发的，后端代码描述目标应用的后端逻辑，在至少一个前端代码的数量为大于或等于两个的情况下，至少一个前端代码对应于至少两个不同第二技术栈或相同第二技术栈，至少一个前端代码中的目标前端代码描述目标应用针对目标前端代码的前端视图所依赖的目标组件的标识、样式以及布局信息；在运行到目标前端代码时，加载渲染目标前端代码所需的目标组件，利用目标前端代码对应的目标技术栈的渲染引擎针对目标组件渲染出针对目标前端代码的前端视图。
[0107]
在一可选实施例中，处理器75在加载渲染目标前端代码所需的目标组件时，具体用于：获取目标前端代码所需的目标组件的描述文件；基于描述文件动态加载目标前端代码所需的目标组件；或者，直接从目标技术栈的前端组件库中加载目标前端代码所需的目标组件。
[0108]
在一可选实施例中，处理器75在利用目标前端代码对应的目标技术栈的渲染引擎针对目标组件渲染出针对目标前端代码的前端视图时，具体用于：在目标前端代码实现为中间态语法树的情况下，识别中间态语法树中包含的多个第三节点对象的属性信息以及多个第三节点对象之间的层级关系；将多个第三节点对象的属性信息转换为目标技术栈所能识别的多个目标组件的描述信息；将多个第三节点对象之间的层级关系转换为多个目标组件对应的页面布局信息；根据页面布局信息和多个目标组件的描述信息，利用多个目标组件进行页面渲染，以得到目标前端代码的前端视图。
[0109]
进一步，如图7所示，该跨栈应用的页面渲染设备还包括：通信组件76、显示器77、电源组件78、音频组件79等其它组件。图7中仅示意性给出部分组件，并不意味着跨栈应用的页面渲染设备只包括图7所示组件。需要说明的是，图7中虚线框内的组件为可选组件，而非必选组件，具体可视跨栈应用的页面渲染设备的产品形态而定。
[0110]
相应地，本技术实施例还提供一种存储有计算机程序的计算机可读存储介质，当计算机程序被处理器执行时，致使处理器能够实现本技术实施例提供的图1和/或图4所示方法中的各步骤。
[0111]
上述图6和图7中的通信组件被配置为便于通信组件所在设备和其他设备之间有线或无线方式的通信。通信组件所在设备可以接入基于通信标准的无线网络，如wifi，2g、3g、4g/lte、5g等移动通信网络，或它们的组合。在一个示例性实施例中，通信组件经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，通信组件还包括近场通信(nfc)模块，以促进短程通信。例如，在nfc模块可基于射频识别(rfid)技术，红外数据协会(irda)技术，超宽带(uwb)技术，蓝牙(bt)技术和其他技术来实现。
[0112]
上述图6和图7中的显示器包括屏幕，其屏幕可以包括液晶显示器(lcd)和触摸面板(tp)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。
[0113]
上述图6和图7中的电源组件，为电源组件所在设备的各种组件提供电力。电源组件可以包括电源管理系统，一个或多个电源，及其他与为电源组件所在设备生成、管理和分
配电力相关联的组件。
[0114]
上述图6和图7中的音频组件，可被配置为输出和/或输入音频信号。例如，音频组件包括一个麦克风(mic)，当音频组件所在设备处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器或经由通信组件发送。在一些实施例中，音频组件还包括一个扬声器，用于输出音频信号。
[0115]
本领域内的技术人员应明白，本技术的实施例可提供为方法、系统、或计算机程序产品。因此，本技术可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本技术可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。
[0116]
本技术是参照根据本技术实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
[0117]
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
[0118]
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
[0119]
在一个典型的配置中，计算设备包括一个或多个处理器(cpu)、输入/输出接口、网络接口和内存。
[0120]
内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(ram)和/或非易失性内存等形式，如只读存储器(rom)或闪存(flash ram)。内存是计算机可读介质的示例。
[0121]
计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(pram)、静态随机存取存储器(sram)、动态随机存取存储器(dram)、其他类型的随机存取存储器(ram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、快闪记忆体或其他内存技术、只读光盘只读存储器(cd-rom)、数字多功能光盘(dvd)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
[0122]
还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的
包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。
[0123]
以上所述仅为本技术的实施例而已，并不用于限制本技术。对于本领域技术人员来说，本技术可以有各种更改和变化。凡在本技术的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本技术的权利要求范围之内。