CN107368294B

CN107368294B - 应用原型生成方法、模板训练方法、装置及系统

Info

Publication number: CN107368294B
Application number: CN201710377723.7A
Authority: CN
Inventors: 陈怡同
Original assignee: Alibaba Group Holding Ltd
Current assignee: Advanced New Technologies Co Ltd; Advantageous New Technologies Co Ltd
Priority date: 2017-05-25
Filing date: 2017-05-25
Publication date: 2020-06-05
Anticipated expiration: 2037-05-25
Also published as: CN107368294A

Abstract

本申请提供了一种应用原型生成方法、模板训练方法、装置及系统，该应用原型生成方法包括：确定产品的数据模型集合中每个数据模型对应的至少一个页面布局模板，其中，数据模型与对应的页面布局模板之间的第一匹配指标达到第一预定匹配要求；确定产品的数据模型链路集合对应的至少一个流程模板，其中，数据模型链路集合与对应的流程模板之间的第二匹配指标达到第二预定匹配要求；根据数据模型集合中的数据模型对应的至少一个页面布局模板，以及数据模型链路集合对应的至少一个流程模板，确定产品的原型所需的流程模板和页面布局模板，并生成产品的原型。本申请实施例的方案能够基于快速生成产品原型，提高产品开发效率。

Description

应用原型生成方法、模板训练方法、装置及系统

技术领域

本申请涉及计算机软件技术领域，尤其涉及一种应用原型生成方法、模板训练方法、装置及系统。

背景技术

在软件开发过程中，对于某些业务，由于具有相似的业务活动、使用类似的数据、具有通用的处理流程、实现通用的业务目标，具备很高的复用价值。为了提高软件开发的复用效率，通常将实现该特定业务功能的软件模块设计为业务组件。

随着产品和运营活动的需求不断增加，业务组件的开发积累也越来越多。一个产品由多个流程组成，每个流程可以对应某个页面，而每个页面对应某个数据模型，而数据模型的内容可以通过特定的业务组件进行展示，业务模型的内容包含了各种数据和文案。

为了实现一系列的产品，目前传统的做法是在重新开发时人工进行组件的拼装，绑定数据展示，费时费力且容易出错，并且很多都是重复的简单劳动。

如何根据新产品的业务需求，基于现有的组件进行数据的重组和展示以生成新的产品开发原型，提高产品开发效率，是本申请所要解决的技术问题。

发明内容

本申请实施例的目的是提供一种应用原型生成方法、模板训练方法、装置及系统，以提高产品开发效率。

第一方面，提出了一种应用原型的生成方法，包括：

确定产品的数据模型集合中的数据模型对应的至少一个页面布局模板，其中，数据模型与对应的页面布局模板之间的第一匹配指标达到第一预定匹配要求，该第一匹配指标用于评估数据模型所对应的业务组件与页面布局模板所对应的业务组件的匹配关系；

确定产品的数据模型链路集合对应的至少一个流程模板，其中，数据模型链路集合与对应的流程模板之间的第二匹配指标达到第二预定匹配要求，该第二匹配指标用于评估数据模型链路集合中的数据模型链路与流程模板中数据模型链路的匹配关系；

根据数据模型集合中的数据模型对应的至少一个页面布局模板，以及数据模型链路集合对应的至少一个流程模板，确定产品的原型所需的流程模板和页面布局模板，并生成产品的原型。

第二方面，提出了一种页面布局模板训练方法，包括：

获取页面的布局结构；

获取页面的布局结构经编码后的语法树；

获取页面的语法树中的节点相对于业务组件的语法树的特征向量；

根据页面的特征向量与对应的业务组件的训练数据，训练得到页面布局模板与业务组件的映射关系；其中，该页面布局模板为与业务组件建立映射关系的页面。

第三方面，提出了一种流程模板训练方法，包括：

获取页面的布局结构；

根据页面的布局结构，确定页面中可点击事件的rpc方法对应的数据模型链路，该数据模型链路包括该rpc方法所在的当前页面，以及该当前页面的跳转页面；

获取多个页面的数据模型链路构成的数据模型链路集合，并根据数据模型链路集合中的数据模型链路之间的迭代关系，确定至少一个流程模板，该流程模板包括多个页面布局模板的标识组成的序列，以及该多个页面布局模板之间的页面跳转关系。

第四方面，提出了一种应用原型生成装置，包括：

确定单元，确定产品的数据模型集合中的数据模型对应的至少一个页面布局模板，其中，数据模型与对应的页面布局模板之间的第一匹配指标达到第一预定匹配要求，该第一匹配指标用于评估数据模型所对应的业务组件与页面布局模板所对应的业务组件的匹配关系；

该确定单元，确定产品的数据模型链路集合对应的至少一个流程模板，其中，数据模型链路集合与对应的流程模板之间的第二匹配指标达到第二预定匹配要求，该第二匹配指标用于评估数据模型链路集合中的数据模型链路与流程模板中数据模型链路的匹配关系；

该确定单元，还根据数据模型集合中的数据模型对应的至少一个页面布局模板，以及数据模型链路集合对应的至少一个流程模板，确定产品的原型所需的流程模板和页面布局模板；

生成单元，根据产品的原型所需的流程模板和页面布局模板，生成产品的原型。

第五方面，提出了一种电子设备，包括：

处理器；以及

被安排成存储计算机可执行指令的存储器，该可执行指令在被执行时使该处理器执行以下操作：

第六方面，提出了一种计算机可读存储介质，该计算机可读存储介质存储一个或多个程序，该一个或多个程序当被电子设备执行时，能够使该电子设备执行以下方法：

第七方面，提出了一种页面布局模板训练装置，包括：

获取单元，获取页面的布局结构；

该获取单元，还获取页面的布局结构经编码后的语法树；

该获取单元，还获取页面的语法树中的节点相对于业务组件的语法树的特征向量；

训练单元，根据页面的特征向量与对应的业务组件的训练数据，训练得到页面布局模板与业务组件的映射关系；其中，该页面布局模板为与业务组件建立映射关系的页面。

第八方面，提出了一种流程模板训练装置，包括：

获取单元，获取页面的布局结构；

确定单元，根据页面的布局结构，确定页面中可点击事件的rpc方法对应的数据模型链路，该数据模型链路包括该rpc方法所在的当前页面，以及该当前页面的跳转页面；

该获取单元，还获取多个页面的数据模型链路构成的数据模型链路集合；

该确定单元，还根据数据模型链路集合中的数据模型链路之间的迭代关系，确定至少一个流程模板，该流程模板包括多个页面布局模板的标识组成的序列，以及该多个页面布局模板之间的页面跳转关系。

本申请实施例中，通过根据数据模型集合和数据模型链路集合，结合已经训练好的页面布局模板与业务组件的映射关系，以及数据模型链路与流程模板的关系，得到同时符合预定要求的页面布局模板集合和流程模板，再基于页面布局模板集合和流程模板得到产品的原型，从而能够实现产品原型的快速开发，缩短了产品开发周期，提高了产品开发效率。

附图说明

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

图1是本申请一个实施例的页面布局模板训练方法流程图。

图2是本申请的一个实施例树的索引编码示意图。

图3是本申请一个实施例的流程模板训练方法流程图。

图4是本申请一个实施例的应用原型生成方法流程图。

