CN112764757A

CN112764757A - 小程序处理方法、装置、设备及存储介质

Info

Publication number: CN112764757A
Application number: CN202110061493.XA
Authority: CN
Inventors: 林全昌; 卢道和; 林挺
Original assignee: WeBank Co Ltd
Current assignee: WeBank Co Ltd
Priority date: 2021-01-18
Filing date: 2021-01-18
Publication date: 2021-05-07

Abstract

本申请提供一种小程序处理方法、装置、设备及存储介质。首先获取与待处理数据具有依赖关系的所有WXML文件以及所有WXSS文件，待处理数据通过预设代码表征小程序的待处理页面或待处理组件。根据预设解析工具对所有WXML文件和所有WXSS文件进行语法解析以生成对应的HTML语法树和CSS语法树，并根据待处理数据的WXSS配置对HTML语法树和CSS语法树分别基于相应的样式隔离规则进行转化处理，根据转化处理后的HTML语法树和CSS语法树分别输出JSX文件和CSS文件，实现WXSS至CSS的完备转化，消除了两者的差异。针对待处理数据，使用同一套WXSS渲染出的网页与小程序页面保持一致，提升了用户体验。

Description

小程序处理方法、装置、设备及存储介质

技术领域

本申请涉及计算机技术领域，尤其涉及一种小程序处理方法、装置、设备及存储介质。

背景技术

随着互联网技术的飞速发展，用户对于获取信息的便捷性需求越来越高，小程序应运而生。小程序是一种不需要下载安装即可使用的应用，用户只需扫描设置的二维码或者搜索便可打开应用，极大地提高了信息交互的便捷性。

然而，目前的浏览器可以加载超级文本标记语言(HyperText Markup Language，HTML)页面，无法加载小程序页面，往往需要通过微信层叠样式表(WeiXin Style Sheets，WXSS)转层叠样式表(Cascading Style Sheets，CSS)的方式对小程序进行转换，以使得小程序的页面可以通过浏览器网页打开。但由于WXSS与CSS之间仍然存在一些差异，会造成小程序页面中的一些内容在转换后出现不一致，进而会对用户的正常使用造成一定的局限性，从而影响业务的正常运行，导致用户使用体验欠佳。

可见，亟需一种解决方法以克服现有小程序使用中的一些技术缺陷。

发明内容

本申请提供一种小程序处理方法、装置、设备及存储介质，用于克服现有技术中由于WXSS与CSS之间存在差异引起小程序页面转化为网页页面后出现不一致造成业务正常运行受限的技术问题。

第一方面，本申请提供一种小程序处理方法，包括：

获取与待处理数据具有依赖关系的所有微信标记语言WXML文件以及所有微信层叠样式表WXSS文件，所述待处理数据通过预设代码表征所述小程序的待处理页面或待处理组件；

根据预设解析工具对所述所有WXML文件和所述所有WXSS文件进行语法解析，生成对应的超级文本标记语言HTML语法树和层叠样式表CSS语法树；

根据所述待处理数据的WXSS配置对所述HTML语法树以及所述CSS语法树分别基于相应的样式隔离规则进行转化处理，并根据转化处理后的所述HTML语法树和所述CSS语法树分别输出JSX文件和CSS文件。

在一种可能的设计中，所述根据所述待处理数据的WXSS配置对所述HTML语法树基于相应的样式隔离规则进行转化处理，包括：

为所述待处理数据中的每个自定义元素添加预设类名；

若确定所述HTML语法树中的所述待处理数据为所述待处理页面，则在所述HTML语法树的外层添加第一预设元素，以得到转化处理后的所述HTML语法树；

若确定所述HTML语法树中的所述待处理数据为所述待处理组件，则在所述HTML语法树的外层添加第二预设元素，并根据所述WXSS配置对所述待处理组件对应的所述HTML语法树进行第一样式隔离处理，以得到转化处理后的所述HTML语法树。

在一种可能的设计中，若确定所述待处理组件的类名为静态类名，所述根据所述WXSS配置对所述待处理组件对应的所述HTML语法树进行第一样式隔离处理，包括：

根据所述WXSS配置确定所述待处理组件对应的样式隔离类型，所述样式隔离类型包括全局类型、单一类型以及共享类型；

按照所述样式隔离类型对应的预设隔离规则对所述HTML语法树进行所述第一样式隔离处理。

在一种可能的设计中，所述按照所述样式隔离类型对应的预设隔离规则对所述HTML语法树进行所述第一样式隔离处理，包括：

当所述样式隔离类型为所述全局类型时，保留所述HTML语法树中的各个类名称不变；

当所述样式隔离类型为所述单一类型时，为所述HTML语法树中的各个类名称添加对应的第一标识符，以通过所述第一标识符唯一表征对应的所述待处理组件；

当所述样式隔离类型为所述共享类型时，为所述HTML语法树中的各个类名称添加对应的第二标识符且保留各个类名称。

在一种可能的设计中，若确定所述待处理组件的类名为动态类名，调用预设函数并按照所述样式隔离类型对应的预设隔离规则对所述HTML语法树进行所述第一样式隔离处理。

在一种可能的设计中，若确定所述CSS语法树中的所述待处理数据为所述待处理页面，所述根据所述待处理数据的WXSS配置对所述CSS语法树基于相应的样式隔离规则进行转化处理，包括：

将所述CSS语法树中所有的标签选择器编译为所述预设类名，并将所述待处理页面对应的页面选择器编译为携带所述第一预设元素的类选择器，以得到转化处理后的所述CSS语法树。

在一种可能的设计中，若确定所述CSS语法树中的所述待处理数据为所述待处理组件，所述根据所述待处理数据的WXSS配置对所述CSS语法树基于相应的样式隔离规则进行转化处理，包括：

删除所述待处理组件的所有选择器，并根据所述WXSS配置对所述待处理组件对应的所述CSS语法树进行第二样式隔离处理；

