一种开发用户界面的方法、装置、介质和电子设备制造方法及图纸

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

A method, device, medium and electronic device for developing user interface

【技术实现步骤摘要】
一种开发用户界面的方法、装置、介质和电子设备
本公开涉及计算机
，具体而言，涉及一种开发用户界面的方法、装置、介质和电子设备。
技术介绍
Flutter框架是一种开源的移动应用开发框架，可使可运行程序实现跨平台、高保真和高性能。也就是可运行程序的一套代码可运行在iOS平台或Android平台。Flutter框架提供了丰富的组件、接口，使开发者可以很快地为Flutter框架添加本地扩展。Flutter框架采用Dart语言作为开发语言，Dart语言是一种使用特定DartVM虚拟机运行的静态语言，提供高速的AOT方案与强调动态性的JIT方案。DartVM虚拟机为高级编程语言Dart语言提供运行环境。DartKernel是DartVM虚拟机支持的IR级别的专用语言。采用Dart语言编写的代码编译后可转换到DartKernel中，并在DartVM虚拟机中运行。但是，当在Flutter框架下采用Dart语言开发时，由于Flutter框架下缺乏必要的开发资源，使采用Dart语言开发的效率很低，无形中增加了开发的成本。
技术实现思路
提供该
技术实现思路
部分以便以简要的形式介绍构思，这些构思将在后面的具体实施方式部分被详细描述。该
技术实现思路
部分并不旨在标识要求保护的技术方案的关键特征或必要特征，也不旨在用于限制所要求的保护的技术方案的范围。本公开的目的在于提供一种开发用户界面的方法、装置、介质和电子设备，能够解决上述提到的至少一个技术问题。具体方案如下：根据本公开的具体实施方式，第一方面，本公开提供一种开发用户界面的方法，包括：在跨平台框架下，获取预设脚本编写的第一脚本代码和预设脚本编写的预设跨平台类的代码；所述预设跨平台类是与所述第一脚本代码中的类对应的跨平台框架下的同名类；基于预设平台的核心解释器编译所述第一脚本代码和预设跨平台类的代码，生成对应的第一编译码；通过桥接接口将所述第一编译码发送给跨平台渲染引擎，并由所述跨平台渲染引擎生成第一跨平台组件树；基于所述跨平台渲染引擎对所述第一跨平台组件树进行渲染，生成第一用户界面。根据本公开的具体实施方式，第二方面，本公开提供一种开发用户界面的装置，包括：获取代码单元，用于在跨平台框架下，获取预设脚本编写的第一脚本代码和预设脚本编写的预设跨平台类的代码；所述预设跨平台类是与所述第一脚本代码中的类对应的跨平台框架下的同名类；生成第一编译码单元，用于基于预设平台的核心解释器编译所述第一脚本代码和预设跨平台类的代码，生成对应的第一编译码；生成第一跨平台组件树单元，用于通过桥接接口将所述第一编译码发送给跨平台渲染引擎，并由所述跨平台渲染引擎生成第一跨平台组件树；生成第一用户界面单元，用于基于所述跨平台渲染引擎对所述第一跨平台组件树进行渲染，生成第一用户界面。根据本公开的具体实施方式，第三方面，本公开提供一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现如第一方面任一项所述开发用户界面的方法。根据本公开的具体实施方式，第四方面，本公开提供一种电子设备，包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现如第一方面任一项所述开发用户界面的方法。本公开实施例的上述方案与现有技术相比，至少具有以下有益效果：本公开提供了一种开发用户界面的方法、装置、介质和电子设备。本公开实现了一种基于Flutter框架下前端一体化开发用户界面的方法，通过核心解释器与跨平台渲染引擎间的调用关系，实现了JavaScript脚本或TypeScript脚本在Flutter框架下的运行。实现了在Web下快速开发与Flutter框架下运行的有机融合。提高了开发效率，且保证了Flutter框架下运行效率。且利用现有技术有效的降低了开发成本。附图说明结合附图并参考以下具体实施方式，本公开各实施例的上述和其他特征、优点及方面将变得更加明显。贯穿附图中，相同或相似的附图标记表示相同或相似的元素。应当理解附图是示意性的，原件和元素不一定按照比例绘制。在附图中：图1示出了根据本公开实施例的开发用户界面的方法的流程图；图2示出了根据本公开实施例的开发用户界面的方法的示意图；图3示出了根据本公开实施例的开发用户界面的装置的单元框图；图4示出了根据本公开的实施例的电子设备连接结构示意图。具体实施方式下面将参照附图更详细地描述本公开的实施例。虽然附图中显示了本公开的某些实施例，然而应当理解的是，本公开可以通过各种形式来实现，而且不应该被解释为限于这里阐述的实施例，相反提供这些实施例是为了更加透彻和完整地理解本公开。应当理解的是，本公开的附图及实施例仅用于示例性作用，并非用于限制本公开的保护范围。应当理解，本公开的方法实施方式中记载的各个步骤可以按照不同的顺序执行，和/或并行执行。此外，方法实施方式可以包括附加的步骤和/或省略执行示出的步骤。本公开的范围在此方面不受限制。本文使用的术语“包括”及其变形是开放性包括，即“包括但不限于”。术语“基于”是“至少部分地基于”。术语“一个实施例”表示“至少一个实施例”；术语“另一实施例”表示“至少一个另外的实施例”；术语“一些实施例”表示“至少一些实施例”。其他术语的相关定义将在下文描述中给出。需要注意，本公开中提及的“第一”、“第二”等概念仅用于对不同的装置、模块或单元进行区分，并非用于限定这些装置、模块或单元所执行的功能的顺序或者相互依存关系。需要注意，本公开中提及的“一个”、“多个”的修饰是示意性而非限制性的，本领域技术人员应当理解，除非在上下文另有明确指出，否则应该理解为“一个或多个”。本公开实施方式中的多个装置之间所交互的消息或者信息的名称仅用于说明性的目的，而并不是用于对这些消息或信息的范围进行限制。下面结合附图详细说明本公开的可选实施例。对本公开提供的第一实施例，即一种开发用户界面的方法的实施例。下面结合图1和图2对本公开实施例进行详细说明。步骤S101，在跨平台框架下，获取预设脚本编写的第一脚本代码和预设脚本编写的预设跨平台类的代码。跨平台框架包括Flutter框架。Flutter框架是一种开源的移动应用开发框架，可使可运行程序实现在iOS平台或Android平台上运行。预设脚本包括JavaScript脚本或TypeScript脚本。通常在编写第一脚本代码时，会编写一些类。预设跨平台类是与所述第一脚本代码中的类对应的跨平台框架下的同名类。预设跨平台类的名称与第一脚本代码中的类的名称相同，用于在编译时将第一脚本代码中的类转换成适合跨平台框架下的编译码。在开发时，预设跨平台类可以是最终应用的类。可选的，所述跨平台类包括镜像类。所述镜像类是与所述第一脚本代码中的类对应的跨平台框架下的同名模拟类。同名模本文档来自技高网...