图5是本申请的一个实施例电子设备的结构示意图。

图6是本申请的一个实施例页面具备模板训练装置的结构示意图。

图7是本申请的一个实施例电子设备的结构示意图。

图8是本申请的一个实施例流程模板训练装置的结构示意图。

图9是本申请的一个实施例电子设备的结构示意图。

图10是本申请的一个实施例应用原型生成装置的结构示意图。

具体实施方式

本申请实施例提供一种应用原型生成方法、模板训练方法、装置及系统。

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

为了方便理解本申请实施例，首先在此介绍本申请实施例描述中会引入的几个要素。

文档对象模型(Document Object Model，DOM)，W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面(或文档)的对象通常被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。根据DOM，HTML文档中的每个成分可以作为一个节点。整个文档是一个文档节点；每个HTML标签是一个元素节点；包含在HTML元素中的文本是文本节点；每一个HTML属性是一个属性节点，等等。

语法(schema)树：程序设计过程中，常常用树形结构来表征某些数据的关联关系，如企业上下级部门、栏目结构、商品分类等等。这些树状结构需要借助于数据库完成持久化。语法树作为一种关系树，能够存储于关系数据库中且能够描述树形构造。

Viewport：移动设备上的viewport包括设备的屏幕上能用来显示网页的区域。但viewport又不局限于浏览器可视区域的大小，可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。Viewport可包括layout viewport、visual viewport和idealviewport。其中，layout viewport的区域可以使得那些为桌面设计的网站也能在移动浏览器上正常显示；visual viewport的区域可包括浏览器可视区域的大小；ideal viewport能够较为完美适配移动设备的viewport，不需要用户缩放和横向滚动条就能正常的查看网站的所有内容，并且显示的文字的大小合适。

TensorFlow：是谷歌基于DistBelief进行研发的第二代人工智能学习系统，其命名来源于本身的运行原理。Tensor(张量)指N维数组，Flow(流)指基于数据流图的计算，TensorFlow表示张量从流图的一端流动到另一端计算过程，可将复杂的数据结构传输至人工智能神经网中进行分析和处理。现有技术中，TensorFlow支持能够支持卷积神经网络(Convolutional Neural Network，CNN)、循环神经网络(Recurrent Neural Networks，RNN)和长短期记忆(Long Short Term Memory，LSTM)算法等在Image、Speech和神经语言程序学(Neuro-Linguistic Programming，NLP)中最流行的深度神经网络模型。当然，TensorFlow还可以支持其它的深度神经网络模型。

图1是本申请一个实施例的页面布局模板训练方法流程图。图1的方法可由页面布局模板训练装置执行。图1的方法可包括：

S101，获取页面的布局结构。

应理解，在获取页面的布局结构时，页面布局模板训练装置可通过多种工具抓取页面的布局结构。例如，页面布局模板训练装置可通过Selenium WebDriver等工具抓取线上页面的布局结构信息。具体地，例如，Selenium WebDriver可根据浏览器的类型创建浏览器对应的对象，并通过该对象的get方法或navigate方法等，打开页面的链接地址，进而得到页面的链接地址所对应的页面对象，以便根据该页面对象抓取页面的布局结构。应理解，通过页面对象，可抓取页面的所有DOM节点的信息。例如，通过页面对象的getTitle方法，可以得到抓取页面的标题(title)信息，等等。

当然，应理解，在抓取页面的布局结构之后，还可根据该页面中的DOM节点信息，过滤掉不符合条件的页面。

例如，可以根据页面是否经过高清方案处理来进行页面过滤。如果准备训练经过高清方案处理的页面布局模板，则过滤掉未经过高清方案处理的页面；或者，如果准备训练未经过高清方案处理的页面布局模板，则过滤掉经过高清方案处理的页面。应理解，此处提到的页面布局模板，可以是某个应用中的页面，或者是对该页面进行一定加工处理后得到的页面。

高清方案处理，也就是通常所说的高清屏(Retina)处理。

具体地，例如，可以通过设备像素比(Device Pixel Ratio，DPR)确定页面是否进行了高清方案处理。设备像素比定义了物理像素和设备独立像素的对应关系，其值可以通过如下公式得到：

设备像素比＝x方向上的物理像素个数/x方向上的设备独立像素个数；

或者，设备像素比＝y方向上的物理像素个数/y方向上的设备独立像素个数。

设备的物理像素：一般为设备能控制显示的最小单位，或者说是屏幕显示颜色的最小的物理单元。

设备独立像素：也叫密度无关像素，一般指计算机坐标系统中的一个点。这个点可以代表一个可以由程序使用并控制的虚拟像素，然后由相关系统转换为物理像素。

应理解，在javascript中，可以通过window.devicePixelRatio获取到当前设备的dpr；在css中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和-webkit-max-device-pixel-ratio等进行媒体查询，以对不同dpr的设备进行样式适配，CSS下的这种方式通常适用于webkit内核的浏览器和webview。

通过设备像素比，可以知道当前页面是否经过高清方案处理。一般来讲，当设备像素比在1至1.3之间时，页面显示屏为普通显示屏，也就是说该页面未经过高清方案处理；当设备像素比大于或等于1.5时，例如1.5、2.0、3.0等，页面显示屏为高清显示屏，也就是说该页面经过高清方案处理。

在本申请实施例中，通过判断页面是否经过高清方案处理，可以过滤展示效果较差的页面，以挑选展示效果较佳的页面作为训练页面布局模板的页面，或者过滤系统资源消耗多的页面，以挑选系统资源消耗小的页面作为训练页面布局模板的页面。

又例如，可以根据页面是否支持缩放功能来进行页面过滤。如果准备训练支持缩放功能的页面布局模板，则过滤掉不支持缩放功能的页面；或者，如果准备训练不支持缩放功能的页面布局模板，则过滤掉支持缩放功能的页面。

在常用缩放方式中，可通过meta标签的viewport进行缩放改变，或者通过rem方式进行缩放等等。

在移动设备上，viewport表示设备的屏幕上能用来显示网页的区域，但viewport又不局限于浏览器可视区域的大小，可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。当viewport小于页面大小的时候就会出现横向滚动条，因此通过调整viewport能够实现整体缩放页面的目的。在移动页面上我们都能看到这个标签<meta name＝"viewport"content＝"width＝device-width,initial-scale＝1.0,maximum-scale＝1.0,user-scalable＝0">，表示viewport宽度为设备宽度，初始缩放百分比为1，最大缩放百分比为1，用户不能进行页面的缩放。如果把initial-scale＝1.0删除，则表示看到全部页面的视角打开。如果再把user-scalable＝0删掉，则用户就能够自行缩放。

在rem方式中，rem一般是指以根元素为标准设置元素的尺寸。在rem方式中，属性值需要重新计算。例如为html标签设置font-size:12px，其下面的一个子元素span标签设置为font-size:1.25rem，则这个span的font-size为12*1.25＝15px。如果在大屏幕上为html元素的font-size加上响应式，对html下的font-size的值进行调整，此时，以rem为单位的元素会按比例进行缩放，不会出现屏幕大小不同而导致的比例失衡的问题。

当然，应理解，在具体的应用中，还可能存在其它的缩放方式，例如，通过js控制CSS进行缩放，或者通过html的zoom功能进行缩放，等等。

