Interface display methods, devices, equipment and storage media

Abstract

This application discloses a method, apparatus, device, and storage medium for displaying an interface, belonging to the field of computer technology. The method includes: obtaining an original configuration file of the interface to be displayed; converting the code format of the original configuration file into a unified specified format to obtain an intermediate configuration file; parsing the data structure and syntax structure of the intermediate configuration file; generating a converted configuration file based on the data structure and syntax structure; and rendering and displaying the interface to be displayed according to the converted configuration file. In the technical solution provided by this application, by converting the code in the original configuration file of the interface to be displayed to obtain an intermediate configuration file describing the interface in a unified format, generating a converted configuration file based on the data and syntax relationships of the intermediate configuration file, and then rendering the converted configuration file to obtain a rendered screen, the execution efficiency of opening a mobile terminal interface is improved, and a white screen phenomenon is avoided when switching interfaces.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to an interface display method, apparatus, device, and storage medium. Background Technology

[0002] With the development of computer technology, mobile interfaces developed using dynamic framework technology are gaining increasing recognition from users.

[0003] In related technologies, when a mobile interface developed using RN (React-Native) or a RN-like dynamic framework is opened for the first time, it is necessary to initialize the JavaScript Core engine, execute the RN or RN-like framework's JS Framework, and execute the JS code that the interface depends on when it is opened for the first time, and finally render and display the mobile interface.

[0004] Because JavaScript is a dynamic language, its execution efficiency is relatively low, the interface switching process is not smooth, and there is a white screen phenomenon. Summary of the Invention

[0005] This application provides an interface display method, apparatus, device, and storage medium, which can improve the execution efficiency of opening mobile terminal interfaces and avoid the device white screen phenomenon when switching interfaces. The technical solution is as follows:

[0006] According to one aspect of the embodiments of this application, a method for displaying an interface is provided, the method comprising:

[0007] Obtain the original configuration file for the interface to be displayed;

[0008] The code format of the original configuration file is converted into a uniformly specified format to obtain an intermediate configuration file;

[0009] The data structure and syntax structure of the intermediate configuration file are parsed. The data structure is used to reflect the mathematical relationships between objects in the intermediate configuration file, and the syntax structure is used to reflect the logical relationships between objects in the intermediate configuration file.

[0010] Based on the data structure and the syntax structure, a converted configuration file is generated;

[0011] The interface to be displayed is rendered and displayed according to the converted configuration file.

[0012] According to one aspect of the embodiments of this application, a user interface display device is provided, the device comprising:

[0013] The configuration file acquisition module is used to obtain the original configuration file of the interface to be displayed.

[0014] The code format conversion module is used to convert the code format of the original configuration file into a uniformly specified format to obtain an intermediate configuration file.

[0015] The configuration file parsing module is used to parse the data structure and syntax structure of the intermediate configuration file. The data structure is used to reflect the mathematical relationships between objects in the intermediate configuration file, and the syntax structure is used to reflect the logical relationships between objects in the intermediate configuration file.

[0016] The configuration file conversion module is used to generate a converted configuration file based on the data structure and the syntax structure.

[0017] The interface rendering and display module is used to render and display the interface to be displayed according to the converted configuration file.

[0018] According to one aspect of the embodiments of this application, a computer device is provided, the computer device including a processor and a memory, the memory storing at least one instruction, at least one program, code set or instruction set, the at least one instruction, the at least one program, the code set or instruction set being loaded and executed by the processor to implement the above-described interface display method.

[0019] According to one aspect of the embodiments of this application, a computer-readable storage medium is provided, wherein the storage medium stores at least one instruction, at least one program, code set, or instruction set, wherein the at least one instruction, the at least one program, the code set, or the instruction set is loaded and executed by a processor to implement the above-described interface display method.

[0020] According to one aspect of the embodiments of this application, a computer program product or computer program is provided, which includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the aforementioned interface display method.

[0021] The technical solution provided in this application can bring the following beneficial effects:

[0022] By converting the code in the original configuration file of the interface to be displayed, an intermediate configuration file describing the content of the interface under a unified data exchange format is obtained. Based on the data and syntax relationships of the intermediate configuration file, a converted configuration file is generated, and then the converted configuration file is rendered to obtain the rendered screen. This improves the execution efficiency of opening the mobile interface and avoids the phenomenon of white screen on the device when switching interfaces. Attached Figure Description

[0023] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0024] Figure 1 This is a block diagram of an interface display system provided in one embodiment of this application;

[0025] Figure 2 This is a flowchart of an embodiment of the interface display method provided in this application;

[0026] Figure 3 An exemplary schematic diagram of a template parsing module is shown;

[0027] Figure 4 An exemplary schematic diagram illustrates the process of generating an intermediate configuration file;

[0028] Figure 5 This is a flowchart of an interface display method provided in another embodiment of this application;

[0029] Figure 6 An example of an interface diagram is shown;

[0030] Figure 7 An example is shown in the schematic diagram of an interface interaction design;

[0031] Figure 8 An example diagram of a DOM tree node is shown;

[0032] Figure 9 An exemplary diagram illustrates the generation process of a transformed virtual DOM;

[0033] Figure 10 An example is shown in the structure diagram of an expression engine;

[0034] Figure 11 An exemplary diagram illustrates a process for generating expression results;

[0035] Figure 12 An example is shown in the block diagram of an interface display processing module;

[0036] Figure 13 An exemplary schematic diagram of a rendering interface process is shown;

[0037] Figure 14 An exemplary schematic diagram of an interface display scheme for accessing the Viola framework is shown;

[0038] Figure 15 This is a block diagram of an apparatus provided in one embodiment of this application;

[0039] Figure 16 This is a block diagram of an apparatus provided in one embodiment of this application;

[0040] Figure 17 This is a structural block diagram of a computer device provided in one embodiment of this application. Detailed Implementation

[0041] To make the objectives, technical solutions, and advantages of this application clearer, the embodiments of this application will be described in further detail below with reference to the accompanying drawings.

[0042] First, some of the terms used in this application will be explained to facilitate understanding by those skilled in the art.

[0043] RN-like: RN stands for React Native, a dynamic framework that allows developers to use web development technologies to develop native mobile applications. RN-like refers to dynamic frameworks that operate on similar principles to React Native.

[0044] JS: Short for JavaScript, it is a dynamically typed programming language. It is a lightweight, interpreted or just-in-time (JIT) compiled high-level programming language with a function-first approach. Although it is best known as a scripting language for developing web pages, it is also used in many non-browser environments. JavaScript is a prototype-based, multi-paradigm dynamic scripting language that supports object-oriented, imperative, and declarative (such as functional programming) styles.

