CN116700714A - 一种低代码开发系统、页面转码方法、计算机设备及介质 - Google Patents

Abstract

本说明书公开了一种低代码开发系统、页面转码方法、计算机设备及介质，包括：应用程序接口API库，静态解析器，动态解析器，转码模块；其中，API库集成有本地能力调用接口；静态解析器，用于解析用户界面UI设计文件中各页面的元素节点与元素节点间的第一动态关联布局，并构建出各页面的静态布局文档；其中，静态布局文档包含页面元素节点和第一动态关联布局；动态解析器，用于解析出UE设计文件中的动态迁移逻辑，并结合API库对各页面配置调用逻辑和调用能力，构建出页面间的第二动态关联布局；转码模块，用于对各页面的静态布局文档和第二动态关联布局进行转码，得到转码插件。

Description

一种低代码开发系统、页面转码方法、计算机设备及介质

技术领域

本说明书涉及软件开发技术领域，尤其涉及一种低代码开发系统、页面转码方法、计算机设备及介质。

背景技术

在传统的软件开发流程中，设计部门事先提供UI(User Interface，用户界面)设计稿、UE(User Experience，用户体验)设计稿，由产品部门和开发部门沟通开发，开发完成后进行测试，在反复循环的设计-测试-修改的传统开发流程中得到以用户需求为目标的产品设计。但是，传统的软件开发流程无法适应合端上产品的快速迭代，每当设计部门提出新构思并期待实际效果，都必须通过开发编码来展现，实现周期很长，无法快速将新构思部署到端上查看效果以及进行调整。

为此，低代码开发工具应运而生。

低代码开发工具无需编码或通过少量代码就可以快速生成应用程序。低代码开发工具拥有将UI设计稿和UE设计稿转成资源包并快速部署到手机端、车机端等直接查看运行效果的能力，可由设计部门独立操作低代码开发工具完成整套适配，整个过程不需要开发参与。因此，低代码开发工具能够提供从设计到研发、从需求到落地的全链路解决方案。

虽然低代码开发工具具有快速开发的优点，但是由于设计稿本身是页面状态的静态展示，并且常规的低代码开发工具只能描述页面静态元素，页面深层次的内容，例如由状态驱动多种显示状态的切换、生命周期、跳转等深层次的动态逻辑无法正确表达，因此常规的低代码工具只能实现简单的单页面静态输出，对于复杂的多页面动态逻辑场景仍旧需要技术人员辅助进行二次开发。

因此，低代码工具如何自主实现多页面动态逻辑场景的低代码化，是目前需要解决的问题。

发明内容

针对上述问题，本说明书提供了一种低代码开发系统、页面转码方法、计算机设备及介质，以UI设计文件和UE设计文件为基础分别从静态页面和动态逻辑两方面对多页面进行深度解析，再结合本地API库和转码模块输出整套可执行的逻辑加资源，从而自主实现多页面动态逻辑场景的低代码化的目的。

为解决上述技术问题，本说明书公开了一种低代码开发系统，包括：应用程序接口API库，静态解析器，动态解析器，转码模块；其中，

所述API库集成有本地能力调用接口；

静态解析器，用于解析用户界面UI设计文件中各页面的元素节点与元素节点间的第一动态关联布局，并构建出各页面的静态布局文档；其中，所述静态布局文档包含页面元素节点和所述第一动态关联布局；

动态解析器，用于解析出所述UE设计文件中的动态迁移逻辑，并结合所述API库对各页面配置调用逻辑和调用能力，构建出页面间的第二动态关联布局；

所述转码模块，用于对所述各页面的静态布局文档和所述第二动态关联布局进行转码，得到转码插件；其中，所述转码插件中具有描述所述各页面静态布局的资源文件和描述所述各页面间动态迁移逻辑的代码编译文件。

优选的，所述低代码开发系统还包括：

页面组件库，用于存储构建所述UI设计文件的各个组件；其中，一个页面对应一个组件；所述页面组件库支持调用单个组件内的元素节点复用至其他页面。

优选的，所述静态解析器，具体包括：

页面布局模块，用于提取所述UI设计文件中各页面的元素节点和所述第一动态关联布局，构建出所述各页面的静态布局文档；

元素规则解析模块，用于将配置在所述各页面的元素节点上的高级属性设置于所述第一动态关联布局。