在本申请实施例中，可基于上述缩放方式中的相关参数，对DOM节点进行解析，进而确定页面是否支持viewport方式的缩放或rem方式的缩放，或其它方式的缩放，以挑选具备缩放功能的页面作为训练布局模板的页面。

再例如，还可以设置页面黑名单或页面白名单，如果页面在页面黑名单中，则过滤掉该页面；或者，如果页面不在页面白名单中，则过滤掉该页面。

当然，应理解，上面列举的三种方式，可以单独使用以过滤页面，也可以选择其中的多种方式综合使用以过滤页面。例如，可设置第一页面过滤分类器，用于根据是否支持高清方案处理对页面进行过滤；设置第二页面过滤分类器，用于根据是否支持缩放方式对页面进行过滤；设置第三页面过滤分类器，用于根据页面黑名单或页面白名单对页面进行过滤。用户可根据需要，确定使用其中的一种或多种过滤分类器，以对页面进行逐级过滤。

应理解，上述页面过滤步骤，是可选的步骤。

S102，获取页面的布局结构经编码后的语法树。

在本申请实施例中，可以对页面的dom树进行解析处理，通过dom树相邻节点的关系，确定各个dom节点的关系，进而得到语法(schema)树。

应理解，对于相邻的两个dom节点，包括两种关系，即父子关系和兄弟关系。

存在父子关系的两个dom节点，其对应的关系为嵌套关系。

存在兄弟关系的两个dom节点，包括两种情况。

如果两个相邻的dom节点属于dom树中的同一个循环列表，则可以用数组表示。在本申请实施例中，可以通过通过dom树中节点的相似程度，检测出是否为循环列表。例如，可根据相邻的两个dom节点的类(class)，标签，内容类型等，比较两个节点的相似程度。

下面示出了一段脚本代码：

其中，三个input节点都具备type、id、value等属性，相似度高，可以推定这三个input节点属于同一个循环列表，这三个input节点在语法树中可以用数组表示节点关系。

如果两个相邻的dom节点不属于dom树中的同一个循环列表，且具有公共祖先，则可以用公共祖先所属对象object的两个属性表示两个dom节点的关系。两个object有公共祖先，则可以将这两个object作为其公共祖先所对应的object下面的两个字段。

下面示出了一段脚本代码：

其中，通过比较，可以知道select节点和input节点的相似程度较低，显然不属于同一个循环列表。同时，select节点和input节点都具有相同的父节点div节点，因此，select节点和input节点可以作为div节点构成的对象的一个属性。

在本申请实施例中，通过解析dom树中的循环列表和嵌套关系，进而可以得到dom树中各节点形成的关系树，以进一步将dom树转换为语法树。

为便于表示dom树的语法结构，可用JSON数据结构进行表示。应理解，JSON是一种轻量级的数据结构，在表示相同的数据内容时，采用JSON数据结构表示所需的内容大小要远小于采用XML结构等表示所需的内容大小。

基于JSON数据结构，可以形成一个JSON对象。在JSON数据结构或JSON对象中，{}表示对象(object)结构，[]表示数组(array)结构。例如，假设存在商品对象，包括名称、价格、数量三个属性。显然，商品列表可以表示为由多个商品对象组成的数组。假设商品列表包括10支价格为1元的铅笔，20支价格为5元的圆珠笔，15支价格为20元的钢笔，则商品列表的JSON数据结构可如下所示：[{”名称”:”铅笔”,”价格”:1.00,”数量”:10}，{”名称”:”圆珠笔”,”价格”:5.00,”数量”:20}，{”名称”:”钢笔”,”价格”:20.00,”数量”:15}]。

在本申请实施例中，可用JSON数据结构表示dom树中各种类型的节点的信息。在JSON数据结构中，用数组(Array)表示并列关系的节点，用嵌套的对象(Object)及其属性表示父子关系的节点。

在JSON数据结构表示的数组中，数组作为最外层结构，在中括号“[]”中用逗号“，”或分号“；”隔开。数组中的每个元素之间的关系是并列关系。例如，数组中的每个元素都是对象，或者都是数组，或者都是同一类型的基本数据类型。当然，应理解，基本数据类型，可包括字符串、整数、浮点数、日期，等等。

例如，对于dom节点中的同级节点，可以用数组形式表示。假设dom节点中存在一个列表，该列表为商品列表，其结构如下所示：

对于该结构的商品列表，可生成如下所示的JSON对象：

在前面所示的商品列表对应的JSON对象中，最外层为JSON对象的Array，Array中的每一个元素为JSON对象的object，该object包括表示标题的title属性、表示缩略图地址的pic属性和表示简单描述的detail属性。

又例如，对于dom节点中的包含嵌套关系节点，可以用object对象的形式表示。假设dom节点中存在一个区域，该区域中包括一个标题和一个默认长度为2，最大长度为10的内容列表。对于该结构的区域，可生成如下所示的JSON对象：

在前面所示的区域对应的JSON对象中，最外层为JSON对象的object，该object中包括表示标题的title属性、表示内容列表的list，其中该list为JSON对象的array。

当然，应理解，Dom节点中的其它信息也可以用JSON对象表示，本申请实施例不再一一列举。

本申请实施例中，在通过将dom树表示成如JSON结构之类的语法树之后，还可对语法树的各个节点进行编码，得到编码后的语法树。

在对语法树进行编码时，为了能够直观地体现出语法树的特点，在本申请的一个实施例中，语法树的第i个节点的编码S(i)，满足如下关系：

如果节点u是节点v的祖先，则节点u的编码S(u)是节点v的编码S(v)的前缀；

如果节点u不是节点v的祖先，则节点u的编码S(u)必定不是节点v的编码S(v)的前缀。

图2是本申请的一个实施例树的编码示意图。如图2所示，节点A、B、C、D、E、F、G的编码分别是”1”，”11”，”111”，”1110”，”10”，”101”，”100”。其中，节点A是根节点，也是其它节点的祖先，因此节点A的编码是其它节点的编码的前缀；节点G的编码是“100”，节点B的编码是“11”，节点B的编码不是节点G的编码的前缀，因而节点B不是节点G的祖先，类似地，节点G的编码也不是节点B的编码的前缀，因而节点G也不是节点B的祖先。

当然，为了使得语法树的总的编码代价最小，可采用哈夫曼编码对schema数进行编码。例如，在对语法树进行编码时，可令编码所花的“代价”即为所用编码的长度，对于语法树中的任意一个节点A，A的每个儿子节点i有一个子树大小size[i]，则可令每次合并的代价为两个集合大小总和，合并之后删掉原来两个集合，添加一个新集合，其大小等于两集合大小总和，则语法树即可编码为一个向量。

具体地，语法树中的任意一个节点A，可递归计算节点A的每个儿子节点的子树的后缀编码，以及size，其中，每个儿子节点对应一个集合。具体地，可执行如下算法：

建立节点A的小根堆，并将儿子节点对应的集合插入小根堆中，然后按照size排序，并对于这些size构建哈夫曼树。

执行递归运算后，A的任意一个儿子节点的后缀可以由哈夫曼编码表示。

当然，语法树还可采用其它的编码方式，本申请实施例对此不作限制。

在对语法树进行编码后，还可将语法树中节点的编码作为索引，将节点的子语法树存储到页面布局模板数据库中。应理解，页面布局模板数据库一般为关系数据库。