[0045] JS Framework: A JavaScript-side framework similar to React Native, used to handle common business logic.

[0046] JS engine: An engine that executes JS code. A JavaScript engine is a virtual machine specifically designed to process JavaScript scripts.

[0047] Virtual DOM (Document Object Model): A description of the element structure of a UI (User Interface). The rendering engine can render the interface based on this UI structure description.

[0048] Intermediate Virtual DOM: Describes the virtual DOM of the code written by the front-end developer, which serves as the input to the NativeVue engine of this application.

[0049] JSON (JavaScript Object Notation) is a lightweight data-interchange format. Based on a subset of ECMAScript (the JavaScript specification defined by the European Computer Association), it uses a text format completely independent of programming languages ​​to store and represent data. Its concise and clear hierarchical structure makes JSON an ideal data exchange language. It is easy for humans to read and write, and also easy for machines to parse and generate, effectively improving network transmission efficiency. JSON is a sequence of tags. This set of tags includes six constructor characters, strings, numbers, and three literals. JSON is a serialized object or array. JSON is a string representation of a JavaScript object; it uses text to represent the information of a JavaScript object, essentially a string. To convert a JSON string to a JavaScript object, use the `JSON.parse()` method; to convert a JavaScript object to a JSON string, use the `JSON.stringify()` method. Any supported type can be represented by JSON, such as strings, numbers, objects, arrays, etc. However, objects and arrays are two special and commonly used types.

[0050] Objects: In JavaScript, objects are enclosed in curly braces {}, and their data structure is a key-value pair structure: {key1: value1, key2: value2, ...}. In object-oriented languages, the key is the object's property, and the value is the corresponding value. Keys can be integers or strings. The value type can be any type. Arrays: In JavaScript, arrays are enclosed in square brackets [], and their data structure is an indexed structure: ["java","javascript","vb",...]. In JavaScript, arrays are a special data type; they can also use key-value pairs like objects, but indexing is used more often. Similarly, the value type can be any type.

[0051] Vue (a progressive JavaScript framework for building user interfaces) is one of the most popular progressive Model-View-ViewModel (MVVM) frameworks for building user interfaces in the front-end field. It provides a way to write reusable web components using single-file components. Combined with modern packaging tools such as Webpack, it can efficiently build complex single-page applications compatible with IE9 and above. The core of the MVVM framework lies in data-driven design, componentization, and reusability. Element-UI, on the other hand, is an excellent desktop component library based on Vue. It encapsulates commonly used front-end components such as forms, buttons, popups, menus, navigation, and various selectors, making it very convenient to use and allowing developers to focus on business logic, thus improving development efficiency.

[0052] Please refer to Figure 1 The diagram illustrates a block diagram of an interface display system according to an embodiment of this application. The interface display system includes at least one computer device, such as a terminal 120, a network 140, and a server 160.

[0053] Terminal 120 can be a mobile phone, tablet computer, media playback mobile terminal, wearable device, desktop computer, laptop computer, or other similar device. Terminal 120 is a terminal that requires an interface display.

[0054] Server 160 is a backend server that provides the configuration file for the interface to be displayed. Server 160 can be a standalone physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server (cloud computing service center) providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDN (Content Delivery Network), and big data and artificial intelligence platforms. Terminal 120 can connect to server 160 via network 140. Network 140 can be a wired network or a wireless network. Server 160 provides backend services to terminal 120; for example, server 160 can transmit the configuration file for the interface to be displayed to terminal 120, which then displays the interface.

[0055] Optionally, server 160 can simultaneously provide background services to multiple terminals 120. Terminals 120 and server 160 can be connected directly or indirectly via wired or wireless communication, which is not limited herein.

[0056] Please refer to Figure 2 The diagram illustrates a flowchart of a method provided in one embodiment of this application. The entity executing this method may be... Figure 1 In the terminal 120, the method may include the following steps (210-250):

[0057] Step 210: Obtain the original configuration file for the interface to be displayed.

[0058] The original configuration file stores the code that describes the content to be displayed on the interface. Optionally, the original configuration file includes configuration files for various development framework types. Optionally, the code in the original configuration file is code written by front-end developers in their chosen front-end framework, which can be loaded into a webpage by a browser to display the interface, or it can be displayed on a mobile interface through other conversion methods.

[0059] In an exemplary embodiment, after step 210 is executed, the following step may be performed first: determine the development framework type used in the original configuration file. The development framework type determines the code format of the original configuration file. Optionally, the development framework type includes, but is not limited to, any of the following: Vue framework, React framework.

[0060] Step 220: Convert the code format of the original configuration file into a uniformly specified format to obtain the intermediate configuration file.

[0061] Optionally, the original configuration file can be formatted according to the development framework type, converting the code format of the original configuration file into a uniformly specified format. This code format conversion includes converting the code format under at least one development framework type into a uniformly specified format.

[0062] Optionally, the TemplateParser module converts the code format of the original configuration file into a uniformly specified format. In this embodiment, the TemplateParser module is a preprocessing module used to parse the code of the Vue or React framework into an intermediate virtual DOM in JSON format, thus obtaining an intermediate configuration file. From another perspective, the TemplateParser module can serve as a front-end adaptation layer, capable of parsing the code of multiple front-end UI (User Interface) frameworks, such as Vue and React, to obtain an intermediate virtual DOM in a uniform format, such as a JSON-formatted intermediate virtual DOM. This embodiment does not limit the format of the intermediate virtual DOM and can determine it according to the code format of different framework types.

[0063] In one example, such as Figure 3As shown, this example illustrates the structure of a template parsing module. The compiler (Compiler) 30 parses the Vue file, dividing it into three parts: template, script, and style. The parser (Parser) 31 consists of three main parsers: The template parser (TemplateParser) 311 analyzes and transforms the UI template in the Vue file. The template is converted into JSON describing the node structure and content. The script parser (Script Parser) 312 analyzes and extracts key properties and methods. Binding values ​​and methods used in the template are extracted. The style parser (Style Parser) 313 analyzes and transforms the stylesheet. Selector styles specified in the template are extracted and transformed; the transformed stylesheet is stored for dynamic style switching.

[0064] In an exemplary embodiment, step 220 above includes the following sub-steps:

[0065] Step 221: Obtain the file structure of the original configuration file.

[0066] The file structure includes a template section, a script section, and a style section.

[0067] Step 222: If template content exists in the template section, convert the code format of the template content into a uniformly specified format to obtain the initial configuration document.

[0068] The template content includes at least one element, and the initial configuration document includes the structural relationships between these elements. The aforementioned element refers to all code within the template content from the start tag to the end tag.