优选的，所述静态解析器，具体还包括：元素动态样式配置模块，用于解析所述各页面的元素节点的动态效果并附加在对应元素节点中，和/或采用代码描述元素节点间的动态提示逻辑并设置于所述第一动态关联布局。

优选的，所述高级属性可自定义配置。

优选的，所述动态解析器，具体包括：

页面动态构建模块，用于根据所述UE设计文件对所述各页面的静态布局文档实例化处理，得到所述各页面的被调度能力；

逻辑配置模块，用于将所述API库和所述各页面的实例化对象进行调用能力的双向绑定；以及解析出所述UE设计文件中的动态迁移逻辑，并利用所述动态迁移逻辑配置所述各页面的实例化对象的调用逻辑，以构建出所述第二动态关联布局；

动态布局绑定模块，用于将所述列表元素节点中的项目与对应适配器绑定。

优选的，所述转码模块根据不同操作系统的要求，对所述各页面的静态布局文档和所述第二动态关联布局进行转码，得到适应于不同操作系统的转码插件。

本说明书公开了一种计算机设备，包括前述方案描述的低代码开发系统。

本说明书公开了一种页面转码方法，所述方法应用于前述方案描述的低代码开发系统中，所述方法包括：

解析用户界面UI设计文件中各页面的元素节点与元素节点间的第一动态关联布局，并构建出各页面的静态布局文档；其中，所述静态布局文档包含页面元素节点和所述第一动态关联布局；

解析出所述UE设计文件中的动态迁移逻辑，并结合API库对各页面配置调用逻辑和调用能力，构建出页面间的第二动态关联布局；

对所述各页面的静态布局文档和所述第二动态关联布局进行转码，得到转码插件；其中，所述转码插件中具有描述所述各页面静态布局的资源文件和描述所述各页面间动态迁移逻辑的代码编译文件。

本说明书公开了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行实现上述方法的步骤。

通过本说明书的一个或者多个实施例，本说明书具有以下有益效果或者优点：

本说明书提供了一种低代码开发系统、页面转码方法、计算机设备及介质，以UI设计文件和UE设计文件为基础分别从静态页面和动态逻辑两方面对多页面进行深度解析，结合本地API库全功能迭代发布，以及结合转码模块实现页面功能的文档化，将页面转化为完整描述的代码逻辑行为，输出整套可执行的逻辑加资源，因此本说明书的低代码开发系统能够完整描述多页面的整体代码逻辑行为，从而自主实现多页面动态逻辑场景的低代码化，仅需设计人员即可完全实施，不需要技术人员的二次辅助开发，能够减少技术人员的工作量以及降低UI更新带来的适配成本，从而达到降本增效的效果。

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

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本说明书的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1示出了根据本说明书一个实施例的低代码开发系统的结构示意图；

图2示出了根据本说明书一个实施例的UI设计文件的元素节点提取示意图；

图3示出了根据本说明书一个实施例的UI设计文件的高级属性提取示意图；

图4示出了根据本说明书一个实施例的UI设计文件的元素动态样式配置示意图；

图5示出了根据本说明书一个实施例的UE设计文件的实例化示意图；

图6示出了根据本说明书一个实施例的UE设计文件的逻辑配置示意图；

图7示出了根据本说明书一个实施例的UE设计文件的转码示意图；

图8示出了根据本说明书一个实施例的页面低代码开发构思示意图；

图9示出了根据本说明书一个实施例的页面转码方法的流程示意图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

本说明书实施例提供了一种低代码开发系统，参看图1，包括：页面组件库101，应用程序接口API库102，静态解析器103，动态解析器104，转码模块105。

页面组件库101，用于存储构建UI设计文件的各个组件。每构建完成的一个页面为一个组件，组件可供其他页面构建时引用，以达到页面复用的效果。在页面组件库101中，支持调用单个组件内的元素节点复用至其他页面，也可以引用单个组件的整套流程复用至其他页面，在复用时可通过“import:component”标签指定。

API库102集成有本地能力调用接口。API库102作为本地能力集合，在动态解析配置阶段可以声明调用API库102中的本地能力。例如，发起一个导航算路，播放指定歌曲等等。

本实施例使用的数据源是UI设计文件和UE设计文件，UI设计文件描述了每个页面的详细显示样式，UE设计文件描述了各页面之间迁移关系和动态逻辑。静态解析器103主要负责解析页面元素节点和构建页面静态布局。动态解析器104负责构建页面代码和生成动态迁移逻辑。UI设计文件和UE设计文件经过解析器解析后输出各页面的静态布局文档和页面间的第二动态关联布局，最后通过转码模块105生成采用DSL(Domain SpecificLanguage，领域特定语言)表示的转码插件，里面包含适用于不同操作系统类型的代码编译文件和资源文件。