S103，获取页面的语法树中的节点相对于业务组件的语法树的特征向量。

在得到页面经编码后的语法树后，可对页面语法树和业务组件仓库中的业务组件的语法树进行比较，得到页面语法树的特征向量。

业务组件一般指实现特定业务功能的模块，包括一系列不可分割的业务活动。例如，实现页面导航功能的导航栏组件、实现搜索功能的搜索栏组件、无限图片种子(feed)流构成的组件，等等，都是业务组件。

在本申请实施例中，可预先生成业务组件的语法树，然后采用与页面语法树相同的编码方式，对业务组件的语法树进行编码，并存储到业务组件仓库中。根据业务组件生成语法树的方法，可与页面语法树的生成方法相同或相似。当然，也不排除采用其它方式生成业务组件的语法树，例如，可扫描react proptypes，获取语法树。

当然，应理解，在实际的应用中，也可采用与页面语法树不同的编码方式对业务组件的语法树进行编码，但需要建立业务组件语法树编码与页面语法树编码的映射关系，以在生成页面语法树的节点相对于业务组件语法树的特征向量的过程中，对务组件语法树编码与页面语法树编码进行匹配。下面列举的生成该特征向量的场景，以采用相同的编码方式对页面语法树和业务组件语法树进行编码为例。

具体地，在获取页面相对于业务组件的特征向量时，可将页面对应的语法树中每个节点的子树与业务组件仓库的业务组件对应的语法树进行比较。当然，也可以选择其中的部分节点的子树进行比较。

例如，假设页面1对应的语法树的根节点A1下包括B1、C1、D1三个节点及这三个节点对应的子树，业务组件1对应的语法树的根节点A2下包括B2、C2两个节点及这两个节点对应的子树。在将页面1与业务组件1进行比较时，可将节点A1对应的语法树(即页面1的语法树)、B1对应的语法树、C1对应的语法树，以及D1对应的语法树，分别与A2对应的语法树(即业务组件1的语法树)，进行分析比较。其中，子节点对应的语法树，是根节点对应的语法树中的一部分。当然，应理解，还可以对页面1语法树中的其它节点和业务组件1的语法树进行比较。

为了更直观地了解比较的内容，不妨假设某个页面中包括导航栏组件、搜索栏组件、无限图片种子(feed)组件，并将页面的语法树与导航栏组件进行比较。此时，需要将页面的语法树中的节点的语法树与导航栏组件的语法树，逐个进行比较。

不妨将页面的语法树中用于比较的节点称为页面节点，将业务组件的语法树中的根节点称为业务节点，在将页面的页面节点逐个与业务组件的业务节点进行比较时，可计算业务组件的业务节点对应的语法树中的节点的子语法树与页面节点的子树的差异节点数量，以及差异节点的类型兼容程度。其中，可将差异节点数量和类型兼容程度作为兼容向量，将业务节点所比较的页面节点在页面语法树中的路径作为路径向量，将页面节点的编码作为编码向量，得到页面节点相对于业务组件的语法树的特征向量。这个特征向量，是页面相对于业务组件的特征向量之一，页面中的节点相对于业务组件的差异信息，可以用一个特征向量表示。

当然，应理解，为避免语法树中节点过宽或过深带来的性能下降，可对语法树中节点的深度和广度按照一定规则进行处理。

例如，可规定语法树中节点的深度不大于3层，并抛弃语法树中3层以上(不包括3层)的节点。原则上object类型嵌套不超过3层,否则性能会有问题。

又例如，可规定语法树中节点的广度不超过100个节点，如果某个节点的子节点超过100个，则抛弃编号100个以上的子节点，或者直接抛弃该节点的所有子节点，等等。

当然，应理解，在对语法树进行深度和广度的处理时，页面对应的语法树和业务组件对应的语法树都应采取相同的处理方式进行处理。

S104，根据页面的特征向量与对应的业务组件的训练数据，训练得到页面布局模板与业务组件的映射关系。

其中，该页面布局模板为与业务组件建立映射关系的页面。

在本申请实施例中，一个页面布局模板可对应于多个业务组件。例如，假设某个页面中包括导航栏组件、搜索栏组件、无限图片种子(feed)组件，则该页面可对应于导航栏组件、搜索栏组件和无限图片种子(feed)组件。由于同一类型的业务组件可能存在多个，页面所对应的某一类业务组件也可能存在多个。例如，在实际的应用中，可能存在一个或多个导航栏、一个或多个搜索栏组件、一个或多个无限图片种子组件，因此，该页面对应的业务组件的个数可能多于3个。

此外，在进行页面布局模板与业务组件的映射关系的训练时，可将兼容向量、编码向量、路径向量作为特征向量A，人工录入特征值到业务组件的映射关系的训练数据，以得到业务组件到页面布局模板的某个节点之间的映射关系，从而得到将业务组件映射到页面布局模板的某个节点的分类器。

在本申请实施例中，可使用例如支持向量机(Support Vector Machine，SVM)等工具进行训练，从而得到页面布局模板分类器。其中，该页面布局模板分类器能够根据输入的业务组件，得到匹配的页面布局模板。

应理解，特征向量A到业务组件的映射，开始可以通过人工录入冷启动，然后根据结果进行映射，人工筛选后作为训练数据，即可实现负反馈。具体地，在训练时，借助TensorFlow等工具进行处理。

应理解，根据前期训练的积累和人工调整参数，可以得到一些可用和不可用页面的语法树以及评价，例如高清方案实施与否、语法树的形状人工打分。

应理解，特征向量到业务组件的映射是有准确度和覆盖度的评价的，通过业务方参数可以人为干预结果。例如，可以人为控制某个或某些特征值在准确度和覆盖度评价中的权重系数，等等。通过人工介入调整参数和训练集合，可以设置映射规则，以排除不良映射。根据映射和对应的评价，即可建立神经网络，或者svm网络。对每次的结果进行人工调整和筛选，结果作为新的映射加入神经网络或者svm网络进行负反馈，使得页面布局模板分类器的识别准确度不断提高。

本申请实施例中，通过基于页面的布局结构生成语法树，并按照预定规则进行编码，再与基于相同编码规则编码的业务组件的语法树进行对比得到页面相对于业务组件的特征值，再基于特征值与业务组件的训练数据生成页面布局模板到业务组件的映射关系，从而使得用户基于数据模型选择合适的页面布局模板提供了实现的可能。

图3是本申请一个实施例的流程模板训练方法流程图。图3的方法由流程模板训练装置执行。图3的方法可包括：

S301，获取页面的布局结构。

应理解，步骤S301的具体实现与图1所示实施例的步骤S101类似，流程模板训练装置可通过Selenium WebDriver等工具抓取线上页面的布局结构信息。

此外，流程模板训练装置还可根据页面的特征对页面进行过滤，获取具备如下至少一种特征的页面的布局结构作为训练页面布局模板的页面数据：

(1)经过高清方案处理的页面，或不经过高清处理的页面；

(2)支持缩放功能的页面，或不支持缩放功能的页面；

(3)不在页面黑名单中的页面，或在页面白名单中的页面。

S302，根据页面的布局结构，确定页面中可点击事件的rpc方法对应的数据模型链路。