[0069] Optionally, the initial configuration document includes a Virtual DOM (VDOM), which is a tree structure describing the data points on the interface to be displayed using script editing objects. These script editing objects can be, for example, JavaScript objects. Optionally, the elements in the template content correspond to the script editing objects in the Virtual DOM. The VDOM can be viewed as a tree structure that simulates the DOM structure using JavaScript; this tree structure contains information about the entire DOM structure. Representing a DOM node using JavaScript is relatively easy; it only needs to record its node type, attributes, and child nodes.

[0070] Compared to DOM objects, JavaScript objects in the virtual DOM are faster and simpler to process. The structure and attribute information of the DOM tree can be easily represented using JavaScript objects. DOM attributes are stored as key-value pairs in an object.

[0071] JavaScript is used to manipulate HTML (Hypertext Markup Language) elements. To do this, the element must first be located. There are three ways to do this: find the HTML element by its ID (identity document); find the HTML element by its tag name; and find the HTML element by its class name.

[0072] Step 223: If script content exists in the script section, obtain script information.

[0073] The script information includes the attribute information of each element and the mathematical relationships between them. Optionally, the elements in the script information include HTML elements. The attribute information of an element includes one or more class names (class), identifiers (id), inline styles (style), and additional information describing the element (title), as detailed in Table 1 below.

[0074] Table 1

[0075]

[0076]

[0077] Step 224: If style content exists in the style section, obtain the style information.

[0078] Style information includes the display style of elements. The display style of elements includes HTML styles—CSS (Cascading Style Sheets), which are used to render the styles of HTML element tags. Display styles are reflected in background color, font, font color, font size, and text alignment. Internal style sheets can be used when a single file requires special styling. You can partially... <style>标签定义内部样式表。当样式需要被应用到很多界面的时候，外部样式表将是理想的选择。使用外部样式表，可以通过更改一个文件来改变整个站点的外观。

[0079] 步骤225，根据脚本信息、样式信息以及初始配置文档，得到中间配置文件。

[0080] 中间配置文件包括虚拟文档对象模型。可选地，基于各元素的属性信息、各元素之间的结构关系与各元素之间的数理关系，生成中间配置文件。

[0081] 虚拟文档对象模型包括序列化的JS对象，JS把HTML文件的所有元素(元素包含标签及标签属性，标签内容)的内容统称为对象(对象即用户在浏览器看到的所有内容，只有内容)。由于内容有大小，长短，有时需要被改变,以及有些内容结构的特殊性，因此对象有属性和方法。具体来讲，JavaScrip中，除了string、number、Boolean、null、undefined之外，其他的数据都是对象，如数组、日期甚至函数等。

[0082] JS中的对象类型包括如下几种：

[0083] 1、内置对象 / 原生对象：指JavaScript语言本身预定义的对象，在ECMAScript标准定义，由所有的浏览器厂家来提供具体实现，由于标准的统一，故这些对象的浏览器兼容性问题不太大。

[0084] 2、宿主对象：指JavaScript运行环境(即浏览器)提供的对象，由浏览器厂家自定义提供实现，早期存在较大的兼容性问题，当前其中一些主要的对象已经被大部分浏览器兼容；具体分为如下两大类：

[0085] (1)BOM对象：Browser Object Model

[0086] Window、Navigator、Screen、History、Location。

[0087] (2)DOM对象：Document Object Model

[0088] Document、Anchor、Area、Base、Body、Button、Canvas、Event、Frame、Frameset、IFrame、Image、Link、Meta、Style、Form、Input Button、Input CheckBox、Input File、Input Hidden、Input Password、Input Radio、Input Reset、Input Submit、Input Text、Option、Select、Textare、Table、TableCell、TableRow。

[0089] 3、自定义对象：指由用户创建的对象，兼容性问题需要由编写者注意，创建自定义对象3种：

[0090] (1)对象直接量；由名 / 值对组成的映射表，名和值之间用冒号分隔，名 / 值对之间用逗号分隔。

[0091] (2)new Object()；创建系统对象，创建通用对象，创建自定义对象(自定义构造函数)。

[0092] (3)function对象模板。

[0093] 对于对象属性(Property)，可以说"JavaScript对象是变量的容器"，通常认为"JavaScript对象是键值对的容器"。键值对通常写法为name:value(键与值以冒号分割)。键值对在JavaScript对象通常称为对象属性。对象的成员分为两种：属性和方法，属性是指封装对象的数据，表示与对象有关的值，例如对象名.属性名。方法(Method)指封装对象的行为，表示对象可以执行的行为或可以完成的功能，例如，对象名.方法名。

[0094] 步骤230，解析中间配置文件的数据结构与语法结构。

[0095] 数据结构用于反映中间配置文件中各对象之间的数理关系，例如两个对象之间是何种数学关系。

[0096] 语法结构用于反映中间配置文件中各对象之间的逻辑关系，例如，一个块标签对象与一个变量之间的逻辑关系可以为在变量为真的情况下，显示该块标签决定的显示对象。

[0097] 步骤240，基于数据结构与语法结构，生成转换后配置文件。

[0098] 基于中间配置文件中各对象之间的数理关系与逻辑关系，决定中间配置文件中与需要显示的显示对象对应的对象及其属性，最终生成转换后配置文件。

[0099] 步骤250，根据转换后配置文件对待显示界面进行渲染显示。

[0100] 通过客户端的渲染引擎NativeVue引擎执行转换后虚拟DOM，得到渲染画面。

[0101] 综上所述，本申请实施例构造的技术方案，通过将待显示界面的原始配置文件中的代码进行转换处理，得到统一数据交换格式下描述待显示界面内容的中间配置文件，基于中间配置文件的数据关系与语法关系生成转换后配置文件，进而对转换后配置文件进行渲染，得到渲染画面，无需等待JS引擎直接执行JS代码，提高打开移动端界面的执行效率，避免在界面切换时出现设备白屏现象。

[0102] 在示例性实施例中，请参考图4，其示例性示出了一种中间配置文件的生成过程的示意图，包括如下步骤(1-11)：

[0103] 步骤1，获取待显示界面的原始配置文件。

[0104] 步骤2，解析原始配置文件的文件结构。

[0105] 步骤3，判断原始配置文件是否存在模板内容。若是，则执行步骤4；若否，则执行步骤7。

[0106] 步骤4，获取模板内容中的元素。

[0107] 元素是指待显示界面中的显示对象在原始配置文件中的表现形式。

[0108] 步骤5，基于模板内容中各元素之间的语法关系，生成抽象语法树。