将所述待处理组件的组件选择器编译为携带所述第二预设元素的类选择器，以得到转化处理后的所述CSS语法树。

在一种可能的设计中，所述根据所述WXSS配置对所述待处理组件对应的所述CSS语法树进行第二样式隔离处理，包括：

当所述样式隔离类型为所述全局类型时，保留所述CSS语法树中的各个类选择器；

当所述样式隔离类型为所述单一类型或者所述共享类型时，为所述CSS语法树中的各个类选择器对应添加所述第一标识符或者所述第二标识符。

在一种可能的设计中，在所述根据所述待处理数据的WXSS配置对所述CSS语法树进行转化处理之前，还包括：

根据预设单位转化规则将所述小程序的自定义尺寸单位转化为浏览器尺寸单位。

在一种可能的设计中，在所述根据所述待处理数据的WXSS配置对所述HTML语法树以及所述CSS语法树分别基于相应的样式隔离规则进行转化处理之前，还包括：

获取与所述待处理数据具有所述依赖关系的所有编程语言文件和所有文本格式文件；

根据所述预设解析工具分别对所述所有编程语言文件和所述所有文本格式文件进行语法解析，以生成各自对应的编程语法树；

从各编程语法树中读取所述所有WXSS文件的相应配置，以得到所述WXSS配置。

在一种可能的设计中，在所述根据转化处理后的所述HTML语法树和所述CSS语法树分别输出JSX文件和CSS文件之后，还包括：

利用预设React框架对所述JSX文件和所述CSS文件进行渲染，以得到所述待处理数据对应的网页。

第二方面，本申请提供一种小程序处理装置，包括：

获取模块，用于获取与待处理数据具有依赖关系的所有微信标记语言WXML文件以及所有微信层叠样式表WXSS文件，所述待处理数据通过预设代码表征所述小程序的待处理页面或待处理组件；

第一处理模块，用于根据预设解析工具对所述所有WXML文件和所述所有WXSS文件进行语法解析，生成对应的超级文本标记语言HTML语法树和层叠样式表CSS语法树；

第二处理模块，用于根据所述待处理数据的WXSS配置对所述HTML语法树以及所述CSS语法树分别基于相应的样式隔离规则进行转化处理，并根据转化处理后的所述HTML语法树和所述CSS语法树分别输出JSX文件和CSS文件。

在一种可能的设计中，所述第二处理模块，包括：

第一处理子模块，用于为所述待处理数据中的每个自定义元素添加预设类名；

第二处理子模块，用于若确定所述HTML语法树中的所述待处理数据为所述待处理页面，则在所述HTML语法树的外层添加第一预设元素，以得到转化处理后的所述HTML语法树；

第三处理子模块，用于若确定所述HTML语法树中的所述待处理数据为所述待处理组件，则在所述HTML语法树的外层添加第二预设元素，并根据所述WXSS配置对所述待处理组件对应的所述HTML语法树进行第一样式隔离处理，以得到转化处理后的所述HTML语法树。

在一种可能的设计中，若确定所述待处理组件的类名为静态类名，所述第三处理子模块，具体用于：

在一种可能的设计中，所述第三处理子模块，还具体用于：

在一种可能的设计中，若确定所述待处理组件的类名为动态类名，所述第三处理子模块，用于：

调用预设函数并按照所述样式隔离类型对应的预设隔离规则对所述HTML语法树进行所述第一样式隔离处理。

在一种可能的设计中，若确定所述CSS语法树中的所述待处理数据为所述待处理页面，所述第二处理模块，还具体用于：

在一种可能的设计中，若确定所述CSS语法树中的所述待处理数据为所述待处理组件，所述第二处理模块，还包括：

第四处理子模块，用于删除所述待处理组件的所有选择器，并根据所述WXSS配置对所述待处理组件对应的所述CSS语法树进行第二样式隔离处理；

第五处理子模块，用于将所述待处理组件的组件选择器编译为携带所述第二预设元素的类选择器，以得到转化处理后的所述CSS语法树。

在一种可能的设计中，所述第四处理子模块，具体用于：

在一种可能的设计中，所述小程序处理装置，还包括：单位转化模块；所述单位转化模块，用于：

在一种可能的设计中，所述小程序处理装置，还包括：第三处理模块；所述第三处理模块，用于：

在一种可能的设计中，所述小程序处理装置，还包括：渲染模块；所述渲染模块，用于：

第三方面，本申请提供一种电子设备，包括：

存储器，用于存储计算机程序；

处理器，用于调用并执行存储器中的计算机程序，执行第一方面所提供的任意一种可能的小程序处理方法。

第四方面，本申请提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序用于执行第一方面所提供的任意一种可能的小程序处理方法。

第五方面，本申请还提供一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现第一方面所提供的任意一种可能的小程序处理方法。

本申请提供一种小程序处理方法、装置、设备及存储介质。首先获取与待处理数据具有依赖关系的所有微信标记语言WXML文件以及所有微信层叠样式表WXSS文件，其中，待处理数据通过预设代码表征小程序的待处理页面或待处理组件。然后根据预设解析工具对所有WXML文件和所有WXSS文件进行语法解析，生成对应的超级文本标记语言HTML语法树和层叠样式表CSS语法树。进而根据待处理数据的WXSS配置对HTML语法树以及CSS语法树分别基于相应的样式隔离规则进行转化处理，最后根据转化处理后的HTML语法树和CSS语法树分别输出JSX文件和CSS文件，实现WXSS至CSS的完备转化。针对待处理数据，基于相应的样式隔离规则根据WXSS配置对语法树进行转化，从而使得同一套WXSS渲染出的网页页面与小程序页面保持一致，保证业务的正常开展，提升用户使用体验。

附图说明

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

图1为本申请实施例提供的一种应用场景示意图；

图2为本申请实施例提供的一种小程序处理方法的流程示意图；

图3为本申请实施例提供的另一种小程序处理方法的流程示意图；

图4为本申请实施例提供的再一种小程序处理方法的流程示意图；

