CN110333863A - 一种生成、显示小程序页面的方法及装置 - Google Patents

Abstract

本发明公开了一种生成、显示小程序页面的方法及装置，用以实现根据web版页面自动生成小程序版页面，减少开发应用的工作量。所述生成小程序页面的方法，包括：获取web网页版页面的html代码；将html代码转换为html语法树；将html语法树中的每个html语法节点转换为小程序语法节点，得到小程序语法树；为小程序语法树建立索引标识。

Description

一种生成、显示小程序页面的方法及装置

技术领域

本发明涉及计算机及通信技术领域，特别涉及一种生成、显示小程序页面的方法及装置。

背景技术

微信小程序，简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。在开发应用时，一般需要开发两个版本，web(网页)版应用和小程序版应用。开发工作较为繁重。

发明内容

本发明提供一种生成、显示小程序页面的方法及装置，用以实现根据web版页面自动生成小程序版页面，减少开发应用的工作量。

本发明提供一种生成小程序页面的方法，包括：

获取web网页版页面的html代码；

将html代码转换为html语法树；

将html语法树中的每个html语法节点转换为小程序语法节点，得到小程序语法树；

为小程序语法树建立索引标识。

本发明的实施例提供的技术方案可以包括以下有益效果：本实施例开发出web版本的应用后，可自动转换为小程序版本的应用，明显节省了开发时间。

可选的，所述将html代码转换为html语法树，包括：

解析html代码中标签之间的嵌套关系；

将html代码中的每个标签转换为html语法树中相应的html语法节点；

根据所述嵌套关系构建html语法节点的层级关系，得到html语法树。

本发明的实施例提供的技术方案可以包括以下有益效果：本实施例实现了自动识别html代码的层级关系，可构建html语法树。

可选的，所述将html代码转换为html语法树，包括：

加载html代码外联的CSS文件，并将CSS文件内联在html代码中；

解析所述CSS文件中的CSS规则，确定CSS规则关联到的html代码中的标签，并将CSS规则配置到所述关联到的标签的相应属性上；

将CSS单位转换为小程序对应的rpx单位。

本发明的实施例提供的技术方案可以包括以下有益效果：本实施例规范化了小程序的rpx单位，以便更好的显示小程序的页面。

可选的，将html语法树中的每个html语法节点转换为小程序语法节点之前，所述方法还至少包括下列步骤之一：

删除html语法树中的声明部分；

对html语法树中的链接、背景和图片的属性进行规范化处理。

本发明的实施例提供的技术方案可以包括以下有益效果：本实施例提供了多种适用于小程序的规范化处理，以便形成规范化的小程序语法树。

可选的，为小程序语法树建立索引标识之前，所述方法还至少包括下列步骤之一：

对小程序语法树中的资源文件路径进行协议补齐；

将小程序语法树中的classname属性由数组结构转换为字符串结构；

将图片的格式转换为小程序支持的图片格式；

将链接的格式转换为小程序支持的链接格式。

本发明的实施例提供的技术方案可以包括以下有益效果：本实施例提供了多种适用于小程序的规范化处理，以便更好的显示小程序的页面。

本发明提供一种显示小程序页面的方法，包括：

通过小程序的接口获取小程序语法树的索引标识；

根据所述索引标识获取小程序语法树；

解析小程序语法树，得到小程序语法节点；

根据小程序语法节点进行渲染，以显示小程序页面。

本发明的实施例提供的技术方案可以包括以下有益效果：本实施例通过接口可动态的获取小程序语法树并进行渲染，实现动态生成小程序页面。

本发明提供一种生成小程序页面的装置，包括：

获取模块，用于获取web网页版页面的html代码；

html转换模块，用于将html代码转换为html语法树；

语法树转换模块，用于将html语法树中的每个html语法节点转换为小程序语法节点，得到小程序语法树；

建立模块，用于为小程序语法树建立索引标识。