[0109] 可选地，抽象语法树的树节点与元素之间具有对应关系。上述语法关系包括元素之间的连接关系、调用关系。

[0110] 抽象语法树(Abstract Syntax Tree，AST)是源代码的抽象语法结构的树状表示，树上的每个节点都表示源代码中的一种结构，这所以说是抽象的，是因为抽象语法树并不会表示出真实语法出现的每一个细节，比如说，嵌套括号被隐含在树的结构中，并没有以节点的形式呈现。抽象语法树并不依赖于源语言的语法，因为在写文法时，经常会对文法进行等价的转换。

[0111] 步骤6，基于抽象语法树，生成统一指定格式的初始配置文档。

[0112] 上述统一指定格式包括统一数据格式，统一数据格式包括JavaScript对象简谱JSON格式。

[0113] 步骤7，判断原始配置文件是否存在脚本内容。若是，则执行步骤8；若否，则执行步骤9。

[0114] 步骤8，从脚本内容中提取脚本信息。

[0115] 脚本信息包括元素的属性信息以及文件中的编程方法。

[0116] 步骤9，判断原始配置文件是否存在样式内容。若是，则执行步骤10；若否，则执行步骤11。

[0117] 步骤10，将元素的显示样式转换为统一样式格式，得到元素的统一显示样式。

[0118] 统一指定格式包括统一样式格式。

[0119] 步骤11，按照抽象语法树的树节点与元素之间的对应关系，将元素的属性信息和统一显示样式赋至虚拟配置文档中，生成中间配置文件。

[0120] 中间配置文件包括序列化的JS对象。

[0121] 请参考图5，其示出了本申请另一个实施例提供的界面显示方法的流程图。该方法可应用于计算机设备中。该方法可以包括以下几个步骤(501-507)：

[0122] 步骤501，显示第一界面。

[0123] 第一界面是当前界面。可选地，第一界面为视频一拖三场景，用户可在视频一拖三场景中上下滑动切换显示的视频。

[0124] 步骤502，响应于针对第一界面的触控操作，获取待显示界面的原始配置文件。

[0125] 触控操作包括点击操作、滑动操作。

[0126] 可选地，触控操作包括点击第一界面中点击底部栏目控件的操作。可选地，触控操作包括手势滑动操作。

[0127] 在一个示例中，如图6所示，其示例性示出了一种界面示意图。其中第一界面60为视频一拖三场景，待显示界面61为视频一拖三栏目播放页场景。

[0128] 在一个示例中，如图7所示，其示例性示出了一种界面交互设计示意图。其中包括一拖三视频界面70、一拖三栏目视频界面71、滑动侧栏引导界面72、栏目小屏播放界面73。用户可以在一拖三视频界面70向上滑动，观看属于栏目(用户A)74的视频。一拖三栏目视频界面71中显示有栏目选择控件75，响应于用户点击栏目选择控件75或者在屏幕中间的滑动操作，可进入栏目小屏播放界面73。栏目小屏播放界面73中显示有顶部栏目窗76、播放区域77以及栏目预览列表78，用户可在播放区域77上下滑动切换播放视频，用户可点击栏目预览列表78中的视频缩略图79切换播放视频，并且栏目预览列表78支持上下滑动浏览。当用户点击播放区域77后可返回至一拖三栏目视频界面71，此时相当于将该栏目视频插入至一拖三栏目视频界面71中的推荐列表(图中未示出)内。用户在一拖三栏目视频界面71中滑动切换视频，等同于在栏目小屏播放界面73中滑动切换视频。在交互设计稿中，视频一拖三进入一拖三栏目播放页存在动画切换效果，这个效果可拆解为三部分：

[0129] 1、右侧的栏目预览列表78以从右往左的动画形式呈现。

[0130] 2、顶部栏目窗76以从上往下的动画形式呈现。

[0131] 3、一拖三视频以缩放的形式腾出空间给栏目预览列表78和顶部栏目窗76。

[0132] 上面三个动画会在一拖三视频界面70进入栏目小屏播放界面73时，需要同时触发。这对栏目小屏播放界面73的打开的速度有很高的要求。而使用类RN框架实现的界面，由于界面打开速度受限于JS引擎的解析的速度，目前市面上使用类RN框架开发的界面，打开速度普遍在300ms～500ms之间。这样的打开速度呈现效果是，用户会先看到白屏，然后才看到进入栏目播放页的切换动画。这种效果显然不符合设计需求，更重要的是，这种体验对用户不太友好。本申请实施例提供的NativeVue，基于C++语言解析前端Vue框架的语法和常用的JS表达式，摆脱JS引擎的依赖，生成首次打开界面所需要的虚拟DOM结构。

[0133] 步骤503，将原始配置文件的代码格式转换为统一指定格式，得到中间配置文件。

[0134] 步骤504，解析中间配置文件的数据结构与语法结构。

[0135] 语法结构包括表达式，表达式用于确定中间配置文件中变量的值。

[0136] 步骤505，基于数据结构，生成文档对象模型DOM树。

[0137] DOM树用于表示中间配置文件中序列化对象的结构关系，DOM树的节点用于表征序列化对象，可以通过一个方法将虚拟DOM结构转化成vnode。用JavaScript对象结构表示DOM树的结构；然后用这个树构建一个真正的DOM树，插到文档当中；当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异信息；将记录的差异信息应用到步骤505所构建的DOM树上，用于更新视图。

[0138] Virtual DOM本质上就是在JS和DOM树之间做了一个缓存。JS引擎只操作VirtualDOM，最后的时候再把变更写入DOM树。

[0139] DOM树节点包括：1、元素节点：JS代码中<html>、<body>、等都是元素节点，即标签。2、文本节点：向用户展示的内容，如...中的JavaScript、DOM、CSS等文本。3、属性节点：元素属性，如标签的链接属性。在文档对象模型中，每个节点都是一个对象。DOM节点有三个重要的属性：节点名称、节点值、节点类型。

[0140] 在一个示例中，如图8所示，其示例性示出了一个DOM树节点的示意图。在DomTree模块中，以NVDomNode表示一个节点，一个节点可以依附在一个父节点(Parent Node)，节点本身可拥有一个或者多个子节点(Children Node)，属性表(Attributes)以及样式表(Styles)。

[0141] 步骤506，根据表达式，对DOM树进行序列化处理，得到转换后配置文件。

[0142] 可选地，将DOM树中树形结构数据序列化表示为字符串，生成转换后虚拟DOM。

