一种页面样式转换方法、装置、终端设备及存储介质与流程

本发明涉及计算机技术领域，尤其涉及一种页面样式转换方法、装置、终端设备及存储介质。

背景技术：

随着移动互联网的日益兴起，用户对在手机、平板、电脑等设备上通过不同平台的页面进行新闻阅读、视频观看、在线购物、即时通信等的需求越来越复杂和多样化。而且，由于不同平台所支持的页面格式不同，在开发一个页面时，通常需要针对不同的运行平台，分别开发不同平台所支持的多个不同页面。

例如，假设针对一个已经开发好的rn(reactnative)页面，需要在第三方平台小程序中展示同样的页面，则需要再次单独开发第三方平台小程序所支持的页面格式，从而使得页面开发效率比较低，开发成本较大。

技术实现要素：

本发明实施例提供一种页面样式转换方法、装置、终端设备及存储介质，以解决现有的页面开发成本较高的问题。

为了解决上述技术问题，本发明是这样实现的：

第一方面，本发明实施例提供了一种页面样式转换方法，包括：

获取rn页面代码的抽象语法树；

遍历所述抽象语法树中的每个节点，获取所述rn页面的样式节点；

根据小程序页面支持的样式，对所述样式节点进行样式转换处理，得到目标样式节点；

以所述小程序页面支持的文件格式保存所述目标样式节点，得到所述小程序页面的样式文件；

其中，所述样式转换处理包括命名规则转换、样式值单位转换、样式值处理方式转换中的至少一种。

可选地，所述根据小程序页面支持的样式，对所述样式节点进行样式转换处理，得到目标样式节点的步骤，包括：

响应于所述样式节点为封装样式节点，对所述封装样式节点所引用的样式字典进行样式转换处理，并调整所述封装样式节点中针对所述样式字典的引用方式；

响应于所述样式节点为未封装样式节点，对所述未封装样式节点中的样式键值对进行样式转换处理。

可选地，所述响应于所述样式节点为封装样式节点，对所述封装样式节点所引用的样式字典进行样式转换处理，并调整所述封装样式节点中针对所述样式字典的引用方式的步骤，包括：

响应于所述样式节点为封装样式节点，对所述封装样式节点所引用的样式字典中包含的样式键值对进行样式转换处理，得到第一样式键值对；

针对每个所述第一样式键值对，根据所述样式字典对应的样式变量名、所述第一样式键值对对应的封装样式名，以及预设的连接符号，生成样式转换处理后的目标封装样式名并保存；

根据所述目标封装样式名，调整所述封装样式节点中针对所述样式字典的引用方式。

可选地，所述对所述未封装样式节点中的样式键值对进行样式转换处理的步骤，包括：

遍历每个所述样式键值对，将所述样式键值对中样式名的命名规则调整为层叠样式表样式规则；

和/或，针对所述样式键值对中的每个样式值，响应于所述样式值为数字，设置所述述样式值的单位；

和/或，根据所述样式键值对中每个样式值的存在形式，将所述样式值处理为所述小程序页面支持的格式。

可选地，所述以所述小程序页面支持的文件格式保存所述目标样式节点，得到所述小程序页面的样式文件的步骤，包括：

响应于所述目标样式节点为封装样式节点，将所述目标样式节点按照层叠样式表格式进行拼接并保存为所述小程序页面支持的样式表文件；

响应于所述目标样式节点为未封装样式节点，将所述目标样式节点保存为所述小程序页面支持的的标记语言文件。

可选地，在所述以所述小程序页面支持的文件格式保存所述目标样式节点，得到所述小程序页面的样式文件的步骤之后，还包括：

将所述样式文件拉取到所述rn页面的布局文件中，并以所述样式文件替换所述布局文件中的原始样式文件，生成与所述rn页面对应的小程序页面。

第二方面，本发明实施例提供了一种页面样式转换装置，包括：

抽象语法树获取模块，用于获取rn页面代码的抽象语法树；

样式节点获取模块，用于遍历所述抽象语法树中的每个节点，获取所述rn页面的样式节点；

样式转换处理模块，用于根据小程序页面支持的样式，对所述样式节点进行样式转换处理，得到目标样式节点；

样式文件生成模块，用于以所述小程序页面支持的文件格式保存所述目标样式节点，得到所述小程序页面的样式文件；

其中，所述样式转换处理包括命名规则转换、样式值单位转换、样式值处理方式转换中的至少一种。

可选地，所述样式转换处理模块，包括：

封装样式转换子模块，用于响应于所述样式节点为封装样式节点，对所述封装样式节点所引用的样式字典进行样式转换处理，并调整所述封装样式节点中针对所述样式字典的引用方式；

未封装样式转换子模块，用于响应于所述样式节点为未封装样式节点，对所述未封装样式节点中的样式键值对进行样式转换处理。

可选地，所述封装样式转换子模块，包括：

样式键值对转换单元，用于响应于所述样式节点为封装样式节点，对所述封装样式节点所引用的样式字典中包含的样式键值对进行样式转换处理，得到第一样式键值对；

封装样式名转换单元，用于针对每个所述第一样式键值对，根据所述样式字典对应的样式变量名、所述第一样式键值对对应的封装样式名，以及预设的连接符号，生成样式转换处理后的目标封装样式名并保存；

引用方式调整单元，用于根据所述目标封装样式名，调整所述封装样式节点中针对所述样式字典的引用方式。

