CN110442330A - 列表组件转换方法、装置、电子设备及存储介质 - Google Patents

Abstract

本发明公开一种列表组件转换方法、装置、电子设备及存储介质，该方法包括：获取第一AST，并遍历所述第一AST得到目标属性内容，其中，所述第一AST为RN列表组件的AST，所述目标属性内容用于创建第二AST，所述第二AST为小程序列表组件的AST；基于所述目标属性内容，创建scroll‑view语法树节点，创建Item语法树节点，以及创建分割线语法树节点；基于所述scroll‑view语法树节点、所述Item语法树节点和所述分割线语法树节点，生成所述第二AST；将所述第二AST解析为所述小程序列表组件。可见，本发明实施例中，无需重复在小程序环境开发对应的列表组件代码，降低了开发成本。

Description

列表组件转换方法、装置、电子设备及存储介质

技术领域

本发明涉及信息处理技术领域，特别是涉及一种列表组件转换方法、装置、电子设备及存储介质。

背景技术

在移动开发领域，自从Facebook推出React Native(简称RN)跨平台移动应用开发框架后，基于JavaScript的跨平台开发逐渐成为移动开发领域中的热门领域。RN推出不久，国内一些互联网公司基于本公司的平台，例如腾讯公司基于微信平台，推出了小程序开发框架，开发者可以在小程序开发框架下，开发能够在微信中运行的小程序。目前，虽然RN项目和小程序项目均是使用JavaScript语言开发的，但是由于语法规则彼此不同，因此开发者需要学习两套开发框架技术，开发两套代码，导致开发成本比较高。为了降低开发成本，迫切需要一种能够将RN项目转换为小程序项目的技术；在将RN项目转换为小程序项目的过程中，列表组件是业务开发的核心组件，列表组件语法差异较大、涉及的情况比较复杂，因此如何将RN列表组件转换为小程序列表组件，已成为本领域技术人员亟待解决的问题。

发明内容

本发明实施例提供一种列表组件转换方法、装置、电子设备及存储介质，以解决现有技术中重复开发所造成的开发成本较高的技术问题。

根据本发明的第一方面，公开了一种列表组件转换方法，所述方法包括：

获取第一抽象语法树AST，并遍历第一AST得到目标属性内容，其中，所述第一AST为RN列表组件的AST，所述目标属性内容用于创建第二AST，所述第二AST为小程序列表组件的AST；

基于所述目标属性内容，创建scroll-view语法树节点，创建Item语法树节点，以及创建分割线语法树节点；

基于所述scroll-view语法树节点、所述Item语法树节点和所述分割线语法树节点，生成所述第二AST；

将所述第二AST解析为所述小程序列表组件。

可选地，作为一个实施例，所述遍历第一AST得到目标属性内容，包括：

遍历第一AST中的语法树节点，查找所述第一AST中节点名称为data的语法树节点、节点名称为renderItem的语法树节点和节点名称为ItemSeparatorComponent的语法树节点；

将节点名称为data的语法树节点中的vlaue值、节点名称为renderItem的语法树节点中的vlaue值、以及节点名称为ItemSeparatorComponent的语法树节点的节点信息确定为目标属性内容。

可选地，作为一个实施例，所述创建scroll-view语法树节点，包括：

创建scroll-view元素；

创建包含wx:for和wx:key的block元素，其中，所述wx:for的属性值为所述节点名称为data的语法树节点中的vlaue值，所述wx:key的属性值为所述小程序中默认支持的{{index}}；

将所述block元素添加为所述scroll-view元素的子元素，得到scroll-view语法树节点。

可选地，作为一个实施例，所述创建Item语法树节点，包括：

遍历所述第一AST中的语法树节点，查找非render节点，其中，所述非render节点是节点名称不为render的语法树节点；

针对每个非render语法树节点，创建一个对应的template节点，将非render语法树节点转换为符合所述小程序的语法规则的语法树节点，将转换得到语法树节点添加为对应的template节点的子节点，并将对应的template节点的名称设置为当前所属方法的名称；

针对所创建的template节点，创建对应的template引用节点，得到Item语法树节点，其中，所述template引用节点的is属性对应的vlaue值为所述节点名称为renderItem的语法树节点中的vlaue值，所述template引用节点的data属性对应的vlaue值为所述小程序中默认支持的{{item}}。

可选地，作为一个实施例，所述创建分割线语法树节点，包括：