[0143] 可选地，通过DomTree模块接收到TemplateParser解析得到的中间虚拟DOM时，根据此中间虚拟DOM建立一棵DomTree，DomTree根据数据以及中间虚拟DOM，调用ExpressionEngine解析输入虚拟DOM，最终得到真正的描述界面显示对象的虚拟DOM。

[0144] 在一个示例中，如图9所示，其示例性示出了一种转换后虚拟DOM的生成过程示意图。NVDomNode中的Parent Node以及Children Node可以构成一棵NVDomTree，这棵树可以代表最终输出的虚拟Dom。

[0145] 在示例性实施例中，步骤505包括如下子步骤：

[0146] 5051，执行表达式，生成表达式结果。

[0147] 对表达式进行词法分析处理，得到表达式中的标识符。

[0148] 基于表达式中的标识符，构建表达式抽象语法树。

[0149] 表达式抽象语法树的树节点包括变量节点以及函数节点。

[0150] 对表达式抽象语法树的树节点进行遍历解析处理，得到表达式结果。

[0151] 在表达式抽象语法树的树节点为变量节点的情况下，从共享数据环境中获取变量节点对应的变量值；

[0152] 在表达式抽象语法树的树节点为函数节点的情况下，从混合函数库中调用函数节点对应的目标函数；执行目标函数，得到函数结果。

[0153] 在所述表达式抽象语法树的各个树节点解析完成的情况下，输出所述表达式结果。

[0154] 可选地，ExpressionEngine模块则能够根据数据解析输入虚拟DOM中的语法或者表达式，并将解析的结果反馈给NodeTree模块，由NodeTree模块决定是否需要输出。

[0155] 在一个示例中，如图10所示，其示例性示出了一种表达式引擎结构图。基于C++语言实现的动态执行JavaScript语法表达式的高性能解析引擎，原理上采用递归下降算法实现。由表达式抽象树模块，表达式执行模块，环境变量管理模块以及函数配置管理四部分构成。各个模块职能如下：

[0156] 1.表达式抽象树模块：主要负责对表达式经过词法分析生成Token，再通过语法校验 / 分析将此词法分析出来的Token转换成有语法含义的抽象语法树结构，构建生成抽象语法树。构建抽象语法树的目的是设计一种数据结构来说明一个表达式的含义。

[0157] 2.表达式执行模块：该模块主要负责将表达式抽象树模块生成的表达式抽象语法树进行遍历解析执行，树节点包括运算操作符，数字节点，字符串节点，变量节点，函数节点等。其中变量节点涉及从环境变量管理模块获取变量对应的结果值。同理，函数节点需要从函数配置管理模块获取对应函数指针，执行函数拿到结果返回给节点。经过各个抽象树节点出的执行结果，最后生成表达式对应的结果。

[0158] 3.环境管理模块：该模块主要负责对表达式中包含的变量提供读写的环境，表达式中的变量可以在环境中拿到各个变量对应的值，以及可供表达式写入变量到该环境中，供其他表达式引用。除此之外，也支持外部环境注册变量到该环境中，如原生到平台信息，表达式中可以根据这些丰富的变量做出不同的表达行为，相当于在JS+Native的混合环境中，提供了变量共享能力，方便表达式获取更多的上下文信息。

[0159] 4.函数配置管理模块：该模块主要负责对表达式中涉及的全局函数及对象函数提供函数执行环境，同时支持表达中的链式函数调用方式，提供了对齐JavaScript的常用的函数库(如Math数据，Date日期库)外，还支持外部环境(如Native)注册自定义函数，灵活扩展表达式中的执行能力，为JS+Native的混合开发场景，提供了必要的扩展诉求,为表达式赋能。

[0160] 表达式引擎的NVExpression(表达式)接口用于接收表达式。

[0161] 在一个示例中，如图11所示，其示例性示出了一种表达式结果生成流程的示意图。结合上述表达式引擎的结构设计，一个表达式从输入到最终表达式结果生成，表达式引擎本身的运行流程和四大模块间的关联和依赖关系如图11所示。

[0162] 5052，基于表达式结果，得到DOM树中各节点对应的绑定数据。

[0163] 上述绑定数据指各节点对应的变量数据。

[0164] 5053，基于绑定数据，对DOM树进行序列化处理，得到第二虚拟配置文件。

[0165] 步骤507，根据转换后配置文件对待显示界面进行渲染显示。

[0166] 在一个示例中，如图12所示，其示例性示出了一种界面显示处理模块框图。其中包括TemplateParser模板解析模块120是一个预处理模块，负责将Vue框架或者React框架的代码解析成一份JSON格式的中间虚拟DOM。从另外一个角度来看，TemplatePraser120作为前端适配层，能够解析多个前端UI框架的代码，例如Vue，React，得到统一的输入虚拟DOM。

[0167] DomTree模块121接收到TemplateParser120解析得到的输入虚拟DOM时，根据此输入虚拟DOM建立一棵DomTree，DomTree根据数据以及输入虚拟DOM，调用ExpressionEngine表达式模块122解析输入虚拟DOM，最终得到真正的描述界面元素的虚拟DOM。

[0168] ExpressionEngine122则能够根据数据解析输入虚拟DOM中的语法或者表达式，并将解析的结果反馈给DomTree模块121，由DomTree模块121决定是否需要输出。

[0169] 在一个示例中，如图13所示，其示例性示出了一种渲染界面过程的示意图。DomTree模块负责将TemplateParser模块和ExpressionEngine模块连接起来，将数据与输入虚拟DOM作为输入，接着利用ExpressionEngine模块解析输入虚拟DOM中的语法以及表达式，最终将DomTree序列化成最终的虚拟DOM。

[0170] 在一个示例中，如图14所示，其示例性示出了一种接入Viola框架的界面显示方案的示意图。Viola是一款让开发者可以使用web开发技术来开发移动端原生应用的动态化框架,与市面上主流的RN、类RN框架类似，本申请旨在解决类RN动态化框架首次打开白屏的痛点，下面介绍本方案是如何接到Viola框架。在接入该技术方案前，Viola界面的渲染流程为：1、在JavascriptCore执行JS代码得到渲染界面所需的虚拟DOM。2、根据虚拟DOM渲染界面。本申请实施例接入Viola框架时，只需将步骤1替换掉，换成在由NativeVue引擎来生成渲染界面所需的虚拟DOM。本方案旨在提升类RN动态化首次打开速度，并且已经接入到Viola框架，将Viola界面的打开耗时从300多毫秒提升至30多毫秒。从视觉上来，看该方案接入到Viola框架前，首次打开会有一个明显的黑或者白屏的现象，而接入本方案后，用户完全感知不到黑屏或者白屏。下面表2是接入本方案前后的实验数据对比。