为了进一步描述和解释本说明书，下面对静态解析器103、动态解析器104和转码模块105进行详细介绍。

静态解析器103，用于解析用户界面UI设计文件中各页面的元素节点与元素节点间的第一动态关联布局，并构建出各页面的静态布局文档。其中，静态布局文档包含页面元素节点和第一动态关联布局。

在本实施例中，UI设计文件中的页面数量为两个以上，本实施例也可称之为多页面。每个页面中具有各自的元素节点，各元素节点具有动态联动关系。

常规页面设计中包含多种类型的页面元素节点，页面元素节点是页面的基本组成单元，例如布局(顶部-侧边-通栏布局)、导航菜单、下拉菜单、标签、分页、单选框、复选框、输入框、选择器(级联选择器、时间日期选择器、颜色选择器)、滑块、按钮、列表、纹理图片等等原生元素节点。此外，页面元素节点还包括组件引用元素节点，组件引用元素节点是从其他组件引用得到的元素节点。

针对单个页面来说，由于单个页面内各元素节点具有动态关联关系，因此可从UI设计文件中解析出元素节点间的第一动态关联布局。第一动态关联布局是单个页面内各元素节点间的动态联动关系结构布局，用于描述单个页面内各元素节点间的动态联动关系，并非页面间的动态执行逻辑。第一动态关联布局包括：元素样式，页面布局结构树。元素样式是页面元素节点呈现的样式，页面布局结构树用于描述页面内元素节点的布局结构。

在具体的实施过程中，静态解析器103，具体包括：

页面布局模块1031，用于提取UI设计文件中各页面的元素节点和第一动态关联布局，构建出各页面的静态布局文档。参看图2，以UI设计文件中的页面A为例。页面A中有列表、按钮1、按钮2、动态提示、从其他组件中引用得到的公共组件：标题栏。页面布局模块1031从页面A中提取出元素节点：列表、按钮1、按钮2、组件引用(标题栏)。提取出第一动态关联布局：列表样式，页面布局结构树。

元素规则解析模块1032，用于将配置在各页面的元素节点上的高级属性设置于第一动态关联布局。高级属性包含自定义属性，可自定义配置和自定义扩展。承接上述举例，参看图3，按钮1和按钮2的高级属性中具有多状态标注，例如圆形、方形等等。列表的高级属性中有自适应规则标注，则元素规则解析模块1032提取出按钮1和按钮2的按钮多态，提取出列表的自适应规则设置在第一动态关联布局中。

元素动态样式配置模块1033，用于解析各页面的元素节点的动态效果并附加在对应元素节点中。具体来说，元素节点的动态效果多种多样，例如按钮点击状态、列表的动画、响应多主题的切换等等。和/或，采用代码描述元素节点间的动态提示逻辑并设置于第一动态关联布局。例如通过JavaScript代码描述元素节点间的动态提示逻辑。以上操作都隶属于元素间的操作，并非页面间的迁移逻辑操作。承接上述举例，参看图4，将页面A中的动态提示附加在对应元素节点中，以及通过JavaScript代码描述元素节点间的动态提示逻辑设置于第一动态关联布局。

以上是对静态解析器103的描述。通过静态解析器103对UI设计文件的解析，不但能够解析出UI设计文件中的静态元素节点，还能够将静态元素节点的动态效果，例如点击状态、列表的动画、响应多主题的切换等统一定义，并支持JavaScript代码描述元素节点间的动态提示逻辑，比如字符串校验、Ajax请求等。相比常规低代码解析只能描述页面的静态元素，本说明书的静态解析器103能够解析出页面静态元素更加深层次的内容。

动态解析器104，用于解析出UE设计文件中的动态迁移逻辑，并结合API库102对各页面配置调用逻辑和调用能力，构建出页面间的第二动态关联布局。第二动态关联布局是各页面间的动态联动关系结构布局，用于描述多页面间的动态执行逻辑。

在具体的实施过程中，动态解析器104，具体包括：