图5为本申请实施例提供的又一种小程序处理方法的流程示意图；

图6为本申请实施例提供的又一种小程序处理方法的流程示意图；

图7为本申请实施例提供的一种小程序处理装置的结构示意图；

图8为本申请实施例提供的一种处理模块的结构示意图；

图9为本申请实施例提供的一种电子设备的结构示意图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的方法和装置的例子。

本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例例如能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

目前，由于浏览器无法加载小程序页面，往往需要通过微信层叠样式表(WeiXinStyle Sheets，WXSS)转层叠样式表(Cascading Style Sheets，CSS)的方式对小程序进行转换，才能使得小程序的页面可以通过浏览器网页打开。但是，WXSS与CSS之间存在一些差异，例如，WXSS和CSS之间的差异可以体现在以下几点：

(1)、CSS不支持样式导入，而WXSS支持；

(2)、WXSS与CSS对于尺寸单位的设置不同，比如WXSS自定义了rpx单位，可以根据屏幕宽度进行自适应。CSS中可以用rem和vw单位进行模拟；

(3)、WXSS中使用的标签选择器大部分为小程序的自定义标签，而CSS无法识别；

(4)、WXSS可以采用小程序页面和组件为单位声明样式，而CSS中未设置有相关概念；

(5)、小程序针对组件可以专门设计对应的样式语法，而CSS中未设置有相关概念，比如，小程序的组件中可以以external classes定义段定义若干个外部样式，而CSS中没有相关概念，又如小程序组件中不支持id选择器、后代选择器、子元素选择器以及元素选择器等；还比如小程序的组件中可以使用一些字符来引用页面类或者父组件的类，而CSS中不涉及相关内容等等。

现有技术在WXSS至CSS的转化中，仅解决了上述差异中的(1)和(2)，对于(3)至(5)这些差异还未有相关解决方案。然而，这些差异的存在，会使得小程序页面中的一些内容在转换为网页时页面的样式等内容发生变化，导致网页出现与小程序不一致的情况，这会对用户的正常使用造成一定的局限性，导致用户使用体验欠佳。

针对现有技术中存在的上述技术缺陷，本申请提供一种小程序处理方法、装置、设备及存储介质。本申请提供的小程序处理方法的发明构思在于：针对需要进行转化的待处理数据，比如小程序的待处理页面或者待处理组件，根据待处理数据的WXSS配置对相应的语法树基于相应的样式隔离规则进行转化处理，通过样式隔离规则克服WXSS至CSS转化过程中存在的差异。最后根据转化处理后的相应语法树输出JSX(Java Script的语法扩展)文件和CSS文件，从而使得同一套WXSS渲染出的网页页面与小程序的页面保持一致，提升用户使用体验。

以下，对本申请实施例的示例性应用场景进行介绍。

图1为本申请实施例提供的一种应用场景示意图。如图1所示，网络用于为服务器11和终端设备12之间提供通信链路的介质。网络可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。服务器11和终端设备12之间可以通过网络进行交互，以接收或发送消息。其中，服务器11可以配置为执行本申请实施例提供的小程序处理方法的相应电子设备中，而终端设备12中配置有能够运行小程序的容器，通过服务器11与终端设备12之间的信息交互，使得服务器11能够用于执行本申请实施例提供的小程序处理方法，从而对运行于终端设备12中的小程序进行处理，使得小程序的页面与网页页面保持一致，可以理解的是，服务器11中可以运行有相应浏览器，该浏览器可以浏览小程序页面转化后的网页。另外，本申请实施例对于上述描述中的服务器和终端设备的类型不作限定，例如服务器11也可以是服务器集群，终端设备12可以是智能手机、智能眼镜、智能手环、智能手表、平板电脑等等，图1中的终端设备12以智能手机为例示出。

需要说明的是，上述应用场景仅仅是示意性的，本申请实施例提供的小程序处理方法、装置、设备及存储介质包括但不仅限于上述应用场景。

下面以具体地实施例对本申请的技术方案以及本申请的技术方案如何解决上述技术问题进行详细说明。下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例中不再赘述。下面将结合附图，对本申请的实施例进行描述。

图2为本申请实施例提供的一种小程序处理方法的流程示意图。如图2所示，本实施例提供的小程序处理方法，包括：

S101：获取与待处理数据具有依赖关系的所有微信标记语言WXML文件以及所有微信层叠样式表WXSS文件。

其中，待处理数据通过预设代码表征小程序的待处理页面或待处理组件。

小程序中需要转化为CSS的数据为待处理数据，该待处理数据可以是小程序中需要转化的页面或者组件，具体地，待处理数据以预设代码表示，比如JAVA代码。因此，待处理数据可以通过预设代码表征小程序的待处理页面或待处理组件。

对于小程序而言，小程序的一个页面或者组件通常由四种文件组成，第一种为表征页面逻辑关系以及部分配置的编程语言文件，例如JS文件；第二种为表征页面或者组件配置的文本格式文件，例如JSON文件；第三种为用于描述小程序页面结构或者组件结构的WXML文件；第四种为用于描述小程序的页面样式或者组件样式的WXSS文件。针对待处理数据，可以获取与待处理数据具有依赖关系的所有WXML文件和所有WXSS文件。其中，依赖关系可以理解为与当前待处理数据对应的待处理页面或者待处理组件具有的任何关联关系。在实际工况中，该依赖关系由小程序中待处理数据对应的具体内容决定，对此，本实施例不作限定。

S102：根据预设解析工具对所有WXML文件和所有WXSS文件进行语法解析，生成对应的超级文本标记语言HTML语法树和层叠样式表CSS语法树。

在获取到与待处理数据具有依赖关系的所有WXML文件和所有WXSS文件之后，可以利用预设解析工具进行语法解析，例如，通过预设解析工具对所有WXML文件进行语法解析，生成对应的HTML语法树。通过预设解析工具对所有WXSS进行语法解析，生成对应的CSS语法树。其中，可以根据待处理数据的代码语言选用相应的语法解析器作为预设解析工具，可以根据实际工况进行相应设置，对此，本实施例不作限定。

