CN108121539B - 组件处理方法和装置 - Google Patents

Abstract

本申请公开了一种组件处理方法和装置。其中，该方法包括：读取样式库中的组件；获取组件中的使用第一语言表达的元素，以及组件使用第一语言的元素的样式；建立组件中元素与开发平台支持的元素的对应关系；将组件中元素的样式使用开发平台支持的第二语言进行表达；将对应关系和第二语言的表达保存作为开发平台的组件。本申请解决了现有技术中组件转换过程效率低的技术问题。

Description

组件处理方法和装置

技术领域

本申请涉及数据处理领域，具体而言，涉及一种组件处理方法和装置。

背景技术

React Native是近年兴起的移动端开发技术，能够使用javascript开发接近原生语言开发性能的应用(APP)，诸多特性能够大幅提升移动端开发效率，降低成本。ReactNative技术仅支持使用javascript对象的方式定义样式，这与前端开发使用层叠样式表(Cascading Style Sheets，简称为CSS)定义样式差距甚大，导致前端常见的组件样式无法在ReactNative中直接使用。另外，由于React Native技术兴起时间较短，组件库十分匮乏，无法复用样式库，开发成本高。

现有的技术方案中，只能逐个手动将移动端样式库中的组件转化为React Native组件，对于不同的移动端样式库，每次都需要逐个转换，因此若引入新的移动端样式库，会严重影响效率，造成较多的重复劳动。

针对上述的问题，目前尚未提出有效的解决方案。

发明内容

本申请实施例提供了一种组件处理方法和装置，以至少解决现有技术中组件转换过程效率低的技术问题。

根据本申请实施例的一个方面，提供了一种组件处理方法，包括：读取样式库中的组件；获取所述组件中的使用第一语言表达的元素，以及所述组件使用所述第一语言的所述元素的样式；建立所述组件中元素与开发平台支持的元素的对应关系；将所述组件中元素的样式使用所述开发平台支持的第二语言进行表达；将所述对应关系和所述第二语言的表达保存作为所述开发平台的组件。

进一步地，建立所述组件中元素与开发平台支持的元素的对应关系包括：建立所述样式库中的组件中HTML元素与所述开发平台的组件React Native元素的对应关系；将所述对应关系保存在预设的对应关系字典中。

进一步地，所述组件中元素的样式包括CSS样式，所述第二语言包括javascript语言，将所述组件中元素的样式使用所述开发平台支持的第二语言进行表达包括：将所述CSS样式使用所述javascript语言进行表达。

进一步地，读取样式库中的组件包括：从所述样式库中获取所述样式库中的所有组件；在静态页面显示出所述所有组件并在所述静态页面中显示出所述所有组件的样式，其中，每个所述组件通过设置在DIV中以显示在所述静态页面中，所述DIV的属性值为预定值。

进一步地，从所述样式库中获取所述样式库中的所有组件包括：通过读取属性值为所述预定值的DIV中的内容以获取所述样式库中的所有组件；获取所述样式库中的所有组件中使用第一语言表达的元素，以及所述样式库中的所有组件使用所述第一语言的所述元素的样式。

根据本申请实施例的另一方面，还提供了一种组件处理装置，包括：读取单元，用于读取样式库中的组件；获取单元，用于获取所述组件中的使用第一语言表达的元素，以及所述组件使用所述第一语言的所述元素的样式；建立单元，用于建立所述组件中元素与开发平台支持的元素的对应关系；表达单元，用于将所述元素的样式使用所述开发平台支持的第二语言进行表达；保存单元，用于将所述对应关系和所述第二语言的表达保存作为所述开发平台的组件。

进一步地，所述建立单元包括：建立模块，用于建立所述样式库中的组件中HTML元素与所述开发平台的组件ReactNative元素的对应关系；保存模块，用于将所述对应关系保存在预设的对应关系字典中。

进一步地，所述组件中元素的样式包括CSS样式，所述第二语言包括javascript语言，所述表达单元用于：将所述CSS样式使用所述javascript语言进行表达。