可选的，所述html转换模块，包括：

嵌套解析子模块，用于解析html代码中标签之间的嵌套关系；

html转换子模块，用于将html代码中的每个标签转换为html语法树中相应的html语法节点；

构建子模块，用于根据所述嵌套关系构建html语法节点的层级关系，得到html语法树。

可选的，所述html转换模块，包括：

内联子模块，用于加载html代码外联的CSS文件，并将CSS文件内联在html代码中；

CSS解析子模块，用于解析所述CSS文件中的CSS规则，确定CSS规则关联到的html代码中的标签，并将CSS规则配置到所述关联到的标签的相应属性上；

单位转换子模块，用于将CSS单位转换为小程序对应的rpx单位。

可选的，所述装置还至少包括下列模块之一：

删除模块，用于删除html语法树中的声明部分；

规范化模块，用于对html语法树中的链接、背景和图片的属性进行规范化处理。

可选的，所述装置还至少包括下列模块之一：

协议补齐模块，用于对小程序语法树中的资源文件路径进行协议补齐；

结构转换模块，用于将小程序语法树中的classname属性由数组结构转换为字符串结构；

图片转换模块，用于将图片的格式转换为小程序支持的图片格式；

链接转换模块，用于将链接的格式转换为小程序支持的链接格式。

本发明提供一种显示小程序页面的装置，包括：

第一获取模块，用于通过小程序的接口获取小程序语法树的索引标识；

第二获取模块，用于根据所述索引标识获取小程序语法树；

解析模块，用于解析小程序语法树，得到小程序语法节点；

渲染模块，用于根据小程序语法节点进行渲染，以显示小程序页面。

本发明的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。

下面通过附图和实施例，对本发明的技术方案做进一步的详细描述。

附图说明

附图用来提供对本发明的进一步理解，并且构成说明书的一部分，与本发明的实施例一起用于解释本发明，并不构成对本发明的限制。在附图中：

图1为本发明实施例中生成小程序页面的方法流程图；

图2A为本发明实施例中html语法树的示意图；

图2B为本发明实施例中a标签语法树节点映射关系的示意图；

图2C为本发明实施例中audio标签语法树节点映射关系的示意图；

图2D为本发明实施例中button标签语法树节点映射关系的示意图；

图2E为本发明实施例中img标签语法树节点映射关系的示意图；

图2F为本发明实施例中input标签语法树节点映射关系的示意图；

图2G为本发明实施例中label标签语法树节点映射关系的示意图；

图2H为本发明实施例中文本语法树节点映射关系的示意图；

图2I为本发明实施例中textarea标签语法树节点映射关系的示意图；

图2J为本发明实施例中video标签语法树节点映射关系的示意图；

图2K为本发明实施例中通用映射规则关系的示意图；

图3为本发明实施例中小程序语法树的示意图；

图4为本发明实施例中生成小程序页面的方法流程图；

图5为本发明实施例中生成小程序页面的方法流程图；

图6为本发明实施例中显示小程序页面的方法流程图；

图7为本发明实施例中生成小程序页面的装置结构图；

图8为本发明实施例中html转换模块的结构图；

图9为本发明实施例中html转换模块的结构图；

图10为本发明实施例中生成小程序页面的装置结构图；

图11为本发明实施例中生成小程序页面的装置结构图；

图12为本发明实施例中显示小程序页面的装置结构图。

具体实施方式

以下结合附图对本发明的优选实施例进行说明，应当理解，此处所描述的优选实施例仅用于说明和解释本发明，并不用于限定本发明。

相关技术中，应用可以有web版和小程序版。在开发应用和升级应用时，技术人员均需要开发两个版本，应用开发和升级的工作量较大。

为解决上述问题，本实施例通过语法树的方式将web版的应用程序转换为小程序版的应用程序，实现了小程序版的应用的自动开发，减少了应用的开发升级的工作。