根据所述节点名称为ItemSeparatorComponent的语法树节点的节点信息，创建分割线语法树节点。

可选地，作为一个实施例，所述基于所述scroll-view语法树节点、所述Item语法树节点和所述分割线语法树节点，生成所述第二AST，包括：

将所述Item语法树节点中的所述template引用节点添加为所述scroll-view语法树节点中所述block元素的子元素；

将所述分割线语法树节点添加为所述scroll-view语法树节点中所述scroll-view元素的子元素，得到所述第二AST，其中，所述分割线语法树节点的添加位置位于所述scroll-view元素中其它子元素的后面。

根据本发明的第二方面，公开了一种列表组件转换装置，所述装置包括：

获取模块，用于获取第一AST；

遍历模块，用于遍历所述第一AST得到目标属性内容，其中，所述第一AST为RN列表组件的AST，所述目标属性内容用于创建第二AST，所述第二AST为小程序列表组件的AST；

第一创建模块，用于基于所述目标属性内容，创建scroll-view语法树节点；

第二创建模块，用于基于所述目标属性内容，创建Item语法树节点；

第三创建模块，用于基于所述目标属性内容，创建分割线语法树节点；

生成模块，用于基于所述scroll-view语法树节点、所述Item语法树节点和所述分割线语法树节点，生成所述第二AST；

解析模块，用于将所述第二AST解析为所述小程序列表组件。

可选地，作为一个实施例，所述遍历模块包括：

第一遍历子模块，用于遍历第一AST中的语法树节点，查找所述第一AST中节点名称为data的语法树节点、节点名称为renderItem的语法树节点和节点名称为ItemSeparatorComponent的语法树节点；

目标属性内容确定子模块，用于将节点名称为data的语法树节点中的vlaue值、节点名称为renderItem的语法树节点中的vlaue值、以及节点名称为ItemSeparatorComponent的语法树节点的节点信息确定为目标属性内容。

可选地，作为一个实施例，所述第一创建模块包括：

第一创建子模块，用于创建scroll-view元素；

第二创建子模块，用于创建包含wx:for和wx:key的block元素，其中，所述wx:for的属性值为所述节点名称为data的语法树节点中的vlaue值，所述wx:key的属性值为所述小程序中默认支持的{{index}}；

第一添加子模块，用于将所述block元素添加为所述scroll-view元素的子元素，得到scroll-view语法树节点。

可选地，作为一个实施例，所述第二创建模块包括：

第二遍历子模块，用于遍历所述第一AST中的语法树节点，查找非render节点，其中，所述非render节点是节点名称不为render的语法树节点；

第三创建子模块，用于针对每个非render语法树节点，创建一个对应的template节点，将非render语法树节点转换为符合所述小程序的语法规则的语法树节点，将转换得到语法树节点添加为对应的template节点的子节点，并将对应的template节点的名称设置为当前所属方法的名称；

第四创建子模块，用于针对所创建的template节点，创建对应的template引用节点，得到Item语法树节点，其中，所述template引用节点的is属性对应的vlaue值为所述节点名称为renderItem的语法树节点中的vlaue值，所述template引用节点的data属性对应的vlaue值为所述小程序中默认支持的{{item}}。

可选地，作为一个实施例，所述第三创建模块包括：

第五创建子模块，用于根据所述节点名称为ItemSeparatorComponent的语法树节点的节点信息，创建分割线语法树节点。

可选地，作为一个实施例，所述生成模块包括：

第二添加子模块，用于将所述Item语法树节点中的所述template引用节点添加为所述scroll-view语法树节点中所述block元素的子元素；

第三添加子模块，用于将所述分割线语法树节点添加为所述scroll-view语法树节点中所述scroll-view元素的子元素，得到所述第二AST，其中，所述分割线语法树节点的添加位置位于所述scroll-view元素中其它子元素的后面。

根据本发明的第三方面，公开了一种电子设备，所述电子设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现上述列表组件转换方法中的步骤。

根据本发明的第四方面，公开了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述列表组件转换方法中的步骤。

本发明实施例中，通过遍历RN列表组件的抽象语法树，获取该抽象语法树中的特定属性内容，利用获取到的特定属性内容，生成小程序列表组件的抽象语法树中的各语法树节点，进而生成小程序组件对应的代码文件。与现有技术相比，本发明实施例无需重复在小程序环境开发对应的列表组件代码，降低了开发成本。