进一步地，所述读取单元包括：获取模块，用于从所述样式库中获取所述样式库中的所有组件；显示模块，用于在静态页面显示出所述所有组件并在所述静态页面中显示出所述所有组件的样式，其中，每个所述组件通过设置在DIV中以显示在所述静态页面中，所述DIV的属性值为预定值。

进一步地，所述获取模块包括：读取子模块，用于通过读取属性值为所述预定值的DIV中的内容以获取所述样式库中的所有组件；获取子模块，用于获取所述样式库中的所有组件中使用第一语言表达的元素，以及所述样式库中的所有组件使用所述第一语言的所述元素的样式。

在本申请实施例中，采用读取样式库中的组件，获取组件中的使用第一语言表达的元素，以及组件使用第一语言的元素的样式；建立组件中元素与开发平台支持的元素的对应关系；将组件中元素的样式使用开发平台支持的第二语言进行表达；将对应关系和第二语言的表达保存作为开发平台的组件。通过建立组件中元素与开发平台支持的元素的对应关系；将元素的样式使用开发平台支持的第二语言进行表达，实现了提高组件转换过程的效率的技术效果，进而解决了现有技术中组件转换过程效率低的技术问题。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是根据本申请实施例的一种组件处理方法的流程图；以及

图2是根据本申请实施例的一种组件处理装置的示意图。

具体实施方式

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

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

首先对本申请实施例所涉及的技术术语作如下解释：

移动端样式库，指能够在移动端浏览器中正常运行的前端UI样式库，通常包含了移动端开发时的常用组件的样式。

React Native组件：指的是React Native框架下定义的组件，包括组件的结构和样式。

根据本申请实施例，提供了一种组件处理方法的实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

图1是根据本申请实施例的一种组件处理方法的流程图，如图1所示，该方法包括如下步骤：

步骤S102,读取样式库中的组件。

步骤S104,获取组件中的使用第一语言表达的元素，以及组件使用第一语言的元素的样式。

步骤S106,建立组件中元素与开发平台支持的元素的对应关系。

步骤S108,将组件中元素的样式使用开发平台支持的第二语言进行表达。

步骤S110,将对应关系和第二语言的表达保存作为开发平台的组件。

通过上述实施例，获取样式库中的组件使用第一语言表达的元素和使用第一语言的元素样式，通过建立组件中元素与开发平台支持的元素的对应关系，将元素的样式使用开发平台支持的第二语言进行表达，解决了现有技术中组件转换过程效率低的技术问题，达到了提高组件转换过程的效率的技术效果。

样式库可以是移动端样式库，移动端样式库是能够在移动端浏览器中正常运行的前端UI样式库，通常包含移动端开发时的常用组件的样式，样式库中的组件可以是多种类型的组件，多种类型的组件可以来自于多个开发者，由于不同类型的组件使用的协议或者表达样式不同，因此在将一种样式库中的组件转换到另一种样式库中的组件时可能无法直接转换，需要开发者逐个手动进行转换，因此转换效率低。在读取样式库中的组件时，可以通过逐个遍历的方法读取样式库中的组件。

第一语言可以是HTML语言，也可以是CSS语言，JAVA语言等多种计算机语言，使用第一语言表达的元素可以是使用第一语言表达的网页上的按钮或者输入框等元素，使用第一语言表述的元素的样式可以是网页上按钮的形状、大小等样式。

在获取到组件中的使用第一语言表达的元素，以及组件使用第一语言的元素的样式之后，建立组件中元素与开发平台支持的元素的对应关系。开发平台支持的元素可以是React Native元素，例如，建立使用HTML语言表达的元素与React Native元素的对应关系，对应关系可以是列表，也可以是其他形式，例如，可以建立HTML元素转化为React Native元素的对应字典。