参见图1，本实施例中生成小程序页面的方法包括：

步骤101：获取web(网页)版页面的html代码。

步骤102：将html代码转换为html语法树。

步骤103：将html语法树中的每个html语法节点转换为小程序语法节点，得到小程序语法树。

步骤104：为小程序语法树建立索引标识。

本实施例中，开发人员只需要开发web版的页面。本实施例可以自动识别web版页面中的html(超文本标记语言)代码，根据html代码中的层级关系生成对应的html语法树。然后，自动将html语法树中的每个html语法节点转换为小程序语法节点，得到小程序语法树。转换过程中html语法树与小程序语法树之间，语法节点的层级关系不变。根据预设的映射关系，将html语法树中的每个html语法节点转换为小程序语法节点。获得小程序语法树之后，一个小程序语法树对应一个小程序页面，通过索引的方式可以动态调用小程序语法树，并进行渲染，生成小程序页面。本实施例不仅可以自动获得小程序版的应用，还可以动态获得小程序页面，减少对原有小程序版的应用的修改，缩短开发周期，便于应用快速上线。并且动态获取小程序页面适用于临时增加的功能的页面。

可选的，所述步骤102包括：步骤A1-步骤A3。

步骤A1：解析html代码中标签之间的嵌套关系。

步骤A2：将html代码中的每个标签转换为html语法树中相应的html语法节点。

步骤A3：根据所述嵌套关系构建html语法节点的层级关系，得到html语法树。

如图2A所示，图2A是一个html语法树的例子。图2A中一个“type”代表一个html语法节点，同时对应着一个html代码中的标签。具有并列关系的标签对应着html语法树中的同一层级。具有调用关系的标签对应着html语法树中的父子关系。其中，嵌套关系包括并列关系和调用关系。本实施例通过标签间的嵌套关系构建了html语法树。

可选的，所述步骤102包括：步骤B1-步骤B3。

步骤B1：加载html代码外联的CSS(层叠样式表，Cascading Style Sheets)文件，并将CSS文件内联在html代码中。

步骤B2：解析所述CSS文件中的CSS规则，确定CSS规则关联到的html代码中的标签，并将CSS规则配置到所述关联到的标签的相应属性上。

步骤B3：将CSS单位转换为小程序对应的rpx(responsive pixel)单位。

本实施例针对CSS文件进行了单独处理，CSS文件与web页面的代码是外联关系(即两个有调用关系的文件)，在生成html语法树时，需要将CSS文件的内容也加入到html语法树。因此，本实施例利用浏览器加载web页面的html代码以及web页面中的链接，以及加载html代码外联的CSS文件，并将CSS文件内联(即嵌入)在html代码中。这样便获得显示时所需的完整web页面的html代码。

由于在生成html语法树的过程中是将html代码中的每个标签转换为对应的一个html语法节点，可见是以标签为单位进行转换的，所以本实施例需要将CSS文件中的样式和属性等特征加入到相应的标签中。故，解析所述CSS文件中的CSS规则，确定CSS规则关联到的html代码中的标签，并将CSS规则配置到所述关联到的标签的相应属性上。本实施例预先建立了解析所述CSS文件中的CSS规则的方法，可以通过识别CSS文件中的特征确定CSS规则关联到的html代码中的标签，并将CSS文件中的样式和属性等配置到所述关联到的标签的“style”等属性中。可以在标签中增加“style”属性来记录CSS规则。

可选的，将html语法树中的每个html语法节点转换为小程序语法节点之前，所述方法还至少包括下列步骤之一：步骤C1-步骤C2。

步骤C1：删除html语法树中的声明部分。

步骤C2：对html语法树中的链接、背景和图片的属性进行规范化处理。

