CN111338623B - 一种开发用户界面的方法、装置、介质和电子设备 - Google Patents

一种开发用户界面的方法、装置、介质和电子设备 Download PDF

Info

Publication number
CN111338623B
CN111338623B CN202010085236.5A CN202010085236A CN111338623B CN 111338623 B CN111338623 B CN 111338623B CN 202010085236 A CN202010085236 A CN 202010085236A CN 111338623 B CN111338623 B CN 111338623B
Authority
CN
China
Prior art keywords
platform
cross
preset
script
code
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.)
Active
Application number
CN202010085236.5A
Other languages
English (en)
Other versions
CN111338623A (zh
Inventor
刘丰恺
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing ByteDance Network Technology Co Ltd
Original Assignee
Beijing ByteDance Network Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Beijing ByteDance Network Technology Co Ltd filed Critical Beijing ByteDance Network Technology Co Ltd
Priority to CN202010085236.5A priority Critical patent/CN111338623B/zh
Publication of CN111338623A publication Critical patent/CN111338623A/zh
Application granted granted Critical
Publication of CN111338623B publication Critical patent/CN111338623B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/40Transformation of program code
    • G06F8/41Compilation
    • YGENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02DCLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Devices For Executing Special Programs (AREA)

Abstract

本公开提供了一种开发用户界面的方法、装置、介质和电子设备。所述方法包括:在跨平台框架下,获取预设脚本编写的第一脚本代码和预设脚本编写的预设跨平台类的代码;基于预设平台的核心解释器编译所述第一脚本代码和预设跨平台类的代码,生成对应的第一编译码;通过桥接接口将所述第一编译码发送给跨平台渲染引擎,并由所述跨平台渲染引擎生成第一跨平台组件树;基于所述跨平台渲染引擎对所述第一跨平台组件树进行渲染,生成第一用户界面。本公开通过核心解释器与跨平台渲染引擎间的调用关系,实现了JavaScript脚本或TypeScript脚本在Flutter框架下的运行。实现了在Web下快速开发与Flutter框架下运行的有机融合。提高了开发效率,且保证了Flutter框架下运行效率,降低了开发成本。

Description

一种开发用户界面的方法、装置、介质和电子设备
技术领域
本公开涉及计算机技术领域,具体而言,涉及一种开发用户界面的方法、装置、介质和电子设备。
背景技术
Flutter框架是一种开源的移动应用开发框架,可使可运行程序实现跨平台、高保真和高性能。也就是可运行程序的一套代码可运行在iOS平台或Android平台。Flutter框架提供了丰富的组件、接口,使开发者可以很快地为Flutter框架添加本地扩展。
Flutter框架采用Dart语言作为开发语言,Dart语言是一种使用特定Dart VM虚拟机运行的静态语言,提供高速的AOT方案与强调动态性的JIT方案。Dart VM虚拟机为高级编程语言Dart语言提供运行环境。Dart Kernel是Dart VM虚拟机支持的IR级别的专用语言。采用Dart语言编写的代码编译后可转换到Dart Kernel中,并在Dart VM虚拟机中运行。
但是,当在Flutter框架下采用Dart语言开发时,由于Flutter框架下缺乏必要的开发资源,使采用Dart语言开发的效率很低,无形中增加了开发的成本。
发明内容
提供该发明内容部分以便以简要的形式介绍构思,这些构思将在后面的具体实施方式部分被详细描述。该发明内容部分并不旨在标识要求保护的技术方案的关键特征或必要特征,也不旨在用于限制所要求的保护的技术方案的范围。
本公开的目的在于提供一种开发用户界面的方法、装置、介质和电子设备,能够解决上述提到的至少一个技术问题。具体方案如下:
根据本公开的具体实施方式,第一方面,本公开提供一种开发用户界面的方法,包括:
在跨平台框架下,获取预设脚本编写的第一脚本代码和预设脚本编写的预设跨平台类的代码;所述预设跨平台类是与所述第一脚本代码中的类对应的跨平台框架下的同名类;
基于预设平台的核心解释器编译所述第一脚本代码和预设跨平台类的代码,生成对应的第一编译码;
通过桥接接口将所述第一编译码发送给跨平台渲染引擎,并由所述跨平台渲染引擎生成第一跨平台组件树;
基于所述跨平台渲染引擎对所述第一跨平台组件树进行渲染,生成第一用户界面。
根据本公开的具体实施方式,第二方面,本公开提供一种开发用户界面的装置,包括:
获取代码单元,用于在跨平台框架下,获取预设脚本编写的第一脚本代码和预设脚本编写的预设跨平台类的代码;所述预设跨平台类是与所述第一脚本代码中的类对应的跨平台框架下的同名类;
生成第一编译码单元,用于基于预设平台的核心解释器编译所述第一脚本代码和预设跨平台类的代码,生成对应的第一编译码;
生成第一跨平台组件树单元,用于通过桥接接口将所述第一编译码发送给跨平台渲染引擎,并由所述跨平台渲染引擎生成第一跨平台组件树;
生成第一用户界面单元,用于基于所述跨平台渲染引擎对所述第一跨平台组件树进行渲染,生成第一用户界面。
根据本公开的具体实施方式,第三方面,本公开提供一种计算机可读存储介质,其上存储有计算机程序,所述程序被处理器执行时实现如第一方面任一项所述开发用户界面的方法。
根据本公开的具体实施方式,第四方面,本公开提供一种电子设备,包括:一个或多个处理器;存储装置,用于存储一个或多个程序,当所述一个或多个程序被所述一个或多个处理器执行时,使得所述一个或多个处理器实现如第一方面任一项所述开发用户界面的方法。
本公开实施例的上述方案与现有技术相比,至少具有以下有益效果:
本公开提供了一种开发用户界面的方法、装置、介质和电子设备。本公开实现了一种基于Flutter框架下前端一体化开发用户界面的方法,通过核心解释器与跨平台渲染引擎间的调用关系,实现了JavaScript脚本或TypeScript脚本在Flutter框架下的运行。实现了在Web下快速开发与Flutter框架下运行的有机融合。提高了开发效率,且保证了Flutter框架下运行效率。且利用现有技术有效的降低了开发成本。
附图说明
结合附图并参考以下具体实施方式,本公开各实施例的上述和其他特征、优点及方面将变得更加明显。贯穿附图中,相同或相似的附图标记表示相同或相似的元素。应当理解附图是示意性的,原件和元素不一定按照比例绘制。在附图中:
图1示出了根据本公开实施例的开发用户界面的方法的流程图;
图2示出了根据本公开实施例的开发用户界面的方法的示意图;
图3示出了根据本公开实施例的开发用户界面的装置的单元框图;
图4示出了根据本公开的实施例的电子设备连接结构示意图。
具体实施方式
下面将参照附图更详细地描述本公开的实施例。虽然附图中显示了本公开的某些实施例,然而应当理解的是,本公开可以通过各种形式来实现,而且不应该被解释为限于这里阐述的实施例,相反提供这些实施例是为了更加透彻和完整地理解本公开。应当理解的是,本公开的附图及实施例仅用于示例性作用,并非用于限制本公开的保护范围。
应当理解,本公开的方法实施方式中记载的各个步骤可以按照不同的顺序执行,和/或并行执行。此外,方法实施方式可以包括附加的步骤和/或省略执行示出的步骤。本公开的范围在此方面不受限制。
本文使用的术语“包括”及其变形是开放性包括,即“包括但不限于”。术语“基于”是“至少部分地基于”。术语“一个实施例”表示“至少一个实施例”;术语“另一实施例”表示“至少一个另外的实施例”;术语“一些实施例”表示“至少一些实施例”。其他术语的相关定义将在下文描述中给出。
需要注意,本公开中提及的“第一”、“第二”等概念仅用于对不同的装置、模块或单元进行区分,并非用于限定这些装置、模块或单元所执行的功能的顺序或者相互依存关系。
需要注意,本公开中提及的“一个”、“多个”的修饰是示意性而非限制性的,本领域技术人员应当理解,除非在上下文另有明确指出,否则应该理解为“一个或多个”。
本公开实施方式中的多个装置之间所交互的消息或者信息的名称仅用于说明性的目的,而并不是用于对这些消息或信息的范围进行限制。
下面结合附图详细说明本公开的可选实施例。
对本公开提供的第一实施例,即一种开发用户界面的方法的实施例。
下面结合图1和图2对本公开实施例进行详细说明。
步骤S101,在跨平台框架下,获取预设脚本编写的第一脚本代码和预设脚本编写的预设跨平台类的代码。
跨平台框架包括Flutter框架。Flutter框架是一种开源的移动应用开发框架,可使可运行程序实现在iOS平台或Android平台上运行。
预设脚本包括JavaScript脚本或TypeScript脚本。通常在编写第一脚本代码时,会编写一些类。预设跨平台类是与所述第一脚本代码中的类对应的跨平台框架下的同名类。预设跨平台类的名称与第一脚本代码中的类的名称相同,用于在编译时将第一脚本代码中的类转换成适合跨平台框架下的编译码。在开发时,预设跨平台类可以是最终应用的类。
可选的,所述跨平台类包括镜像类。所述镜像类是与所述第一脚本代码中的类对应的跨平台框架下的同名模拟类。
同名模拟类是指模拟类的名称与第一脚本代码中的类的名称相同,但是,在同名模拟类中只有数据,而没有处理逻辑。例如,只有属性值,以及在方法中只有预设的输入数据和预设的输出数据,而方法中没有具体的处理逻辑。模拟类不是最终应用的类,只是开发过程中一种开发手段。当用户界面满足开发需求后,可以进一步完善同名模拟类中方法的处理逻辑。
步骤S102,基于预设平台的核心解释器编译所述第一脚本代码和预设跨平台类的代码,生成对应的第一编译码。
所述预设平台,包括:Android平台或iOS平台。对于JavaScript脚本来说,核心解释器是JavaScript核心解释器(英文全称JavaScript Core)。Android平台或iOS平台均有可用的JavaScript核心解释器运行JavaScript脚本,使用JavaScript脚本开发应用程序能够获得更好的动态性,并且使用JavaScript核心解释器比JIT Dart核心解释器(英文全称JIT Dart Core,一种在Flutter框架下用于编译Dart语言的工具)的容量更小,且生成的编译码可用于Flutter框架下的应用程序中。
步骤S103,通过桥接接口将所述第一编译码发送给跨平台渲染引擎,并由所述跨平台渲染引擎生成第一跨平台组件树。
桥接接口是核心解释器与跨平台渲染引擎间进行信息交换的接口。通过桥接接口可将所述第一编译码发送给跨平台渲染引擎;也可以将用户界面的变化信息通过回调函数传送到所述核心解释器。从而实现信息互调,通过核心解释器保证用户界面信息与跨平台组件树的信息保持一致。
跨平台渲染引擎用于创建用户界面,生成的跨平台组件树用于描述对应元素的属性,其中包括视图的配置信息。元素是处于跨平台组件树和用户界面的中间层。跨平台渲染引擎中的目标渲染功能用于处理用户界面中的变化信息以及用户界面的布局和绘制。跨平台渲染引擎可以高效的创建跨平台组件树,以及高效的销毁跨平台组件树。
步骤S104,基于所述跨平台渲染引擎对所述第一跨平台组件树进行渲染,生成第一用户界面。
本公开实施例实现了一种基于Flutter框架下开发用户界面的方法,通过核心解释器与跨平台渲染引擎间的调用关系,实现了JavaScript脚本或TypeScript脚本在Flutter框架下的运行。且利用现有技术有效的降低了开发成本。
所述第一用户界面包括动态组件。
通常,一个用户界面包括:静态组件和动态组件。所述静态组件就是在用户界面中显示后不再发生变化的组件。而动态组件是用户界面中可以根据接收信息而发生变化的组件,同时,动态组件也是可以响应操作信息的组件。
所述方法还包括以下步骤:
步骤S111,获取所述动态组件的变化事件。
变化事件是用户界面中动态组件响应操作信息而生成的消息。
例如,在第一用户界面中动态组件是一个按钮,当点击该按钮时,该按钮将生成一个点击事件,通过该点击事件可在第一用户界面中显示出一个新的对话框,从而使第一用户界面发生变化。
步骤S112,基于所述变化事件的触发,获取所述第一用户界面的第一变化信息。
第一变化信息是第一用户界面中发生变化的信息。通常是将变化后的用户界面与第一用户界面对比,获取两个界面中发生变化的信息。例如,继续上述例子,新的对话框的信息就是第一变化信息。
步骤S113,通过所述桥接接口将所述第一变化信息回调到所述核心解释器进行编译,生成对应的变化编译码。
步骤S114,通过所述桥接接口将所述变化编译码发送给跨平台渲染引擎,并由所述跨平台渲染引擎生成第二跨平台组件树。
本公开实施例将用户界面的变化信息通过回调函数传送到所述核心解释器。从而实现信息互调,通过核心解释器保证用户界面信息与跨平台组件树的信息保持一致。
使用JavaScript脚本或TypeScript脚本开发应用程序能够获得更好的动态性,且可直接将渲染信息绘制在用户界面中,从而实现快速开发和演示。
所述方法还包括:
步骤S121,在跨平台框架下,获取第一脚本代码。
步骤S122,基于预设平台的所述核心解释器编译所述第一脚本代码,生成第二用户界面。
通过设置,核心解释器可以对第一脚本代码编译后生成第二用户界面。从而实现了在Web下快速开发的目的。也实现了同一套代码既可以运行在浏览器中进行调试,也可以在Flutter框架下进行高效率运行。实现了一种基于Flutter框架下前端一体化开发用户界面的方法。
本公开实施例实现了一种基于Flutter框架下前端一体化开发用户界面的方法,通过核心解释器与跨平台渲染引擎间的调用关系,实现了JavaScript脚本或TypeScript脚本在Flutter框架下的运行。实现了在Web下快速开发与Flutter框架下运行的有机融合。提高了开发效率,且保证了Flutter框架下运行效率。且利用现有技术有效的降低了开发成本。
与本公开提供的第一实施例相对应,本公开还提供了第二实施例,即一种开发用户界面的装置。由于第二实施例基本相似于第一实施例,所以描述得比较简单,相关的部分请参见第一实施例的对应说明即可。下述描述的装置实施例仅仅是示意性的。
图3示出了本公开提供的一种开发用户界面的装置的实施例。图3为本公开实施例提供的开发用户界面的装置的单元框图。
请参见图3所示,本公开提供一种开发用户界面的装置,包括:获取代码单元301,生成第一编译码单元302,生成第一跨平台组件树单元303,生成第一用户界面单元304。
获取代码单元301,用于在跨平台框架下,获取预设脚本编写的第一脚本代码和预设脚本编写的预设跨平台类的代码;所述预设跨平台类是与所述第一脚本代码中的类对应的跨平台框架下的同名类;
生成第一编译码单元302,用于基于预设平台的核心解释器编译所述第一脚本代码和预设跨平台类的代码,生成对应的第一编译码;
生成第一跨平台组件树单元303,用于通过桥接接口将所述第一编译码发送给跨平台渲染引擎,并由所述跨平台渲染引擎生成第一跨平台组件树;
生成第一用户界面单元304,用于基于所述跨平台渲染引擎对所述第一跨平台组件树进行渲染,生成第一用户界面。
可选的,所述预设跨平台类包括镜像类;所述镜像类是与所述第一脚本代码中的类对应的跨平台框架下的同名模拟类。
可选的,所述第一用户界面包括动态组件;
所述装置还包括:
获取变化事件单元,用于获取所述动态组件的变化事件;
获取第一变化信息单元,用于基于所述变化事件的触发,获取所述第一用户界面的第一变化信息;
生成变化编译码单元,用于通过所述桥接接口将所述第一变化信息回调到所述核心解释器进行编译,生成对应的变化编译码;
生成第二跨平台组件树单元,用于通过所述桥接接口将所述变化编译码发送给跨平台渲染引擎,并由所述跨平台渲染引擎生成第二跨平台组件树。
可选的,所述装置还包括:
获取第一脚本代码单元,用于在跨平台框架下,获取第一脚本代码;
生成第二用户界面单元,用于基于预设平台的所述核心解释器编译所述第一脚本代码,生成第二用户界面。
可选的,所述预设脚本包括JavaScript脚本或TypeScript脚本。
可选的,所述预设平台,包括:Android平台或iOS平台。
可选的,所述跨平台框架包括Flutter框架。
本公开实施例实现了一种基于Flutter框架下前端一体化开发用户界面的装置,通过核心解释器与跨平台渲染引擎间的调用关系,实现了JavaScript脚本或TypeScript脚本在Flutter框架下的运行。实现了在Web下快速开发与Flutter框架下运行的有机融合。提高了开发效率,且保证了Flutter框架下运行效率。且利用现有技术有效的降低了开发成本。
本公开实施例提供了第三实施例,即一种电子设备,该设备用于开发用户界面的方法,所述电子设备,包括:至少一个处理器;以及,与所述至少一个处理器通信连接的存储器;其中,
所述存储器存储有可被所述一个处理器执行的指令,所述指令被所述至少一个处理器执行,以使所述至少一个处理器能够执行如第一实施例所述开发用户界面的方法。
本公开实施例提供了第四实施例,即一种开发用户界面的计算机存储介质,所述计算机存储介质存储有计算机可执行指令,该计算机可执行指令可执行如第一实施例中所述开发用户界面的方法。
下面参考图4,其示出了适于用来实现本公开实施例的电子设备的结构示意图。本公开实施例中的终端设备可以包括但不限于诸如移动电话、笔记本电脑、数字广播接收器、PDA(个人数字助理)、PAD(平板电脑)、PMP(便携式多媒体播放器)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字TV、台式计算机等等的固定终端。图4示出的电子设备仅仅是一个示例,不应对本公开实施例的功能和使用范围带来任何限制。
如图4所示,电子设备可以包括处理装置(例如中央处理器、图形处理器等)401,其可以根据存储在只读存储器(ROM)402中的程序或者从存储装置408加载到随机访问存储器(RAM)403中的程序而执行各种适当的动作和处理。在RAM 403中,还存储有电子设备操作所需的各种程序和数据。处理装置401、ROM 402以及RAM 403通过总线404彼此相连。输入/输出(I/O)接口405也连接至总线404。
通常,以下装置可以连接至I/O接口405:包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置406;包括例如液晶显示器(LCD)、扬声器、振动器等的输出装置407;包括例如磁带、硬盘等的存储装置408;以及通信装置409。通信装置409可以允许电子设备与其他设备进行无线或有线通信以交换数据。虽然图4示出了具有各种装置的电子设备,但是应理解的是,并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。
特别地,根据本公开的实施例,上文参考流程图描述的过程可以被实现为计算机软件程序。例如,本公开的实施例包括一种计算机程序产品,其包括承载在非暂态计算机可读介质上的计算机程序,该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中,该计算机程序可以通过通信装置409从网络上被下载和安装,或者从存储装置408被安装,或者从ROM 402被安装。在该计算机程序被处理装置401执行时,执行本公开实施例的方法中限定的上述功能。
需要说明的是,本公开上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件,或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于:具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中,计算机可读存储介质可以是任何包含或存储程序的有形介质,该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中,计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号,其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式,包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质,该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输,包括但不限于:电线、光缆、RF(射频)等等,或者上述的任意合适的组合。
在一些实施方式中,客户端、服务器可以利用诸如HTTP(HyperText TransferProtocol,超文本传输协议)之类的任何当前已知或未来研发的网络协议进行通信,并且可以与任意形式或介质的数字数据通信(例如,通信网络)互连。通信网络的示例包括局域网(“LAN”),广域网(“WAN”),网际网(例如,互联网)以及端对端网络(例如,ad hoc端对端网络),以及任何当前已知或未来研发的网络。
上述计算机可读介质可以是上述电子设备中所包含的;也可以是单独存在,而未装配入该电子设备。
可以以一种或多种程序设计语言或其组合来编写用于执行本公开的操作的计算机程序代码,上述程序设计语言包括但不限于面向对象的程序设计语言—诸如Java、Smalltalk、C++,还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中,远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机,或者,可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
附图中的流程图和框图,图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上,流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分,该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意,在有些作为替换的实现中,方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如,两个接连地表示的方框实际上可以基本并行地执行,它们有时也可以按相反的顺序执行,这依所涉及的功能而定。也要注意的是,框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合,可以用执行规定的功能或操作的专用的基于硬件的系统来实现,或者可以用专用硬件与计算机指令的组合来实现。
描述于本公开实施例中所涉及到的单元可以通过软件的方式实现,也可以通过硬件的方式来实现。其中,单元的名称在某种情况下并不构成对该单元本身的限定。
本文中以上描述的功能可以至少部分地由一个或多个硬件逻辑部件来执行。例如,非限制性地,可以使用的示范类型的硬件逻辑部件包括:现场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、片上系统(SOC)、复杂可编程逻辑设备(CPLD)等等。
在本公开的上下文中,机器可读介质可以是有形的介质,其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备,或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。
以上描述仅为本公开的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解,本公开中所涉及的公开范围,并不限于上述技术特征的特定组合而成的技术方案,同时也应涵盖在不脱离上述公开构思的情况下,由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本公开中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。
此外,虽然采用特定次序描绘了各操作,但是这不应当理解为要求这些操作以所示出的特定次序或以顺序次序执行来执行。在一定环境下,多任务和并行处理可能是有利的。同样地,虽然在上面论述中包含了若干具体实现细节,但是这些不应当被解释为对本公开的范围的限制。在单独的实施例的上下文中描述的某些特征还可以组合地实现在单个实施例中。相反地,在单个实施例的上下文中描述的各种特征也可以单独地或以任何合适的子组合的方式实现在多个实施例中。
尽管已经采用特定于结构特征和/或方法逻辑动作的语言描述了本主题,但是应当理解所附权利要求书中所限定的主题未必局限于上面描述的特定特征或动作。相反,上面所描述的特定特征和动作仅仅是实现权利要求书的示例形式。

Claims (9)

1.一种开发用户界面的方法,其特征在于,包括:
在跨平台框架下,获取预设脚本编写的第一脚本代码和预设脚本编写的预设跨平台类的代码;所述预设跨平台类是与所述第一脚本代码中的类对应的跨平台框架下的同名类;
基于预设平台的核心解释器编译所述第一脚本代码和预设跨平台类的代码,生成对应的第一编译码;
通过桥接接口将所述第一编译码发送给跨平台渲染引擎,并由所述跨平台渲染引擎生成第一跨平台组件树;
基于所述跨平台渲染引擎对所述第一跨平台组件树进行渲染,生成第一用户界面;
所述第一用户界面包括动态组件;
所述方法还包括:
获取所述动态组件的变化事件;
基于所述变化事件的触发,获取所述第一用户界面的第一变化信息;
通过所述桥接接口将所述第一变化信息回调到所述核心解释器进行编译,生成对应的变化编译码;
通过所述桥接接口将所述变化编译码发送给跨平台渲染引擎,并由所述跨平台渲染引擎生成第二跨平台组件树。
2.根据权利要求1所述的方法,其特征在于,所述预设跨平台类包括镜像类;所述镜像类是与所述第一脚本代码中的类对应的跨平台框架下的同名模拟类。
3.根据权利要求1所述的方法,其特征在于,所述方法还包括:
在跨平台框架下,获取第一脚本代码;
基于预设平台的所述核心解释器编译所述第一脚本代码,生成第二用户界面。
4.根据权利要求1所述的方法,其特征在于,所述预设脚本包括JavaScript脚本或TypeScript脚本。
5.根据权利要求1所述的方法,其特征在于,所述预设平台,包括:Android平台或iOS平台。
6.根据权利要求1所述的方法,其特征在于,所述跨平台框架包括Flutter框架。
7.一种开发用户界面的装置,其特征在于,包括:
获取代码单元,用于在跨平台框架下,获取预设脚本编写的第一脚本代码和预设脚本编写的预设跨平台类的代码;所述预设跨平台类是与所述第一脚本代码中的类对应的跨平台框架下的同名类;
生成第一编译码单元,用于基于预设平台的核心解释器编译所述第一脚本代码和预设跨平台类的代码,生成对应的第一编译码;
生成第一跨平台组件树单元,用于通过桥接接口将所述第一编译码发送给跨平台渲染引擎,并由所述跨平台渲染引擎生成第一跨平台组件树;
生成第一用户界面单元,用于基于所述跨平台渲染引擎对所述第一跨平台组件树进行渲染,生成第一用户界面;
所述第一用户界面包括动态组件,所述装置还包括:
获取变化事件单元,用于获取所述动态组件的变化事件;
获取第一变化信息单元,用于基于所述变化事件的触发,获取所述第一用户界面 的第一变化信息;
生成变化编译码单元,用于通过所述桥接接口将所述第一变化信息回调到所述核 心解释器进行编译,生成对应的变化编译码;
生成第二跨平台组件树单元,用于通过所述桥接接口将所述变化编译码发送给跨 平台渲染引擎,并由所述跨平台渲染引擎生成第二跨平台组件树。
8.一种计算机可读存储介质,其上存储有计算机程序,其特征在于,所述程序被处理器执行时实现如权利要求1至6中任一项所述的方法。
9.一种电子设备,其特征在于,包括:
一个或多个处理器;
存储装置,用于存储一个或多个程序,当所述一个或多个程序被所述一个或多个处理器执行时,使得所述一个或多个处理器实现如权利要求1至6中任一项所述的方法。
CN202010085236.5A 2020-02-10 2020-02-10 一种开发用户界面的方法、装置、介质和电子设备 Active CN111338623B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010085236.5A CN111338623B (zh) 2020-02-10 2020-02-10 一种开发用户界面的方法、装置、介质和电子设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010085236.5A CN111338623B (zh) 2020-02-10 2020-02-10 一种开发用户界面的方法、装置、介质和电子设备

Publications (2)

Publication Number Publication Date
CN111338623A CN111338623A (zh) 2020-06-26
CN111338623B true CN111338623B (zh) 2023-06-30

Family

ID=71180101

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010085236.5A Active CN111338623B (zh) 2020-02-10 2020-02-10 一种开发用户界面的方法、装置、介质和电子设备

Country Status (1)

Country Link
CN (1) CN111338623B (zh)

Families Citing this family (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112070871B (zh) * 2020-09-02 2024-01-19 山东天兑信息科技有限公司 一种跨平台三维可视化引擎构建系统、方法、终端及储存介质
CN113031932B (zh) * 2021-03-11 2023-10-20 腾讯科技(深圳)有限公司 项目开发方法、装置、电子设备及存储介质
CN113282288A (zh) * 2021-05-28 2021-08-20 稿定(厦门)科技有限公司 控制Flutter应用进行离屏画布渲染的方法
CN113722538B (zh) * 2021-09-08 2023-09-05 北京奇艺世纪科技有限公司 一种界面动态渲染方法及装置
CN116541009B (zh) * 2023-07-07 2023-09-08 成都中科合迅科技有限公司 基于组件树的用户界面创建与更新方法和系统
CN117555535B (zh) * 2024-01-09 2024-05-14 云筑信息科技(成都)有限公司 一种React框架中实现多环境代码复用方法

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2015033333A1 (en) * 2013-09-09 2015-03-12 N-Sip Ltd Communication channel between plugin application and browser script
US10101985B1 (en) * 2017-05-11 2018-10-16 Oracle International Corporation Scalable ecosystem for enterprise mobility
CN109284093A (zh) * 2018-10-26 2019-01-29 深圳易嘉恩科技有限公司 基于前端技术的跨平台应用开发框架及其实现方法
CN110275704A (zh) * 2019-05-24 2019-09-24 北京三快在线科技有限公司 页面数据处理方法和装置,存储介质和电子设备
CN110766772A (zh) * 2019-09-10 2020-02-07 北京字节跳动网络技术有限公司 基于Flutter跨平台海报制作方法装置介质和设备

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2015033333A1 (en) * 2013-09-09 2015-03-12 N-Sip Ltd Communication channel between plugin application and browser script
US10101985B1 (en) * 2017-05-11 2018-10-16 Oracle International Corporation Scalable ecosystem for enterprise mobility
CN109284093A (zh) * 2018-10-26 2019-01-29 深圳易嘉恩科技有限公司 基于前端技术的跨平台应用开发框架及其实现方法
CN110275704A (zh) * 2019-05-24 2019-09-24 北京三快在线科技有限公司 页面数据处理方法和装置,存储介质和电子设备
CN110766772A (zh) * 2019-09-10 2020-02-07 北京字节跳动网络技术有限公司 基于Flutter跨平台海报制作方法装置介质和设备

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
邓皓瀚.基于Flutter 的跨平台移动APP 开发前景研究.《信息与电脑》.(第15期),正文第1-3页. *

Also Published As

Publication number Publication date
CN111338623A (zh) 2020-06-26

Similar Documents

Publication Publication Date Title
CN111338623B (zh) 一种开发用户界面的方法、装置、介质和电子设备
CN110489101B (zh) 接口模拟方法、系统、介质和电子设备
CN111581555B (zh) 一种文档加载方法、装置、设备及存储介质
CN111221572B (zh) 一种自动适配运行环境的方法、装置、介质和设备
CN112286529A (zh) 前端页面的开发方法、装置、设备及存储介质
CN111857658A (zh) 一种渲染动态组件的方法、装置、介质和电子设备
CN112631590B (zh) 组件库生成方法、装置、电子设备和计算机可读介质
CN111309304B (zh) 一种生成idl文件的方法、装置、介质和电子设备
CN111324376B (zh) 功能配置方法、装置、电子设备及计算机可读介质
CN111367516A (zh) 应用界面生成方法、装置及电子设备
CN115982491A (zh) 页面更新方法及装置、电子设备和计算机可读存储介质
CN112416303B (zh) 软件开发工具包热修复方法、装置及电子设备
CN112015383A (zh) 一种登录方法和装置
CN111752644A (zh) 接口模拟方法、装置、设备及存储介质
CN111414154A (zh) 前端开发的方法、装置、电子设备和存储介质
CN110618811B (zh) 信息呈现方法和装置
CN111240801A (zh) 生成堆内存快照文件的方法、装置、介质和电子设备
CN112162755B (zh) 一种数据处理方法、装置、介质和电子设备
CN111309323B (zh) 参数初始化方法、装置和电子设备
CN109669720B (zh) 基于Promise的链式异步请求处理方法、装置及电子设备
CN113553123A (zh) 数据处理方法、装置、电子设备及存储介质
CN113778566A (zh) 原生应用调用方法、装置、电子设备和计算机可读介质
CN111797009A (zh) 用于检测代码兼容性的方法、装置和电子设备
CN112445517B (zh) 入口文件生成方法、装置、电子设备和计算机可读介质
CN112346728B (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
GR01 Patent grant
GR01 Patent grant