附图说明

图1是本发明的一个实施例的列表组件转换方法的流程图；

图2是本发明的一个实施例的列表组件转换装置的结构示意图。

具体实施方式

为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本发明作进一步详细的说明。

需要说明的是，对于方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本发明实施例并不受所描述的动作顺序的限制，因为依据本发明实施例，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作并不一定是本发明实施例所必须的。

本发明实施例提供了一种列表组件转换方法、装置、电子设备及存储介质。

为了便于理解，下面首先对本发明实施例中涉及到的一些概念进行介绍。

React Native(简称RN)是一种由FaceBook推出的开源跨平台移动应用开发框架，RN使用JavaScript语言，通过iOS和Android平台提供的JS解析引擎，来调用iOS和Android平台的Native功能。

微信小程序是一种由腾讯公司推出的、基于微信APP的跨平台移动应用开发框架，微信小程序使用JavaScript语言，调用微信APP中具有的功能，从而来支持基于其上运行的移动应用的开发。

抽象语法树(Abstract Syntax Tree，AST)是用树状表现形式来展现源代码的抽象语法结构，利用抽象语法树可以方便地实现多种源程序处理工具，例如智能编辑器和语言翻译器等。

Babel是一种JavaScript语言编译器，Babel提供的API可以用来操作JavaScript代码的抽象语法树，从而来实现代码转化。

FlatList是RN官方提供的列表组件，是RN项目开发中使用的最多的列表组件。

scroll-view是微信小程序开发框架中提供的列表组件。

Item是列表中每一行或者每一列的视图元素。

需要说明的是，本发明实施例中不做特别说明，RN列表组件指的是FlatList，小程序指的是微信小程序，小程序列表组件指的是微信小程序列表组件。针对RN官方推出的其他类型的列表组件，不失一般性，其转化方法可以根据本发明实施例中FlatList的转化规则类推。

接下来对本发明实施例提供的一种列表组件转换方法进行介绍。

为了便于对本发明实施例提供的技术方案进行理解，在进行后续步骤的介绍之前，首先通过分析列表组件转换前后的代码内容，来引出具体的转化思路。

转化前的RN列表组件的代码样例为：

通过对上述代码样例分析可知：上述代码样例展示了一个通用的RN列表组件(即FlatList)，该RN列表组件中设置了refreshing/data属性，并且实现了以下函数功能：刷新函数：onRefresh，生成key函数:keyExtractor，渲染每一行组件的函数：renderItem，以及分割线组件创建函数：ItemSeparatorComponent。

相应的，转化后的小程序列表组件的代码样例为：

<template name＝"_renderItem">

<view class＝"styles_container">

<！--具体布局内容>

</view>

</template>

<template name＝"renderSeparator">

<view><！--具体布局内容></view>

</template>

<block>

<scroll-view>

<block wx:for＝"{{data}}"wx:key＝"{{index}}">

<template is＝"_renderItem"data＝"{{item}}"/>

<template is＝"renderSeparator"data＝"{{item}}"/>

</block>

</scroll-view>

</block>

通过对上述代码样例分析可知：上述转化后的小程序列表组件代码中首先创建一个scroll-view，并在scroll-view中遍历data，来创建每一行/列的item和item分割线来实现列表功能，同时针对节点引用节点的情况，对被引用的节点，采用template进行封装，其中，WXML提供模板(template)，可以在模板中定义代码片段，然后在不同的地方调用。此外，RN中的刷新函数可以直接删除，在小程序中可以通过SetData来实现数据变动时界面的刷新，也可以通过引入其他状态管理框架来实现组件界面的刷新；针对生成key函数，在小程序中有wx:key对应；针对分割线，通过创建独立的renderSeparator视图来解决。

基于以上对RN列表组件代码和小程序列表组件代码的分析，可以得到图1所示实施例的转化流程，图1是本发明的一个实施例的列表组件转换方法的流程图，该方法由电子设备执行，在实际应用中，该电子设备可以包括：服务器、电脑和桌面机等计算机设备，也可以包括：智能手机、平板电脑和个人数字助理等移动终端，如图1所示，该方法可以包括以下步骤：步骤101、步骤102、步骤103、步骤104和步骤105，其中，

在步骤101中，获取第一AST，其中，第一AST为RN列表组件的AST。