S103：根据待处理数据的WXSS配置对HTML语法树以及CSS语法树分别基于相应的样式隔离规则进行转化处理，并根据转化处理后的HTML语法树和CSS语法树分别输出JSX文件和CSS文件。

在进行语法解析，得到HTML语法树和CSS语法树之后，根据待处理数据的WXSS配置对该两种语法树分别基于相应的样式隔离规则进行转化处理，其中，待处理数据的WXSS配置可以控制转化处理过程中样式隔离规则的具体内容，针对待处理数据自身属性基于相应样式隔离规则对各语法树进行转化处理，以克服WXSS与CSS之间存在的差异。

对解析得到的HTML语法树和CSS语法树经过相应的样式隔离规则转化处理之后，分别输出JSX文件和CSS文件。具体地，转化处理后的HTML语法树输出JSX文件，转化处理后的CSS语法树输出CSS文件，完成待处理数据的WXSS至CSS的转化。其中，JSX文件是JavaScript的语法扩展，用于描述页面内容。CSS文件可以用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言。

进一步地，在根据转化处理后的HTML语法树和CSS语法树分别输出JSX文件和CSS文件之后，利用预设React框架对输出的JSX文件和CSS文件进行渲染，可以得到待处理数据对应的网页，该网页与小程序页面保持一致，转化之后不存在差异问题。其中，预设React框架是一能够将数据渲染为HTML视图的开源Java Script库。另外，通过渲染得到的待处理数据对应的网页，并非仅是小程序中待处理数据对应的当前页面的网页，也还包括与待处理数据对应的当前页面具有依赖关系的其他页面的网页。例如，待处理数据对应的网页包括小程序中待处理数据对应的当前页面以及从当前页面中的组件跳转后进入的下一页面等其他页面对应的网页。

本申请实施例提供的小程序处理方法，首先获取与待处理数据具有依赖关系的所有WXML文件以及所有WXSS文件，其中，待处理数据通过预设代码表征小程序的待处理页面或待处理组件。然后根据预设解析工具对所有WXML文件和所有WXSS文件进行语法解析，生成对应的HTML语法树和CSS语法树。进而根据待处理数据的WXSS配置对HTML语法树以及CSS语法树分别基于相应的样式隔离规则进行转化处理，最后根据转化处理后的HTML语法树和CSS语法树分别输出JSX文件和CSS文件，实现WXSS至CSS的完备转化。针对待处理数据，基于相应的样式隔离规则根据WXSS配置对语法树进行转化，从而使得同一套WXSS渲染出的网页页面与小程序页面保持一致，保证业务的正常开展，提升用户使用体验。

在一种可能的设计中，步骤S103中根据待处理数据的WXSS配置对HTML语法树基于相应的样式隔离规则进行转化处理可能的实现方式如图3所示，图3为本申请实施例提供的另一种小程序处理方法的流程示意图。如图3所示，本实施例提供的根据待处理数据的WXSS配置对HTML语法树基于相应的样式隔离规则进行转化处理，包括：

S201：为待处理数据中的每个自定义元素添加预设类名。

对小程序中待处理数据中涉及到的每个自定义元素添加预设类名，具体地，可以给每个自定义原始插入一个预设类名，比如在“<view></view>”中添加预设类名“className＝〝tag-view〞”变为“<view className＝〝tag-view〞></view>”。预设类名的具体内容可以根据实际工况设置，对此，本实施例不作限定。在未添加预设类名时，当WXSS转CSS之后，CSS无法选中小程序的自定义元素，而当添加预设类名之后，CSS可以通过“tag-view”选中小程序的自定义元素。

S202：判断待处理数据是否为待处理页面。

在为待处理数据的每个自定义元素添加了预设类名之后，判断待处理数据通过预设代码表征的是小程序的待处理页面还是待处理组件。具体地，判断该待处理数据是否为待处理页面，若是，则执行步骤S203，反之，若待处理数据不是待处理页面，则判定待处理数据为待处理组件，执行步骤S204和步骤S205。另外，可以理解的是，当待处理数据为待处理页面时，HTML语法树和CSS语法树表征的均为小程序的页面，当待处理数据为待处理组件时，HTML语法树和CSS语法树表征的均为小程序的组件。

S203：若确定HTML语法树中的待处理数据为待处理页面，则在HTML语法树的外层添加第一预设元素，以得到转化处理后的HTML语法树。

在经过步骤S202的判断后确定待处理数据为待处理页面时，则在该HTML语法树的外层添加第一预设元素。例如在HTML语法树的外层添加“<page className＝〝page-pageId〞>这里是页面的wxml</page>”。外层添加有第一预设元素的HTML语法树即为待处理页面对应的转化处理后的HTML语法树。其中，第一预设元素的具体内容可以根据实际工况设置，对此，本实施例不作限定。

S204：若确定HTML语法树中的待处理数据为待处理组件，则在HTML语法树的外层添加第二预设元素。

在经过步骤S202的判断后确定待处理数据为待处理组件时，则在该HTML语法树的外层添加第二预设元素。例如在HTML语法树的外层添加“<component className＝〝component-componentId>这里是组件的wxml</component>”。

需要说明的是，由于页面选择器和组件选择器仅存在于小程序中，而不存在于网页中，可见，这两种选择器为小程序独有的特殊选择器。在小程序中，可以通过页面选择器和组件选择器选中相应的待处理数据以进行其他设置。而由于网页中不存在这两种特殊的选择器，因此，在转化处理过程中，需要通过对待处理数据添加第一预设元素或者第二预设元素，才能使得CSS通过第一预设元素或者第二预设元素选中相应的待处理数据，从而代替小程序中的页面选择器和组件选择器，以达到完美匹配小程序中页面选择器或组件选择器选中相应待处理数据的效果。