本实施例为了适应小程序，对html语法树进行一些规范性处理，如删除html语法树中的声明部分，移除小程序不支持的head、script、noscript、iframe、style、link、title、meta、object、embed、canvas标签，将通过点击事件跳转的a标签转换为标准的通过href属性跳转的标签等。这部分内容是小程序不支持的，可以节省小程序的代码量和减少出错的可能。以及，按照小程序的属性格式规则，对html语法树中的链接、背景和图片的属性进行规范化处理，以便符合小程序的要求。为了便于后续将html语法树转换为小程序语法树，首先对html语法树中的各种属性格式进行规范化处理，如根据预设的属性格式规则，检查html语法树中的链接、背景和图片的属性是否符合预设的属性格式规则，如果不符合，则进行规范化处理，以使其符合预设的属性格式规则。递归遍历每个html语法树节点，然后依次执行规范化处理函数，多个规范化处理操作对应多个函数，规范化处理函数会判断该语法树节点是否满足需要处理的条件，如果满足则进行处理操作。

在步骤103中，解析html语法树，递归遍历所有的html语法节点，根据预设的语法映射规则，将html语法树中的每个html语法节点转换为小程序语法节点，得到小程序语法树。其中，语法映射规则如图2B-图2K所示。其他无功能的语法树节点section,div,article,aside,footer,header,address,hgroup,main,nav,ul,ol,li,br,hr,h1,h2,h3,h4,h5,h6,p,pre,table,thead,tbody,tr,td,th,i,small,span,b,em,strong,u,ins,del,code,blockquote,form均映射成通用语法树节点，其中小程序语法树节点的className属性对应html语法树节点的tagName。

可选的，为小程序语法树建立索引标识之前，所述方法还至少包括下列步骤之一：步骤D1-步骤D5。

步骤D1：对小程序语法树中的资源文件路径进行协议补齐。

步骤D2：将小程序语法树中的classname属性由数组结构转换为字符串结构。

步骤D3：将图片的格式转换为小程序支持的图片格式。

步骤D4：将链接的格式转换为小程序支持的链接格式。

步骤D5：将小程序语法树中的style属性由对象结构转换为字符串结构。

本实施例为了使小程序语法树更加的规范化，对得到的小程序语法树进行规范化处理。如检查小程序语法树中的资源文件路径是否完整，如果不完整，则进行协议补齐，例如图片标签的资源地址为“//si.geilicdn.com/x.jpg”，则需将协议头https:补齐。

又如一个小程序链接的实例如图3所示，图2中“a”标签是一个包含web链接格式的标签，补齐协议和域名后根据链接映射表，映射到对应的小程序链接，即图3中的“navigator”标签所包含的链接格式。

又如，为了便于小程序识别，需要将小程序语法树中各个数组和对象结构的属性转换为字符串结构。尤其是小程序语法树中的classname(一种属性标识)与style属性。

又如，将图片和链接等的格式转换为小程序支持的格式。

下面通过几个实施例详细介绍实现过程。

参见图4，本实施例中生成小程序页面的方法包括：

步骤401：获取web(网页)版页面的html代码。

步骤402：加载html代码外联的CSS文件，并将CSS文件内联在html代码中。

步骤403：解析所述CSS文件中的CSS规则，确定CSS规则关联到的html代码中的标签，并将CSS规则配置到所述关联到的标签的相应属性上。

步骤404：将CSS单位转换为小程序对应的rpx单位。

步骤405：解析html代码中标签之间的嵌套关系。

步骤406：将html代码中的每个标签转换为html语法树中相应的html语法节点。

步骤407：根据所述嵌套关系构建html语法节点的层级关系，得到html语法树。

步骤408：将html语法树中的每个html语法节点转换为小程序语法节点，得到小程序语法树。

步骤409：为小程序语法树建立索引标识。

参见图5，本实施例中生成小程序页面的方法包括：

步骤501：获取web(网页)版页面的html代码。

步骤502：将html代码转换为html语法树。

步骤503：删除html语法树中的声明部分。

步骤504：对html语法树中的链接、背景和图片的属性进行规范化处理。