本发明实施例中，考虑到相较于直接分析源代码，抽象语法树更易于进行语法和内容分析，并且抽象语法树中记录了源代码的关键信息，因此在将RN列表组件转换为小程序列表组件时，可以先将待转换的RN列表组件的代码转换为对应的AST，之后基于待转换的RN列表组件的AST，生成小程序组件的AST，最后将小程序组件的AST解析为小程序列表组件的代码，从而实现将RN列表组件转换为小程序列表组件。

本发明实施例中，在将待转换的RN列表组件的代码转换为待转换的RN列表组件的AST时，可以根据RN列表组件所在文件的文件路径，读取RN列表组件的代码文件，之后调用Babel提供的API(例如transform)对该代码文件进行处理，生成目标抽象语法树。

本发明实施例中，如果读取到的代码文件中仅包含RN列表组件的代码，则将目标抽象语法树确定为第一AST。

本发明实施例中，如果读取到的代码文件中包含RN列表组件的代码和RN列表组件之外的其他代码，则遍历目标抽象语法树中的所有语法树节点，调用Babel提供的API查找RN列表组件的抽象语法树，查找到的抽象语法树为第一AST。

可见，本发明实施例中，可以将待转换的RN组件的代码转换为对应的AST，之后再基于待转换的RN组件的AST进行组件类型的转换，与直接基于待转换的RN组件的代码进行组件类型的转换相比，由于AST更易于语法和内容分析，因此本发明实施例技术方案更易于程序化实现。

在步骤102中，遍历第一AST得到目标属性内容，其中，目标属性内容用于创建第二AST，第二AST为小程序列表组件的AST。

本发明实施例中，目标属性内容用于创建第二AST中的各语法树节点。

本发明实施例中，考虑到生成AST的核心是生成语法树节点，且每个语法树节点都表示源代码中的一种结构，因此在基于待转换的RN列表组件的AST生成小程序组件的AST时，可以以语法树节点为处理单位，先找出待转换的RN列表组件的AST中与组件转换相关的语法树节点，将这些与组件转换相关的语法树节点转换为符合小程序列表组件语法规则的语法树节点，之后基于转换得到的符合小程序列表组件语法规则的语法树节点，生成小程序组件的AST。

本发明实施例中，考虑到通用的RN列表组件的代码主要实现以下功能：data属性设置功能、刷新功能、生成key函数功能、渲染每一行组件的功能和创建组件分割线的功能，因此在查找待转换的RN列表组件的AST中与组件转换相关的语法树节点时，可以从待转换的RN列表组件的AST中查找出与实现上述功能的代码相对应的语法树节点，将这些语法树节点确定为与组件转换相关的语法树节点，具体的，与组件转换相关的语法树节点可以包括：待转换的RN列表组件的AST中节点名称为data的语法树节点、节点名称为renderItem的语法树节点和节点名称为ItemSeparatorComponent的语法树节点。

本发明实施例中，考虑到语法树节点中除包含一些与组件转换相关的关键信息之外，还会包括一些通用的格式信息，为了降低处理工作量，节省组件转换设备的CPU和存储资源，因此在将待转换的RN列表组件的AST中与组件转换相关的语法树节点转换为符合小程序列表组件语法规则的语法树节点时，可以从与组件转换相关的语法树节点中仅提取与组件转换相关的关键信息，其中，与组件转换相关的关键信息即为目标属性内容，具体的，目标属性内容可以包括：待转换的RN列表组件的AST中节点名称为data的语法树节点中的vlaue值、节点名称为renderItem的语法树节点中的vlaue值和节点名称为ItemSeparatorComponent的语法树节点的节点信息。

本发明实施例中，当目标属性内容包括：待转换的RN列表组件的AST中节点名称为data的语法树节点中的vlaue值、节点名称为renderItem的语法树节点中的vlaue值和节点名称为ItemSeparatorComponent的语法树节点的节点信息时，上述102具体可以包括以下步骤：

遍历第一AST中的语法树节点，查找第一AST中节点名称为data的语法树节点、节点名称为renderItem的语法树节点和节点名称为ItemSeparatorComponent的语法树节点；

将节点名称为data的语法树节点中的vlaue值、节点名称为renderItem的语法树节点中的vlaue值、以及节点名称为ItemSeparatorComponent的语法树节点的节点信息确定为目标属性内容；其中，节点名称为ItemSeparatorComponent的语法树节点的节点信息可以理解为ItemSeparatorComponent的语法树节点的备份。