在建立组件中的元素与开发平台支持的元素的对应关系之后，将组件中元素的样式使用开发平台支持的第二语言进行表达，第二语言可以是javascript，随着技术的发展，第二语言还可以包括其他类型的语言。例如，组件中的元素可以是网页上的按钮，而元素的样式可以是按钮的形状、大小，在网页中的位置等，除了获取组件中的元素与开发平台支持的元素的对应关系之外，使用开发平台支持的第二语言表达组件中的元素的样式，然后将对应关系和第二语言表达的组件中元素的样式保存作为开发平台的组件。这样，能够实现将样式库中的组件表达的元素和元素样式通过第二语言进行表达，得到第二语言表达的组件中元素的样式，在表达之后，将对应关系和第二语言的表达保存作为开发平台的组件。这样，就实现了将样式库中使用第一语言表达的元素和元素的样式转换成开发平台支持的第二语言表达的元素和元素样式。

可选地，开发平台的组件包括ReactNative组件。随着技术发展，开发平台的组件也可以包括其他组件。

可选地，建立组件中元素与开发平台支持的元素的对应关系可以是：建立样式库中的组件中HTML元素与开发平台的组件React Native元素的对应关系；将对应关系保存在预设的对应关系字典中。样式库的组件中的第一语言可以是HTML语言，建立HTML语言表达的元素与开发平台的组件React Native元素的对应关系之后，将建立的对应关系保存在预设的对应关系字典中。样式库中的组件中HTML元素与开发平台的组件React Native元素的对应关系可以是一一对应关系。

可选地，样式库中的组件中元素的样式包括CSS样式，第二语言包括javascript语言，将组件中元素的样式使用开发平台支持的第二语言进行表达包括：将CSS样式使用javascript语言进行表达。样式库中的组件中的元素样式可以是CSS语言表达的元素的样式，将CSS语言表达的元素的样式通过javascript语言表达，得到javascript语言表达的元素样式。

可选地，读取样式库中的组件包括：从样式库中获取样式库中的所有组件；在静态页面显示出所有组件并在静态页面中显示出所有组件的样式，其中，每个组件通过设置在DIV中以显示在静态页面中，DIV的属性值为预定值。

读取样式库中的组件可以通过以下方法，首先从样式库中获取样式库中的所有组件，样式库中可以包含多个组件，在获取了样式库中的所有组件之后，在静态页面中将所有组件和组件的样式显示出来，可以将每个组件设置在DIV容器中包裹以显示在静态页面中，DIV的属性值可以是DIV的class属性，将DIV的class属性设置为react-component预定值。

可选地，从样式库中获取样式库中的所有组件包括：通过读取属性值为预定值的DIV中的内容以获取样式库中的所有组件；获取组件中使用第一语言表达的元素，以及样式库中的所有组件使用第一语言的元素的样式。

由于每个组件设置在DIV中且属性值为预定值，因此，通过读取属性值为预定值的DIV中的内容可以获取样式库中的所有组件，然后获取样式库中的所有组件中使用第一语言的元素的样式。

通过上述实施例，可以将HTML元素转化为React Native支持的组件，并附加上样式，最后生成React Native能够直接运行的代码，提高组件转换效率。

本申请实施例还提供了一种优选实施方式，下面结合该优选实施方式将对本申请实施例的技术方案进行说明：

本申请的技术方案中，逐个自动将移动端样式库中的组件转化为React Native组件，将HTML中的元素与React Native中的元素逐个对应，将移动端样式库中的CSS样式逐个转化为javascript对象表现形式，并最终赋值给React Native组件。具体步骤如下：

1、建立HTML元素转化为React Native元素的对应字典,命名为HtmlDic。

React Native不支持HTML元素，但是提供了诸多界面元素，可以将HTML元素映射到React Native，例如DIV可转换成view,input可转化为TextInput等，需要注意的是，对于svg、canvas、vedio元素React Native无法直接转换，一般情况下样式库不会使用这三个元素做组件。

2、CSS转化为javascript对象。

由于React Native使用javascript对象方式定义样式，并且此样式是CSS样式子集，并不支持动画属性，因此在转换时应当忽略CSS动画。另外，React Native javascript样式支持的定义元素的布局方式也与CSS元素的布局方式不一致，需转换。设定一个字典，此字典包括所有CSS样式属性名称，但不包括React Native不能识别的样式属性，命名可以为CssDic。