【技术保护点】
1.一种开发用户界面的方法，其特征在于，包括：/n在跨平台框架下，获取预设脚本编写的第一脚本代码和预设脚本编写的预设跨平台类的代码；所述预设跨平台类是与所述第一脚本代码中的类对应的跨平台框架下的同名类；/n基于预设平台的核心解释器编译所述第一脚本代码和预设跨平台类的代码，生成对应的第一编译码；/n通过桥接接口将所述第一编译码发送给跨平台渲染引擎，并由所述跨平台渲染引擎生成第一跨平台组件树；/n基于所述跨平台渲染引擎对所述第一跨平台组件树进行渲染，生成第一用户界面。/n

【技术特征摘要】
1.一种开发用户界面的方法，其特征在于，包括：
在跨平台框架下，获取预设脚本编写的第一脚本代码和预设脚本编写的预设跨平台类的代码；所述预设跨平台类是与所述第一脚本代码中的类对应的跨平台框架下的同名类；
基于预设平台的核心解释器编译所述第一脚本代码和预设跨平台类的代码，生成对应的第一编译码；
通过桥接接口将所述第一编译码发送给跨平台渲染引擎，并由所述跨平台渲染引擎生成第一跨平台组件树；
基于所述跨平台渲染引擎对所述第一跨平台组件树进行渲染，生成第一用户界面。


2.根据权利要求1所述的渲染方法，其特征在于，所述预设跨平台类包括镜像类；所述镜像类是与所述第一脚本代码中的类对应的跨平台框架下的同名模拟类。


3.根据权利要求1所述的渲染方法，其特征在于，所述第一用户界面包括动态组件；
所述方法还包括：
获取所述动态组件的变化事件；
基于所述变化事件的触发，获取所述第一用户界面的第一变化信息；
通过所述桥接接口将所述第一变化信息回调到所述核心解释器进行编译，生成对应的变化编译码；
通过所述桥接接口将所述变化编译码发送给跨平台渲染引擎，并由所述跨平台渲染引擎生成第二跨平台组件树。


4.根据权利要求1所述的渲染方法，其特征在于，所述方法还包括：
在跨平台框架下，获取第一脚本代码；
基于预设平台的所述核心解释器编译所述第一脚本代码，生成第二用户界面。


5.根据权利要求1...

【专利技术属性】
技术研发人员：刘丰恺，
申请(专利权)人：北京字节跳动网络技术有限公司，
类型：发明
国别省市：北京;11