S205：根据WXSS配置对待处理组件对应的HTML语法树进行第一样式隔离处理，以得到转化处理后的HTML语法树。

根据WXSS配置对该待处理组件对应的HTML语法树进行第一样式隔离处理，将经过第一样式隔离处理后的HTML语法树确定为转化处理后的HTML语法树。其中，WXSS配置能够控制对待处理组件对应的HTML语法树的进行第一样式隔离处理时采用的具体样式隔离规则，该样式隔离规则即为第一样式隔离处理过程中所采用的具体规则。另外，对于待处理组件而言，第一样式隔离处理的处理过程可以根据待处理组件的类名为静态类名还是动态类名而不同。

需要说明的是，本申请实施例中的步骤S204和步骤S205之后没有执行顺序可言。

本申请实施例提供的小程序处理方法中根据待处理数据的WXSS配置对HTML语法树基于相应的样式隔离规则进行转化处理，首先为待处理数据中的每个自定义元素添加预设类名，以使得转化为CSS之后，CSS能够通过预设类名选中小程序的自定义元素。然后确定当前的待处理数据是否为待处理页面，若为待处理页面，则为HTML语法树的外层添加第一预设元素，从而得到待处理页面对应的转化处理后的HTML语法树。而当确定待处理数据非待处理页面，而为待处理组件时，为HTML语法树的外层添加第二预设元素，并根据WXSS配置对待处理组件对应的HTML语法树进行第一样式隔离处理，得到待处理组件对应的转化处理后的HTML语法树。CSS通过添加的第一预设元素或者第二预设元素选中相应的待处理数据，以代替小程序中的页面选择器和组件选择器，达到完美匹配小程序中页面选择器或组件选择器选中相应待处理数据的效果。进而根据待处理数据自身属性采用相应的样式隔离规则进行转化处理，得到对应的转化处理后的HTML语法树，以消除现有技术中WXSS与CSS转化时存在的差异。

在上述实施例的基础上，步骤S205的实现方式根据待处理组件的类名的不同而不同。在一种可能的设计中，若确定待处理组件的类名为静态类名，则步骤S205可能的实现方式如图4所示，图4为本申请实施例提供的再一种小程序处理方法的流程示意图。如图4所示，本实施例提供的根据WXSS配置对待处理组件对应的HTML语法树进行第一样式隔离处理，包括：

S301：根据WXSS配置确定待处理组件对应的样式隔离类型。

其中，样式隔离类型包括全局类型、单一类型以及共享类型。

首先根据WXSS配置确定待处理组件的样式隔离类型，其中，样式隔离类型包括全局类型、单一类型以及共享类型。通过样式隔离类型可以对待处理组件进行对应的第一样式隔离处理，以使得待处理组件之间避免一定的样式污染。待处理组件的样式隔离类型不同，对应的第一样式隔离处理采用的预设隔离规则不同。

S302：按照样式隔离类型对应的预设隔离规则对HTML语法树进行第一样式隔离处理。

在确定了待处理组件的样式隔离类型，针对不同的样式隔离类型，按照该样式隔离类型对应的预设隔离规则对HTML语法树进行第一样式隔离处理。

例如，当待处理组件的样式隔离类型为全局类型时，保留待处理组件对应的HTML语法树中的各个类名称不变，使得CSS保持标准的全局样式。当待处理组件的样式隔离类型为单一类型时，则表明该待处理组件的样式既不能被其他页面或组件影响，该待处理组件自身也不能影响其他的页面或者组件，该待处理组件的样式类名需要保持唯一性，因此，对于样式隔离类型为单一类型的待处理组件，可以为HTML语法树中的各个类名称添加对应的第一标识符，以通过第一标识符唯一表征该待处理组件。当待处理组件的样式隔离类型为共享类型时，则表明该待处理组件的样式可以影响其他页面或者组件，但其他页面或者组件的样式不能影响到该待处理组件，因此，对于样式隔离类型为共享类型的待处理组件，可以为HTML语法树中的各个类名称添加对应的第二标识符，以保持该待处理组件的唯一性，同时，保留HTML语法树中各个类名称，以使得该待处理组件能够被样式选中。

可选地，当确定待处理组件的类名为动态类名时，由于不能进行静态分析，因此可以在进行第一样式隔离处理时对HTML语法树包覆预设函数，通过调用预设函数使得代码运行时能够进行动态处理，进而通过调用预设函数并且按照待处理组件的样式隔离类型对应的预设隔离规则对HTML语法树进行第一样式隔离处理，其中，对于动态类名的待处理组件，除过调用了预设函数之外，根据样式隔离类型对应的预设隔离规则进行第一样式隔离处理的实现方式与静态类名的相类似，在此不再赘述。另外，预设函数的目的是为了设定代码运行过程中能够进行动态处理，预设函数的具体内容可以根据实际工况设置，本实施例对此不作限定。

通过上述实施例的描述可知，本申请实施例提供的小程序处理方法，根据待处理数据的WXSS配置对HTML语法树基于相应的样式隔离规则进行转化处理，针对待处理数据自身特点设置了相应的处理方式，以克服WXSS与CSS存在的一些差异，从而能够使得渲染后得到的网页与小程序中的对应页面在样式等内容上保持一致。

另外，在对HTML语法树的转化处理中，待处理组件可能还存在一些特殊的样式。比如，对于带有“～”前缀的类名，由于该样式实质为全局样式，则可以直接将该前缀进行删除。对于带有“^”前缀的类名，则可以在转化处理之后，将该类名的祖先组件对应的样式也复制至对应的组件中。而对于带有“external classes”关键字的类名，可以直接声明该类名为props属性，以通过props属性进行父组件至子组件的传递，待传递至子组件时，利用动态类名的方式对相应的待处理组件进行转化处理。

上述实施例描述了根据待处理数据的WXSS配置对HTML语法树基于相应的样式隔离规则进行转化处理的实现方式。下面针对同一待处理数据，对根据待处理数据的WXSS配置对CSS语法树基于相应的样式隔离规则进行转化处理的实现方式进行详细描述。