3、在一个静态页面中，将需要转换的移动端样式库各个组件罗列出来，使之能够在浏览器中正常显示，罗列时应当注意，一个组件作为一个单元模块，使用一个容器DIV包裹，并且给DIV设置class属性为react-component。在这个页面中增加脚本或各个组件的样式及HTML元素。

4、使用javasctip获取classname为react-component的各个组件。

每个获取到的HTML元素即可作为一个React Native Component，将这个HTML元素及其子元素按照字典中的匹配转换为React Native元素。将每个HTML元素的计算样式，将这个计算样式，将计算样式赋值给React Native元素。

一种可选的核心代码片段如下：

代码片段一、此代码作用是转换HTML元素到React Native Component格式的字符串。

代码片段二、此代码的作用是根据上一步的字符串生成React Native组件的文件内容。

代码片段三、整个调用过程。

5、如上一步骤的代码片段三中，最后获取到的一个React Component字符串格式如下：

只需把上述片段传到后端，将内容写入一个js文件，即完成转换。

通过上述实施例，将移动端样式库中的组件自动转化为React Native组件库，能够在移动端的开发时最大限度的利用组件库的资源，提高组件转换效率。由于能复用已有的移动端组件，因此可以降低React Native移动端应用(Application，简称为App)的开发成本。

根据本申请实施例，还提供了一种组件处理装置。该组件处理装置可以执行上述组件处理方法，上述组件处理方法也可以通过该组件处理装置实施。

图2是根据本申请实施例的一种组件处理装置的示意图。如图2所示，该装置包括：

读取单元10，用于读取样式库中的组件；

获取单元20，用于获取组件中的使用第一语言表达的元素，以及组件使用第一语言的元素的样式；

建立单元30，用于建立组件中元素与开发平台支持的元素的对应关系；

表达单元40，用于将组件中元素的样式使用开发平台支持的第二语言进行表达；

保存单元50，用于将对应关系和第二语言的表达保存作为开发平台的组件。

可选地，开发平台的组件包括React Native组件。

可选地，建立单元30包括：建立模块，用于建立样式库中的组件中HTML元素与开发平台的组件React Native元素的对应关系；保存模块，用于将对应关系保存在预设的对应关系字典中。

可选地，组件中元素的样式包括CSS样式，第二语言包括javascript语言，表达单元40用于：将CSS样式使用javascript语言进行表达。

可选地，读取单元10包括：获取模块，用于从样式库中获取样式库中的所有组件；显示模块，用于在静态页面显示出所有组件并在静态页面中显示出所有组件的样式，其中，每个组件通过设置在DIV中以显示在静态页面中，DIV的属性值为预定值。

可选地，获取模块包括：读取子模块，用于通过读取属性值为预定值的DIV中的内容以获取样式库中的所有组件；获取子模块，用于获取样式库中的所有组件中使用第一语言表达的元素，以及样式库中的所有组件使用第一语言的元素的样式。

通过上述实施例，获取单元20获取样式库中的组件使用第一语言表达的元素和使用第一语言的元素样式，建立单元30建立组件中元素与开发平台支持的元素的对应关系，表达单元40将元素的样式使用开发平台支持的第二语言进行表达，解决了现有技术中组件转换过程效率低的技术问题，达到了提高组件转换过程的效率的技术效果。

所述组件处理装置包括处理器和存储器，上述读取单元、获取单元、建立单元、表达单元和保存单元等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元来实现相应的功能。

处理器中包含内核，由内核去存储器中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数来进行组件转换以提高组件转换效率。

存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)，存储器包括至少一个存储芯片。

本申请还提供了一种计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序代码：读取样式库中的组件；获取所述组件中的使用第一语言表达的元素，以及所述组件使用所述第一语言的所述元素的样式；建立所述组件中元素与开发平台支持的元素的对应关系；将所述组件中元素的样式使用所述开发平台支持的第二语言进行表达；将所述对应关系和所述第二语言的表达保存作为所述开发平台的组件。

上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。

在本申请的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

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

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

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

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

以上所述仅是本申请的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本申请的保护范围。

Claims (10)

1.一种组件处理方法，其特征在于，包括：