[0171] 表2

[0172] 接入前界面首次打开平均耗时(ms)接入后界面首次打开平均耗时(ms)30030

[0173] 可以明显看出来，接入本申请的技术方案后，Viola界面的首次打开速度提升了90％。

[0174] 在示例性实施例中，经过ExpressionEngine模块解析后的虚拟DOM，以DomNode对象的形式输出，而不是以JSON格式输出给外部。这样做减少了JSON反序列化和序列化的开销。

[0175] 综上所述，本申请实施例构造的技术方案，通过将待显示界面的原始配置文件中的代码进行转换处理，得到统一数据交换格式下描述待显示界面内容的中间虚拟DOM，基于数据关系与语法关系对虚拟DOM中的对象执行DOM操作，得到转换后的虚拟DOM，进而通过客户端的渲染引擎NativeVue引擎执行转换后虚拟DOM，得到渲染画面，无需等待JS引擎直接执行JS代码，提高打开移动端界面的执行效率，避免在界面切换时出现设备白屏现象。

[0176] 下面结合从更加具体的角度去阐述本申请的技术方案带来的有益效果。本申请针对界面首次打开的白屏现象，提出了适用类RN动态框架的解决方案NativeVue：基于C++语言解析前端Vue框架的语法和常用的JS表达式，生成首次打开界面所需要的虚拟DOM结构，最后传递给客户端的渲染引擎直接渲染出界面，无需等待JS引擎执行JS代码。

[0177] 相关技术提供的解决方案大多存在下面三方面问题：

[0178] 一、学习成本高，使用Proteus或者VirtualView框架的开发者，需要学习框架规定的代码语法、视图布局以及数据绑定等，而且这些代码语法、视图布局以及数据绑定的思想比较偏客户端技术栈，对于前端开发者来说，学习这些技术有一定的学习成本。

[0179] 二、开发效率低，Proteus框架采用JSON作为开发语言，开发者需要手动写JSON代码。编写JSON代码有个致命的缺点，开发者开发时，缺少可用的具有代码提示的编辑器。随着编写的JSON代码量增大，维护的难度也随之增大。例如，JSON语法编写错误，在缺少具有代码提示的编辑器的情况下，需要从头到尾检查哪里的语法出错。

[0180] VirtualView框架采用xml作为开发语言，虽然市面上有很多支持xml代码提示的编辑器，但是其数据绑定模块，也是采用JSON语言编写，开发效率不高。

[0181] 三、可移植性低，Proteus和VirtualView框架，他们最终经过解析输出的虚拟DOM都是按照各自规定好格式，这种方式不具有通用性，举个例子：Proteus框架规定的虚拟DOM格式无法在VirtualView框架使用。即这两个框架很难移植到其他框架，如类RN框架。

[0182] 以上涉及到的三个技术缺点，本方案提供了对应的解决方案。

[0183] 针对学习成本高和开发效率低的问题，本方案采用复用前端开发生态，前端开发者可以使用前端技术栈来开发，即采用JavaScript语言开发，视图布局采用业界通用的FlexBox布局，无需熟悉框架的代码语法、视图布局和数据绑定等，开发者只需用原本熟悉的技术栈。

[0184] 对于移植性低的问题，本方案没有规定最终虚拟DOM的格式，只负责解析开发者编写的代码，至于解析后的虚拟DOM格式，由接入的框架来规定，当然内部也提供了默认的虚拟DOM格式，如果满足接入框架的诉求，接入框架可零成本接入。

[0185] 本方案的带来的好处大致可体现在如下几个方面：

[0186] 一、复用前端生态：基于前端UI框架Vue,解析其语法和表达式，使得前端开发者无需更换开发工具、开发框架。

[0187] 二、灵活性强：客户端的解析引擎不直接解析前端Vue框架的代码，而是引入规定好的JSON格式的虚拟DOM作为NativeVue解析引擎的输入。这样后续解析其他的前端UI框架时，例如React，客户端解析引擎无需再改动代码，由本方案中的TemplateParser模块适配即可。

[0188] 三、高性能：利用C++执行效率高的特点，解析前端UI框架Vue的语法和表达式，例如：v-if，v-for。

[0189] 下述为本申请装置实施例，可用于执行本申请方法实施例。对于本申请装置实施例中未披露的细节，请参照本申请方法实施例。

[0190] 请参考图15，其示出了本申请一个实施例提供的装置的框图。该装置具有实现上述方法的功能。该装置1500可以包括：配置文件获取模块1510、代码格式转换模块1520、配置文件解析模块1530、配置文件转换模块1540和界面渲染显示模块1550。

[0191] 配置文件获取模块1510，用于获取待显示界面的原始配置文件。

[0192] 代码格式转换模块1520，用于将所述原始配置文件的代码格式转换为统一指定格式，得到中间配置文件。

[0193] 配置文件解析模块1530，用于解析所述中间配置文件的数据结构与语法结构，所述数据结构用于反映所述中间配置文件中各对象之间的数理关系，所述语法结构用于反映所述中间配置文件中各对象之间的逻辑关系。

[0194] 配置文件转换模块1540，用于基于所述数据结构与所述语法结构，生成转换后配置文件。

[0195] 界面渲染显示模块1550，用于根据所述转换后配置文件对所述待显示界面进行渲染显示。

[0196] 在示例性实施例中，如图16所示，所述代码格式转换模块1520，包括：文件结构获取单元1521、代码格式转换单元1522、脚本信息获取单元1523、样式信息获取单元1524和配置文件生成单元1525。

[0197] 文件结构获取单元1521，用于获取所述原始配置文件的文件结构，所述文件结构包括模板部分、脚本部分以及样式部分。

[0198] 代码格式转换单元1522，用于在所述模板部分中存在模板内容的情况下，将所述模板内容的代码格式转换为所述统一指定格式，得到初始配置文档。

[0199] 脚本信息获取单元1523，用于在所述脚本部分中存在脚本内容的情况下，获取脚本信息。

[0200] 样式信息获取单元1524，用于在所述样式部分中存在样式内容的情况下，获取样式信息。

[0201] 配置文件生成单元1525，用于根据所述脚本信息、所述样式信息以及所述初始配置文档，得到所述中间配置文件，所述中间配置文件包括虚拟文档对象模型。

[0202] 在示例性实施例中，所述模板内容中包括至少一个元素，所述元素是指所述待显示界面中的显示对象在所述原始配置文件中的表现形式，所述初始配置文档包括各元素之间的结构关系，所述脚本信息包括所述各元素的属性信息以及所述各元素之间的数理关系，所述样式信息包括所述元素的显示样式。