图5为本申请实施例提供的又一种小程序处理方法的流程示意图。如图5所示，本实施例提供的小程序处理方法中根据待处理数据的WXSS配置对CSS语法树基于相应的样式隔离规则进行转化处理，包括：

S501：根据预设单位转化规则将小程序的自定义尺寸单位转化为浏览器尺寸单位。

根据预设单位转化规则将小程序的自定义尺寸单位进行转化，以转化为浏览器尺寸单位。预设单位转化规则可以根据转化前后对应的具体的尺寸单位进行设置，对此，本实施例不作限定。例如，小程序的自定义尺寸单位为rpx单位，浏览器尺寸单位为vw单位，则rpx单位与vw单位之间的转化规则即为预设单位转化规则。另外，本实施例对于小程序的自定义尺寸单位以及浏览器尺寸单位各自对应的具体单位不作限定。

S502：判断待处理数据是否为待处理页面。

在进行单位转化后，对CSS语法树中的待处理数据为待处理页面还是待处理组件进行判断，当判断待处理数据为待处理页面时，执行步骤S503。反之，当经过判断确定待处理数据非待处理页面，而为待处理组件时，执行步骤S504和步骤S505。

S503：将CSS语法树中所有的标签选择器编译为预设类名，并将待处理页面对应的页面选择器编译为携带第一预设元素的类选择器，以得到转化处理后的CSS语法树。

当确定待处理数据为待处理页面时，根据待处理数据的WXSS配置对CSS语法树基于相应的样式隔离规则进行转化处理的实现方式如步骤S503所示。具体地，将CSS语法树中所有的标签选择器编译为前述实施例中为自定义原始添加的预设类名。例如，编译前为：view{

color:red；

}；

编译后为：.tag-view{

color:red；

}。

并且，还将待处理页面对应的页面选择器编译为携带第一预设元素的类选择器，从而得到转化处理后的CSS语法树。

S504：删除待处理组件的所有选择器，并根据WXSS配置对待处理组件对应的CSS语法树进行第二样式隔离处理。

S505：将待处理组件的组件选择器编译为携带第二预设元素的类选择器，以得到转化处理后的CSS语法树。

当确定待处理数据为待处理组件时，根据待处理数据的WXSS配置对CSS语法树基于相应的样式隔离规则进行转化处理的实现方式如步骤S504和步骤S505所示。具体地，首先删除待处理组件的所有选择器，比如删除待处理组件的id选择器、元素选择器、后代选择器、子元素选择器，然后根据WXSS配置对该待处理组件对应的CSS语法树进行第二样式隔离处理。

例如，在根据WXSS配置确定了待处理组件对应的样式隔离类型之后，针对样式隔离类型的不同，对待处理组件对应的CSS语法树进行第二样式隔离处理。具体地，当待处理组件的样式隔离类型为全局类型时，对于CSS语法树的处理方式对HTML语法树的处理方式类似，保留CSS语法树中的各个类选择器。当待处理组件的样式隔离类型为单一类型或者共享类型时，则可以为CSS语法树中的各个类选择器添加对应的第一标识符或者第二标识符，比如，待处理组件的样式隔离类型为单一类型，则为CSS语法树中的各个类选择器添加第一标识符，当待处理组件的样式隔离类型为共享类型，则为CSS语法树中的各个类选择器添加第二标识符。其中，第一标识符和第二标识符在前述对于该待处理组件的HTML语法树的转化处理中已进行描述，在此不再赘述。

在对CSS语法树进行第二样式隔离处理之后，进一步地，将待处理组件的组件选择器编译为携带第二预设元素的类选择器，从而得到转化处理后的CSS语法树。其中，第二预设元素为前述实施例中为待处理组件的HTML语法树的外层添加的相应数据。

通过上述实施例的描述可知，本申请实施例提供的小程序处理方法，结合待处理数据自身特点以及对HTML语法树的转化处理中设置的一些数据，针对同一待处理数据，根据该待处理数据的WXSS配置对CSS语法树基于相应的样式隔离规则进行转化处理，克服WXSS至CSS转化过程中存在的一些差异，从而能够使得渲染后得到的网页与小程序中的对应页面在样式等内容上保持一致。

如前述实施例描述，待处理数据的WXSS配置可以控制对HTML语法树和CSS语法树转化处理过程中样式隔离规则的具体内容。而待处理数据的WXSS配置可能存在于待处理数据的编程语言文件和/或文本格式文件中。在一种可能的设计中，在步骤S103根据WXSS配置对HTML语法树和CSS语法树分别基于相应的样式隔离规则进行转化处理之前，还可以包括如图6所示的确定待处理数据的WXSS配置的步骤。图6为本申请实施例提供的又一种小程序处理方法的流程示意图。如图6所示，本实施例提供的小程序处理方法，包括：

S601：获取与待处理数据具有依赖关系的所有编程语言文件和所有文本格式文件。

编程语言文件，例如JS文件，用于描述小程序的页面逻辑关系以及一些配置。文本格式文件，例如JSON文件，用于描述小程序的页面或者组件的配置。本步骤获取与待处理数据具有依赖关系的所有编程语言文件和所有文本格式文件的原理及方式，与前述实施例中步骤S101获取与待处理数据具有依赖关系的所有WXML文件和所有WXSS文件相类似，不同的是，本步骤获取的是所有编程语言文件和所以文本格式文件，但依赖关系相同，详细过程可参考前述实施例，在此不再赘述。另外，可以理解的是，编程语言文件和文本格式文件均是以代码的形式存在。

S602：根据预设解析工具分别对所有编程语言文件和所有文本格式文件进行语法解析，以生成各自对应的编程语法树。