读取样式库中的组件，其中，所述样式库为移动端样式库， 所述移动端样式库中包含多种类型的组件；

获取所述组件中的使用第一语言表达的元素，以及所述组件使用所述第一语言的所述元素的样式；

建立所述组件中元素与开发平台支持的元素的对应关系，其中，所述开发平台支持的元素为React Native元素；

将所述组件中元素的样式使用所述开发平台支持的第二语言进行表达；

将所述对应关系和所述第二语言的表达保存作为所述开发平台的组件；

建立所述组件中元素与开发平台支持的元素的对应关系包括：建立所述样式库中的组件中使用第一语言表达的元素与所述开发平台的组件React Native元素的对应关系；将所述对应关系保存在预设的对应关系字典中。

2.根据权利要求1所述的方法，其特征在于，建立所述组件中元素与开发平台支持的元素的对应关系包括：

建立所述样式库中的组件中HTML元素与所述开发平台的组件React Native元素的对应关系；

将所述对应关系保存在预设的对应关系字典中。

3.根据权利要求1所述的方法，其特征在于，所述组件中元素的样式包括CSS样式，所述第二语言包括javascript语言，将所述组件中元素的样式使用所述开发平台支持的第二语言进行表达包括：

将所述CSS样式使用所述javascript语言进行表达。

4.根据权利要求1所述的方法，其特征在于，读取样式库中的组件包括：

从所述样式库中获取所述样式库中的所有组件；

在静态页面显示出所述所有组件并在所述静态页面中显示出所述所有组件的样式，其中，每个所述组件通过设置在DIV中以显示在所述静态页面中，所述DIV的属性值为预定值。

5.根据权利要求4所述的方法，其特征在于，从所述样式库中获取所述样式库中的所有组件包括：

通过读取属性值为所述预定值的DIV中的内容以获取所述样式库中的所有组件；

获取所述样式库中的所有组件中使用第一语言表达的元素，以及所述样式库中的所有组件使用所述第一语言的所述元素的样式。

6.一种组件处理装置，其特征在于，包括：

读取单元，用于读取样式库中的组件，其中，所述样式库为移动端样式库， 所述移动端样式库中包含多种类型的组件；

获取单元，用于获取所述组件中的使用第一语言表达的元素，以及所述组件使用所述第一语言的所述元素的样式；

建立单元，用于建立所述组件中元素与开发平台支持的元素的对应关系，其中，所述开发平台支持的元素为React Native元素；

表达单元，用于将所述组件中元素的样式使用所述开发平台支持的第二语言进行表达；

保存单元，用于将所述对应关系和所述第二语言的表达保存作为所述开发平台的组件；

所述建立单元还用于建立所述样式库中的组件中使用第一语言表达的元素与所述开发平台的组件React Native元素的对应关系；将所述对应关系保存在预设的对应关系字典中。

7.根据权利要求6所述的装置，其特征在于，所述建立单元包括：

建立模块，用于建立所述样式库中的组件中HTML元素与所述开发平台的组件ReactNative元素的对应关系；

保存模块，用于将所述对应关系保存在预设的对应关系字典中。

8.根据权利要求6所述的装置，其特征在于，所述组件中元素的样式包括CSS样式，所述第二语言包括javascript语言，所述表达单元用于：

将所述CSS样式使用所述javascript语言进行表达。

9.根据权利要求6所述的装置，其特征在于，所述读取单元包括：

获取模块，用于从所述样式库中获取所述样式库中的所有组件；

显示模块，用于在静态页面显示出所述所有组件并在所述静态页面中显示出所述所有组件的样式，其中，每个所述组件通过设置在DIV中以显示在所述静态页面中，所述DIV的属性值为预定值。

10.根据权利要求9所述的装置，其特征在于，所述获取模块包括：

读取子模块，用于通过读取属性值为所述预定值的DIV中的内容以获取所述样式库中的所有组件；

获取子模块，用于获取所述样式库中的所有组件中使用第一语言表达的元素，以及所述样式库中的所有组件使用所述第一语言的所述元素的样式。

Images