应理解，在本申请实施例中，在确定可点击事件时，可优先扫描端到端(End-to-End，e2e)测试的代码，例如通过macaca和webdriver等实现的代码，初步确认可点击的事件。或者，如果没有实现e2e测试，则还可以指定页面中的可点击事件的白名单，例如a标签、button标签等，以进行monkey测试。

在本申请实施例中，一个可点击事件的远程过程调用(Remote ProcedureCall，RPC)方法可对应于一条数据模型链路。其中，一条数据模型链路中可包括该数据模型链路对应的rpc方法遍历后得到的页面堆栈遍历结果。该页面堆栈遍历结果可包括如下内容：

当前页面；

当前页面的至少一个能够实现页面跳转的页面状态；

每个页面状态对应的跳转页面。

具体地，rpc方法对应的数据模型链路，可包括当前页面对应的页面布局模板，当前页面的至少一个能够实现页面跳转的页面状态，每个页面状态对应的跳转页面对应的页面布局模板。当然，应理解，业务方为了扩展性区分复杂场景，可以添加相应的信息，并设计权重，该权重是指添加的相关信息在准确度和覆盖度评价中的权重。

当前页面和跳转页面，可以用页面地址表示，例如，页面的统一资源定位符(Uniform Resource Locator，URL)等。当然，也可以用页面对应的页面布局模板的标识来表示。

页面状态，即当前页面实现跳转的前置条件。在本申请实施例中，可以通过监听页面埋点参数，获取采样参数等，得到页面状态。例如，可以监听页面埋点是否发起，页面中某些元素是否被点击等等。或者，还可以根据页面中业务组件的状态，判断是否为页面跳转的前置条件，例如：某个checkbox业务组件是否被选中；某个radio业务组件切换到某种状态；某个input业务组件需要满足的类型，和/或需要达到的长度；等等。

例如，在百度首页中，其按钮“百度一下”对应的rpc方法的数据链路，可包括如下几种页面状态及执行结果：

({url-c:'https://www.baidu.com/',state:{searchbar:”,url-t:'https://www.baidu.com/'}})

({url-c:'https://www.baidu.com/',state:{searchbar:淘宝”,url-t:'https://www.baidu.com/s？wd＝淘宝'}})

其中，url-c表示当前页面的url，state表示页面状态，url-t表示跳转页面的url。

如上所示，在第一种情况中，并没有实现页面跳转；在第二种情况中，跳转到搜索“淘宝”的数据页面，即百度网站中“网页”一栏的页面，其输入框内容为“淘宝”。

可见，即使是相同的页面和rpc方法，其页面状态不同，所执行的结果也不同。页面状态不同，其执行结果(包括跳转页面)一般不同。

当然，某些产品详情的展示页面，虽然url都一样，但是由于产品类型不同，最终的展示的页面也可能不同，比如，有的页面有图表，有的页面则没有图表。

在得到数据模型链路之后，可以将rpc方法名称作为索引，将rpc方法对应的数据模型链路，存储到KV数据库中。rpc方法的名称，包括调用该方法的完整路径，例如，“com.alipay.xxx.xxx.product.detail”。本申请实施例中，通过以rpc方法作为索引，可以快速查询到某一个rpc方法对应的多条数据模型链路。应理解，在一个页面中，一个rpc方法对应于一个数据模型链路；但在很多页面的rpc方法对应的数据模型链路构成的数据模型链路集合中，一个rpc方法可以对应于多个数据模型链路。

此外，应理解，在本申请实施例中，还可根据业务方的需求，在rpc方法配置相应的页面跳转逻辑，具体实现可根据具体业务进行定制。具体地，例如，可为rpc方法对应的数据模型链路配置一个扩展字段，用于表示页面的状态中所包括的埋点参数、采样参数等信息。

此外，在本申请实施例中，可将跳转后的页面的兼容向量、该页面在布局模板树的编码、该页面的路径向量作为特征向量，人工录入rpc方法、页面状态及对应的数据模型链路作为样本数据，使用支持向量机(Support Vector Machine，SVM)进行训练，从而得到页面状态分类器。其中，该页面状态分类器能够判断出特定条件下，某个业务组件的状态影响当前页面是否能进行跳转。当然，应理解，rpc作为tag可以标记数据模型链路的某个元素，但是rpc方法名称本身可不参与训练算法，录入rpc方法到某个元素的映射通常是为了业务方标记方便。

当然，应理解，在本申请实施例中，页面特征向量的计算方法，可复用前述图1所示实施例中计算页面特征向量的方法，本申请实施例在此不再赘述。

S303，获取多个页面的数据模型链路构成的数据模型链路集合，并根据数据模型链路集合中的数据模型链路之间的迭代关系，确定至少一个流程模板。

其中，流程模板可包括由数据模型链路得出的页面布局模板的序列，该序列可表示页面布局模板之间的页面跳转关系。

应理解，在本申请实施例中，流程模板可包括通过数据模型链路得出的页面布局模板的序列。流程模板中页面布局模板之间的页面跳转一般可包括多个分支，流程模板中的页面布局模板的跳转关系构成的树，通常是一个多叉树。当然，特殊地，流程模板中可能只有一个分支。

一个数据模型链路，可包括当前页面，当前页面的至少一种页面状态，以及每种页面状态对应的跳转页面。当然，应理解，此处的当前页面和跳转页面，都可以分别对应于一个页面布局模板，或者，当前页面和跳转页面分别是一个页面布局模板。

应理解，由于实现页面跳转前的页面状态的不同，一个当前页面可对应于一个或多个跳转页面；根据一个数据模型链路，可以实现从一个页面布局模板到一个或多个页面布局模板的页面跳转；根据多个相迭代的数据模型链路，可以实现一序列的页面布局模板的页面跳转，从而得到流程模板。

还是以百度首页页面为例，例如，在百度首页页面中，输入框输入“淘宝”，点击搜索，可以跳转到百度网站的“网页”一栏的页面中，输入框内容为“淘宝”；在百度网站的“网页”一栏的页面中，点击“图片tab”，可以跳转到百度网站中“图片”一栏的页面中，输入框内容为“淘宝”。为便于描述，不妨将百度首页页面称为页面1，将百度网站的“网页”一栏的页面称为页面2，将百度网站中“图片”一栏的页面称为页面3。

在上面列举的例子中，页面1存在一个数据模型链路1，其内容包括：

当前页面：页面1；

页面状态：输入框内容为“淘宝”；

跳转页面：页面2。

即：({url-c:'https://www.baidu.com/',state:{searchbar:淘宝”,url-t:'https://www.baidu.com/s？wd＝淘宝'}})

页面2中存在一个数据模型链路2，其内容包括：

当前页面：页面2；

页面状态：输入框内容为“淘宝”；

跳转页面：页面3。

即({url-c:'https://www.baidu.com/s？wd＝淘宝',state:{searchbar:淘宝”,url-t:'http://image.baidu.com/search/index？tn＝baiduimage&word＝淘宝'}})。

则根据数据模型链路1和数据模型链路2，可确定流程模板的一个分支：

页面1—(输入框:淘宝；rpc方法：搜索按钮事件对应的rpc方法)→页面2—(输入框:淘宝；rpc方法：“淘宝的最新相关消息”对应的rpc方法)→页面3。

当然，应理解，前述流程模板形式仅仅是示意性的，在具体的应用中，流程模板还可以有其它的表示方式。