本发明实施例中，为了后续使用方便，可以创建一个专门的数组，将目标属性内容保存在该数组中，以供后续转换使用；或者也可以创建一个Map，将目标属性内容保存在该Map中，以供后续转换使用，本发明实施例对此不作限定。

在步骤103中，基于目标属性内容，创建scroll-view语法树节点，创建Item语法树节点，以及创建分割线语法树节点。

本发明实施例中，在将待转换的RN列表组件的AST中与组件转换相关的语法树节点转换为符合小程序列表组件语法规则的语法树节点时，其本质上是：将待转换的RN列表组件的AST中节点名称为data的语法树节点转换为符合小程序列表组件语法规则的scroll-view语法树节点，将待转换的RN列表组件的AST中节点名称为renderItem的语法树节点转换为符合小程序列表组件语法规则的Item语法树节点，将待转换的RN列表组件的AST中节点名称为ItemSeparatorComponent的语法树节点转换为符合小程序列表组件语法规则的分割线语法树节点。

本发明实施例中，在将待转换的RN列表组件的AST中节点名称为data的语法树节点转换为符合小程序列表组件语法规则的scroll-view语法树节点时，可以基于待转换的RN列表组件的AST中节点名称为data的语法树节点中的vlaue值，生成符合小程序列表组件语法规则的scroll-view语法树节点；基于该转换思路，此时，上述步骤103具体可以包括以下步骤：

创建scroll-view元素，创建包含wx:for和wx:key的block元素，将block元素添加为scroll-view元素的子元素，得到scroll-view语法树节点，其中，wx:for的属性值为节点名称为data的语法树节点中的vlaue值，wx:key的属性值为小程序中默认支持的{{index}}。

本发明实施例中，在scroll-view元素时，可以首先创建scroll-view的开始标签<>和结束标签</>，之后创建<scroll-view></scroll-view>，即scroll-view元素；同理在创建block元素(即scrollViewBlock)时，可以首先创建block的开始标签<>和结束标签</>，之后创建<block></block>，即block元素。

本发明实施例中，在将待转换的RN列表组件的AST中节点名称为renderItem的语法树节点转换为符合小程序列表组件语法规则的Item语法树节点时，可以基于待转换的RN列表组件的AST中节点名称为renderItem的语法树节点中的vlaue值，生成符合小程序列表组件语法规则的Item语法树节点；基于该转换思路，此时，上述步骤103具体可以包括以下步骤：

遍历第一AST中的语法树节点，查找非render节点，针对每个非render语法树节点，创建一个对应的template节点，将非render语法树节点转换为符合小程序的语法规则的语法树节点，将转换得到语法树节点添加为对应的template节点的子节点，并将对应的template节点的名称设置为当前所属方法的名称；针对所创建的template节点，创建对应的template引用节点，得到Item语法树节点，其中，非render节点是节点名称不为render的语法树节点，template引用节点的is属性对应的vlaue值为节点名称为renderItem的语法树节点中的vlaue值，template引用节点的data属性对应的vlaue值为小程序中默认支持的{{item}}。

本发明实施例中，考虑到RN中render函数是布局渲染的入口，其他不在render方法中实现的布局或者是在render中引用的，或者是被其他布局引用的，因此可以将这些不在render方法中实现的布局提取出来，用小程序的template进行包装。

本发明实施例中，可以采用相关技术中的任意一种，将非render语法树节点转换为符合小程序的语法规则的语法树节点，本发明实施例对此不作限定。

本发明实施例中，在将待转换的RN列表组件的AST中节点名称为ItemSeparatorComponent的语法树节点转换为符合小程序列表组件语法规则的分割线语法树节点时，可以基于待转换的RN列表组件的AST中节点名称为ItemSeparatorComponent的语法树节点的节点信息，生成符合小程序列表组件语法规则的分割线语法树节点；基于该转换思路，此时，上述步骤103具体可以包括以下步骤：

根据节点名称为ItemSeparatorComponent的语法树节点的节点信息，创建分割线语法树节点。

本发明实施例中，考虑到节点名称为ItemSeparatorComponent的语法树节点的节点信息为ItemSeparatorComponent的语法树节点的备份，因此可以直接将第一AST中节点名称为ItemSeparatorComponent的语法树节点，作为第二AST的分割线语法树节点。