步骤505：将html语法树中的每个html语法节点转换为小程序语法节点，得到小程序语法树。

步骤506：对小程序语法树中的资源文件路径进行协议补齐。

步骤507：将小程序语法树中的classname属性由数组结构转换为字符串结构。

步骤508：将图片的格式转换为小程序支持的图片格式。

步骤509：将链接的格式转换为小程序支持的链接格式。

步骤510：为小程序语法树建立索引标识。

参见图6，本实施例中显示小程序页面的方法包括：

步骤601：通过小程序的接口获取小程序语法树的索引标识。

步骤602：根据所述索引标识获取小程序语法树。

步骤603：解析小程序语法树，得到小程序语法节点。

步骤604：根据小程序语法节点进行渲染，以显示小程序页面。

本实施例中，小程序在需要显示页面时，通过接口动态获取小程序语法树的索引标识，并经过上述步骤来显示小程序页面。不仅实现了小程序页面的显示，还实现了页面的动态加载，减少了对原有小程序的改动，便于小程序上线。

上述实施例可根据实际需要进行自由组合。

通过以上描述介绍了生成、显示小程序页面的实现过程，该过程可由装置实现，下面对该装置的内部结构和功能进行介绍。

参见图7，本实施例中生成小程序页面的装置包括：获取模块701、html转换模块702、语法树转换模块703和建立模块704。

获取模块701，用于获取web网页版页面的html代码。

html转换模块702，用于将html代码转换为html语法树。

语法树转换模块703，用于将html语法树中的每个html语法节点转换为小程序语法节点，得到小程序语法树。

建立模块704，用于为小程序语法树建立索引标识。

可选的，如图8所示，所述html转换模块702，包括：嵌套解析子模块801、html转换子模块802和构建子模块803。

嵌套解析子模块801，用于解析html代码中标签之间的嵌套关系。

html转换子模块802，用于将html代码中的每个标签转换为html语法树中相应的html语法节点。

构建子模块803，用于根据所述嵌套关系构建html语法节点的层级关系，得到html语法树。

可选的，如图9所示，所述html转换模块702，包括：内联子模块901、CSS解析子模块902和单位转换子模块903。

内联子模块901，用于加载html代码外联的CSS文件，并将CSS文件内联在html代码中。

CSS解析子模块902，用于解析所述CSS文件中的CSS规则，确定CSS规则关联到的html代码中的标签，并将CSS规则配置到所述关联到的标签的相应属性上。

单位转换子模块903，用于将CSS单位转换为小程序对应的rpx单位。

可选的，如图10所示，所述装置还至少包括下列模块之一：删除模块1001和规范化模块1002。

删除模块1001，用于删除html语法树中的声明部分。

规范化模块1002，用于对html语法树中的链接、背景和图片的属性进行规范化处理。

可选的，如图11所示，所述装置还至少包括下列模块之一：协议补齐模块1101、结构转换模块1102、图片转换模块1103和链接转换模块1104。

协议补齐模块1101，用于对小程序语法树中的资源文件路径进行协议补齐；

结构转换模块1102，用于将小程序语法树中的classname属性由数组结构转换为字符串结构；

图片转换模块1103，用于将图片的格式转换为小程序支持的图片格式；

链接转换模块1104，用于将链接的格式转换为小程序支持的链接格式。

参见图12，本实施例中显示小程序页面的装置包括：第一获取模块1201、第二获取模块1202、解析模块1203和渲染模块1204。

第一获取模块1201，用于通过小程序的接口获取小程序语法树的索引标识。

第二获取模块1202，用于根据所述索引标识获取小程序语法树。

解析模块1203，用于解析小程序语法树，得到小程序语法节点。

渲染模块1204，用于根据小程序语法节点进行渲染，以显示小程序页面。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器和光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (12)

1.一种生成小程序页面的方法，其特征在于，包括：

获取web网页版页面的html代码；

