CN111880785A - 程序代码转换方法、装置，电子设备 - Google Patents
程序代码转换方法、装置，电子设备 Download PDFInfo
- Publication number
- CN111880785A CN111880785A CN202010582025.2A CN202010582025A CN111880785A CN 111880785 A CN111880785 A CN 111880785A CN 202010582025 A CN202010582025 A CN 202010582025A CN 111880785 A CN111880785 A CN 111880785A
- Authority
- CN
- China
- Prior art keywords
- component
- react
- flutter
- program code
- state
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Withdrawn
Links
- 238000000034 method Methods 0.000 title claims abstract description 62
- 238000006243 chemical reaction Methods 0.000 title claims abstract description 33
- 238000013507 mapping Methods 0.000 claims description 13
- 238000004806 packaging method and process Methods 0.000 claims description 4
- 238000011161 development Methods 0.000 abstract description 11
- 238000004590 computer program Methods 0.000 description 17
- 238000012545 processing Methods 0.000 description 6
- 230000008569 process Effects 0.000 description 5
- 238000005516 engineering process Methods 0.000 description 3
- 238000004891 communication Methods 0.000 description 2
- 238000010586 diagram Methods 0.000 description 2
- 230000007246 mechanism Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000008033 biological extinction Effects 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 238000013519 translation Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
- G06F8/42—Syntactic analysis
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/35—Creation or generation of source code model driven
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Stored Programmes (AREA)
Abstract
本申请公开了一种程序代码转换方法，属于计算机技术领域，能够实现从React组件声明到Flutter组件实现的转换。所述方法包括：根据React程序代码的抽象语法信息，获取React组件的声明；通过解析所述声明，得到所述React组件的组件特征；根据组件特征中的状态和生命周期，确定由React组件转换得到的Flutter组件的组件模板；基于组件模板对React组件的组件特征进行转换，相应Flutter组件的程序代码。在开发支持React和flutter的多端应用时，仅需要在React架构下进行开发，通过本申请公开的转换方法可将React组件代码转换为Flutter组件代码，可以提升软件开发效率。
Description
技术领域
本申请实施例涉及计算机技术领域，特别是涉及一种程序代码转换方法、装置、电子设备及计算机可读存储介质。
背景技术
在目前大前端的背景下，前端呈现多终端容器化的趋势，同样的页面需要在不同端实现，这样会造成很多重复的开发。另外在前端技术收敛的背景下，react(React是Facebook开发的一款JavaScript库)在前端技术体系中位置越来越高，很多前端代码时通过react开发的。为了实现前段代码跨终端，出现了将react代码转为其他端代码的需求。
Flutter是Google开源的UI工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。随着Flutterr进入前端开发领域，出现了将React代码转换为用Flutter代码的需求。将已有的React代码转换为Flutter代码可以有效节省开发时间，提升开发效率。
然而，由于React和Flutter的组件定义、设置、类型等存在诸多不同，因此，现有技术中还没有将React代码转换为Flutter代码的方法。
发明内容
本申请实施例提供一种程序代码转换方法，有助于提升程序软件开发效率。
为了解决上述问题，第一方面，本申请实施例提供了一种程序代码转换方法，包括：
根据React程序代码的抽象语法信息，获取React组件的声明；
通过解析所述声明，得到所述React组件的组件特征；其中，所述组件特征包括以下的一项或多项：名称、传入属性、状态和生命周期；
根据所述React组件的状态和生命周期，确定由所述React组件转换得到的Flutter组件的组件模板；其中，所述组件模板匹配：有状态Flutter组件或无状态Flutter组件；
基于所述组件模板，对所述React组件的组件特征的声明和/或调用接口进行转换，得到与所述React组件对应的Flutter组件的程序代码。
第二方面，本申请实施例提供了一种程序代码转换装置，包括：
React组件声明获取模块，用于根据React程序代码的抽象语法信息，获取React组件的声明；
React组件特征获取模块，用于通过解析所述声明，得到所述React组件的组件特征；其中，所述组件特征包括以下的一项或多项：名称、传入属性、状态和生命周期；
Flutter组件模板确定模块，用于根据所述React组件的状态和生命周期，确定由所述React组件转换得到的Flutter组件的组件模板；其中，所述组件模板匹配：有状态Flutter组件或无状态Flutter组件；
Flutter组件代码生成模块，用于基于所述组件模板，对所述React组件的组件特征的声明和/或调用接口进行转换，得到与所述React组件对应的Flutter组件的程序代码。
第三方面，本申请实施例还公开了一种电子设备，包括存储器、处理器及存储在所述存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现本申请实施例所述的程序代码转换方法。
第四方面，本申请实施例提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时本申请实施例公开的程序代码转换方法的步骤。
本申请实施例公开的程序代码转换方法，通过通过根据React程序代码的抽象语法信息，获取React组件的声明；通过解析所述声明，得到所述React组件的组件特征；其中，所述组件特征包括以下的一项或多项：名称、传入属性、状态和生命周期；根据所述React组件的状态和生命周期，确定由所述React组件转换得到的Flutter组件的组件模板；其中，所述组件模板匹配：有状态Flutter组件或无状态Flutter组件；基于所述组件模板，对所述React组件的组件特征的声明和/或调用接口进行转换，得到与所述React组件对应的Flutter组件的程序代码，实现了从React组件声明到Flutter组件实现的转换。
上述说明仅是本申请技术方案的概述，为了能够更清楚了解本申请的技术手段，而可依照说明书的内容予以实施，并且为了让本申请的上述和其它目的、特征和优点能够更明显易懂，以下特举本申请的具体实施方式。
附图说明
为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
图1是本申请实施例一的程序代码转换方法流程图；
图2是本申请实施例二的程序代码转换装置结构示意图；
图3示意性地示出了用于执行根据本申请的方法的电子设备的框图；以及
图4示意性地示出了用于保持或者携带实现根据本申请的方法的程序代码的存储单元。
具体实施方式
下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
实施例一
本申请实施例公开的一种程序代码转换方法，如图1所示，所述方法包括：步骤110至步骤140。
步骤110，根据React程序代码的抽象语法信息，获取React组件的声明。
本申请的一些实施例中，可以通过现有技术中的语法分析工具获取待转换的React程序代码的抽象语法树。所述抽象语法树中包括若干节点，每个节点对应React程序代码的一个语法节点，例如，组件声明、变量声明、方法声明等。其中的react组件可以为通过React语言源代码创建的视窗组件、按钮组件等。所述抽象语法树中各个节点的数据结构描述了React程序代码的抽象语法信息。
通过自根节点向下逐层遍历所述抽象语法树，可以依次获取到所述React程序代码中声明的各个组件。
React中的Component是个抽象基础类，用于类的声明。React中，类是组件的一种形式，组件还可以包括函数形式。本申请的一些实施例中，根据React程序代码的抽象语法信息，获取React组件的声明包括：自根节点向下逐层遍历所述抽象语法树的各节点，并确定节点属性为类声明的节点；通过分析所述节点属性为类声明的所述节点的数据结构，确定节点属性为类声明的所述节点对应的React组件是否继承自Component父类；若是，则获取节点属性为类声明的所述节点对应的类声明信息作为React组件的声明，否则，认为节点属性为类声明的所述节点对应的类不是React组件。
因为React中的任何组件的声明过程，都是继承Component是个抽象基础类的过程，因此，通过分析由React代码的语法信息，可以确定组件是否继承自Component父类，即确定React代码是否对应组件声明代码。
步骤120，通过解析所述声明，得到所述React组件的组件特征。
其中，所述组件特征包括以下的一项或多项：名称、传入属性、状态和生命周期。
其中，所述名称为React组件的名称字符串，如Button组件的名称，用于标识该React组件；所述传入属性为React组件接受的传入属性，如Button组件的尺寸、类型等；所述状态为React组件的内部状态，例如Button组件是否被按下等；所述生命周期用于标识React组件从开始创建到消亡所经历的状态。所述组件特征通常会包括调用接口。例如状态会对应状态初始化接口、状态更新接口，如setState；生命周期会包括生命周期接口，如componentWillMount、render。
在确定了一React组件的声明信息之后，可以进一步对所述React组件的声明信息进行解析，以获取React组件声明阶段需要定义的各种属性(即组件特征，如：组件的名称、组件的传入属性、组件内部状态、生命周期等)。本申请的一些实施例中，可以采用现有技术中通用的方法对抽象语法树中各节点的数据结构进行解析，并结合React组件的声明语法对解析得到的数据进行关键字识别，以确定是否包括上述组件特征。
本申请实施例中对抽象语法树中数据结构的解析过程不再赘述。通过解析抽象语法树中每个节点的数据结构，可以确定该节点对应的React组件的内部定义语句，进一步确定React组件内部定义的组件特征。
例如，通过计算处理设备执行预先编写的计算机程序，使得所述计算机程序在执行过程中，根据抽象语法树的树状结构信息依次读取各节点的数据结构，并按照抽象语法树的语法规则，确定对应React程序中组件声明代码的节点，并通过进一步该节点的子节点数据结构进行分析，从而确定定义React组件内部各组件特征的子节点。然后，对各子节点的数据结构进一步分析，得到React程序中组件的声明、调用等描述信息。最后，对该各节点的描述信息与React组件的组件特征关键字进行匹配，从而确定React组件都包括哪些组件特征、特征的声明和实现方法等。
例如，可以通过遍历对应React组件内部的语法节点(抽象语法树中的节点)，通过将各语法节点的数据结构中相关信息与关键字“props”进行匹配，找到所述React组件的构造函数的传入参数props，据此获取所述React组件接受的传入属性。
再例如，可以通过遍历对应React组件内部的语法节点的数据结构中的关键字，确定“state”(即状态)关键字对应的节点数据。匹配“state”关键字的节点数据通常对应React组件的状态声明或调用接口(即方法)，并进一步确定React组件的状态声明和调用接口等信息。以React组件中的以下状态声明语句为例：
对应上述语句，抽象语法树中的语法节点的数据结构中将包括如“escapedText：“state””、“text：“state””的描述信息。通过匹配关键字“State”,即可确定React组件的状态声明和调用接代码的相关节点，进一步遍历该相关节点的子节点，即可获取React组件的状态，如：count。
又例如，可以通过遍历对应React组件内部的语法节点的数据结构中的关键字，确定是否包含React组件的生命周期接口componentWillMount、componentDidMount、componentWillUnmount、componentDidHide、componentDidShow、render中的一个或多个生命周期，来获取React组件拥有的生命周期。
本申请的另一些实施例中，还可以根据所述React组件的构造函数确定所述React组件包括的组件特征。
步骤130，根据所述React组件的状态和生命周期，确定由所述React组件转换得到的Flutter组件的组件模板。
其中，所述组件模板匹配有状态Flutter组件或无状态Flutter组件。
本申请的实施例中，Flutter组件包括：有状态Flutter组件(如Stateful Widget)和无状态Flutter组件(如Stateless Widget)。因此，首先需要确定将React组件转换为有状态Flutter组件或无状态Flutter组件，之后，根据确定的结果获取相应的Flutter组件代码转换模板(即组件模板)，便于下一步按照获取的代码转换模板生成Flutter组件代码。
本申请的一些实施例中，所述根据所述React组件的状态和生命周期，确定由所述React组件转换得到的Flutter组件的组件模板，包括：确定所述React组件的所述组件特征是否包括状态或生命周期，若是，则确定由所述React组件转换得到的Flutter组件的组件模板匹配有状态Flutter组件；否则，确定由所述React组件转换得到的Flutter组件的组件模板匹配无状态Flutter组件。
本申请的一些实施例中，只要满足以下任意一个条件，即可确定由所述React组件转换得到的Flutter组件的组件模板匹配有状态Flutter组件：所述React组件的所述组件特征包括状态、所述React组件中的所述组件特征包括生命周期。若上述任意一个条件都不满足，则确定由所述React组件转换得到的Flutter组件的组件模板匹配无状态Flutter组件。
例如，当前述步骤确定的React组件包括状态组件特征时(如抽象语法书中React组件对应的语法节点的数据结构中包括“State”关键字，说明React组件包括状态声明或状态调用接口)，可以确定React组件为有状态组件。
再例如，当前述步骤确定的React组件包括生命周期组件特征时(如抽象语法书中React组件对应的语法节点的数据结构中包括“componentWillMount”、“componentDidMount”、“componentWillUnmount”、“componentDidHide”、“componentDidShow”、“render”关键字，说明React组件包括生命周期方法)，可以确定React组件为有状态组件。
反之，若确定React组件既不包括状态，又不包括生命周期，则确定React组件为无状态组件。
React组件为有状态组件时，React组件将转换为有状态Flutter组件(如StatefulWidget)；React组件为无状态组件时，React组件将转换为无状态Flutter组件(如Stateless Widget)。
计算处理设备进一步根据确定的Flutter组件类型选择匹配的组件模板，用于生成相应的Flutter组件代码。
步骤140，基于所述组件模板，对所述React组件的组件特征的声明和/或调用接口进行转换，得到与所述React组件对应的Flutter组件的程序代码。
在React中的组件(即Component)概念在Flutter中对应概念称为Widget。将React组件转译成Flutter组件，并不是单纯对tsx语言(React的开发语言)转译为dart(Flutter的开发语言)，由于React组件和Flutter组件各自的语法特性和应用场景，决定了二者的组件特征和接口调用方面存在很多差别。如，React中对组件传入属性(简称，props)的处理可以保证组件之间的调用，而Flutter中并没有类似的组件间通信机制。再例如，Flutter中状态的定义和设置与React有差异，React中设置状态时传入对象，而Flutter传入方法。又例如，Flutter有多个基类用于组件的扩展，而React中没有，以及，Flutter组件的生命周期不能跟React一一对应等。以上区别导致了在将React组件转换为Flutter组件时，需要根据两种开发架构的差异，对从抽象语法树中获取的React组件的描述信息进行重新封装，以生成Flutter组件代码。
本申请的一些实施例中，基于所述组件模板，对所述React组件的组件特征的声明和/或调用接口进行转换，得到与所述React组件对应的Flutter组件的程序代码，包括：通过所述组件模板创建一Flutter组件，所述Flutter组件的名称为所述React组件的所述名称；按照Flutter组件的调用规范，对所述React组件的所述传入属性、状态和生命周期的声明和/或调用接口进行转换，生成所述Flutter组件中相应特征对应的程序代码。
例如，以React组件为名称为“Button1”组件为例，首先通过前述步骤中确定的组件模板创建一个名称为“Button1”的Flutter组件，组件模板中包括根据Flutter组件编码要求预先设置的代码，在创建该Flutter组件“Button1”时，会自动生成一些模版代码。接下来，计算处理设备将对React组件包括的组件特征的声明信息和/或调用接口信息，逐一转换成Flutter组件中相应组件特征的声明代码和调用接口代码，并将按照在所述React组件中的声明位置，写入到创建Flutter组件“Button1”时生成的代码中。
下面分别对React组件中不同组件特征的相关代码转译过程进行举例说明。
本申请的一些实施例中，所述按照Flutter组件的调用规范，对所述React组件的所述传入属性、状态和生命周期的声明和/或调用接口进行转换，生成所述Flutter组件中相应特征对应的程序代码，包括：当所述React组件的组件特征包括状态时，以所述React组件的状态更新接口的名称声明所述Flutter组件的状态更新接口，并根据所述React组件的状态更新逻辑，实现所述Flutter组件的状态更新接口，以生成所述Flutter组件中状态的更新接口代码。
React组件中包括无状态组件和有状态组件，React中无状态组件就是一个单纯的方法，接收传入属性,返回执行结果。而flutter中无状态组件stateless widget是个抽象类，跟statefull widget同继承自Widget，stateless widget从build方法生成Widget，stateful widget则是从createState返回的State调用build方法生成Widget。当所述React组件的组件特征包括状态时，则计算处理设备会创建一个有状态Flutter组件，之后，将React组件中的状态声明和调用接口(即方法)在创建的Flutter有状态组件中实现。本申请的一些实施例中，可以将React组件的状态更新接口的名称声明所述Flutter组件的状态更新接口，并根据所述React组件的状态count的更新逻辑，实现所述Flutter组件的状态更新接口，以生成所述Flutter组件中状态的更新接口代码。
例如，首先通过以下代码生成一个与React组件相同的状态count。
之后，生成与React组件相同的状态更新接口相同的Flutter组件方法，生成的Flutter组件代码示例如下：
其中，Flutter组件的setState方法实现了React组件的状态count的更新逻辑。
本申请的一些实施例中，所述按照Flutter组件的调用规范，对所述React组件的所述传入属性、状态和生命周期的声明和/或调用接口进行转换，生成所述Flutter组件中相应特征对应的程序代码，包括：当所述React组件的组件特征包括生命周期时，以所述React组件的生命周期接口的名称对所述Flutter组件的相应生命周期接口进行封装，生成所述Flutter组件中相应生命周期接口的接口代码。
React组件的生命周期(即生命周期的调用接口或方法)包括：componentWillMount、componentDidMount、componentWillUnmount、componentDidHide、componentDidShow、render,而Flutter组件的生命周期包括初始化接口(如：initState、didChangeDependencies、build)、状态变化(如：didUpdateWidget)、组件移除(如dispose、deactivate)等，React组件的生命周期和Flutter组件的生命周期不能直接转译。本申请的一些实施例中，可以通过映射的形式，对功能和调用时期相同生命周期进行转换。例如，Flutter组件的生命周期调用接口initState是在***渲染树时调用，只调用一次，widget创建执行的第一个方法，因此，可以将React组件的componentWillMount映射为initState。再例如，dispose是当State对象从树中被永久移除时调用，通常在此回调中释放资源，则可以将React组件的componentWillUnmount映射为dispose，并根据映射关系生成Flutter组件生命周期的接口代码。
本申请的一些实施例中，React组件生命周期到Flutter组件生命周期的映射可以通过例如以下代码实现。
由上述代码可以看出，可以通过根据React组件的生命周期进行封装，生成所述Flutter组件中相应生命周期接口的接口代码。
本申请的一些实施例中，所述按照Flutter组件的调用规范，对所述React组件的所述传入属性、状态和生命周期的声明和/或调用接口进行转换，生成所述Flutter组件中相应特征对应的程序代码，包括：当所述React组件的组件特征包括传入属性时，根据所述React组件的所述传入属性的名称，声明所述Flutter组件的传入属性，并以所述React组件的名称为键，以所述React组件的所述传入属性为值，声明键值映射关系表，将所述键值映射关系表作为所述Flutter组件的传入属性接口代码的实现。
React框架提供了props传入属性，React框架帮助React组件在内部的props接口上获取外部的传入属性，用于实现组件间通信，而Flutter不提供这种机制。因此，对于React组件中的传入属性props，在转换为Flutter组件时，本申请的一些实施例中，采用了显示的声明一个键值映射关系表的方式，实现Flutter组件中传入属性的调用接口。以React组件View为例，在React中通过代码<View name＝“bar”>为组件name设置传入属性。在将React组件转换成Flutter时，在组件的声明代码中，以React组件的名称“name”为键，以React组件的所述传入属性“bar”为值，声明键值映射关系表props，将所述键值映射关系表props作为所述Flutter组件的传入属性接口代码的实现，通过键值映射关系表props保证Flutter组件之间的相互调用。
按照上述方案，即可由计算处理设备从React组件对应的抽象语法树中读取节点信息，并生成Flutter组件的程序代码。
本申请实施例公开的程序代码转换方法，通过根据React程序代码的抽象语法信息，获取React组件的声明；通过解析所述声明，得到所述React组件的组件特征；其中，所述组件特征包括以下的一项或多项：名称、传入属性、状态和生命周期；根据所述React组件的状态和生命周期，确定由所述React组件转换得到的Flutter组件的组件模板；其中，所述组件模板匹配：有状态Flutter组件或无状态Flutter组件；基于所述组件模板，对所述React组件的组件特征的声明和/或调用接口进行转换，得到与所述React组件对应的Flutter组件的程序代码，实现了从React组件声明到Flutter组件实现的转换。在开发分别支持React和flutter的多端应用时，仅需要在React架构下进行开发，之后，通过本申请实施例公开的程序代码转换方法，将React组件代码转换为Flutter组件代码，从而提升了软件开发效率。
实施例二
本实施例公开的一种程序代码转换装置，如图2所示，所述装置包括：
React组件声明获取模块210，用于根据React程序代码的抽象语法信息，获取React组件的声明；
React组件特征获取模块220，用于通过解析所述声明，得到所述React组件的组件特征；其中，所述组件特征包括以下的一项或多项：名称、传入属性、状态和生命周期；
Flutter组件模板确定模块230，用于根据所述React组件的状态和生命周期，确定由所述React组件转换得到的Flutter组件的组件模板；其中，所述组件模板匹配：有状态Flutter组件或无状态Flutter组件；
Flutter组件代码生成模块240，用于基于所述组件模板，对所述React组件的组件特征的声明和/或调用接口进行转换，得到与所述React组件对应的Flutter组件的程序代码。
本申请的一些实施例中，所述Flutter组件模板确定模块230，进一步用于：
确定所述React组件的所述组件特征是否包括状态或生命周期，若是，则确定由所述React组件转换得到的Flutter组件的组件模板匹配有状态Flutter组件；否则，确定由所述React组件转换得到的Flutter组件的组件模板匹配无状态Flutter组件。本申请的一些实施例中，所述Flutter组件代码生成模块240，进一步用于：
通过所述组件模板创建一Flutter组件，所述Flutter组件的名称为所述React组件的所述名称；
按照Flutter组件的调用规范，对所述React组件的所述传入属性、状态和生命周期的声明和/或调用接口进行转换，生成所述Flutter组件中相应特征对应的程序代码。
本申请的一些实施例中，所述按照Flutter组件的调用规范，对所述React组件的所述传入属性、状态和生命周期的声明和/或调用接口进行转换，生成所述Flutter组件中相应特征对应的程序代码，包括：
当所述React组件的组件特征包括状态时，以所述React组件的状态更新接口的名称声明所述Flutter组件的状态更新接口，并根据所述React组件的状态更新逻辑，实现所述Flutter组件的状态更新接口，以生成所述Flutter组件中状态的更新接口代码。
本申请的一些实施例中，所述按照Flutter组件的调用规范，对所述React组件的所述传入属性、状态和生命周期的声明和/或调用接口进行转换，生成所述Flutter组件中相应特征对应的程序代码，包括：
当所述React组件的组件特征包括生命周期时，以所述React组件的生命周期接口的名称对所述Flutter组件的相应生命周期接口进行封装，生成所述Flutter组件中相应生命周期接口的接口代码。
本申请的一些实施例中，所述按照Flutter组件的调用规范，对所述React组件的所述传入属性、状态和生命周期的声明和/或调用接口进行转换，生成所述Flutter组件中相应特征对应的程序代码，包括：
当所述React组件的组件特征包括传入属性时，根据所述React组件的所述传入属性的名称，声明所述Flutter组件的传入属性，并以所述React组件的名称为键，以所述React组件的所述传入属性为值，声明键值映射关系表，将所述键值映射关系表作为所述Flutter组件的传入属性接口代码的实现。
本实施例公开的程序代码转换装置，用于实现本申请实施例一中所述的程序代码转换方法，装置的各模块的具体实施方式不再赘述，可参见方法实施例相应步骤的具体实施方式。
本申请实施例公开的程序代码转换装置，通过根据React程序代码的抽象语法信息，获取React组件的声明；通过解析所述声明，得到所述React组件的组件特征；其中，所述组件特征包括以下的一项或多项：名称、传入属性、状态和生命周期；根据所述React组件的状态和生命周期，确定由所述React组件转换得到的Flutter组件的组件模板；其中，所述组件模板匹配：有状态Flutter组件或无状态Flutter组件；基于所述组件模板，对所述React组件的组件特征的声明和/或调用接口进行转换，得到与所述React组件对应的Flutter组件的程序代码，实现了从React组件声明到Flutter组件实现的转换。在开发分别支持React和flutter的多端应用时，仅需要在React架构下进行开发，之后，通过本申请实施例公开的程序代码转换装置，将React组件代码转换为Flutter组件代码，从而提升了软件开发效率。
本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
以上对本申请提供的一种程序代码转换方法及装置进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其一种核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。
以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。
本申请的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本申请实施例的电子设备中的一些或者全部部件的一些或者全部功能。本申请还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本申请的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。
例如，图3示出了可以实现根据本申请的方法的电子设备。所述电子设备可以为PC机、移动终端、个人数字助理、平板电脑等。该电子设备传统上包括处理器310和存储器320及存储在所述存储器320上并可在处理器310上运行的程序代码330，所述处理器310执行所述程序代码330时实现上述实施例中所述的方法。所述存储器320可以为计算机程序产品或者计算机可读介质。存储器320可以是诸如闪存、EEPROM(电可擦除可编程只读存储器)、EPROM、硬盘或者ROM之类的电子存储器。存储器320具有用于执行上述方法中的任何方法步骤的计算机程序的程序代码330的存储空间3201。例如，用于程序代码330的存储空间3201可以包括分别用于实现上面的方法中的各种步骤的各个计算机程序。所述程序代码330为计算机可读代码。这些计算机程序可以从一个或者多个计算机程序产品中读出或者写入到这一个或者多个计算机程序产品中。这些计算机程序产品包括诸如硬盘，紧致盘(CD)、存储卡或者软盘之类的程序代码载体。所述计算机程序包括计算机可读代码，当所述计算机可读代码在电子设备上运行时，导致所述电子设备执行根据上述实施例的方法。
本申请实施例还公开了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本申请实施例一所述的程序代码转换方法的步骤。
这样的计算机程序产品可以为计算机可读存储介质，该计算机可读存储介质可以具有与图3所示的电子设备中的存储器320类似布置的存储段、存储空间等。程序代码可以例如以适当形式进行压缩存储在所述计算机可读存储介质中。所述计算机可读存储介质通常为如参考图4所述的便携式或者固定存储单元。通常，存储单元包括计算机可读代码330’，所述计算机可读代码330’为由处理器读取的代码，这些代码被处理器执行时，实现上面所描述的方法中的各个步骤。
本文中所称的“一个实施例”、“实施例”或者“一个或者多个实施例”意味着，结合实施例描述的特定特征、结构或者特性包括在本申请的至少一个实施例中。此外，请注意，这里“在一个实施例中”的词语例子不一定全指同一个实施例。
在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本申请的实施例可以在没有这些具体细节的情况下被实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。
在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本申请可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。
最后应说明的是：以上实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围。
Claims (10)
1.一种程序代码转换方法，其特征在于，包括：
根据React程序代码的抽象语法信息，获取React组件的声明；
通过解析所述声明，得到所述React组件的组件特征；其中，所述组件特征包括以下的一项或多项：名称、传入属性、状态和生命周期；
根据所述React组件的状态和生命周期，确定由所述React组件转换得到的Flutter组件的组件模板；其中，所述组件模板匹配：有状态Flutter组件或无状态Flutter组件；
基于所述组件模板，对所述React组件的组件特征的声明和/或调用接口进行转换，得到与所述React组件对应的Flutter组件的程序代码。
2.根据权利要求1所述的方法，其特征在于，所述根据所述React组件的状态和生命周期，确定由所述React组件转换得到的Flutter组件的组件模板的步骤，包括：
确定所述React组件的所述组件特征是否包括状态或生命周期，若是，则确定由所述React组件转换得到的Flutter组件的组件模板匹配有状态Flutter组件；否则，确定由所述React组件转换得到的Flutter组件的组件模板匹配无状态Flutter组件。
3.根据权利要求1所述的方法，其特征在于，所述基于所述组件模板，对所述React组件的组件特征的声明和/或调用接口进行转换，得到与所述React组件对应的Flutter组件的程序代码的步骤，包括：
通过所述组件模板创建一Flutter组件，所述Flutter组件的名称为所述React组件的所述名称；
按照Flutter组件的调用规范，对所述React组件的所述传入属性、状态和生命周期的声明和/或调用接口进行转换，生成所述Flutter组件中相应特征对应的程序代码。
4.根据权利要求3所述的方法，其特征在于，所述按照Flutter组件的调用规范，对所述React组件的所述传入属性、状态和生命周期的声明和/或调用接口进行转换，生成所述Flutter组件中相应特征对应的程序代码的步骤，包括：
当所述React组件的组件特征包括状态时，以所述React组件的状态更新接口的名称声明所述Flutter组件的状态更新接口，并根据所述React组件的状态更新逻辑，实现所述Flutter组件的状态更新接口，以生成所述Flutter组件中状态的更新接口代码。
5.根据权利要求3所述的方法，其特征在于，所述按照Flutter组件的调用规范，对所述React组件的所述传入属性、状态和生命周期的声明和/或调用接口进行转换，生成所述Flutter组件中相应特征对应的程序代码的步骤，包括：
当所述React组件的组件特征包括生命周期时，以所述React组件的生命周期接口的名称对所述Flutter组件的相应生命周期接口进行封装，生成所述Flutter组件中相应生命周期接口的接口代码。
6.根据权利要求3所述的方法，其特征在于，所述按照Flutter组件的调用规范，对所述React组件的所述传入属性、状态和生命周期的声明和/或调用接口进行转换，生成所述Flutter组件中相应特征对应的程序代码的步骤，包括：
当所述React组件的组件特征包括传入属性时，根据所述React组件的所述传入属性的名称，声明所述Flutter组件的传入属性，并以所述React组件的名称为键，以所述React组件的所述传入属性为值，声明键值映射关系表，将所述键值映射关系表作为所述Flutter组件的传入属性接口代码的实现。
7.一种程序代码转换装置，其特征在于，包括：
React组件声明获取模块，用于根据React程序代码的抽象语法信息，获取React组件的声明；
React组件特征获取模块，用于通过解析所述声明，得到所述React组件的组件特征；其中，所述组件特征包括以下的一项或多项：名称、传入属性、状态和生命周期；
Flutter组件模板确定模块，用于根据所述React组件的状态和生命周期，确定由所述React组件转换得到的Flutter组件的组件模板；其中，所述组件模板匹配：有状态Flutter组件或无状态Flutter组件；
Flutter组件代码生成模块，用于基于所述组件模板，对所述React组件的组件特征的声明和/或调用接口进行转换，得到与所述React组件对应的Flutter组件的程序代码。
8.根据权利要求7所述的装置，其特征在于，所述Flutter组件模板确定模块，进一步用于：
确定所述React组件的所述组件特征是否包括状态或生命周期，若是，则确定由所述React组件转换得到的Flutter组件的组件模板匹配有状态Flutter组件；否则，确定由所述React组件转换得到的Flutter组件的组件模板匹配无状态Flutter组件。
9.一种电子设备，包括存储器、处理器及存储在所述存储器上并可在处理器上运行的程序代码，其特征在于，所述处理器执行所述程序代码时实现权利要求1至6任意一项所述的程序代码转换方法。
10.一种计算机可读存储介质，其上存储有程序代码，其特征在于，该程序代码被处理器执行时实现权利要求1至6任意一项所述的程序代码转换方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010582025.2A CN111880785A (zh) | 2020-06-23 | 2020-06-23 | 程序代码转换方法、装置，电子设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010582025.2A CN111880785A (zh) | 2020-06-23 | 2020-06-23 | 程序代码转换方法、装置，电子设备 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111880785A true CN111880785A (zh) | 2020-11-03 |
Family
ID=73157822
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010582025.2A Withdrawn CN111880785A (zh) | 2020-06-23 | 2020-06-23 | 程序代码转换方法、装置，电子设备 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111880785A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112799670A (zh) * | 2021-04-14 | 2021-05-14 | 盛威时代科技集团有限公司 | 一种统一多端逻辑开发的方法及*** |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107423106A (zh) * | 2017-07-07 | 2017-12-01 | 北京小米移动软件有限公司 | 支持多框架语法的方法和装置 |
| CN109814866A (zh) * | 2019-01-31 | 2019-05-28 | 天津字节跳动科技有限公司 | 页面应用转化为原生应用的处理方法和装置 |
| CN110442330A (zh) * | 2019-07-05 | 2019-11-12 | 五八有限公司 | 列表组件转换方法、装置、电子设备及存储介质 |
| CN110543297A (zh) * | 2018-05-28 | 2019-12-06 | 北京京东尚科信息技术有限公司 | 用于生成源码的方法和装置 |
| WO2019233293A1 (zh) * | 2018-06-07 | 2019-12-12 | 阿里巴巴集团控股有限公司 | 一种应用程序的开发方法和装置 |
| CN110825384A (zh) * | 2019-10-28 | 2020-02-21 | 国电南瑞科技股份有限公司 | 一种基于llvm的st语言编译方法及编译***和编译器 |
| CN111240676A (zh) * | 2020-01-13 | 2020-06-05 | 深圳前海微众银行股份有限公司 | 一种生成骨架屏的代码的方法及装置 |
-
2020
- 2020-06-23 CN CN202010582025.2A patent/CN111880785A/zh not_active Withdrawn
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107423106A (zh) * | 2017-07-07 | 2017-12-01 | 北京小米移动软件有限公司 | 支持多框架语法的方法和装置 |
| CN110543297A (zh) * | 2018-05-28 | 2019-12-06 | 北京京东尚科信息技术有限公司 | 用于生成源码的方法和装置 |
| WO2019233293A1 (zh) * | 2018-06-07 | 2019-12-12 | 阿里巴巴集团控股有限公司 | 一种应用程序的开发方法和装置 |
| CN109814866A (zh) * | 2019-01-31 | 2019-05-28 | 天津字节跳动科技有限公司 | 页面应用转化为原生应用的处理方法和装置 |
| CN110442330A (zh) * | 2019-07-05 | 2019-11-12 | 五八有限公司 | 列表组件转换方法、装置、电子设备及存储介质 |
| CN110825384A (zh) * | 2019-10-28 | 2020-02-21 | 国电南瑞科技股份有限公司 | 一种基于llvm的st语言编译方法及编译***和编译器 |
| CN111240676A (zh) * | 2020-01-13 | 2020-06-05 | 深圳前海微众银行股份有限公司 | 一种生成骨架屏的代码的方法及装置 |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112799670A (zh) * | 2021-04-14 | 2021-05-14 | 盛威时代科技集团有限公司 | 一种统一多端逻辑开发的方法及*** |
| CN112799670B (zh) * | 2021-04-14 | 2021-08-03 | 盛威时代科技集团有限公司 | 一种统一多端逻辑开发的方法及*** |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109976761B (zh) | 软件开发工具包的生成方法、装置及终端设备 | |
| CN111708539B (zh) | 一种应用程序代码转换方法、装置、电子设备和存储介质 | |
| EP3433732B1 (en) | Converting visual diagrams into code | |
| CN107402746B (zh) | 一种自动生成代码文件的方法及装置 | |
| CN106970820B (zh) | 代码存储方法及代码存储装置 | |
| WO2021017735A1 (zh) | 一种智能合约的形式化验证方法、电子装置及存储介质 | |
| WO2019233293A1 (zh) | 一种应用程序的开发方法和装置 | |
| CN109739494B (zh) | 一种基于Tree-LSTM的API使用代码生成式推荐方法 | |
| CN108920496B (zh) | 一种渲染方法及装置 | |
| CN110543297B (zh) | 用于生成源码的方法和装置 | |
| US20140068559A1 (en) | Annotation-based infrastructure for automatically generating "predictable" ids for visual components in a web-application | |
| CN110502520B (zh) | 一种数据入库的方法、***、设备及计算机可读存储介质 | |
| CN110647322B (zh) | 列表渲染方法、装置、电子设备和计算机可读介质 | |
| US20210365258A1 (en) | Method and system for updating legacy software | |
| CN114153459A (zh) | 接口文档生成方法及装置 | |
| CN112558984A (zh) | 代码编译的方法、装置、电子设备以及服务器 | |
| CN116028028A (zh) | 请求函数生成方法、装置、设备及存储介质 | |
| CN111857709A (zh) | React组件和Flutter组件的映射方法、装置、电子设备及存储介质 | |
| CN111078228A (zh) | 网页到小程序的转换方法、装置、服务器及存储介质 | |
| CN111880785A (zh) | 程序代码转换方法、装置，电子设备 | |
| CN115618363B (zh) | 漏洞路径的挖掘方法及相关设备 | |
| CN112579151A (zh) | 一种模型文件的生成方法和装置 | |
| CN113094086B (zh) | 组件集成方法、装置、计算机可读存储介质及电子设备 | |
| CN111399842B (zh) | 一种代码编译方法及装置 | |
| CN112306493A (zh) | 热修复补丁生成方法、装置、存储介质及计算机设备 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| WW01 | Invention patent application withdrawn after publication |
Application publication date: 20201103 |
|
| WW01 | Invention patent application withdrawn after publication |