可见，本发明实施例中，在将RN列表组件转换为小程序列表组件时，可以以语法树节点为处理单位，将RN列表组件的AST中的特定语法树节点逐个转换为符合小程序列表组件语法规则的语法树节点，避免转换过程中的遗漏或者混淆等问题。

在步骤104中，基于scroll-view语法树节点、Item语法树节点和分割线语法树节点，生成第二AST。

本发明实施例中，考虑到AST是由语法树节点及语法树节点之间的关联关系构成的，因此，在生成scroll-view语法树节点、Item语法树节点和分割线语法树节点后，可以通过建立scroll-view语法树节点、Item语法树节点和分割线语法树节点之间的引用关系，来将scroll-view语法树节点、Item语法树节点和分割线语法树节点关联起来，以生成第二AST。

本发明实施例中，在建立scroll-view语法树节点、Item语法树节点和分割线语法树节点之间的引用关系时，可以将Item语法树节点和分割线语法树节点设置为scroll-view语法树节点的子节点；基于这种处理思路，此时，上述步骤104具体可以包括以下步骤：

将Item语法树节点中的template引用节点添加为scroll-view语法树节点中block元素的子元素，将分割线语法树节点添加为scroll-view语法树节点中scroll-view元素的子元素，得到第二AST，其中，分割线语法树节点的添加位置位于scroll-view元素中其它子元素的后面。

在步骤105中，将第二AST解析为小程序列表组件。

本发明实施例中，在将第二AST解析为小程序列表组件时，可以调用Babel提供的API将第二AST解析为小程序列表组件的代码，从而实现将RN列表组件转换为小程序列表组件。

由上述实施例可见，该实施例中，通过遍历RN列表组件的抽象语法树，获取该抽象语法树中的特定属性内容，利用获取到的特定属性内容，生成小程序列表组件的抽象语法树中的各语法树节点，进而生成小程序组件对应的代码文件。与现有技术相比，本发明实施例无需重复在小程序环境开发对应的列表组件代码，降低了开发成本。

需要说明的是，以上实施例中对FlatList的部分属性和函数的转化过程进行了说明，对于以上实施例中未提及的FlatList的其他属性和函数，不失一般性地，可以使用本发明实施例提供的方法进行转化。

图2是本发明的一个实施例的列表组件转换装置的结构示意图，如图2所示，信息推荐装置200可以包括：获取模块201、遍历模块202、第一创建模块203、第二创建模块204、第三创建模块205、生成模块206和解析模块207，其中，

获取模块201，用于获取第一AST；

遍历模块202，用于遍历所述第一AST得到目标属性内容，其中，所述第一AST为RN列表组件的AST，所述目标属性内容用于创建第二AST，所述第二AST为小程序列表组件的AST；

第一创建模块203，用于基于所述目标属性内容，创建scroll-view语法树节点；

第二创建模块204，用于基于所述目标属性内容，创建Item语法树节点；

第三创建模块205，用于基于所述目标属性内容，创建分割线语法树节点；

生成模块206，用于基于所述scroll-view语法树节点、所述Item语法树节点和所述分割线语法树节点，生成所述第二AST；

解析模块207，用于将所述第二AST解析为所述小程序列表组件。

由上述实施例可见，该实施例中，通过遍历RN列表组件的抽象语法树，获取该抽象语法树中的特定属性内容，利用获取到的特定属性内容，生成小程序列表组件的抽象语法树中的各语法树节点，进而生成小程序组件对应的代码文件。与现有技术相比，本发明实施例无需重复在小程序环境开发对应的列表组件代码，降低了开发成本。

可选地，作为一个实施例，所述遍历模块202，可以包括：

第一遍历子模块，用于遍历第一AST中的语法树节点，查找所述第一AST中节点名称为data的语法树节点、节点名称为renderItem的语法树节点和节点名称为ItemSeparatorComponent的语法树节点；

目标属性内容确定子模块，用于将节点名称为data的语法树节点中的vlaue值、节点名称为renderItem的语法树节点中的vlaue值、以及节点名称为ItemSeparatorComponent的语法树节点的节点信息确定为目标属性内容。

可选地，作为一个实施例，所述第一创建模块203，可以包括：

第一创建子模块，用于创建scroll-view元素；