将html代码转换为html语法树；

将html语法树中的每个html语法节点转换为小程序语法节点，得到小程序语法树；

为小程序语法树建立索引标识。

2.如权利要求1所述的方法，其特征在于，所述将html代码转换为html语法树，包括：

解析html代码中标签之间的嵌套关系；

将html代码中的每个标签转换为html语法树中相应的html语法节点；

根据所述嵌套关系构建html语法节点的层级关系，得到html语法树。

3.如权利要求1所述的方法，其特征在于，所述将html代码转换为html语法树，包括：

加载html代码外联的CSS文件，并将CSS文件内联在html代码中；

解析所述CSS文件中的CSS规则，确定CSS规则关联到的html代码中的标签，并将CSS规则配置到所述关联到的标签的相应属性上；

将CSS单位转换为小程序对应的rpx单位。

4.如权利要求1所述的方法，其特征在于，将html语法树中的每个html语法节点转换为小程序语法节点之前，所述方法还至少包括下列步骤之一：

删除html语法树中的声明部分；

对html语法树中的链接、背景和图片的属性进行规范化处理。

5.如权利要求1所述的方法，其特征在于，为小程序语法树建立索引标识之前，所述方法还至少包括下列步骤之一：

对小程序语法树中的资源文件路径进行协议补齐；

将小程序语法树中的classname属性由数组结构转换为字符串结构；

将图片的格式转换为小程序支持的图片格式；

将链接的格式转换为小程序支持的链接格式。

6.一种显示小程序页面的方法，其特征在于，包括：

通过小程序的接口获取小程序语法树的索引标识；

根据所述索引标识获取小程序语法树；

解析小程序语法树，得到小程序语法节点；

根据小程序语法节点进行渲染，以显示小程序页面。

7.一种生成小程序页面的装置，其特征在于，包括：

获取模块，用于获取web网页版页面的html代码；

html转换模块，用于将html代码转换为html语法树；

语法树转换模块，用于将html语法树中的每个html语法节点转换为小程序语法节点，得到小程序语法树；

建立模块，用于为小程序语法树建立索引标识。

8.如权利要求7所述的装置，其特征在于，所述html转换模块，包括：

嵌套解析子模块，用于解析html代码中标签之间的嵌套关系；

html转换子模块，用于将html代码中的每个标签转换为html语法树中相应的html语法节点；

构建子模块，用于根据所述嵌套关系构建html语法节点的层级关系，得到html语法树。

9.如权利要求7所述的装置，其特征在于，所述html转换模块，包括：

内联子模块，用于加载html代码外联的CSS文件，并将CSS文件内联在html代码中；

CSS解析子模块，用于解析所述CSS文件中的CSS规则，确定CSS规则关联到的html代码中的标签，并将CSS规则配置到所述关联到的标签的相应属性上；

单位转换子模块，用于将CSS单位转换为小程序对应的rpx单位。

10.如权利要求7所述的装置，其特征在于，所述装置还至少包括下列模块之一：

删除模块，用于删除html语法树中的声明部分；

规范化模块，用于对html语法树中的链接、背景和图片的属性进行规范化处理。

11.如权利要求7所述的装置，其特征在于，所述装置还至少包括下列模块之一：

协议补齐模块，用于对小程序语法树中的资源文件路径进行协议补齐；

结构转换模块，用于将小程序语法树中的classname属性由数组结构转换为字符串结构；

图片转换模块，用于将图片的格式转换为小程序支持的图片格式；

链接转换模块，用于将链接的格式转换为小程序支持的链接格式。

12.一种显示小程序页面的装置，其特征在于，包括：

第一获取模块，用于通过小程序的接口获取小程序语法树的索引标识；

第二获取模块，用于根据所述索引标识获取小程序语法树；

解析模块，用于解析小程序语法树，得到小程序语法节点；

渲染模块，用于根据小程序语法节点进行渲染，以显示小程序页面。