[0203] 所述配置文件生成单元1525，用于基于所述各元素的属性信息、所述各元素之间的结构关系与所述各元素之间的数理关系，生成所述中间配置文件。

[0204] 在示例性实施例中，所述代码格式转换单元1522，用于：

[0205] 获取所述模板内容中的元素，所述元素是指所述待显示界面中的显示对象在所述原始配置文件中的表现形式；

[0206] 基于所述模板内容中各元素之间的语法关系，生成抽象语法树，所述抽象语法树的树节点与所述元素之间具有对应关系；

[0207] 基于所述抽象语法树，生成所述统一指定格式的所述初始配置文档，所述统一指定格式包括统一数据格式，所述统一数据格式包括JSON格式。

[0208] 在示例性实施例中，所述统一指定格式包括统一样式格式，所述配置文件生成单元1525，用于：

[0209] 将所述元素的显示样式转换为所述统一样式格式，得到所述元素的统一显示样式；

[0210] 按照所述抽象语法树的树节点与所述元素之间的对应关系，将所述元素的属性信息和所述统一显示样式赋至所述初始配置文档中，生成所述中间配置文件，所述中间配置文件包括JS对象。

[0211] 在示例性实施例中，所述语法结构包括表达式，所述表达式用于确定与所述中间配置文件中JS对象对应的变量的值；

[0212] 如图16所示，所述配置文件转换模块1540，包括：DOM树生成单元1541和DOM树处理单元1542。

[0213] DOM树生成单元1541，用于基于所述数据结构，生成DOM树，所述DOM树用于表示所述JS对象的结构关系，所述DOM树的节点用于表征所述JS对象。

[0214] DOM树处理单元1542，用于根据所述表达式，对所述DOM树进行序列化处理，得到所述转换后配置文件。

[0215] 在示例性实施例中，所述DOM树处理单元1542用于：

[0216] 执行所述表达式，生成表达式结果；

[0217] 基于所述表达式结果，得到所述DOM树中各节点对应的绑定数据；

[0218] 基于所述绑定数据，对所述DOM树进行序列化处理，得到所述转换后配置文件。

[0219] 在示例性实施例中，所述DOM树处理单元1542具体用于：

[0220] 对所述表达式进行词法分析处理，得到所述表达式中的标识符；

[0221] 基于所述表达式中的标识符，构建表达式抽象语法树；

[0222] 对所述表达式抽象语法树的树节点进行遍历解析处理，得到所述表达式结果。

[0223] 在示例性实施例中，所述表达式抽象语法树的树节点包括变量节点以及函数节点，所述DOM树处理单元1542具体用于：

[0224] 在所述表达式抽象语法树的树节点为所述变量节点的情况下，从共享数据环境中获取所述变量节点对应的变量值；

[0225] 在所述表达式抽象语法树的树节点为所述函数节点的情况下，从混合函数库中调用所述函数节点对应的目标函数；执行所述目标函数，得到函数结果；

[0226] 在所述表达式抽象语法树的各个树节点解析完成的情况下，输出所述表达式结果。

[0227] 在示例性实施例中，如图16所示，所述装置1500还包括：框架类型确定单元1560。

[0228] 框架类型确定单元1560，用于确定所述原始配置文件采用的开发框架类型，所述开发框架类型决定所述原始配置文件的代码格式，所述代码格式转换包括将至少一种开发框架类型下的代码格式转换为所述统一指定格式。

[0229] 综上所述，本申请实施例构造的技术方案，通过将待显示界面的原始配置文件中的代码进行转换处理，得到统一数据交换格式下描述待显示界面内容的中间虚拟DOM，基于数据关系与语法关系对虚拟DOM中的对象执行DOM操作，得到转换后的虚拟DOM，进而通过客户端的渲染引擎NativeVue引擎执行转换后虚拟DOM，得到渲染画面，无需等待JS引擎直接执行JS代码，提高打开移动端界面的执行效率，避免在界面切换时出现设备白屏现象。

[0230] 请参考图17，其示出了本申请一个实施例提供的计算机设备1700的结构框图。该计算机设备1700可以是诸如多媒体播放设备、手机、平板电脑、游戏主机、PC(PersonalComputer，个人计算机)等电子设备。该计算机设备用于实施上述实施例中提供的界面显示方法。具体来讲：

[0231] 通常，计算机设备1700包括有：处理器1701和存储器1702。

[0232] 处理器1701可以包括一个或多个处理核心，比如4核心处理器、8核心处理器等。处理器1701可以采用DSP(Digital Signal Processing，数字信号处理)、FPGA(FieldProgrammable Gate Array，现场可编程门阵列)、PLA(Programmable Logic Array，可编程逻辑阵列)中的至少一种硬件形式来实现。处理器1701也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称CPU(Central ProcessingUnit，中央处理器)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器1701可以在集成有GPU(Graphics Processing Unit，图像处理器)，GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中，处理器1701还可以包括AI(Artificial Intelligence，人工智能)处理器，该AI处理器用于处理有关机器学习的计算操作。

[0233] 存储器1702可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是非暂态的。存储器1702还可包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。在一些实施例中，存储器1702中的非暂态的计算机可读存储介质用于存储至少一个指令，至少一段程序、代码集或指令集，所述至少一条指令、至少一段程序、代码集或指令集，且经配置以由一个或者一个以上处理器执行，以实现上述方法。

[0234] 在一些实施例中，计算机设备1700还可选包括有：外围设备接口1703和至少一个外围设备。处理器1701、存储器1702和外围设备接口1703之间可以通过总线或信号线相连。各个外围设备可以通过总线、信号线或电路板与外围设备接口1703相连。具体地，外围设备包括：射频电路1704、显示屏1705、摄像头组件1706、音频电路1707、定位组件1708和电源1709中的至少一种。

[0235] 本领域技术人员可以理解，图17中示出的结构并不构成对计算机设备1700的限定，可以包括比图示更多或更少的组件，或者组合某些组件，或者采用不同的组件布置。

[0236] 在示例性实施例中，还提供了一种计算机可读存储介质，所述存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或所述指令集在被处理器执行时以实现上述界面显示方法。

[0237] 可选地，该计算机可读存储介质可以包括：ROM(Read Only Memory，只读存储器)、RAM(Random Access Memory，随机存取记忆体)、SSD(Solid State Drives，固态硬盘)或光盘等。其中，随机存取记忆体可以包括ReRAM(Resistance Random Access Memory,电阻式随机存取记忆体)和DRAM(Dynamic Random Access Memory，动态随机存取存储器)。

[0238] 在示例性实施例中，还提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述界面显示方法。