在获取到所有的编程语言文件和所有文本格式文件之后，利用预设解析工具分别对所有的编程语言文件和所有的文本格式文件进行语法解析，以生成各自对应的编程语法树。具体地，对所有的编程语言文件进行语法解析，生成编程语言文件对应的编程语法树，例如，对所有的JS文件解析，生成Java Script语法树。对所有的文本格式文件进行语法解析，生成文本格式文件对应的编程语法树，例如，对所有的JSON文件进行语法解析，生成Java Script Object语法树。

其中，预设解析工具与前述实施例中步骤S102中对WXML文件和WXSS文件进行语法解析的预设解析工具相同。

S603：从各编程语法树中读取所有WXSS文件的相应配置，以得到WXSS配置。

从生成的各编程语法树中直接读取与待处理数据的所有WXSS文件相关的所有相应配置，读取到的这些配置即为待处理数据的WXSS配置，从而得到WXSS配置，进而可以根据WXSS配置对待处理数据的HTML语法树和CSS语法树进行相应的转化处理。

本申请实施例提供的小程序处理方法，在根据待处理数据的WXSS配置对HTML语法树和CSS语法树分别基于相应的样式隔离规则进行转化处理之前，还包括获得WXSS配置的步骤。首先获取与待处理数据具有依赖关系的所有编程语言文件和所有格式文件，然后利用预设解析工具分别对所有编程语言文件和所有文本格式文件进行语法解析，生成各自对应的编程语法树。最后从各编程语法树中读取与所有WXSS文件相关的相应配置，获得待处理数据的WXSS配置。从而，根据WXSS配置对HTML语法树和CSS语法树分别基于相应的样式隔离规则进行转化处理，以消除WXSS与CSS之间的差异。

下述为本申请装置实施例，可以用于执行本申请对应的方法实施例。对于本申请装置实施例中未披露的细节，请参照本申请对应的方法实施例。

图7为本申请实施例提供的一种小程序处理装置的结构示意图。如图7所示，本实施例提供的小程序处理装置700，包括：

获取模块701，用于获取与待处理数据具有依赖关系的所有微信标记语言WXML文件以及所有微信层叠样式表WXSS文件，待处理数据通过预设代码表征小程序的待处理页面或待处理组件。

第一处理模块702，用于根据预设解析工具对所有WXML文件和所有WXSS文件进行语法解析，生成对应的超级文本标记语言HTML语法树和层叠样式表CSS语法树。

第二处理模块703，用于根据待处理数据的WXSS配置对HTML语法树以及CSS语法树分别基于相应的样式隔离规则进行转化处理，并根据转化处理后的HTML语法树和CSS语法树分别输出JSX文件和CSS文件。

在一种可能的设计中，第二处理模块703包括如图8所示的装置，图8为本申请实施例提供的一种处理模块的结构示意图。如图8所示，本实施例提供的第二处理模块703，包括：

第一处理子模块7031，用于为待处理数据中的每个自定义元素添加预设类名；

第二处理子模块7032，用于若确定HTML语法树中的待处理数据为待处理页面，则在HTML语法树的外层添加第一预设元素，以得到转化处理后的HTML语法树；

第三处理子模块7033，用于若确定HTML语法树中的待处理数据为待处理组件，则在HTML语法树的外层添加第二预设元素，并根据WXSS配置对待处理组件对应的HTML语法树进行第一样式隔离处理，以得到转化处理后的HTML语法树。

在一种可能的设计中，若确定待处理组件的类名为静态类名，第三处理子模块7033，具体用于：

根据WXSS配置确定待处理组件对应的样式隔离类型，样式隔离类型包括全局类型、单一类型以及共享类型；

按照样式隔离类型对应的预设隔离规则对HTML语法树进行第一样式隔离处理。

在一种可能的设计中，第三处理子模块7033，还具体用于：

当样式隔离类型为全局类型时，保留HTML语法树中的各个类名称不变；

当样式隔离类型为单一类型时，为HTML语法树中的各个类名称添加对应的第一标识符，以通过第一标识符唯一表征对应的待处理组件；

当样式隔离类型为共享类型时，为HTML语法树中的各个类名称添加对应的第二标识符且保留各个类名称。

在一种可能的设计中，若确定待处理组件的类名为动态类名，第三处理子模块7033，用于：

调用预设函数并按照样式隔离类型对应的预设隔离规则对HTML语法树进行第一样式隔离处理。

在一种可能的设计中，若确定CSS语法树中的待处理数据为待处理页面，第二处理模块703，还具体用于：

将CSS语法树中所有的标签选择器编译为预设类名，并将待处理页面对应的页面选择器编译为携带第一预设元素的类选择器，以得到转化处理后的CSS语法树。

在一种可能的设计中，若确定CSS语法树中的待处理数据为待处理组件，第二处理模块703，还包括：

第四处理子模块，用于删除待处理组件的所有选择器，并根据WXSS配置对待处理组件对应的CSS语法树进行第二样式隔离处理；

第五处理子模块，用于将待处理组件的组件选择器编译为携带第二预设元素的类选择器，以得到转化处理后的CSS语法树。

在一种可能的设计中，第四处理子模块，具体用于：

当样式隔离类型为全局类型时，保留CSS语法树中的各个类选择器；

当样式隔离类型为单一类型或者共享类型时，为CSS语法树中的各个类选择器对应添加第一标识符或者第二标识符。

在一种可能的设计中，小程序处理装置700，还包括：单位转化模块。该单位转化模块，用于：

根据预设单位转化规则将小程序的自定义尺寸单位转化为浏览器尺寸单位。

在一种可能的设计中，小程序处理装置700，还包括：第三处理模块。该第三处理模块，用于：

获取与待处理数据具有依赖关系的所有编程语言文件和所有文本格式文件；

根据预设解析工具分别对所有编程语言文件和所有文本格式文件进行语法解析，以生成各自对应的编程语法树；

从各编程语法树中读取所有WXSS文件的相应配置，以得到WXSS配置。

在一种可能的设计中，小程序处理装置700，还包括：渲染模块。该渲染模块，用于：

利用预设React框架对JSX文件和CSS文件进行渲染，以得到待处理数据对应的网页。

