CN113094138A - 界面显示方法、装置、电子设备及存储介质 - Google Patents
界面显示方法、装置、电子设备及存储介质 Download PDFInfo
- Publication number
- CN113094138A CN113094138A CN202110421092.0A CN202110421092A CN113094138A CN 113094138 A CN113094138 A CN 113094138A CN 202110421092 A CN202110421092 A CN 202110421092A CN 113094138 A CN113094138 A CN 113094138A
- Authority
- CN
- China
- Prior art keywords
- interface
- flutter
- state data
- interface component
- application interface
- 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.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 57
- 230000006870 function Effects 0.000 claims abstract description 66
- 238000009877 rendering Methods 0.000 claims abstract description 22
- 238000010276 construction Methods 0.000 claims description 7
- 238000004590 computer program Methods 0.000 claims description 5
- 238000010586 diagram Methods 0.000 description 9
- 230000008569 process Effects 0.000 description 8
- 230000008901 benefit Effects 0.000 description 4
- 238000011161 development Methods 0.000 description 4
- 230000009471 action Effects 0.000 description 3
- 230000004044 response Effects 0.000 description 3
- 230000005540 biological transmission Effects 0.000 description 2
- 238000006243 chemical reaction Methods 0.000 description 2
- 238000004891 communication Methods 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000005538 encapsulation Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 238000009434 installation Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
- G06F9/44526—Plug-ins; Add-ons
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Stored Programmes (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本申请提供的界面显示方法、装置、电子设备及存储介质，应用于计算机技术领域，所述方法包括：接收对于Flutter应用界面的控制指令；响应于所述控制指令，调用所述Flutter应用界面中至少一个界面组件相对应的JavaScript语言逻辑函数，以获取所述界面组件的第一状态数据；解析所述第一状态数据，得到Dart语言的第二状态数据；根据所述第二状态数据对所述界面组件进行渲染，以显示包含所述界面组件的Flutter应用界面。本方案使得Flutter应用界面可以通过具有高可读性的JavaScript语言进行调整，使得开发人员可以使用JavaScript语言便捷地对Flutter应用界面进行动态调整。
Description
技术领域
本申请属于计算机技术领域，特别是涉及一种界面显示方法、装置、电子设备及存储介质。
背景技术
Flutter一种跨平台的移动端开发框架，开发语言采用Dart语言，支持Android、iOS、Web等操作系统。由于Dart同时支持AOT(Ahead-of-Time Compilation，提前编译)和JIT(Just inTimeCompilation，即时编译)，所以Flutter天生支持动态化，但出于安全原因，Flutter框架并不支持Flutter在生成环境开启动态化。
因此现有技术中在应用程序中的页面需要更新时，需要开发人员重新开发新的应用程序版本进行发布动移动端下载更新后，才能在客户端来展示新的页面样式和内容，显然这种方式由于需要耗费大量人力和时间成本，降低了Flutter应用程序中页面的更新效率，无法适应于用户对于应用程序中页面更新的需求，并且Flutter框架下的Dart语言可读性差，不便于开发人员对Flutter应用程序进行动态调整。
发明内容
有鉴于此，本申请实施例提出一种界面显示方法、装置、电子设备及存储介质，用于尽可能解决现有技术中Flutter框架由于不支持生成环境开启动态化以及使用Dart语言，导致开发人员无法便捷地对Flutter应用程序进行动态调整的问题。
本申请第一方面提供一种界面显示方法，所述方法包括：
接收对于Flutter应用界面的控制指令；
响应于所述控制指令，调用所述Flutter应用界面中至少一个界面组件相对应的JavaScript语言逻辑函数，以获取所述界面组件的第一状态数据；
解析所述第一状态数据，得到Dart语言的第二状态数据；
根据所述第二状态数据对所述界面组件进行渲染，以显示包含所述界面组件的Flutter应用界面。
可选地，在所述控制指令是对于所述Flutter应用界面的显示指令的情况下，所述调用所述Flutter应用界面中至少一个界面组件相对应的JavaScript语言逻辑函数，以获取所述各界面组件的第一状态数据，包括：
调用所述Flutter应用界面中各界面组件相对应的JavaScript语言逻辑函数，以获取所述各界面组件的初始状态数据，将所述初始状态数据作为所述第一状态数据。
可选地，在控制指令是对于所述Flutter应用界面中目标界面组件的更新指令的情况下，所述调用所述Flutter应用界面中至少一个界面组件相对应的JavaScript语言逻辑函数，以获取所述各界面组件的第一状态数据，包括：
调用所述目标界面组件相对应的JavaScript语言逻辑函数，以获取所述目标界面组件的更新状态数据，将所述更新状态数据作为所述第一状态数据；
所述根据所述第二状态数据对所述界面组件进行渲染，以显示包含所述界面组件的Flutter应用界面，包括：
根据所述第二状态数据对所述目标界面组件进行渲染，以对所显示的所述Flutter应用界面中的所述目标界面组件进行更新。
可选地，在所述调用所述Flutter应用界面中至少一个界面组件相对应的JavaScript语言逻辑函数，以获取所述界面组件的第一状态数据之前，所述方法还包括：
获取所述Flutter应用界面中至少一个界面组件的绑定属性值；
将所包含状态数据字段名称，与所述绑定属性值相同的JavaScript语言逻辑函数，作为所述界面组件相对应的JavaScript语言逻辑函数。
可选地，在所述接收对于Flutter应用界面的控制指令之前，所述方法还包括：
解封装Flutter应用程序包，获得JSON格式的Flutter界面层程序代码、JavaScript逻辑层程序代码，所述JavaScript逻辑层程序代码，所述JavaScript逻辑层程序代码用于计算Flutter应用界面中界面组件的状态数据；
通过AST解析器对JSON格式的Flutter界面层程序代码进行解析，获得Dart语言的Flutter界面层程序代码，所述Flutter界面层程序代码用于渲染和显示所述Flutter应用界面。
可选地，所述Flutter界面层程序代码至少包括：界面组件构建信息；
在所述得Dart语言的Flutter界面层程序代码之后，所述方法还包括：
将所述界面组件构建信息进行实例化，得到所述Flutter应用界面的界面组件。
可选地，所述接收对于Flutter应用界面的控制指令，包括：
在Flutter应用界面中接收到目标输入时，生成对于所述Flutter应用界面的控制指令。
依据本申请第二方面，提供一种界面显示装置，所述装置包括：
接收模块，被配置为接收对于Flutter应用界面的控制指令；
调用模块，被配置为响应于所述控制指令，调用所述Flutter应用界面中至少一个界面组件相对应的JavaScript语言逻辑函数，以获取所述界面组件的第一状态数据；
解析模块，被配置为解析所述第一状态数据，得到Dart语言的第二状态数据；
显示模块，被配置为根据所述第二状态数据对所述界面组件进行渲染，以显示包含所述界面组件的Flutter应用界面。
可选地，在所述控制指令是对于所述Flutter应用界面的显示指令的情况下，所述调用模块，还被配置为：
调用所述Flutter应用界面中各界面组件相对应的JavaScript语言逻辑函数，以获取所述各界面组件的初始状态数据，将所述初始状态数据作为所述第一状态数据。
可选地，在控制指令是对于所述Flutter应用界面中目标界面组件的更新指令的情况下，所述调用模块，还被配置为：
调用所述目标界面组件相对应的JavaScript语言逻辑函数，以获取所述目标界面组件的更新状态数据，将所述更新状态数据作为所述第一状态数据；
所述显示模块，还被配置为：
根据所述第二状态数据对所述目标界面组件进行渲染，以对所显示的所述Flutter应用界面中的所述目标界面组件进行更新。
可选地，所述调用模块，还被配置为：
获取所述Flutter应用界面中至少一个界面组件的绑定属性值；
将所包含状态数据字段名称，与所述绑定属性值相同的JavaScript语言逻辑函数，作为所述界面组件相对应的JavaScript语言逻辑函数。
可选地，所述装置还包括：部署模块，被配置为：
解封装Flutter应用程序包，获得JSON格式的Flutter界面层程序代码、JavaScript逻辑层程序代码，所述JavaScript逻辑层程序代码，所述JavaScript逻辑层程序代码用于计算Flutter应用界面中界面组件的状态数据；
通过AST解析器对JSON格式的Flutter界面层程序代码进行解析，获得Dart语言的Flutter界面层程序代码，所述Flutter界面层程序代码用于渲染和显示所述Flutter应用界面。
可选地，所述Flutter界面层程序代码至少包括：界面组件构建信息；
所述部署模块，还被配置为
将所述界面组件构建信息进行实例化，得到所述Flutter应用界面的界面组件。
可选地，所述接收模块，还被配置为：
在Flutter应用界面中接收到目标输入时，生成对于所述Flutter应用界面的控制指令。
依据本申请第三方面，提供一种电子设备，包括处理器，存储器及存储在所述存储器上并可在所述处理器上运行的程序或指令，所述程序或指令被所述处理器执行时实现上述第一方面所述界面显示方法或第二方面所述的网关控制方法。
依据本申请第四方面，提供一种计算机非瞬态可读存储介质，所述可读存储介质上存储计算机程序，所述计算机程序被处理器执行时实现上述第一方面所述界面显示方法或第二方面所述的网关控制方法。
针对现有技术，本申请具备如下优点：
本申请提供的一种界面显示方法、装置、电子设备及存储介质，本方案通过将Flutter应用界面的界面组件与JavaScript语言逻辑函数建立对应关系，使得Flutter应用界面在接收到控制指令时，可以通过调用界面组件所对应的JavaScript语言逻辑函数来获取状态数据，将状态数据解析为界面组件所适用的Dart语言，以基于该状态数据来对Flutter应用界面中的界面组件进行渲染和显示，从而使得Flutter应用界面可以通过具有高可读性的JavaScript语言进行调整，使得开发人员可以使用JavaScript语言便捷地对Flutter应用界面进行动态调整。
上述说明仅是本申请技术方案的概述，为了能够更清楚了解本申请的技术手段，而可依照说明书的内容予以实施，并且为了让本申请的上述和其它目的、特征和优点能够更明显易懂，以下特举本申请的具体实施方式。
附图说明
通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本申请的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：
图1是本申请实施例提供的一种界面显示方法的步骤流程图；
图2是本申请实施例提供的一种界面显示方法的程序架构图；
图3是本申请实施例提供的另一种界面显示方法的数据传输流程图；
图4是本申请实施例提供的一种界面显示方法的原理示意图；
图5是本申请实施例提供的一种界面显示装置的结构框图；
图6是本申请实施例提供的一种电子设备的结构示意图。
具体实施方式
下面将参照附图更详细地描述本申请的示例性实施例。虽然附图中显示了本申请的示例性实施例，然而应当理解，可以以各种形式实现本申请而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本申请，并且能够将本申请的范围完整的传达给本领域的技术人员。
图1是本申请实施例提供一种界面显示方法的步骤示意图，所述方法包括：
步骤101，接收对于Flutter应用界面的控制指令。
在本申请实施例中，Flutter应用界面是基于Flutter架构开发的应用程序的界面。控制指令可以是用于对Flutter应用界面的显示进行控制的指令，可以是响应于用户对于Flutter应用界面的输入生成指令，也可以是系统基于特定规则，例如到达特定时间点或者是检测到特定事件时自动生成的，具体可以根据实际需求设置，此处不做限定。
在实际使用时，由于Flutter架构不支持生成环境动态化的特点，使得Flutter应用界面在发布后，也就是在电子设备中安装后运行时无法对Flutter应用界面的样式和功能等进行修改，需要重新发布新版本的Flutter应用供电子设备安装后才能更改，不仅需要浪费大量的开发资源，而且效率较低。
步骤102，响应于所述控制指令，调用所述Flutter应用界面中至少一个界面组件相对应的JavaScript语言逻辑函数，以获取所述界面组件的第一状态数据。
在本申请实施例中，界面组件(Web widget，Widget)是Flutter应用界面的组成成分，例如：时钟、视频控件、音频控件、闹钟等功能均可通过界面组件的形式设置到Flutter应用界面中。JavaScript语言逻辑函数是基于JavaScript语言开发的逻辑函数，用于向界面组件提供渲染所需的状态数据，该状态数据是用于对界面组件的显示进行设置的参数。界面组件可以存在多种不同功能的显示方式，可通过基于不同的状态数据对界面组件进行渲染，以使得界面组件可以在Flutter应用界面中展示不同的样式。例如：某一闹钟的界面组件存在显示状态和隐藏状态两种状态数据，可通过向界面组件输入显示状态的状态数据来使得该闹钟在响铃时显示，以及通过向该界面组件输入隐藏状态的状态数据来使得该闹钟在未响铃时隐藏，当然界面组件中状态数据的还可以是其他设置方式，具体可以根据实际需求设置，此处不做限定。
JavaScript语言作为一种解释型语言，本身就具有天然的动态化特性，利于开发人员识别，将其应用到Flutter框架中，不仅可以降低开发Flutter应用的门槛，而且可以实时地对Flutter应用界面进行动态调整。具体的，本申请实施例通过基于Flutter框架建立界面(UI，UserInterface)层来设置界面组件，通过基于JavaScript语言建立逻辑层来设置为界面组件提供状态数据的JavaScript语言逻辑函数，并且建立界面组件和JavaScript语言逻辑函数的绑定关系，从而使得Flutter层和JavaScrip层可以各司其职，发挥各自的特点。在实际使用时，开发人员可以通过对JavaScript语言逻辑函数进行设计开发来进行调整，而JavaScript语言逻辑函数通过输出不同的第一状态数据来对界面组件的显示进行控制，需要说明的是，该第一状态数据由于是JavaScript语言逻辑函数进行数据处理得到的，因此是遵循JavaScript语言的语法特点，无法被Flutter框架下的界面组件直接读取和使用，因此还需要进行一步进行处理。
步骤103，解析所述第一状态数据，得到Dart语言的第二状态数据。
在本申请实施例中，Dart语言是适用于Flutter框架的专用语言，其可被Flutter框架中的界面组件读取和使用。具体的，可通过预先设置的语法解析器对JavaScript语言的第一状态数据进行解析，以将第一状态数据转换为Dart语言的第二状态数据。该语法解析器具体可以根据Dart语言和JavaScript语言之间的具体差异进行设置，具体可参照本领域的常规语法转换方法进行设置，主要可以将JavaScript语言转换为Dart语言即可适用于本申请实施例，此处不再赘述。
步骤104，根据所述第二状态数据对所述界面组件进行渲染，以显示包含所述界面组件的Flutter应用界面。
在本申请实施例中，Flutter层在监控到JavaScript层提供的第二状态数据时，抽取该第二状态数据，并通过该第二状态数据对其所对应的界面组件进行渲染，从而通过渲染所得到的界面组件组合生成Flutter应用界面进行显示，若已经显示有Flutter应用界面，则对该Flutter应用界面进行刷新，以对Flutter应用界面进行动态调整。
为了便于理解，参照图2示出本申请实施例提供的一种界面显示方法的程序结构图，其中包括有Flutter界面层和JavaScript逻辑层。Flutter界面层在监控到触发事件发生时，调用JavaScript逻辑层的业务逻辑函数，以使得JavaScript逻辑层通过与该触发事件相对应的业务逻辑函数进行处理，得到更新后的状态数据，然后将更新后的状态数据通知给Flutter界面层，以供Flutter界面层拉取更新后的状态数据，根据状态数据渲染组件来进行界面跳转。
本申请实施例通过将Flutter应用界面的界面组件与JavaScript语言逻辑函数建立对应关系，使得Flutter应用界面在接收到控制指令时，可以通过调用界面组件所对应的JavaScript语言逻辑函数来获取状态数据，将状态数据解析为界面组件所适用的Dart语言，以基于该状态数据来对Flutter应用界面中的界面组件进行渲染和显示，从而使得Flutter应用界面可以通过具有高可读性的JavaScript语言进行调整，使得开发人员可以使用JavaScript语言便捷地对Flutter应用界面进行动态调整。
图3是本申请实施例提供另一种界面显示方法的步骤示意图，所述方法包括：
步骤201，解封装Flutter应用程序包，获得JSON格式的Flutter界面层程序代码、JavaScript逻辑层程序代码，所述JavaScript逻辑层程序代码，所述JavaScript逻辑层程序代码用于计算Flutter应用界面中界面组件的状态数据。
在本申请实施例中，Flutter应用程序包是Flutter应用的安装程序代码，其中的Flutter界面层程序代码和JavaScript逻辑层程序代码可以是以JSON格式进行封装，从而可以适用于JSON格式数据量小的特点，提高Flutter应用程序包的数据传输效率。
在实际开发过程中，可以首先基于Dart语言开发Flutter界面层程序代码，以及基于JavaScript语言开发JavaScript逻辑层程序代码，然后在通过AST语法把Flutter界面层程序代码转换为AST JSON格式的文本文件，由于JavaScript逻辑层程序代码本身就是JSON格式，因此可以直接在转换所得到的JSON文件里添加JavaScript逻辑层程序代码，从而得到按照JSON格式封装得到的Flutter应用安装包。
步骤202，通过AST解析器对JSON格式的Flutter界面层程序代码进行解析，获得Dart语言的Flutter界面层程序代码，所述Flutter界面层程序代码用于渲染和显示所述Flutter应用界面。
在本申请实施例中，在实际使用时，由于需要构建Flutter框架下的界面层，因此需要通过AST解析器将JSON格式的Flutter界面层程序代码进行解析，转换得到Dart语言的Flutter界面层程序代码来执行界面渲染和界面显示功能，而JavaScript逻辑层程序代码由于本申请就是JSON格式，因此可以直接执行提供状态数据的逻辑层功能。
可选地，所述Flutter界面层程序代码至少包括：界面组件构建信息。
步骤203，将所述界面组件构建信息进行实例化，得到所述Flutter应用界面的界面组件。
在本申请实施例中，通过在Flutter界面层程序代码中设置界面组件构建信息，从而在实际运行时将界面组件构建信息转换为界面组件实例，即可在JavaScript逻辑层程序代码运行时获取状态数据来渲染和显示Flutter应用界面。
步骤204，在Flutter应用界面中接收到目标输入时，生成对于所述Flutter应用界面的控制指令。
在本申请实施例中，目标输入可以是用于对于Flutter应用界面的点击、长按、滑动、语音、手势等类型的输入，具体可以根据实际需求设置，此处不做限定。通过依据用户的目标输入可以自动生成对于Flutter应用界面的控制指令。
步骤205，响应于所述控制指令，获取所述Flutter应用界面中至少一个界面组件的绑定属性值。
在本申请实施例中，绑定属性值是本申请实施例通过在界面组件中设置特定属性值的值，所用来绑定JavaScript语言逻辑函数中状态数据的属性值，可通过基于不同的控制指令所指示的界面组件的绑定属性值。
步骤206，将所包含状态数据字段名称，与所述绑定属性值相同的JavaScript语言逻辑函数，作为所述界面组件相对应的JavaScript语言逻辑函数。
在本申请实施例中，为了便于查询，可以通过将界面组件中绑定属性值与JavaScript语言逻辑函数中状态数据所在的字段名称设置为相同，从而建立界面组件与JavaScript语言逻辑函数之间的绑定关系。在查询时，仅需按照绑定属性值的命名与JavaScript语言逻辑函数中状态数据字段名称进行比对，即可查询到界面组件相对应的JavaScript语言逻辑函数。
示例性的：
例如有一界面组件TextEx作为Flutter自带WidgetText的扩展，添加绑定属性bindData和bindTap，其属性值分别是count和onClick，对应的JavaScript语言逻辑函数中的数据状态所在字段的名称可以写为count和onClick，即可建立该界面组件与JavaScript语言逻辑函数之间的绑定关系。
步骤207，调用所述Flutter应用界面中至少一个界面组件相对应的JavaScript语言逻辑函数，以获取所述界面组件的第一状态数据。
该步骤可参照步骤102的详细描述，此处不再赘述。
步骤208，解析所述第一状态数据，得到Dart语言的第二状态数据。
该步骤可参照步骤103的详细描述，此处不再赘述。
步骤209，根据所述第二状态数据对所述界面组件进行渲染，以显示包含所述界面组件的Flutter应用界面。
该步骤可参照步骤104的详细描述，此处不再赘述。
可选地，本申请实施例提供另一种可实现的实施例，其中，在所述控制指令是对于所述Flutter应用界面的显示指令的情况下，所述步骤207，可以包括：调用所述Flutter应用界面中各界面组件相对应的JavaScript语言逻辑函数，以获取所述各界面组件的初始状态数据，将所述初始状态数据作为所述第一状态数据。
在本申请实施例中，参照图4，在接收到对于Flutter应用界面的显示指令时，也就是需要加载JavaScript内容时，可以在JavaScript层运行时解析其中的初始状态数据，从而可以将该初始状态数据转换为Dart语言的第二状态数据对各界面组件进行渲染来得到Flutter应用界面。
可选地，本申请实施例还提供再一种可实现的实施例，其中，在控制指令是对于所述Flutter应用界面中目标界面组件的更新指令的情况下，所述步骤207，可以包括：调用所述目标界面组件相对应的JavaScript语言逻辑函数，以获取所述目标界面组件的更新状态数据，将所述更新状态数据作为所述第一状态数据。
所述步骤209，可以包括：根据所述第二状态数据对所述目标界面组件进行渲染，以对所显示的所述Flutter应用界面中的所述目标界面组件进行更新。
在本申请实施例中，参照图4，在接收到对于Flutter应用界面的更新指令时，具体可以是对于Flutter应用界面的点击事件，可以通过在JavaScript语言逻辑函数运行时调用JavaScript语言逻辑函数对数据进行处理来得到更新状态数据，并将该更新状态数据转换为Dart语言的状态数据，以提供给Flutter层对目标界面组件进行渲染，从而将重新渲染得到的目标界面组件更新到Flutter应用界面中。
本申请实施例通过将Flutter应用界面的界面组件与JavaScript语言逻辑函数建立对应关系，使得Flutter应用界面在接收到控制指令时，可以通过调用界面组件所对应的JavaScript语言逻辑函数来获取状态数据，将状态数据解析为界面组件所适用的Dart语言，以基于该状态数据来对Flutter应用界面中的界面组件进行渲染和显示，从而使得Flutter应用界面可以通过具有高可读性的JavaScript语言进行调整，使得开发人员可以使用JavaScript语言便捷地对Flutter应用界面进行动态调整。
图5是本申请实施例提供了一种界面显示装置30的结构示意图，所述装置包括：
接收模块301，被配置为接收对于Flutter应用界面的控制指令；
调用模块302，被配置为响应于所述控制指令，调用所述Flutter应用界面中至少一个界面组件相对应的JavaScript语言逻辑函数，以获取所述界面组件的第一状态数据；
解析模块303，被配置为解析所述第一状态数据，得到Dart语言的第二状态数据；
显示模块304，被配置为根据所述第二状态数据对所述界面组件进行渲染，以显示包含所述界面组件的Flutter应用界面。
可选地，在所述控制指令是对于所述Flutter应用界面的显示指令的情况下，所述调用模块302，还被配置为：
调用所述Flutter应用界面中各界面组件相对应的JavaScript语言逻辑函数，以获取所述各界面组件的初始状态数据，将所述初始状态数据作为所述第一状态数据。
可选地，在控制指令是对于所述Flutter应用界面中目标界面组件的更新指令的情况下，所述调用模块302，还被配置为：
调用所述目标界面组件相对应的JavaScript语言逻辑函数，以获取所述目标界面组件的更新状态数据，将所述更新状态数据作为所述第一状态数据；
所述显示模块304，还被配置为：
根据所述第二状态数据对所述目标界面组件进行渲染，以对所显示的所述Flutter应用界面中的所述目标界面组件进行更新。
可选地，所述调用模块302，还被配置为：
获取所述Flutter应用界面中至少一个界面组件的绑定属性值；
将所包含状态数据字段名称，与所述绑定属性值相同的JavaScript语言逻辑函数，作为所述界面组件相对应的JavaScript语言逻辑函数。
可选地，所述装置还包括：部署模块，被配置为：
解封装Flutter应用程序包，获得JSON格式的Flutter界面层程序代码、JavaScript逻辑层程序代码，所述JavaScript逻辑层程序代码，所述JavaScript逻辑层程序代码用于计算Flutter应用界面中界面组件的状态数据；
通过AST解析器对JSON格式的Flutter界面层程序代码进行解析，获得Dart语言的Flutter界面层程序代码，所述Flutter界面层程序代码用于渲染和显示所述Flutter应用界面。
可选地，所述Flutter界面层程序代码至少包括：界面组件构建信息；
所述部署模块，还被配置为
将所述界面组件构建信息进行实例化，得到所述Flutter应用界面的界面组件。
可选地，所述接收模块301，还被配置为：
在Flutter应用界面中接收到目标输入时，生成对于所述Flutter应用界面的控制指令。
本申请实施例通过将Flutter应用界面的界面组件与JavaScript语言逻辑函数建立对应关系，使得Flutter应用界面在接收到控制指令时，可以通过调用界面组件所对应的JavaScript语言逻辑函数来获取状态数据，将状态数据解析为界面组件所适用的Dart语言，以基于该状态数据来对Flutter应用界面中的界面组件进行渲染和显示，从而使得Flutter应用界面可以通过具有高可读性的JavaScript语言进行调整，使得开发人员可以使用JavaScript语言便捷地对Flutter应用界面进行动态调整。
在本申请提供的又一实施例中，还提供了一种电子设备，电子设备可以包括：处理器、存储器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述程序时实现上述界面显示方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。示例的，如图6所示，该电子设备具体可以包括：处理器401、存储装置402、具有触摸功能的显示屏403、输入装置404、输出装置405以及通信装置406。该电子设备中处理器401的数量可以是一个或者多个，图6中以一个处理器401为例。该电子设备的处理器401、存储装置402、显示屏403、输入装置404、输出装置405以及通信装置406可以通过总线或者其他方式连接。
在本申请提供的又一实施例中，还提供了一种计算机非瞬态可读存储介质，该可读存储介质中存储有指令，当其在计算机上运行时，使得计算机执行上述实施例中任一所述的界面显示方法。
在本申请提供的又一实施例中，还提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述实施例中任一所述的界面显示方法。
需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
本说明书中的各个实施例均采用相关的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
以上所述仅为本申请的较佳实施例而已，并非用于限定本申请的保护范围。凡在本申请的精神和原则之内所作的任何修改、等同替换、改进等，均包含在本申请的保护范围内。
Claims (10)
1.一种界面显示方法，其特征在于，所述方法包括：
接收对于Flutter应用界面的控制指令；
响应于所述控制指令，调用所述Flutter应用界面中至少一个界面组件相对应的JavaScript语言逻辑函数，以获取所述界面组件的第一状态数据；
解析所述第一状态数据，得到Dart语言的第二状态数据；
根据所述第二状态数据对所述界面组件进行渲染，以显示包含所述界面组件的Flutter应用界面。
2.根据权利要求1所述的方法，其特征在于，在所述控制指令是对于所述Flutter应用界面的显示指令的情况下，所述调用所述Flutter应用界面中至少一个界面组件相对应的JavaScript语言逻辑函数，以获取所述各界面组件的第一状态数据，包括：
调用所述Flutter应用界面中各界面组件相对应的JavaScript语言逻辑函数，以获取所述各界面组件的初始状态数据，将所述初始状态数据作为所述第一状态数据。
3.根据权利要求1所述的方法，其特征在于，在控制指令是对于所述Flutter应用界面中目标界面组件的更新指令的情况下，所述调用所述Flutter应用界面中至少一个界面组件相对应的JavaScript语言逻辑函数，以获取所述各界面组件的第一状态数据，包括：
调用所述目标界面组件相对应的JavaScript语言逻辑函数，以获取所述目标界面组件的更新状态数据，将所述更新状态数据作为所述第一状态数据；
所述根据所述第二状态数据对所述界面组件进行渲染，以显示包含所述界面组件的Flutter应用界面，包括：
根据所述第二状态数据对所述目标界面组件进行渲染，以对所显示的所述Flutter应用界面中的所述目标界面组件进行更新。
4.根据权利要求1所述的方法，其特征在于，在所述调用所述Flutter应用界面中至少一个界面组件相对应的JavaScript语言逻辑函数，以获取所述界面组件的第一状态数据之前，所述方法还包括：
获取所述Flutter应用界面中至少一个界面组件的绑定属性值；
将所包含状态数据字段名称，与所述绑定属性值相同的JavaScript语言逻辑函数，作为所述界面组件相对应的JavaScript语言逻辑函数。
5.根据权利要求1所述的方法，其特征在于，在所述接收对于Flutter应用界面的控制指令之前，所述方法还包括：
解封装Flutter应用程序包，获得JSON格式的Flutter界面层程序代码、JavaScript逻辑层程序代码，所述JavaScript逻辑层程序代码，所述JavaScript逻辑层程序代码用于计算Flutter应用界面中界面组件的状态数据；
通过AST解析器对JSON格式的Flutter界面层程序代码进行解析，获得Dart语言的Flutter界面层程序代码，所述Flutter界面层程序代码用于渲染和显示所述Flutter应用界面。
6.根据权利要求5所述的方法，其特征在于，所述Flutter界面层程序代码至少包括：界面组件构建信息；
在所述得Dart语言的Flutter界面层程序代码之后，所述方法还包括：
将所述界面组件构建信息进行实例化，得到所述Flutter应用界面的界面组件。
7.根据权利要求1所述的方法，其特征在于，所述接收对于Flutter应用界面的控制指令，包括：
在Flutter应用界面中接收到目标输入时，生成对于所述Flutter应用界面的控制指令。
8.一种界面显示装置，其特征在于，所述装置包括：
接收模块，被配置为接收对于Flutter应用界面的控制指令；
调用模块，被配置为响应于所述控制指令，调用所述Flutter应用界面中至少一个界面组件相对应的JavaScript语言逻辑函数，以获取所述界面组件的第一状态数据；
解析模块，被配置为解析所述第一状态数据，得到Dart语言的第二状态数据；
显示模块，被配置为根据所述第二状态数据对所述界面组件进行渲染，以显示包含所述界面组件的Flutter应用界面。
9.一种电子设备，其特征在于，包括处理器，存储器及存储在所述存储器上并可在所述处理器上运行的程序或指令，所述程序或指令被所述处理器执行时实现如权利要求1至7中任一项所述的界面显示方法。
10.一种计算机非瞬态可读存储介质，其特征在于，所述可读存储介质上存储计算机程序，所述计算机程序被处理器执行时实现如权利要求1至7中任一项所述的界面显示方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110421092.0A CN113094138A (zh) | 2021-04-19 | 2021-04-19 | 界面显示方法、装置、电子设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110421092.0A CN113094138A (zh) | 2021-04-19 | 2021-04-19 | 界面显示方法、装置、电子设备及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113094138A true CN113094138A (zh) | 2021-07-09 |
Family
ID=76678568
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110421092.0A Pending CN113094138A (zh) | 2021-04-19 | 2021-04-19 | 界面显示方法、装置、电子设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113094138A (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114077456A (zh) * | 2021-08-18 | 2022-02-22 | 五八有限公司 | 一种组件处理方法、装置、电子设备及存储介质 |
| CN114079823A (zh) * | 2021-11-17 | 2022-02-22 | 天翼数字生活科技有限公司 | 基于Flutter的视频渲染方法、装置、设备及介质 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110489621A (zh) * | 2019-07-09 | 2019-11-22 | 北京字节跳动网络技术有限公司 | 一种动态调整路由的方法、装置、介质和电子设备 |
| CN111381852A (zh) * | 2020-03-10 | 2020-07-07 | 江苏满运软件科技有限公司 | 基于Flutter的应用动态更新方法、装置、存储介质及电子设备 |
| CN111740948A (zh) * | 2020-05-12 | 2020-10-02 | 北京沃东天骏信息技术有限公司 | 数据包发布方法、动态更新方法、装置、设备及介质 |
| CN112131300A (zh) * | 2020-08-07 | 2020-12-25 | 农业农村部农药检定所(国际食品法典农药残留委员会秘书处) | 一种基于Flutter的跨平台数据制作方法和装置 |
-
2021
- 2021-04-19 CN CN202110421092.0A patent/CN113094138A/zh active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110489621A (zh) * | 2019-07-09 | 2019-11-22 | 北京字节跳动网络技术有限公司 | 一种动态调整路由的方法、装置、介质和电子设备 |
| CN111381852A (zh) * | 2020-03-10 | 2020-07-07 | 江苏满运软件科技有限公司 | 基于Flutter的应用动态更新方法、装置、存储介质及电子设备 |
| CN111740948A (zh) * | 2020-05-12 | 2020-10-02 | 北京沃东天骏信息技术有限公司 | 数据包发布方法、动态更新方法、装置、设备及介质 |
| CN112131300A (zh) * | 2020-08-07 | 2020-12-25 | 农业农村部农药检定所(国际食品法典农药残留委员会秘书处) | 一种基于Flutter的跨平台数据制作方法和装置 |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114077456A (zh) * | 2021-08-18 | 2022-02-22 | 五八有限公司 | 一种组件处理方法、装置、电子设备及存储介质 |
| CN114079823A (zh) * | 2021-11-17 | 2022-02-22 | 天翼数字生活科技有限公司 | 基于Flutter的视频渲染方法、装置、设备及介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108038134B (zh) | 页面展示的方法、装置和存储介质以及电子设备 | |
| US10176270B2 (en) | Performance of template based javascript widgets | |
| CN111240684B (zh) | 一种js代码的裁剪方法、装置、介质和电子设备 | |
| RU2459238C2 (ru) | Управляемая среда выполнения для организации взаимодействия между программными приложениями | |
| CN106874519B (zh) | 页面展现方法和装置 | |
| CN107688529B (zh) | 组件调试方法和装置 | |
| CN105718313A (zh) | 应用操作方法和装置 | |
| CN111680253A (zh) | 页面应用数据包生成方法、装置、计算机设备及存储介质 | |
| CN110727429B (zh) | 一种前端页面的生成方法、装置及设备 | |
| CN110297637B (zh) | 全平台客户端软件适用的资源文件热重载开发工具及方法 | |
| KR20140018414A (ko) | 브라우저 기반 애플리케이션 프로그램 확장 방법 및 디바이스 | |
| CN110275704A (zh) | 页面数据处理方法和装置，存储介质和电子设备 | |
| CN115309470B (zh) | 微件的加载方法、装置、设备以及存储介质 | |
| CN112799663A (zh) | 页面显示方法、装置、计算机可读存储介质及电子设备 | |
| CN114218890A (zh) | 页面渲染方法、装置、电子设备以及存储介质 | |
| US9571557B2 (en) | Script caching method and information processing device utilizing the same | |
| CN112799670B (zh) | 一种统一多端逻辑开发的方法及系统 | |
| CN114297549A (zh) | 组件处理方法及装置 | |
| CN114217789A (zh) | 功能组件拓展方法、装置、设备、存储介质及程序产品 | |
| CN113094138A (zh) | 界面显示方法、装置、电子设备及存储介质 | |
| CN113835803A (zh) | 应用主题显示方法及装置 | |
| CN117519877A (zh) | 快应用卡片的渲染方法、装置、存储介质及电子设备 | |
| CN109408057B (zh) | 自动生成代码的方法、装置、介质和计算设备 | |
| CN114661402A (zh) | 一种界面渲染方法、装置、电子设备及计算机可读介质 | |
| CN106775790B (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 |