可选地，所述未封装样式转换子模块，包括：

命名规则调整单元，用于遍历每个所述样式键值对，将所述样式键值对中样式名的命名规则调整为层叠样式表样式规则；

和/或，样式值单位调整单元，用于针对所述样式键值对中的每个样式值，响应于所述样式值为数字，设置所述述样式值的单位；

和/或，样式值形式处理单元，用于根据所述样式键值对中每个样式值的存在形式，将所述样式值处理为所述小程序页面支持的格式。

可选地，所述样式文件生成模块，包括：

封装样式文件生成子模块，用于响应于所述目标样式节点为封装样式节点，将所述目标样式节点按照层叠样式表格式进行拼接并保存为所述小程序页面支持的样式表文件；

未封装样式文件生成子模块，用于响应于所述目标样式节点为未封装样式节点，将所述目标样式节点保存为所述小程序页面支持的的标记语言文件。

可选地，所述装置还包括：

小程序页面生成模块，用于将所述样式文件拉取到所述rn页面的布局文件中，并以所述样式文件替换所述布局文件中的原始样式文件，生成与所述rn页面对应的小程序页面。

第三方面，本发明实施例另外提供了一种终端设备，包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现如前述的页面样式转换方法的步骤。

第四方面，本发明实施例另外提供了一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如前述的页面样式转换方法的步骤。

在本发明实施例中，通过获取rn页面代码的抽象语法树；遍历所述抽象语法树中的每个节点，获取所述rn页面的样式节点；根据小程序页面支持的样式，对所述样式节点进行样式转换处理，得到目标样式节点；以所述小程序页面支持的文件格式保存所述目标样式节点，得到所述小程序页面的样式文件；其中，所述样式转换处理包括命名规则转换、样式值单位转换、样式值处理方式转换中的至少一种。从而取得了提高页面开发效率，降低页面开发成本的有益效果。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

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

图1是本发明实施例中的一种页面样式转换方法的步骤流程图；

图2是本发明实施例中的另一种页面样式转换方法的步骤流程图；

图2a是本发明实施例中的一种rn页面样式转换过程的示意图；

图3是本发明实施例中的一种页面样式转换装置的结构示意图；

图4是本发明实施例中的另一种页面样式转换装置的结构示意图；

图5是本发明实施例中的一种终端设备的硬件结构示意图。

具体实施方式

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

参照图1，示出了本发明实施例中一种页面样式转换方法的步骤流程图。

步骤110，获取rn页面代码的抽象语法树。

在本发明实施例中，为了避免针对一个页面对应在不同平台分别开发不同样式的页面，可以直接基于已开发好的rn页面进行样式转换，从而在rn页面的基础上得到目标平台所支持的小程序页面，进而可以提高小程序页面的生成效率。

而且，为了针对rn页面进行样式转换，则需要获取rn页面的源代码中所有样式相关的代码，进而针对样式相关代码进行转换。那么为了方便查找rn页面中的样式相关代码，则可以先获取rn页面代码的抽象语法树。

其中，抽象语法树(abstractsyntaxtree，ast)是源代码的抽象语法结构的树状表现形式，这里特指编程语言的源代码。树上的每个节点都表示源代码中的一种结构。在本发明实施例中，可以通过任何可用方式获取rn页面代码的抽象语法树，对此本发明实施例不加以限定。

步骤120，遍历所述抽象语法树中的每个节点，获取所述rn页面的样式节点。

在获取得到rn页面的抽象语法树之后，则可以遍历抽象语法树中的每个节点，从而获取rn页面的样式节点。其中的样式节点可以理解为包含样式相关代码的节点。

具体地，可以遍历抽象语法树中的每个节点，并检测每个节点中是否包含样式相关代码，如果包含则可以确认相应的节点为样式节点，否则可以确认相应的节点不是样式节点。

步骤130，根据小程序页面支持的样式，对所述样式节点进行样式转换处理，得到目标样式节点；其中，所述样式转换处理包括命名规则转换、样式值单位转换、样式值处理方式转换中的至少一种。

在获取得到rn页面的样式节点之后，为了将rn页面转换为另一平台支持的样式下的小程序页面，则可以根据小程序页面支持的样式，对所述样式节点中的原样式代码块进行样式转换处理，从而得到满足小程序页面所支持的样式的目标样式代码块。

而且，由于rn页面和小程序页面所支持的样式不同，具体的样式转换处理过程也会有所不同。一般而言，不同格式在命名规则、样式值单位、不同数据形式的样式值的处理方式等方面可能存在差别。因此，在本发明实施例中，根据rn页面的样式，以及小程序页面所支持的样式，可以设置样式转换处理包括但不限于命名规则转换、样式值单位转换、样式值处理方式转换中的至少一种。

以rn页面为例，假设当前需要将一rn页面转换为微信小程序支持的样式。其中，rn是在react基础上发展而来，目的让程序员能够真正用javascript(爪哇脚本)去开发移动终端的app(application，应用程序)，使得页面像浏览web(网页)一样，但是同时具有native的流程与操作体验。

那么rn的样式格式与微信小程序的样式格式可以有以下几种不同：

1、rn样式格式是驼峰命名规则，而微信小程序样式格式为css(cascadingstylesheets，层叠样式表)样式规则；