如前所述，根据一个数据模型链路，可建立起一个页面布局模板到一个或多个页面布局模板之间的跳转关系；根据数据模型链路集合中的数据模型链路，可建立起多个流程模板，其中，流程模板包括多个关联的页面布局模板之间的跳转关系。

当然，应理解，在本申请实施例中，也可对生成的流程模板进行人工干预，删除其中不合理或不必要的流程模板，或者对流程模板中的页面布局模板进行修改，例如删除流程模板中的某个分支，或者将其中的某个页面布局模板替换为其它页面布局模板，或者在流程模板中增加某个分支，等等。此处所提到的分支，可包括处于页面跳转最末端的一个页面布局模板，或者包括某个页面布局模板及该页面布局模板的子孙页面。

至此，完成流程模板的训练步骤。

本申请实施例中，根据页面中的rpc方法对应的数据模型链路，可得到应用的数据模型链路集合。同时，根据数据模型链路，可进一步得到数据模型链路所表示的向量与页面布局模板之间的对应关系。

另外，在本申请实施例中，还可通过不断将得到的结果负反馈，更新数据模型链路向量与页面布局模板的映射关系的训练集合。具体地，例如，可以通过Tensor Flow等工具实现负反馈处理。

图4是本申请一个实施例的应用原型生成方法流程图。图4的方法由应用原型生成装置执行。图4的方法可包括：

S401，确定产品的数据模型集合中的数据模型对应的至少一个页面布局模板。

其中，数据模型与对应的页面布局模板之间的第一匹配指标达到第一预定匹配要求，该第一匹配指标用于评估数据模型所对应的业务组件与页面布局模板所对应的业务组件的匹配关系。

应理解，在本申请实施例中，数据模型的内容可以通过特定的业务组件进行展示，数据模型在某个数据模型链路的前提下，匹配一个或多个业务组件。例如，某个数据模型，可以绑定导航栏组件、搜索栏组件以及无限图片种子(feed)流构成的组件。应理解，在一个数据模型链路中，可包括当前页面、当前页面的至少一种页面状态、以及每种页面状态下对应的跳转页面；其中，当前页面对应于一种数据模型，跳转页面对应于另一种数据模型。

当然，应理解，在确定数据模型对应的页面布局模板之前，应先获取产品的数据模型集合。

在本申请实施例中，可通过多种方式获取产品的数据模型集合。

例如，可以通过扫描facade接口的jar包获取数据模型集合；通过指定关系型数据的一系列有关联的表以获取数据模型集合，或者人工指定一些数据模型集合，本申请实施例对此不作限制。

具体地，步骤S401可实现为：根据数据模型对应的至少一个业务组件，以及预先训练的页面布局模板与业务组件映射关系，确定第一匹配指标大于或等于第一匹配阈值的页面布局模板为该数据模型对应的页面布局模板，其中，该第一预定匹配要求为第一匹配指标大于或等于第一匹配阈值。

进一步的，该第一匹配指标包括准确度和覆盖度，

该准确度用于表示页面布局模板对应的业务组件与数据模型对应的业务组件中相匹配的业务组件的差异程度，相匹配的业务组件的差异程度越小，准确性越高；

该覆盖度用于表示页面布局模板对应的业务组件对数据模型对应的业务组件的覆盖程度，覆盖的业务组件越多，覆盖度越高。

例如，页面1对应于业务组件1、业务组件2和业务组件3，数据模型1对应于业务组件4、业务组件5、业务组件6，其中，假设业务组件1与业务组件4相匹配，业务组件2与业务组件5相匹配。

假设业务组件1与业务组件4中类型兼容的属性比例为90％，业务组件2与业务组件5中类型兼容的属性比例为60％，业务组件4、业务组件5、业务组件6的加权系数都为1。则页面1对数据模型的覆盖度为2/3＝66.7％；页面1的准确度为(90％*1+60％*1)/3＝50％。

当然，前面列举页面布局模板对数据模型的准确度和覆盖度计算方式的例子仅仅是示意性的例子，在具体的应用中，准确度和覆盖度的计算方式更为复杂，例如，还可规定准确度大于预定阈值的业务组件才算是匹配的业务组件，等等。本申请实施例在此不再赘述。

S402，确定产品的数据模型链路集合对应的至少一个流程模板。

其中，数据模型链路集合与对应的流程模板之间的第二匹配指标达到第二预定匹配要求，该第二匹配指标用于评估数据模型链路集合中的数据模型链路与流程模板中数据模型链路的匹配关系。

应理解，如前所述，流程模板可包括由数据模型链路得出的页面布局模板的序列，该序列可表示页面布局模板之间的页面跳转关系。

本申请实施例中，根据产品的数据模型链路集合，可以从流程模板集合中选择出至少一个流程模板，该流程模板中的数据模型链路对数据模型链路集合中的第二匹配指标达到第二预定匹配要求。

具体地，步骤S402可实现为：根据数据模型链路集合中的数据模型链路，以及预先训练的流程模板，确定第二匹配指标大于或等于第二匹配阈值的流程模板为该数据模型链路集合对应的流程模板，该第二预定匹配要求为第二匹配指标大于或等于第二匹配阈值。

进一步的，该第二匹配指标包括准确度和覆盖度，

该准确度用于表示流程模板的数据模型链路与数据模型链路集合的数据模型链路中相匹配的数据模型链路的差异程度，相匹配的数据模型链路的差异程度越小，准确性越高；

该覆盖度用于表示流程模板的数据模型链路对数据模型链路集合的数据模型链路的覆盖程度，覆盖的数据模型链路越多，覆盖度越高。

又例如，假设流程模板的数据模型链路1与数据模型链路集合中的数据模型链路2中，其当前页面对应于相同的页面布局模板，且页面状态及跳转页面的映射关系有80％是相同的，则数据模型链路1对数据模型链路2的准确度为80％，通过多个匹配的数据模型链路的准确度的加权平均，可以得到流程模板对数据模型链路集合的准确度。

例如，假设数据模型链路集合有10条数据模型链路，流程模板中有9条数据模型链路与数据模型链路集合中的9条相匹配，则可以得到流程模板对数据模型链路集合的覆盖度为9/10＝90％。

当然，前面列举流程模板对数据模型链路集合的准确度和覆盖度计算方式的例子仅仅是示意性的例子，在具体的应用中，准确度和覆盖度的计算方式更为复杂，本申请实施例在此不再赘述。

当然，应理解，在步骤S402之前，还应先获取产品的数据模型链路集合。产品的数据模型链路集合可通过人工选定，或通过其它方式得到，本申请实施例对此不作限制。

S403，根据数据模型集合中的数据模型对应的至少一个页面布局模板，以及数据模型链路集合对应的至少一个流程模板，确定产品的原型所需的流程模板和页面布局模板，并生成产品的原型。

根据数据模型集合中的数据模型对应的页面布局模板，以及数据模型链路集合对应的流程模板，可以得到同时符合预定的准确度和覆盖度要求的流程模板和对应的页面布局模板集合，该页面布局模板集合中包括数据模型集合的数据模型对应的页面布局模板。当然，应理解，最终可能存在多组符合要求的流程模板及对应的页面布局模板集合。

例如，假设产品包括3个数据模型和一个数据模型链路集合，数据模型1对应于页面布局模板1和页面布局模板4、数据模型2对应于页面布局模板2和页面布局模板5、数据模型3对应于页面布局模板3；数据模型链路集合对应于流程模板1和流程模板2，