页面动态构建模块1041，用于根据UE设计文件对各页面的静态布局文档实例化处理，得到各页面的被调度能力。具体的，页面动态构建模块1041将UE设计文件映射到对应的页面上，将对应页面的静态布局文档中的对象实例化，并赋予生命周期，得到页面的被调度能力。参看图5，UE设计文件以页面A、页面B、页面C为例，三个页面具有迁移关系和动态逻辑。页面动态构建模块1041会根据UE设计文件，对静态解析器103解析出的三个静态布局文档：SchemeA、SchemeB、SchemeC进行实例化处理，得到实例化对象：ViewA.js、ViewB.js、ViewC.js。

逻辑配置模块1042，用于将API库102和各页面的实例化对象进行调用能力的双向绑定，将API绑定添加到各页面的静态布局文档中。此外，由于UE设计文件中包含各页面的迁移关系和动态逻辑，因此解析出UE设计文件中的动态迁移逻辑，并利用动态迁移逻辑配置各页面的实例化对象的调用逻辑，例如按照动态迁移逻辑将各页面的实例化对象进行逻辑串联，以构建出第二动态关联布局。参看图6，是逻辑配置的构思示意图。

动态布局绑定模块1043，用于将列表元素节点中的项目与对应适配器绑定。

以上是对动态解析器104的描述。通过动态解析器104解析出页面动态迁移逻辑并进行页面动态串联，并将其配置到实例化对象中。相对于是动态解析中的创新点，相比常规低代码解析只能描述页面的静态元素，本说明书的动态解析器104能够结合静态布局文档构建页面代码，结合动态迁移逻辑页面间的第二动态关联布局。本实施例输出的是输出整套可执行的逻辑加资源，能够完整描述多页面的整体代码逻辑行为。

转码模块105，用于对各页面的静态布局文档和第二动态关联布局进行转码，得到转码插件；其中，转码插件中具有描述各页面静态布局的资源文件和描述各页面间动态迁移逻辑的代码编译文件。参看图7，转码模块105分别将各页面的静态布局文档和第二动态关联布局进行转码，将静态布局文档转码为资源文件，将第二动态关联布局转码为代码编译文件。

具体的，转码模块105可根据指定操作系统定制插件，例如Aios转码插件、Android转码插件。转码模块105根据不同操作系统的要求，对各页面的静态布局文档和第二动态关联布局进行转码，得到适应于不同操作系统的转码插件。不同类型的操作系统会转为不同的代码编译文件，参看图8。

本说明书中的低代码开发系统通过对UI设计文件和UE设计文件中的解析规则、定义功能，从而实现页面的功能文档化。由于设计文件本身是页面某状态的静态展示，所以常规低代码解析只能描述该页面的静态元素，页面含有的深层次内容无法表达，比如由状态驱动多种显示状态的切换、生命周期、跳转等，这些构成了一套页面的动态逻辑。而本实施例通过静态解析器103和动态解析器104结合，通过解析设计文件的基本静态元素和深层次的动态逻辑，并将其转化为完整描述的代码逻辑行为，输出整套可执行的逻辑加资源，从而自主实现多页面动态逻辑场景的低代码化，仅需设计人员即可完全实施，不需要技术人员的二次辅助开发，能够减少技术人员的工作量，以及降低UI更新带来的适配成本，从而达到降本增效的效果。

本说明书解析出的每个页面都呈现开放式，里面的元素节点、动态关联布局等均可供其他页面自由组合嵌套使用，从而能够提高复用率。

由于常规低代码解析只能描述该页面的静态元素，因此无法解决对于页面的多主题适配问题，而本说明书中可针对单页面的元素间的动态执行逻辑和多页面间的动态迁移逻辑进行定义解析，因此完全能够采用静态解析器和动态解析器相配合，能够对页面多主题、页面多模式等场景的适配逻辑进行定义解析，并且能够一次性输出可动态切换主题的资源文件和代码编译文件。

基于与前述实施例中同样的发明构思，本说明书实施例还提供一种计算机设备，包括前述实施例描述的低代码开发系统。

基于与前述实施例中同样的发明构思，本说明书实施例还提供一种页面转码方法，方法应用于前述实施例描述的低代码开发系统中，参看图9，该方法包括下述步骤：

步骤901，解析用户界面UI设计文件中各页面的元素节点与元素节点间的第一动态关联布局，并构建出各页面的静态布局文档。其中，静态布局文档包含页面元素节点和第一动态关联布局；

步骤902，解析出UE设计文件中的动态迁移逻辑，并结合API库对各页面配置调用逻辑和调用能力，构建出页面间的第二动态关联布局。