第二创建子模块，用于创建包含wx:for和wx:key的block元素，其中，所述wx:for的属性值为所述节点名称为data的语法树节点中的vlaue值，所述wx:key的属性值为所述小程序中默认支持的{{index}}；

第一添加子模块，用于将所述block元素添加为所述scroll-view元素的子元素，得到scroll-view语法树节点。

可选地，作为一个实施例，所述第二创建模块204，可以包括：

第二遍历子模块，用于遍历所述第一AST中的语法树节点，查找非render节点，其中，所述非render节点是节点名称不为render的语法树节点；

第三创建子模块，用于针对每个非render语法树节点，创建一个对应的template节点，将非render语法树节点转换为符合所述小程序的语法规则的语法树节点，将转换得到语法树节点添加为对应的template节点的子节点，并将对应的template节点的名称设置为当前所属方法的名称；

第四创建子模块，用于针对所创建的template节点，创建对应的template引用节点，得到Item语法树节点，其中，所述template引用节点的is属性对应的vlaue值为所述节点名称为renderItem的语法树节点中的vlaue值，所述template引用节点的data属性对应的vlaue值为所述小程序中默认支持的{{item}}。

可选地，作为一个实施例，所述第三创建模块205，可以包括：

第五创建子模块，用于根据所述节点名称为ItemSeparatorComponent的语法树节点的节点信息，创建分割线语法树节点。

可选地，作为一个实施例，所述生成模块206，可以包括：

第二添加子模块，用于将所述Item语法树节点中的所述template引用节点添加为所述scroll-view语法树节点中所述block元素的子元素；

第三添加子模块，用于将所述分割线语法树节点添加为所述scroll-view语法树节点中所述scroll-view元素的子元素，得到所述第二AST，其中，所述分割线语法树节点的添加位置位于所述scroll-view元素中其它子元素的后面。

对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

根据本发明的一个实施例，本发明还提供了一种电子设备，包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现如上述任意一个实施例所述的列表组件转换方法中的步骤。

根据本发明的一个实施例，本发明还提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如上述任意一个实施例所述的列表组件转换方法中的步骤。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。

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

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

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

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

尽管已描述了本发明实施例的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明实施例范围的所有变更和修改。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者终端设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者终端设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者终端设备中还存在另外的相同要素。

以上对本发明所提供的一种列表组件转换方法、装置、电子设备及存储介质，进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims (14)

1.一种列表组件转换方法，其特征在于，所述方法包括：

获取第一抽象语法树AST，并遍历第一AST得到目标属性内容，其中，所述第一AST为RN列表组件的AST，所述目标属性内容用于创建第二AST，所述第二AST为小程序列表组件的AST；

基于所述目标属性内容，创建scroll-view语法树节点，创建Item语法树节点，以及创建分割线语法树节点；

基于所述scroll-view语法树节点、所述Item语法树节点和所述分割线语法树节点，生成所述第二AST；

将所述第二AST解析为所述小程序列表组件。

2.根据权利要求1所述的方法，其特征在于，所述遍历第一AST得到目标属性内容，包括：

遍历第一AST中的语法树节点，查找所述第一AST中节点名称为data的语法树节点、节点名称为renderItem的语法树节点和节点名称为ItemSeparatorComponent的语法树节点；

将节点名称为data的语法树节点中的vlaue值、节点名称为renderItem的语法树节点中的vlaue值、以及节点名称为ItemSeparatorComponent的语法树节点的节点信息确定为目标属性内容。

3.根据权利要求2所述的方法，其特征在于，所述创建scroll-view语法树节点，包括：

创建scroll-view元素；

创建包含wx:for和wx:key的block元素，其中，所述wx:for的属性值为所述节点名称为data的语法树节点中的vlaue值，所述wx:key的属性值为所述小程序中默认支持的{{index}}；

将所述block元素添加为所述scroll-view元素的子元素，得到scroll-view语法树节点。

4.根据权利要求3所述的方法，其特征在于，所述创建Item语法树节点，包括：

遍历所述第一AST中的语法树节点，查找非render节点，其中，所述非render节点是节点名称不为render的语法树节点；

针对每个非render语法树节点，创建一个对应的template节点，将非render语法树节点转换为符合所述小程序的语法规则的语法树节点，将转换得到语法树节点添加为对应的template节点的子节点，并将对应的template节点的名称设置为当前所属方法的名称；