其中，流程模板1包括以下信息：

页面布局模板1—(页面状态1；rpc方法1)→页面布局模板2—(页面状态2；rpc方法2)→页面布局模板3。

流程模板2包括以下信息：

页面布局模板4—(页面状态4；rpc方法4)→页面布局模板5—(页面状态5；rpc方法5)→页面布局模板6。

根据上述内容，可以得到最合适的页面布局模板集合和流程模板，即页面布局模板1-3和流程模板1。

基于流程模板及对应的页面布局模板集合，可生成产品的原型。

具体地，可通过DVA和Antd-Mobile等开发框架建立脚手架项目。对于流程模板的每一步对应的布局模板，添加路由，设置数据模型，选取布局模板对应的业务组件，绑定数据模型和业务组件，进而生成产品的原型。

可选地，在步骤S401之前，该方法还包括：

获取页面的布局结构；

获取页面的布局结构经编码后的语法树；

其具体训练方法可参看图1所示实施例，不再赘述。

可选地，在步骤S402之前，该方法还包括：

获取页面的布局结构；

获取多个页面的数据模型链路构成的数据模型链路集合，并根据数据模型链路集合中的数据模型链路之间的迭代关系，确定至少一个流程模板，其中，流程模板可包括多个页面布局模板的标识组成的序列，以及该多个页面布局模板之间的页面跳转关系。

其具体训练方法可参看图3所示实施例，不再赘述。

图5是本申请的一个实施例电子设备的结构示意图。请参考图5，在硬件层面，该电子设备包括处理器，可选地还包括内部总线、网络接口、存储器。其中，存储器可能包含内存，例如高速随机存取存储器(Random-Access Memory，RAM)，也可能还包括非易失性存储器(non-volatile memory)，例如至少1个磁盘存储器等。当然，该电子设备还可能包括其他业务所需要的硬件。

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

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

处理器从非易失性存储器中读取对应的计算机程序到内存中然后运行，在逻辑层面上形成页面布局模板训练装置。处理器，执行存储器所存放的程序，并具体用于执行以下操作：

获取页面的布局结构；

获取页面的布局结构经编码后的语法树；

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

该电子设备还可执行图1中页面布局模板训练装置执行的方法，并实现页面布局模板训练装置在图1所示实施例的功能，本申请实施例在此不再赘述。

当然，除了软件实现方式之外，本申请的电子设备并不排除其他实现方式，比如逻辑器件抑或软硬件结合的方式等等，也就是说以下处理流程的执行主体并不限定于各个逻辑单元，也可以是硬件或逻辑器件。

本申请实施例还提出了一种计算机可读存储介质，该计算机可读存储介质存储一个或多个程序，该一个或多个程序包括指令，该指令当被包括该一个或多个应用程序的电子设备执行时，能够使该电子设备执行图1所示实施例中页面布局模板训练装置执行的方法，并具体用于执行：

获取页面的布局结构；

获取页面的布局结构经编码后的语法树；

图6是本申请的一个实施例页面具备模板训练装置600的结构示意图。请参考图5，在一种软件实施方式中，页面具备模板训练装置600可包括：

获取单元610，获取页面的布局结构；

获取单元610，还获取页面的布局结构经编码后的语法树；

获取单元610，还获取页面的语法树中的节点相对于业务组件的语法树的特征向量；

训练单元620，根据页面的特征向量与对应的业务组件的训练数据，训练得到页面布局模板与业务组件的映射关系；其中，该页面布局模板为与业务组件建立映射关系的页面。

页面具备模板训练装置600还可执行图1中页面布局模板训练装置执行的方法，并实现页面布局模板训练装置在图1所示实施例的功能，本申请实施例在此不再赘述。

图7是本申请的一个实施例电子设备的结构示意图。请参考图7，在硬件层面，该电子设备包括处理器，可选地还包括内部总线、网络接口、存储器。其中，存储器可能包含内存，例如高速随机存取存储器(Random-Access Memory，RAM)，也可能还包括非易失性存储器(non-volatile memory)，例如至少1个磁盘存储器等。当然，该电子设备还可能包括其他业务所需要的硬件。

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

处理器从非易失性存储器中读取对应的计算机程序到内存中然后运行，在逻辑层面上形成流程模板训练装置。处理器，执行存储器所存放的程序，并具体用于执行以下操作：

获取页面的布局结构；

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

该电子设备还可执行图3中流程模板训练装置执行的方法，并实现流程模板训练装置在图3所示实施例的功能，本申请实施例在此不再赘述。

本申请实施例还提出了一种计算机可读存储介质，该计算机可读存储介质存储一个或多个程序，该一个或多个程序包括指令，该指令当被包括该一个或多个应用程序的电子设备执行时，能够使该电子设备执行图3所示实施例中流程模板训练装置执行的方法，并具体用于执行：

获取页面的布局结构；

图8是本申请的一个实施例流程模板训练装置800的结构示意图。请参考图7，在一种软件实施方式中，流程模板训练装置800可包括：

获取单元810，获取页面的布局结构；

确定单元820，根据页面的布局结构，确定页面中可点击事件的rpc方法对应的数据模型链路，该数据模型链路包括该rpc方法所在的当前页面，以及该当前页面的跳转页面；

该获取单元810，还获取多个页面的数据模型链路构成的数据模型链路集合；

该确定单元820，还根据数据模型链路集合中的数据模型链路之间的迭代关系，确定至少一个流程模板，流程模板可包括多个页面布局模板的标识组成的序列，以及该多个页面布局模板之间的页面跳转关系。

流程模板训练装置800还可执行图3中流程模板训练装置执行的方法，并实现流程模板训练装置在图3所示实施例的功能，本申请实施例在此不再赘述。

图9是本申请的一个实施例电子设备的结构示意图。请参考图9，在硬件层面，该电子设备包括处理器，可选地还包括内部总线、网络接口、存储器。其中，存储器可能包含内存，例如高速随机存取存储器(Random-Access Memory，RAM)，也可能还包括非易失性存储器(non-volatile memory)，例如至少1个磁盘存储器等。当然，该电子设备还可能包括其他业务所需要的硬件。

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

处理器从非易失性存储器中读取对应的计算机程序到内存中然后运行，在逻辑层面上形成应用原型生成装置。处理器，执行存储器所存放的程序，并具体用于执行以下操作：

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

该电子设备还可执行图4中应用原型生成装置执行的方法，并实现应用原型生成装置在图4所示实施例的功能，本申请实施例在此不再赘述。

本申请实施例还提出了一种计算机可读存储介质，该计算机可读存储介质存储一个或多个程序，该一个或多个程序包括指令，该指令当被包括该一个或多个应用程序的电子设备执行时，能够使该电子设备执行图4所示实施例中应用原型生成装置执行的方法，并具体用于执行：

图10是本申请的一个实施例应用原型生成装置1000的结构示意图。请参考图9，在一种软件实施方式中，应用原型生成装置1000可包括：

确定单元1010，确定产品的数据模型集合中的数据模型对应的至少一个页面布局模板，其中，数据模型与对应的页面布局模板之间的第一匹配指标达到第一预定匹配要求，该第一匹配指标用于评估数据模型所对应的业务组件与页面布局模板所对应的业务组件的匹配关系；