步骤903，对各页面的静态布局文档和第二动态关联布局进行转码，得到转码插件。其中，转码插件中具有描述各页面静态布局的资源文件和描述各页面间动态迁移逻辑的代码编译文件。

由于方法实施例中的具体操作逻辑已经在低代码开发系统中详细介绍，故在此不再介绍该方法的具体实现逻辑。

基于与前述实施例中同样的发明构思，本说明书实施例还提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行实现上述方法的步骤。

在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本说明书也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本说明书的内容，并且上面对特定语言所做的描述是为了披露本说明书的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本说明书的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本说明书的示例性实施例的描述中，本说明书的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本说明书要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本说明书的单独实施例。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本说明书的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

本说明书的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本说明书实施例的网关、代理服务器、系统中的一些或者全部部件的一些或者全部功能。本说明书还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本说明书的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

应该注意的是上述实施例对本说明书进行说明而不是对本说明书进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本说明书可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。

Claims (10)

1.一种低代码开发系统，包括：应用程序接口API库，静态解析器，动态解析器，转码模块；其中，

所述API库集成有本地能力调用接口；

静态解析器，用于解析用户界面UI设计文件中各页面的元素节点与元素节点间的第一动态关联布局，并构建出各页面的静态布局文档；其中，所述静态布局文档包含页面元素节点和所述第一动态关联布局；

动态解析器，用于解析出所述UE设计文件中的动态迁移逻辑，并结合所述API库对各页面配置调用逻辑和调用能力，构建出页面间的第二动态关联布局；

所述转码模块，用于对所述各页面的静态布局文档和所述第二动态关联布局进行转码，得到转码插件；其中，所述转码插件中具有描述所述各页面静态布局的资源文件和描述所述各页面间动态迁移逻辑的代码编译文件。

2.如权利要求1所述的低代码开发系统，所述低代码开发系统还包括：

页面组件库，用于存储构建所述UI设计文件的各个组件；其中，一个页面对应一个组件；所述页面组件库支持调用单个组件内的元素节点复用至其他页面。

3.如权利要求1所述的低代码开发系统，所述静态解析器，具体包括：

页面布局模块，用于提取所述UI设计文件中各页面的元素节点和所述第一动态关联布局，构建出所述各页面的静态布局文档；

元素规则解析模块，用于将配置在所述各页面的元素节点上的高级属性设置于所述第一动态关联布局。

4.如权利要求3所述的低代码开发系统，所述静态解析器，具体还包括：元素动态样式配置模块，用于解析所述各页面的元素节点的动态效果并附加在对应元素节点中，和/或采用代码描述元素节点间的动态提示逻辑并设置于所述第一动态关联布局。

5.如权利要求3所述的低代码开发系统，所述高级属性可自定义配置。

6.如权利要求3或4所述的低代码开发系统，所述动态解析器，具体包括：

页面动态构建模块，用于根据所述UE设计文件对所述各页面的静态布局文档实例化处理，得到所述各页面的被调度能力；

逻辑配置模块，用于将所述API库和所述各页面的实例化对象进行调用能力的双向绑定；以及解析出所述UE设计文件中的动态迁移逻辑，并利用所述动态迁移逻辑配置所述各页面的实例化对象的调用逻辑，以构建出所述第二动态关联布局；

动态布局绑定模块，用于将所述列表元素节点中的项目与对应适配器绑定。

7.如权利要求1所述的低代码开发系统，所述转码模块根据不同操作系统的要求，对所述各页面的静态布局文档和所述第二动态关联布局进行转码，得到适应于不同操作系统的转码插件。

8.一种计算机设备，包括如权利要求1-7任一权项所述的低代码开发系统。

9.一种页面转码方法，所述方法应用于如权利要求1-7任一权项所述的低代码开发系统中，所述方法包括：

解析用户界面UI设计文件中各页面的元素节点与元素节点间的第一动态关联布局，并构建出各页面的静态布局文档；其中，所述静态布局文档包含页面元素节点和所述第一动态关联布局；

解析出所述UE设计文件中的动态迁移逻辑，并结合API库对各页面配置调用逻辑和调用能力，构建出页面间的第二动态关联布局；

对所述各页面的静态布局文档和所述第二动态关联布局进行转码，得到转码插件；其中，所述转码插件中具有描述所述各页面静态布局的资源文件和描述所述各页面间动态迁移逻辑的代码编译文件。

10.一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现权利要求9所述方法的步骤。