2、rn样式的样式值通常不写单位，而微信小程序样式的样式值需要写单位；

3、rn样式的样式值支持表达式、变量、数组等多种形式，而微信小程序的样式值则需要单独处理不同形式的格式。

因此，在本发明实施例中，如果rn页面为rn样式，小程序页面为微信小程序支持的样式，那么在对每个样式节点中的原样式代码块进行样式转换处理时，具体则可以包括以下内容：

1、命名规则转换，例如，判断所有样式节点中的每个样式名中是否包含大写字母，若包含，将该大写字母替换成小写字母并在前面添加一个“-”。

2、样式值单位转换。例如，判断所有样式节点中的每个样式值是否为数值，若样式值是数值且样式值不是没有单位的特殊样式，则可以将样式值由数值改成字符串并拼接相应的单位。

3、样式值处理方式转换。例如，判断所有样式节点中的每个样式值是否为表达式，若是表达式，需要增加表达式的计算方法以执行表达式的计算。

步骤140，以所述小程序页面支持的文件格式保存所述目标样式节点，得到所述小程序页面的样式文件。

在本发明实施例中，为了实现页面的样式转换，只需修改其中的样式相关代码块即可。因此在获取得到样式转换处理后的目标样式代码块之后，为了避免不同样式之间的冲突，则可以小程序页面支持的文件格式输出目标样式代码块，得到所述小程序页面的样式文件。

例如，对于前述的rn样式页面，在将其中的原样式代码块转换成微信小程序支持的目标样式代码块之后，则可以将目标样式代码块另外输出并保存为微信小程序支持的样式文件，例如可以为wxcss(weixinstylesheets，微信样式表)文件。

在获取得到小程序页面的样式文件之后，通过将小程序页面的样式文件拉取到rn页面代码中，替换其中与各个样式文件对应的样式代码块，则可以得到与rn页面对应的小程序页面，从而实现在rn页面代码的基础上直接进行二次开发，从而得到小程序支持的相应页面，而无需重新调整布局，可以有效降低小程序页面的开发成本。而且，生成的小程序页面代码也可以支持二次开发，便于迭代。

在本发明实施例中，通过获取rn页面代码的抽象语法树；遍历所述抽象语法树中的每个节点，获取所述rn页面的样式节点；根据小程序页面支持的样式，对所述样式节点进行样式转换处理，得到目标样式节点；以所述小程序页面支持的文件格式保存所述目标样式节点，得到所述小程序页面的样式文件；其中，所述样式转换处理包括命名规则转换、样式值单位转换、样式值处理方式转换中的至少一种。从而取得了提高页面开发效率，降低页面开发成本的有益效果。

参照图2，在本发明实施例中，所述步骤130进一步可以包括：

步骤131，响应于所述样式节点为封装样式节点，对所述封装样式节点所引用的样式字典进行样式转换处理，并且调整所述封装样式节点中针对所述样式字典的引用方式；

步骤132，响应于所述样式节点为未封装样式节点，对所述未封装样式节点中的样式键值对进行样式转换处理。

另外，在实际应用中，rn页面对应的源代码中可能包含封装代码和/或未封装代码。其中，封装就是将数据与操作数据的源代码进行有机的结合，形成“类”，其中数据和函数都是类的成员。在编程中大部分时候可以用一个函数调用(api)将一个复杂过程的细节屏蔽起来，用户不需要了解细节，只需要调用该函数就能实现相应的行为。通过封装可以达到模块化编程，程序员分工合作，各自负责维护自己负责模块对象细节的作用。

而且，在封装样式节点中，一般是通过引用key-value(键值对)字典的方式进行样式定义。例如，对于前述的rn页面，目前rn页面支持的样式通常有两种：一种是jsx(一种javascript的语法扩展，运用于react架构中)引用字典方式的封装样式，另一种是通过直接指定jsx属性方式的未封装样式。其中，key-value字典的key值通常是当前字典的样式变量名，value通常是一个字典格式，value字典中则可以包含封装样式名以及该封装样式名对应的封装样式值。

例如，假设某一key-value字典如下所示：