确定单元1010，还确定产品的数据模型链路集合对应的至少一个流程模板，其中，数据模型链路集合与对应的流程模板之间的第二匹配指标达到第二预定匹配要求，该第二匹配指标用于评估数据模型链路集合中的数据模型链路与流程模板中数据模型链路的匹配关系；

确定单元1010，还根据数据模型集合中的数据模型对应的至少一个页面布局模板，以及数据模型链路集合对应的至少一个流程模板，确定产品的原型所需的流程模板和页面布局模板；

生成单元1020，根据产品的原型所需的流程模板和页面布局模板，生成产品的原型。

应用原型生成装置1000还可执行图4中应用原型生成装置执行的方法，并实现应用原型生成装置在图4所示实施例的功能，本申请实施例在此不再赘述。

总之，以上所述仅为本申请的较佳实施例而已，并非用于限定本申请的保护范围。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

上述实施例阐明的系统、装置、模块或单元，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。一种典型的实现设备为计算机。具体的，计算机例如可以为个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任何设备的组合。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

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

Claims

1.一种应用原型的生成方法，其特征在于，包括：

确定产品的数据模型集合中的数据模型对应的至少一个页面布局模板，其中，数据模型与对应的页面布局模板之间的第一匹配指标大于或等于第一匹配阈值，所述第一匹配指标用于评估数据模型所对应的业务组件与页面布局模板所对应的业务组件的匹配关系；

确定产品的数据模型链路集合对应的至少一个流程模板，其中，数据模型链路集合与对应的流程模板之间的第二匹配指标大于或等于第二匹配阈值，所述第二匹配指标用于评估数据模型链路集合中的数据模型链路与流程模板中数据模型链路的匹配关系；

2.如权利要求1所述的方法，

确定产品的数据模型集合中的数据模型对应的至少一个页面布局模板，包括：

根据数据模型对应的至少一个业务组件，以及预先训练的页面布局模板与业务组件映射关系，确定第一匹配指标大于或等于第一匹配阈值的页面布局模板为所述数据模型对应的页面布局模板。

3.如权利要求2所述的方法，

所述第一匹配指标包括准确度和覆盖度，

所述准确度用于表示页面布局模板对应的业务组件与数据模型对应的业务组件中相匹配的业务组件的差异程度，相匹配的业务组件的差异程度越小，准确性越高；

所述覆盖度用于表示页面布局模板对应的业务组件对数据模型对应的业务组件的覆盖程度，覆盖的业务组件越多，覆盖度越高。

4.如权利要求1所述的方法，

确定产品的数据模型链路集合对应的至少一个流程模板，包括：

根据数据模型链路集合中的数据模型链路，以及预先训练的流程模板，确定第二匹配指标大于或等于第二匹配阈值的流程模板为所述数据模型链路集合对应的流程模板。

5.如权利要求4所述的方法，

所述第二匹配指标包括准确度和覆盖度，

所述准确度用于表示流程模板的数据模型链路与数据模型链路集合的数据模型链路中相匹配的数据模型链路的差异程度，相匹配的数据模型链路的差异程度越小，准确性越高；

所述覆盖度用于表示流程模板的数据模型链路对数据模型链路集合的数据模型链路的覆盖程度，覆盖的数据模型链路越多，覆盖度越高。

6.如权利要求1所述的方法，在确定产品的数据模型集合中的数据模型对应的至少一个页面布局模板之前，所述方法还包括：

获取页面的布局结构；

获取页面的布局结构经编码后的语法树；

根据页面的特征向量与对应的业务组件的训练数据，训练得到页面布局模板与业务组件的映射关系；其中，所述页面布局模板为与业务组件建立映射关系的页面。

7.如权利要求1所述的方法，在确定产品的数据模型链路集合对应的至少一个流程模板之前，所述方法还包括：

获取页面的布局结构；

根据页面的布局结构，确定页面中可点击事件的rpc方法对应的数据模型链路，所述数据模型链路包括所述rpc方法所在的当前页面，以及所述当前页面的跳转页面；

获取多个页面的数据模型链路构成的数据模型链路集合，并根据数据模型链路集合中的数据模型链路之间的迭代关系，确定至少一个流程模板，所述流程模板包括多个页面布局模板的标识组成的序列，以及所述多个页面布局模板之间的页面跳转关系。

8.一种页面布局模板训练方法，包括：

获取页面的布局结构；

获取页面的布局结构经编码后的语法树；

获取页面的语法树中用于比较的节点相对于业务组件的语法树中的根节点的特征向量；

根据页面的特征向量与对应的业务组件的训练数据，训练得到页面布局模板的节点与业务组件的映射关系；其中，所述页面布局模板为与业务组件建立映射关系的页面。

9.一种流程模板训练方法，包括：

获取页面的布局结构；

根据页面的布局结构，确定页面中可点击事件的rpc方法对应的数据模型链路，所述数据模型链路包括所述rpc方法所在的当前页面对应的页面布局模板，以及所述当前页面的跳转页面对应的页面布局模板；

10.一种应用原型生成装置，包括：

确定单元，确定产品的数据模型集合中的数据模型对应的至少一个页面布局模板，其中，数据模型与对应的页面布局模板之间的第一匹配指标达大于或等于第一匹配阈值，所述第一匹配指标用于评估数据模型所对应的业务组件与页面布局模板所对应的业务组件的匹配关系；

所述确定单元，确定产品的数据模型链路集合对应的至少一个流程模板，其中，数据模型链路集合与对应的流程模板之间的第二匹配指标大于或等于第二匹配阈值，所述第二匹配指标用于评估数据模型链路集合中的数据模型链路与流程模板中数据模型链路的匹配关系；

所述确定单元，还根据数据模型集合中的数据模型对应的至少一个页面布局模板，以及数据模型链路集合对应的至少一个流程模板，确定产品的原型所需的流程模板和页面布局模板；

11.一种电子设备，包括：

处理器；以及

被安排成存储计算机可执行指令的存储器，所述可执行指令在被执行时使所述处理器执行以下操作：

12.一种计算机可读存储介质，所述计算机可读存储介质存储一个或多个程序，所述一个或多个程序当被电子设备执行时，能够使所述电子设备执行以下方法：

13.一种页面布局模板训练装置，包括：

获取单元，获取页面的布局结构；

所述获取单元，还获取页面的布局结构经编码后的语法树；

所述获取单元，还获取页面的语法树中用于比较的节点相对于业务组件的语法树中的根节点的特征向量；

训练单元，根据页面的特征向量与对应的业务组件的训练数据，训练得到页面布局模板的节点与业务组件的映射关系；其中，所述页面布局模板为与业务组件建立映射关系的页面。

14.一种流程模板训练装置，包括：

获取单元，获取页面的布局结构；

确定单元，根据页面的布局结构，确定页面中可点击事件的rpc方法对应的数据模型链路，所述数据模型链路包括所述rpc方法所在的当前页面对应的页面布局模板，以及所述当前页面的跳转页面对应的页面布局模板；

所述获取单元，还获取多个页面的数据模型链路构成的数据模型链路集合；

所述确定单元，还根据数据模型链路集合中的数据模型链路之间的迭代关系，确定至少一个流程模板，所述流程模板包括多个页面布局模板的标识组成的序列，以及所述多个页面布局模板之间的页面跳转关系。