针对所创建的template节点，创建对应的template引用节点，得到Item语法树节点，其中，所述template引用节点的is属性对应的vlaue值为所述节点名称为renderItem的语法树节点中的vlaue值，所述template引用节点的data属性对应的vlaue值为所述小程序中默认支持的{{item}}。

5.根据权利要求4所述的方法，其特征在于，所述创建分割线语法树节点，包括：

根据所述节点名称为ItemSeparatorComponent的语法树节点的节点信息，创建分割线语法树节点。

6.根据权利要求5所述的方法，其特征在于，所述基于所述scroll-view语法树节点、所述Item语法树节点和所述分割线语法树节点，生成所述第二AST，包括：

将所述Item语法树节点中的所述template引用节点添加为所述scroll-view语法树节点中所述block元素的子元素；

将所述分割线语法树节点添加为所述scroll-view语法树节点中所述scroll-view元素的子元素，得到所述第二AST，其中，所述分割线语法树节点的添加位置位于所述scroll-view元素中其它子元素的后面。

7.一种列表组件转换装置，其特征在于，所述装置包括：

获取模块，用于获取第一AST；

遍历模块，用于遍历所述第一AST得到目标属性内容，其中，所述第一AST为RN列表组件的AST，所述目标属性内容用于创建第二AST，所述第二AST为小程序列表组件的AST；

第一创建模块，用于基于所述目标属性内容，创建scroll-view语法树节点；

第二创建模块，用于基于所述目标属性内容，创建Item语法树节点；

第三创建模块，用于基于所述目标属性内容，创建分割线语法树节点；

生成模块，用于基于所述scroll-view语法树节点、所述Item语法树节点和所述分割线语法树节点，生成所述第二AST；

解析模块，用于将所述第二AST解析为所述小程序列表组件。

8.根据权利要求7所述的装置，其特征在于，所述遍历模块包括：

第一遍历子模块，用于遍历第一AST中的语法树节点，查找所述第一AST中节点名称为data的语法树节点、节点名称为renderItem的语法树节点和节点名称为ItemSeparatorComponent的语法树节点；

目标属性内容确定子模块，用于将节点名称为data的语法树节点中的vlaue值、节点名称为renderItem的语法树节点中的vlaue值、以及节点名称为ItemSeparatorComponent的语法树节点的节点信息确定为目标属性内容。

9.根据权利要求8所述的装置，其特征在于，所述第一创建模块包括：

第一创建子模块，用于创建scroll-view元素；

第二创建子模块，用于创建包含wx:for和wx:key的block元素，其中，所述wx:for的属性值为所述节点名称为data的语法树节点中的vlaue值，所述wx:key的属性值为所述小程序中默认支持的{{index}}；

第一添加子模块，用于将所述block元素添加为所述scroll-view元素的子元素，得到scroll-view语法树节点。

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

第二遍历子模块，用于遍历所述第一AST中的语法树节点，查找非render节点，其中，所述非render节点是节点名称不为render的语法树节点；

第三创建子模块，用于针对每个非render语法树节点，创建一个对应的template节点，将非render语法树节点转换为符合所述小程序的语法规则的语法树节点，将转换得到语法树节点添加为对应的template节点的子节点，并将对应的template节点的名称设置为当前所属方法的名称；

第四创建子模块，用于针对所创建的template节点，创建对应的template引用节点，得到Item语法树节点，其中，所述template引用节点的is属性对应的vlaue值为所述节点名称为renderItem的语法树节点中的vlaue值，所述template引用节点的data属性对应的vlaue值为所述小程序中默认支持的{{item}}。

11.根据权利要求10所述的装置，其特征在于，所述第三创建模块包括：

第五创建子模块，用于根据所述节点名称为ItemSeparatorComponent的语法树节点的节点信息，创建分割线语法树节点。

12.根据权利要求11所述的装置，其特征在于，所述生成模块包括：

第二添加子模块，用于将所述Item语法树节点中的所述template引用节点添加为所述scroll-view语法树节点中所述block元素的子元素；

第三添加子模块，用于将所述分割线语法树节点添加为所述scroll-view语法树节点中所述scroll-view元素的子元素，得到所述第二AST，其中，所述分割线语法树节点的添加位置位于所述scroll-view元素中其它子元素的后面。

13.一种电子设备，其特征在于，所述电子设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现如权利要求1至6任一项所述的列表组件转换方法中的步骤。

14.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至6任一项所述的列表组件转换方法中的步骤。