style1＝{‘backgroundcolor’:‘#fff’,‘width’:‘100’,‘flex’:‘1’}，

那么此时该key-value字典的key值即为“style1”，value即为{‘backgroundcolor’:‘#fff’,‘width’:‘100’,‘flex’:‘1’}，value中包含了封装样式名backgroundcolor、width和flex，且各个封装样式名对应的封装样式值依次为#fff、100和1。

如前述，在实际应用中，对于封装样式和未封装样式的数据结构不同，所以具体在进行样式转换处理时的执行过程也会有所差别。因此，在本发明实施例中，在进行样式转换处理之前，可以先判断每个样式节点的类别，如果当前的样式节点为封装样式节点，则可以对相应的封装样式节点所引用的样式字典进行样式转换处理，并且调整所述封装样式节点中针对所述样式字典的引用方式；而如果当前的样式节点为未封装样式节点，则可以直接对相应的未封装样式节点中的样式键值对进行样式转换处理。

例如，封装样式节点所引用的样式字典进行样式转换处理时，则需要根据小程序页面所支持的样式，将样式字典对应的key值，以及其value中包含的封装样式名以及封装样式值分别进行样式转换，而且在针对样式字典转换完成后，还需要相应地调整封装样式节点中针对相应的样式字典的引用方式。

其中，对样式字典进行样式转换处理时，可以仅转换样式字典中包含的key值以及value值，而不调整样式字典本身的格式，也即经样式转换处理后，仍然可以得到一个key-value字典；或者，也可以仅保留样式字典的value部分，且为了避免不同样式字典进行样式转换处理后出现数据混乱，还可以基于经样式转换处理后的样式字典key值和封装样式名，重新生成每个封装样式值的样式名。

例如，对于前述的样式字典style1＝{‘backgroundcolor’:‘#fff’,‘width’:‘100’,‘flex’:‘1’}，进行样式转换处理时，可以仅转换样式字典中包含的key值以及value值，而不调整样式字典本身的格式，那么可以得到经样式转换处理后的key-value字典为style1＝{‘background-color’:‘#fff’,‘width’:‘100px’,‘flex’:‘1’}；而如果仅保留样式字典的value部分，且为了避免不同样式字典进行样式转换处理后出现数据混乱，还可以基于经样式转换处理后的样式字典key值和封装样式名，重新生成每个封装样式值的样式名，那么此时得到经样式转换处理后的封装样式名和封装样式值可以分别为style1_background-color＝#fff，style1_width＝100px，style1_flex＝1。

而且，对于封装样式节点而言，如果其引用的样式字典本身发生变化，那么为了不影响封装样式节点对样式转换后的样式字典的引用，则可以相应地在样式字典进行样式转换处理后，调整相应的封装样式节点中对相应样式字典的引用方式。具体的，可以将封装样式节点中针对未经样式转换前的样式字典的引用，调整为对经样式转换后的样式字典的引用，并且可以相应的调整样式引用方式。

例如，假设样式转换的目标为微信小程序所支持的小程序页面，那么则可以将引用封装样式名由“样式变量名.封装样式名”改成“样式变量名_封装样式名”。例如，如果需要引用上述样式字典中的背景色，则可以将引用封装样式名由“style1.backgroundcolor”调整为“style1_background-color”。同时还可以将样式引用方式调整为class类型，等等。

而如果当前的样式节点为未封装样式节点，由于未封装样式是通过直接设定jsx的属性去指定样式，因此需要遍历所有jsx的所有属性，并且找出样式相关的属性，从而获取所有样式键值对，进而判断每个样式键值对是否符合小程序页面所支持的样式，若不符合小程序页面所支持的样式，则可以将相应的样式键值对进行样式转换处理，以转换成小程序页面所支持的样式，而引用方式则可以不变。

其中，对未封装样式节点中的样式键值对进行的样式转换处理，和对封装样式节点中所引用的样式字典对应的value值中包含的样式键值对，也即封装样式名与封装样式值之间的对应关系对进行的样式转换处理的具体样式转换原则相同，当然根据需求也可以自定义为不同的样式转换原则，对此本发明实施例不加以限定。

可选地，在本发明实施例中，所述步骤131进一步可以包括：

步骤1311，响应于所述样式节点为封装样式节点，对所述封装样式节点所引用的样式字典中包含的样式键值对进行样式转换处理，得到第一样式键值对，得到第一样式键值对；

步骤1312，针对每个所述第一样式键值对，根据所述样式字典对应的样式变量名、所述第一样式键值对对应的封装样式名，以及预设的连接符号，生成样式转换处理后的目标封装样式名并保存；

步骤1313，根据所述目标封装样式名，调整所述封装样式节点中针对所述样式字典的引用方式。

如果小程序页面不支持样式字典格式，那么在本发明实施例中，为了对封装样式节点中的样式进行调整，则可以对所述封装样式节点所引用的样式字典中包含的样式键值对进行样式转换处理，得到第一样式键值对，也即对原始的key-value形式的样式字典的value中包含的样式键值对进行样式转换处理，从而得到第一样式键值对。

进一步地，为了区分不同样式字典对应的样式键值对，以避免引用混乱，则可以针对每个第一样式键值对，根据相应的样式字典对应的样式变量名、所述第一样式键值对对应的封装样式名，以及预设的连接符号，生成样式转换处理后的目标封装样式名并保存。

其中，预设的连接符号可以根据需求进行预先设置，对此本发明实施例不加以限定。例如，可以设置连接符号为下划线“_”，等等。而且，由于针对原始样式字典中的封装样式值的引用方式为“样式变量名.封装样式名”的形式，因此在本发明实施例，为了避免引用无效或者混乱等，可以避免设置连接符号为“.”。

例如，假设设置连接符号为下划线“_”，那么对于上述的样式字典style1＝{‘backgroundcolor’:‘#fff’,‘width’:‘100’,‘flex’:‘1’}，其中value包含的样式键值对经样式转换处理后可以得到的第一样式键值对可以包括以下内容：

‘background-color’:‘#fff’，‘width’:‘100px’,‘flex’:‘1’。

而且，rn页面可能还对应有样式字典style2＝{‘backgroundcolor’:‘#fff’,‘width’:‘110’,‘flex’:‘1’}，如果单纯以每个经样式转换后的第一样式键值对中的封装样式名进行封装样式值的引用，那么此时存在两个针对宽度的第一样式键值对‘width’:‘100px’、‘width’:‘110px’，从而容易使得在引用‘width’时出现混乱。

因此，在本发明实施例中，为了避免上述问题，可以将重新定义每个第一样式键值对的封装样式名。由上述分析可知，在rn页面对应的代码中，每个样式字典的样式变量名可以唯一性地代表一个样式字典。因此，在本发明实施例中，可以针对每个第一样式键值对，根据相应的样式字典对应的样式变量名、所述第一样式键值对对应的封装样式名，以及预设的连接符号，生成样式转换处理后的目标封装样式名并保存。

例如，假设设置连接符号为下划线“_”，那么对于上述的样式字典style1＝{‘backgroundcolor’:‘#fff’,‘width’:‘100’,‘flex’:‘1’}以及经样式转换后得到的第一样式键值对，可以将每个第一样式键值对的封装样式名调整为“样式变量名_封装样式名”，其中的样式变量名可以为经样式转换处理后的样式变量名，根据需求也可以为原始的未经样式转换处理的样式变量名，对此本发明实施例不加以限定。

例如，对于上述的style1对应的第一样式键值对‘background-color’:‘#fff’中的封装样式名“background-color”调整为目标封装样式名“style1_background-color”，而对于style2对应的第一样式键值对‘background-color’:‘#fff’，则可以将其封装样式名调整为目标封装样式名“style2_background-color”。

进一步地，则可以根据样式转换处理后的目标封装样式名，调整相应的封装样式节点中针对相应样式字典的引用方式。

例如，将引用封装样式名由“样式变量名.封装样式名”改成“样式变量名_封装样式名”，进而可以在相应的封装样式节点中直接替换引用封装样式名。

可选地，在本发明实施例中，所述步骤132进一步可以包括：

步骤1321，遍历每个所述样式键值对，将所述样式键值对中样式名的命名规则调整为层叠样式表样式规则；

和/或，步骤1322，针对所述样式键值对中的每个样式值，响应于所述样式值为数字，设置所述述样式值的单位；

和/或，步骤1323，根据所述样式键值对中每个样式值的存在形式，将所述样式值处理为所述小程序页面支持的格式。

在本发明实施例中，不管是针对封装样式节点还是未封装样式节点，在对其中的样式键值对进行样式转换处理时，根据小程序页面所支持的样式不同，样式转换处理的具体操作也可能会有做不同。

具体的，可以遍历每个所述样式键值对，将所述样式键值对中样式名的命名规则调整为层叠样式表样式规则；和/或，针对所述样式键值对中的每个样式值，响应于所述样式值为数字，设置所述述样式值的单位；和/或，根据所述样式键值对中每个样式值的存在形式，将所述样式值处理为所述小程序页面支持的格式。

例如，在进行命名规则调整时，可以判断所有样式键值对的样式名中是否包含大写字母，若包含大写字母，则可以将该大写字母替换成相应的小写字母并在前面添加一个“-”符号；在进行样式值单位设置时，可以判断所有样式键值对的样式值是否为数字，若是数字，且在排除样式值没有单位的特殊样式情况下，可以将样式值由数字改成字符串并拼接单位。其中，不同数值对应的单位可以根据需求进行预先设置，对此本发明实施例不加以限定。例如，在某些情况下可以设置为长度数值的单位为px(像素，pixel)，等等。

在将样式值处理为所述小程序页面支持的格式时，可以判断所有样式值是否为表达式，若是表达式，需要增加表达式的计算方法去执行表达式的计算；而如果样式值为数组，则可以将数组中的每个元素拆分为单独的样式键值对；而如果样式值为变量，则可以将封装样式节点中变量形式的样式值移动至未封装样式节点中；等等。

例如，假设某一样式值为表达式100-20*2，那么经样式转换处理后，则可以为其中的数值设置单位，同时增加表达式的计算方法，从而得到样式转换后的表达式为calc(100px-20px*2)，其中calc()即为原表达式100-20*2的计算方法。

参照图2，在本发明实施例中，所述步骤140进一步可以包括：

步骤141，响应于所述目标样式节点为封装样式节点，将所述目标样式节点按照层叠样式表格式进行拼接并保存为所述小程序页面支持的样式表文件；

步骤142，响应于所述目标样式节点为未封装样式节点，将所述目标样式节点保存为所述小程序页面支持的的标记语言文件。

在实际应用中，对应于封装样式节点和未封装样式节点的文件格式一般会有所差别。因此，在本发明实施例中，如果所述目标样式节点为封装样式节点，可以将所述目标样式节点按照层叠样式表格式进行拼接并保存为所述小程序页面支持的样式表文件；而如果所述目标样式节点为未封装样式节点，将所述目标样式节点保存为所述小程序页面支持的的标记语言文件。

例如，假设小程序页面为微信小程序页面，那么对于样式转换处理后得到的封装样式节点，可以按照css格式进行拼接并保存为微信小程序页面所支持的样式表文件，也即wxss(weixinstylesheets)文件；对于样式转换处理后得到的未封装样式节点，则可以保存为微信小程序页面所支持的的标记语言文件，也即wxml(weixinmarkuplanguage)文件。

如图2a所示为一种对rn页面进行样式转换的示意图。其中，标记为1的矩形框中为rn页面的封装样式节点，标记为2的矩形框为rn布局的未封装节点，其中标记为3的矩形框中的代码即为rn未封装样式，标记为4的矩形框中即为1中的封装样式节点经样式转换处理后保存得到的小程序封装样式wxss文件，标记为5的矩形框中即为2中的未封装样式节点经样式转换处理后保存得到的小程序布局wxml文件，其中标记为6的矩形框中即为与3对应的样式转换处理后的未封装样式。

参照图2，在本发明实施例中，在所述步骤140之后，还可以包括：

步骤150，将所述样式文件拉取到所述rn页面的布局文件中，并以所述样式文件替换所述布局文件中的原始样式文件，生成与所述rn页面对应的小程序页面。

前述的步骤实现了rn页面样式的转换，得到小程序页面的样式文件，那么为了生成小程序页面，则可以进一步将所述样式文件拉取到所述rn页面的布局文件中，并以所述样式文件替换所述布局文件中的原始样式文件，生成与所述rn页面对应的小程序页面。其中，rn页面的布局文件可以理解为能够生成rn页面所需的全部文件，在布局文件中可以包含rn页面的源代码。

因此，在本发明实施例中，如果rn页面的原始样式文件即为其代码中的样式节点，那么在获取得到小程序页面的样式文件之后，也可以通过小程序页面的样式文件替换rn页面中相应的样式节点，从而直接将rn页面转换为小程序页面。

例如，假设rn页面为rn页面，小程序页面为微信小程序页面，那么此时则可以将样式转换后得到的样式文件替换rn页面对应的源代码中相应的样式节点，从而可以将rn页面转换为微信小程序支持的页面。在本发明实施例中，可以在保存rn页面的基础上，基于rn页面代码进行二次开发，从而得到不同平台支持的不同样式下的页面。

在本发明实施例中，响应于所述样式节点为封装样式节点，对所述封装样式节点所引用的样式字典进行样式转换处理，并调整所述封装样式节点中针对所述样式字典的引用方式；响应于所述样式节点为未封装样式节点，对所述未封装样式节点中的样式键值对进行样式转换处理。并且，响应于所述样式节点为封装样式节点，对所述封装样式节点所引用的样式字典中包含的样式键值对进行样式转换处理，得到第一样式键值对；针对每个所述第一样式键值对，根据所述样式字典对应的样式变量名、所述第一样式键值对对应的封装样式名，以及预设的连接符号，生成样式转换处理后的目标封装样式名并保存；根据所述目标封装样式名，调整所述封装样式节点中针对所述样式字典的引用方式。以及，遍历每个所述样式键值对，将所述样式键值对中样式名的命名规则调整为层叠样式表样式规则；和/或，针对所述样式键值对中的每个样式值，响应于所述样式值为数字，设置所述述样式值的单位；和/或，根据所述样式键值对中每个样式值的存在形式，将所述样式值处理为所述小程序页面支持的格式。从而可以根据rn页面中样式节点的形式分别进行样式转换，提高样式转换的准确性。

而且，在本发明实施例中，还可以响应于所述目标样式节点为封装样式节点，将所述目标样式节点按照层叠样式表格式进行拼接并保存为所述小程序页面支持的样式表文件；响应于所述目标样式节点为未封装样式节点，将所述目标样式节点保存为所述小程序页面支持的的标记语言文件。同样可以提高样式转换准确性，以及转换得到的样式文件的有效性。

另外，在本发明实施例中，还可以将所述样式文件拉取到所述rn页面的布局文件中，并以所述样式文件替换所述布局文件中的原始样式文件，生成与所述rn页面对应的小程序页面。从而在rn页面的基础上直接生成小程序页面，可以实现rn页面和小程序页面之间的灵活转换。

实施例三

详细介绍本发明实施例提供的一种页面样式转换装置。

参照图3，示出了本发明实施例中一种页面样式转换装置的结构示意图。

本发明实施例的网络端口管理装置包括：抽象语法树获取模块210、样式节点获取模块220、样式转换处理模块230和样式文件生成模块240。

下面分别详细介绍各模块的功能以及各模块之间的交互关系。

抽象语法树获取模块210，用于获取rn页面代码的抽象语法树。

样式节点获取模块220，用于遍历所述抽象语法树中的每个节点，获取所述rn页面的样式节点。

样式转换处理模块230，用于根据小程序页面支持的样式，对所述样式节点进行样式转换处理，得到目标样式节点；其中，所述样式转换处理包括命名规则转换、样式值单位转换、样式值处理方式转换中的至少一种。

样式文件生成模块240，用于以所述小程序页面支持的文件格式保存所述目标样式节点，得到所述小程序页面的样式文件。

在本发明实施例中，通过获取rn页面代码的抽象语法树；遍历所述抽象语法树中的每个节点，获取所述rn页面的样式节点；根据小程序页面支持的样式，对所述样式节点进行样式转换处理，得到目标样式节点；以所述小程序页面支持的文件格式保存所述目标样式节点，得到所述小程序页面的样式文件；其中，所述样式转换处理包括命名规则转换、样式值单位转换、样式值处理方式转换中的至少一种。从而取得了提高页面开发效率，降低页面开发成本的有益效果。

参照图4，在本发明实施例中，所述样式转换处理模块230，进一步可以包括：

封装样式转换子模块231，用于响应于所述样式节点为封装样式节点，对所述封装样式节点所引用的样式字典进行样式转换处理，并调整所述封装样式节点中针对所述样式字典的引用方式。

未封装样式转换子模块232，用于响应于所述样式节点为未封装样式节点，对所述未封装样式节点中的样式键值对进行样式转换处理。

可选地，在本发明实施例中，所述封装样式转换子模块231，进一步可以包括：

样式键值对转换单元，用于响应于所述样式节点为封装样式节点，对所述封装样式节点所引用的样式字典中包含的样式键值对进行样式转换处理，得到第一样式键值对；

封装样式名转换单元，用于针对每个所述第一样式键值对，根据所述样式字典对应的样式变量名、所述第一样式键值对对应的封装样式名，以及预设的连接符号，生成样式转换处理后的目标封装样式名并保存；

引用方式调整单元，用于根据所述目标封装样式名，调整所述封装样式节点中针对所述样式字典的引用方式。

可选地，在本发明实施例中，所述未封装样式转换子模块232，进一步可以包括：

命名规则调整单元，用于遍历每个所述样式键值对，将所述样式键值对中样式名的命名规则调整为层叠样式表样式规则；

和/或，样式值单位调整单元，用于针对所述样式键值对中的每个样式值，响应于所述样式值为数字，设置所述述样式值的单位；

和/或，样式值形式处理单元，用于根据所述样式键值对中每个样式值的存在形式，将所述样式值处理为所述小程序页面支持的格式。

参照图4，在本发明实施例中，所述样式文件生成模块240，进一步可以包括：

封装样式文件生成子模块241，用于响应于所述目标样式节点为封装样式节点，将所述目标样式节点按照层叠样式表格式进行拼接并保存为所述小程序页面支持的样式表文件；

未封装样式文件生成子模块242，用于响应于所述目标样式节点为未封装样式节点，将所述目标样式节点保存为所述小程序页面支持的的标记语言文件。

参照图4，在本发明实施例中，所述装置还可以包括：

小程序页面生成模块250，用于将所述样式文件拉取到所述rn页面的布局文件中，并以所述样式文件替换所述布局文件中的原始样式文件，生成与所述rn页面对应的小程序页面。

在本发明实施例中，响应于所述样式节点为封装样式节点，对所述封装样式节点所引用的样式字典进行样式转换处理，并调整所述封装样式节点中针对所述样式字典的引用方式；响应于所述样式节点为未封装样式节点，对所述未封装样式节点中的样式键值对进行样式转换处理。并且，响应于所述样式节点为封装样式节点，对所述封装样式节点所引用的样式字典中包含的样式键值对进行样式转换处理，得到第一样式键值对；针对每个所述第一样式键值对，根据所述样式字典对应的样式变量名、所述第一样式键值对对应的封装样式名，以及预设的连接符号，生成样式转换处理后的目标封装样式名并保存；根据所述目标封装样式名，调整所述封装样式节点中针对所述样式字典的引用方式。以及，遍历每个所述样式键值对，将所述样式键值对中样式名的命名规则调整为层叠样式表样式规则；和/或，针对所述样式键值对中的每个样式值，响应于所述样式值为数字，设置所述述样式值的单位；和/或，根据所述样式键值对中每个样式值的存在形式，将所述样式值处理为所述小程序页面支持的格式。从而可以根据rn页面中样式节点的形式分别进行样式转换，提高样式转换的准确性。

而且，在本发明实施例中，还可以响应于所述目标样式节点为封装样式节点，将所述目标样式节点按照层叠样式表格式进行拼接并保存为所述小程序页面支持的样式表文件；响应于所述目标样式节点为未封装样式节点，将所述目标样式节点保存为所述小程序页面支持的的标记语言文件。同样可以提高样式转换准确性，以及转换得到的样式文件的有效性。

另外，在本发明实施例中，还可以将所述样式文件拉取到所述rn页面的布局文件中，并以所述样式文件替换所述布局文件中的原始样式文件，生成与所述rn页面对应的小程序页面。从而在rn页面的基础上直接生成小程序页面，可以实现rn页面和小程序页面之间的灵活转换。

本发明实施例提供的移动终端能够实现图1至图2的方法实施例中移动终端实现的各个过程，为避免重复，这里不再赘述。

实施例五

图5为实现本发明各个实施例的一种终端设备的硬件结构示意图。

该终端设备500包括但不限于：射频单元501、网络模块502、音频输出单元503、输入单元504、传感器505、显示单元506、用户输入单元507、接口单元508、存储器509、处理器510、以及电源511等部件。本领域技术人员可以理解，图5中示出的终端设备结构并不构成对终端设备的限定，终端设备可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。在本发明实施例中，终端设备包括但不限于手机、平板电脑、笔记本电脑、掌上电脑、车载终端、可穿戴设备、以及计步器等。

应理解的是，本发明实施例中，射频单元501可用于收发信息或通话过程中，信号的接收和发送，具体的，将来自基站的下行数据接收后，给处理器510处理；另外，将上行的数据发送给基站。通常，射频单元501包括但不限于天线、至少一个放大器、收发信机、耦合器、低噪声放大器、双工器等。此外，射频单元501还可以通过无线通信系统与网络和其他设备通信。

终端设备通过网络模块502为用户提供了无线的宽带互联网访问，如帮助用户收发电子邮件、浏览网页和访问流式媒体等。

音频输出单元503可以将射频单元501或网络模块502接收的或者在存储器509中存储的音频数据转换成音频信号并且输出为声音。而且，音频输出单元503还可以提供与终端设备500执行的特定功能相关的音频输出(例如，呼叫信号接收声音、消息接收声音等等)。音频输出单元503包括扬声器、蜂鸣器以及受话器等。

输入单元504用于接收音频或视频信号。输入单元504可以包括图形处理器(graphicsprocessingunit，gpu)5041和麦克风5042，图形处理器5041对在视频捕获模式或图像捕获模式中由图像捕获装置(如摄像头)获得的静态图片或视频的图像数据进行处理。处理后的图像帧可以显示在显示单元506上。经图形处理器5041处理后的图像帧可以存储在存储器509(或其它存储介质)中或者经由射频单元501或网络模块502进行发送。麦克风5042可以接收声音，并且能够将这样的声音处理为音频数据。处理后的音频数据可以在电话通话模式的情况下转换为可经由射频单元501发送到移动通信基站的格式输出。

终端设备500还包括至少一种传感器505，比如光传感器、运动传感器以及其他传感器。具体地，光传感器包括环境光传感器及接近传感器，其中，环境光传感器可根据环境光线的明暗来调节显示面板5061的亮度，接近传感器可在终端设备500移动到耳边时，关闭显示面板5061和/或背光。作为运动传感器的一种，加速计传感器可检测各个方向上(一般为三轴)加速度的大小，静止时可检测出重力的大小及方向，可用于识别终端设备姿态(比如横竖屏切换、相关游戏、磁力计姿态校准)、振动识别相关功能(比如计步器、敲击)等；传感器505还可以包括指纹传感器、压力传感器、虹膜传感器、分子传感器、陀螺仪、气压计、湿度计、温度计、红外线传感器等，在此不再赘述。

显示单元506用于显示由用户输入的信息或提供给用户的信息。显示单元506可包括显示面板5061，可以采用液晶显示器(liquidcrystaldisplay，lcd)、有机发光二极管(organiclight-emittingdiode,oled)等形式来配置显示面板5061。

用户输入单元507可用于接收输入的数字或字符信息，以及产生与终端设备的用户设置以及功能控制有关的键信号输入。具体地，用户输入单元507包括触控面板5071以及其他输入设备5072。触控面板5071，也称为触摸屏，可收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触控面板5071上或在触控面板5071附近的操作)。触控面板5071可包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸方位，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测装置上接收触摸信息，并将它转换成触点坐标，再送给处理器510，接收处理器510发来的命令并加以执行。此外，可以采用电阻式、电容式、红外线以及表面声波等多种类型实现触控面板5071。除了触控面板5071，用户输入单元507还可以包括其他输入设备5072。具体地，其他输入设备5072可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆，在此不再赘述。

进一步的，触控面板5071可覆盖在显示面板5061上，当触控面板5071检测到在其上或附近的触摸操作后，传送给处理器510以确定触摸事件的类型，随后处理器510根据触摸事件的类型在显示面板5061上提供相应的视觉输出。虽然在图5中，触控面板5071与显示面板5061是作为两个独立的部件来实现终端设备的输入和输出功能，但是在某些实施例中，可以将触控面板5071与显示面板5061集成而实现终端设备的输入和输出功能，具体此处不做限定。

接口单元508为外部装置与终端设备500连接的接口。例如，外部装置可以包括有线或无线头戴式耳机端口、外部电源(或电池充电器)端口、有线或无线数据端口、存储卡端口、用于连接具有识别模块的装置的端口、音频输入/输出(i/o)端口、视频i/o端口、耳机端口等等。接口单元508可以用于接收来自外部装置的输入(例如，数据信息、电力等等)并且将接收到的输入传输到终端设备500内的一个或多个元件或者可以用于在终端设备500和外部装置之间传输数据。

存储器509可用于存储软件程序以及各种数据。存储器509可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据手机的使用所创建的数据(比如音频数据、电话本等)等。此外，存储器509可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。

处理器510是终端设备的控制中心，利用各种接口和线路连接整个终端设备的各个部分，通过运行或执行存储在存储器509内的软件程序和/或模块，以及调用存储在存储器509内的数据，执行终端设备的各种功能和处理数据，从而对终端设备进行整体监控。处理器510可包括一个或多个处理单元；优选的，处理器510可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器510中。

终端设备500还可以包括给各个部件供电的电源511(比如电池)，优选的，电源511可以通过电源管理系统与处理器510逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。

另外，终端设备500包括一些未示出的功能模块，在此不再赘述。

优选的，本发明实施例还提供了一种终端设备，包括：处理器510，存储器509，存储在存储器509上并可在处理器510上运行的计算机程序，该计算机程序被处理器510执行时实现上述页面样式转换方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。

本发明实施例还提供了一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序，计算机程序被处理器执行时实现上述页面样式转换方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。其中，所述的计算机可读存储介质，如只读存储器(read-onlymemory，简称rom)、随机存取存储器(randomaccessmemory，简称ram)、磁碟或者光盘等。

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

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如rom/ram、磁碟、光盘)中，包括若干指令用以使得一台终端(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本发明各个实施例所述的方法。

上面结合附图对本发明的实施例进行了描述，但是本发明并不局限于上述的具体实施方式，上述的具体实施方式仅仅是示意性的，而不是限制性的，本领域的普通技术人员在本发明的启示下，在不脱离本发明宗旨和权利要求所保护的范围情况下，还可做出很多形式，均属于本发明的保护之内。

本领域普通技术人员可以意识到，结合本发明实施例中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统、装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本申请所提供的实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、rom、ram、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。