[0239] 应当理解的是，在本文中提及的"多个”是指两个或两个以上。"和 / 或”，描述关联对象的关联关系，表示可以存在三种关系，例如，A和 / 或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符" / ”一般表示前后关联对象是一种"或”的关系。另外，本文中描述的步骤编号，仅示例性示出了步骤间的一种可能的执行先后顺序，在一些其它实施例中，上述步骤也可以不按照编号顺序来执行，如两个不同编号的步骤同时执行，或者两个不同编号的步骤按照与图示相反的顺序执行，本申请实施例对此不作限定。

[0240] 以上所述仅为本申请的示例性实施例，并不用以限制本申请，凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。< / style>

Claims

1. A method for displaying an interface, characterized in that, The method includes: Obtain the original configuration file for the interface to be displayed; The code format of the original configuration file is converted into a uniform specified format to obtain a virtual document object model. The virtual document object model includes a serialized JS object and is used to describe the code in the original configuration file. The data structure and expressions of the virtual document object model are parsed. The data structure is used to reflect the mathematical relationships between the JS objects in the virtual document object model, and the expressions are used to determine the values ​​of the variables corresponding to the JS objects in the virtual document object model. Based on the data structure, a Document Object Model (DOM) tree is generated. The DOM tree is used to represent the structural relationships of the JS objects, and the nodes of the DOM tree are used to represent the JS objects. Execute the expression to generate the expression result; Based on the result of the expression, the variable data corresponding to each node in the DOM tree is obtained; Based on the variable data, the DOM tree is serialized to obtain a converted virtual DOM, which is used to describe the display object of the interface to be displayed. The interface to be displayed is rendered and displayed based on the transformed virtual DOM.

2. The method according to claim 1, characterized in that, The step of converting the code format of the original configuration file into a uniformly specified format to obtain a virtual document object model includes: Obtain the file structure of the original configuration file, which includes a template section, a script section, and a style section; If template content exists in the template section, the code format of the template content is converted into the uniformly specified format to obtain the initial configuration document; If script content exists in the script section, obtain script information; If style content exists in the style section, obtain the style information; The virtual document object model is obtained based on the script information, the style information, and the initial configuration document.

3. The method according to claim 2, characterized in that, The template content includes at least one element, which refers to the representation of the display object in the interface to be displayed in the original configuration file. The initial configuration document includes the structural relationship between the elements. The script information includes the attribute information of the elements and the mathematical relationship between the elements. The style information includes the display style of the elements. The step of obtaining the virtual document object model based on the script information, the style information, and the initial configuration document includes: The virtual document object model is generated based on the attribute information of each element, the structural relationships between each element, and the mathematical relationships between each element.

4. The method according to claim 2, characterized in that, The step of converting the code format of the template content into the unified specified format to obtain the initial configuration document includes: Obtain the elements in the template content, where the elements refer to the representation of the display objects in the interface to be displayed in the original configuration file; Based on the syntactic relationships between the elements in the template content, an abstract syntax tree is generated, and the tree nodes of the abstract syntax tree have a corresponding relationship with the elements; Based on the abstract syntax tree, the initial configuration document in the uniform specified format is generated. The uniform specified format includes a uniform data format, which includes JSON format.

5. The method according to claim 4, characterized in that, The unified specified format includes a unified style format, and the step of obtaining the virtual document object model based on the script information, the style information, and the initial configuration document includes: The display style of the element is converted into the unified style format to obtain the unified display style of the element; According to the correspondence between the tree nodes of the abstract syntax tree and the elements, the attribute information of the elements and the unified display style are assigned to the initial configuration document to generate the virtual document object model.

6. The method according to claim 1, characterized in that, The execution of the expression to generate the expression result includes: Lexical analysis is performed on the expression to obtain the identifiers in the expression; Based on the identifiers in the expression, construct an expression abstract syntax tree; The tree nodes of the abstract syntax tree of the expression are traversed and parsed to obtain the result of the expression.

7. The method according to claim 6, characterized in that, The tree nodes of the expression abstract syntax tree include variable nodes and function nodes. The process of traversing and parsing the tree nodes of the expression abstract syntax tree to obtain the expression result includes: When the tree node of the expression abstract syntax tree is the variable node, the variable value corresponding to the variable node is obtained from the shared data environment; When the tree node of the expression abstract syntax tree is the function node, the target function corresponding to the function node is called from the hybrid function library; the target function is executed to obtain the function result; Once all tree nodes of the abstract syntax tree have been parsed, the result of the expression is output.

8. The method according to any one of claims 1 to 7, characterized in that, After obtaining the original configuration file of the interface to be displayed, the process includes: The development framework type used by the original configuration file is determined, and the development framework type determines the code format of the original configuration file. The code format conversion includes converting the code format under at least one development framework type into the uniformly specified format.

9. An interface display device, characterized in that, The device includes: The configuration file acquisition module is used to obtain the original configuration file of the interface to be displayed. The code format conversion module is used to convert the code format of the original configuration file into a uniform specified format to obtain a virtual document object model. The virtual document object model includes a serialized JS object and is used to describe the code in the original configuration file. The configuration file parsing module is used to parse the data structure and expressions of the virtual document object model. The data structure is used to reflect the mathematical relationships between various JS objects in the virtual document object model, and the expressions are used to determine the values ​​of variables corresponding to JS objects in the virtual document object model. The configuration file conversion module is used to generate a Document Object Model (DOM) tree based on the data structure, wherein the DOM tree represents the structural relationship of the JS objects and the nodes of the DOM tree represent the JS objects; execute the expression to generate the expression result; obtain the variable data corresponding to each node in the DOM tree based on the expression result; and perform serialization processing on the DOM tree based on the variable data to obtain a converted virtual DOM, wherein the converted virtual DOM is used to describe the display object of the interface to be displayed. The interface rendering and display module is used to render and display the interface to be displayed based on the converted virtual DOM.

10. A computer device, characterized in that, The computer device includes a processor and a memory, the memory storing at least one instruction, at least one program, a code set, or an instruction set, the at least one instruction, the at least one program, the code set, or the instruction set being loaded and executed by the processor to implement the interface display method as described in any one of claims 1 to 8.

11. A computer-readable storage medium, characterized in that, The storage medium stores at least one instruction, at least one program, code set, or instruction set, wherein the at least one instruction, the at least one program, the code set, or the instruction set is loaded and executed by a processor to implement the interface display method as described in any one of claims 1 to 8.

12. A computer program product, characterized in that, The computer program product includes computer instructions that are executed by a processor to implement the interface display method as described in any one of claims 1 to 8.

Images