值得说明的，上述各实施例提供的小程序处理装置，可用于执行上述任一实施例提供的小程序处理方法中的各步骤，具体实现方式和技术效果类似，这里不再赘述。

本申请所提供的上述各装置实施例仅仅是示意性的，其中的模块划分仅仅是一种逻辑功能划分，实际实现时可以有另外的划分方式。例如多个模块可以结合或者可以集成到另一个系统。各个模块相互之间的耦合可以是通过一些接口实现，这些接口通常是电性通信接口，但是也不排除可能是机械接口或其它的形式接口。因此，作为分离部件说明的模块可以是或者也可以不是物理上分开的，既可以位于一个地方，也可以分布到同一个或不同设备的不同位置上。

图9为本申请实施例提供的一种电子设备的结构示意图。如图9所示，该电子设备800可以包括：至少一个处理器801和存储器802。图9示出的是以一个处理器为例的电子设备。

存储器802，用于存放处理器801的程序。具体地，程序可以包括程序代码，程序代码包括计算机操作指令。

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

处理器801配置为用于执行存储器802存储的计算机程序，以实现以上各方法实施例中小程序处理方法中的各步骤。

其中，处理器801可能是一个中央处理器(central processing unit，简称为CPU)，或者是特定集成电路(application specific integrated circuit，简称为ASIC)，或者是被配置成实施本申请实施例的一个或多个集成电路。

可选地，存储器802既可以是独立的，也可以跟处理器801集成在一起。当存储器802是独立于处理器801之外的器件时，电子设备800，还可以包括：

总线803，用于连接处理器801以及存储器802。总线可以是工业标准体系结构(industry standard architecture，简称为ISA)总线、外部设备互连(peripheralcomponent，PCI)总线或扩展工业标准体系结构(extended industry standardarchitecture，EISA)总线等。总线可以分为地址总线、数据总线、控制总线等，但并不表示仅有一根总线或一种类型的总线。

可选的，在具体实现上，如果存储器802和处理器801集成在一块芯片上实现，则存储器802和处理器801可以通过内部接口完成通信。

本申请还提供了一种计算机可读存储介质，该计算机可读存储介质可以包括：U盘、移动硬盘、只读存储器(read-only memory，ROM)、随机存取存储器(random accessmemory，RAM)、磁盘或者光盘等各种可以存储程序代码的介质，具体的，该计算机可读存储介质中存储有计算机程序，当电子设备的至少一个处理器执行该计算机程序时，电子设备执行上述的各种实施方式提供的小程序处理方法的各个步骤。

本申请实施例还提供一种计算机程序产品，该计算机程序产品包括计算机程序，该计算机程序存储在可读存储介质中。电子设备的至少一个处理器可以从可读存储介质读取该计算机程序，至少一个处理器执行该计算机程序使得电子设备实施上述的各种实施方式提供的小程序处理方法的各个步骤。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本申请的其它实施方案。本申请旨在涵盖本申请的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本申请的一般性原理并包括本申请未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本申请的真正范围和精神由权利要求书指出。

应当理解的是，本申请并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本申请的范围仅由所附的权利要求书来限制。

Claims

1.一种小程序处理方法，其特征在于，包括：

2.根据权利要求1所述的小程序处理方法，其特征在于，所述根据所述待处理数据的WXSS配置对所述HTML语法树基于相应的样式隔离规则进行转化处理，包括：

为所述待处理数据中的每个自定义元素添加预设类名；

3.根据权利要求2所述的小程序处理方法，其特征在于，若确定所述待处理组件的类名为静态类名，所述根据所述WXSS配置对所述待处理组件对应的所述HTML语法树进行第一样式隔离处理，包括：

4.根据权利要求3所述的小程序处理方法，其特征在于，所述按照所述样式隔离类型对应的预设隔离规则对所述HTML语法树进行所述第一样式隔离处理，包括：

5.根据权利要求3所述的小程序处理方法，其特征在于，若确定所述待处理组件的类名为动态类名，调用预设函数并按照所述样式隔离类型对应的所述预设隔离规则对所述HTML语法树进行所述第一样式隔离处理。

6.根据权利要求2所述的小程序处理方法，其特征在于，若确定所述CSS语法树中的所述待处理数据为所述待处理页面，所述根据所述待处理数据的WXSS配置对所述CSS语法树基于相应的样式隔离规则进行转化处理，包括：

7.根据权利要求4所述的小程序处理方法，其特征在于，若确定所述CSS语法树中的所述待处理数据为所述待处理组件，所述根据所述待处理数据的WXSS配置对所述CSS语法树基于相应的样式隔离规则进行转化处理，包括：

8.根据权利要求7所述的小程序处理方法，其特征在于，所述根据所述WXSS配置对所述待处理组件对应的所述CSS语法树进行第二样式隔离处理，包括：

9.根据权利要求1-8任一项所述的小程序处理方法，其特征在于，在所述根据所述待处理数据的WXSS配置对所述CSS语法树进行转化处理之前，还包括：

10.根据权利要求1-8任一项所述的小程序处理方法，其特征在于，在所述根据所述待处理数据的WXSS配置对所述HTML语法树以及所述CSS语法树分别基于相应的样式隔离规则进行转化处理之前，还包括：

11.根据权利要求1-8任一项所述的小程序处理方法，其特征在于，在所述根据转化处理后的所述HTML语法树和所述CSS语法树分别输出JSX文件和CSS文件之后，还包括：

12.一种小程序处理装置，其特征在于，包括：

13.一种电子设备，其特征在于，包括：

处理器；以及

存储器，用于存储所述处理器的计算机程序；

其中，所述处理器配置为经由执行所述计算机程序来执行权利要求1至11任一项所述的小程序处理方法。

14.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至11任一项所述的小程序处理方法。

15.一种计算机程序产品，包括计算机程序，其特征在于，该计算机程序被处理器执行时实现权利要求1至11任一项所述的小程序处理方法。