Data processing method, device, equipment, and computer program

Abstract

The embodiments of the present application disclose a data processing method, an apparatus, a device, and a readable storage medium, the method including: in response to an interaction operation on a sub-program application, generating an interface rendering command indicated by the interaction operation, the interface rendering command being used to render an interaction interface corresponding to the interaction operation; if the rendering framework indicated by the interface rendering command is a mobile application program development framework, sending the interface rendering command to an execution environment of the sub-program application through a first communication port; in the execution environment, calling a second communication port based on the interface rendering command, calling the mobile application program development framework through the second communication port, and rendering an interaction interface corresponding to the interaction operation based on the mobile application program development framework, the second communication port being a communication port between a second program language and a third program language, the third program language being a development language supported by the mobile application program development framework; and outputting the interaction interface.

Description

[Technical field]

[0001] This application claims priority to a Chinese patent application filed with the China Patent Office on July 27, 2022, bearing application number 202210893349.7 and entitled "Data Processing Method, Apparatus, Device, and Readable Storage Medium," the entire contents of which are incorporated herein by reference.

[0002] The present application relates to the field of computer technology, and in particular to a data processing method, apparatus, device, and readable storage medium. [Background technology]

[0003] With the continuous development of computer technology, a wide variety of application programs (Applications, APPs) are appearing one after another, and in order to use these application programs, it is necessary to install APPs on smart terminal devices (e.g., smartphones). However, if a large number of APPs are installed on a smart terminal device, a large amount of internal memory will be occupied, which is highly likely to affect the operation of the smart terminal device.

[0004] Based on the above problems, sub-program applications (e.g., mini-program applications) have emerged in response to the demands of the times. A sub-program application is a kind of application that can be used without the need for downloading and installing. Currently, with the use of sub-program applications becoming more and more widespread, the requirements for the sub-program applications are also becoming higher and higher. For example, the requirements for the quality of the display pages of the sub-program applications are becoming higher and higher. Summary of the Invention [Problem to be solved by the invention]

[0005] The embodiments of the present application provide a data processing method, an apparatus, a device, and a readable storage medium, which can improve the rendering efficiency and at the same time the rendering quality in the rendering task of a sub-program application. [Means for solving the problem]

[0006] An embodiment of the present application provides a data processing method, comprising: generating an interface rendering command in response to an interaction operation on a sub-program application, the interface rendering command being used to render an interaction interface corresponding to the interaction operation; if the rendering framework indicated by the interface rendering command is a mobile application program development framework, sending the interface rendering command to a sub-program application execution environment through a first communication port, the sub-program application execution environment is a native application execution environment, the native application is a host application of the sub-program application, the first communication port is a communication port between a first program language and a second program language, the first program language refers to the program language supported by the interface rendering command, the second program language refers to the program language supported by the native application, and the mobile application program development framework is used for building a native interaction interface on a native operating system; In the execution environment, calling a second communication port according to the interface rendering command, calling a mobile application program development framework through the second communication port, and rendering an interaction interface corresponding to the interaction operation according to the mobile application program development framework, where the second communication port is a communication port between the second program language and a third program language, and the third program language is a development language supported by the mobile application program development framework; and outputting the interaction interface.

[0007] An embodiment of the present application further provides a data processing device, including: a command generating module, a command sending module, a port calling module, a framework calling module, an interface rendering module, and an interface output module; The command generating module is used for generating an interface rendering command in response to an interaction operation on a sub-program application, the interface rendering command being used for rendering an interaction interface corresponding to the interaction operation; The command sending module is used to send the interface rendering command to a sub-program application execution environment through a first communication port if the rendering framework indicated by the interface rendering command is a mobile application program development framework, the sub-program application execution environment is a native application execution environment, and the native application is a host application of the sub-program application, the first communication port is a communication port between a first program language and a second program language, the first program language refers to the program language supported by the interface rendering command, and the second program language refers to the program language supported by the native application; The port invocation module is used in an execution environment for invoking a second communication port according to an interface rendering command; The framework calling module is used for calling the mobile application program development framework through a second communication port, the second communication port being a communication port between the second program language and a third program language, and the third program language being a development language supported by the mobile application program development framework; The interface rendering module is used for rendering an interaction interface corresponding to an interaction operation according to a mobile application program development framework; The interface output module is used for outputting an interaction interface.

[0008] An embodiment of the present application further provides a computer device, comprising a processor and a memory, A computer program is stored in the memory, which, when executed by the processor, causes the processor to perform the method in the embodiments of the present application.

[0009] An embodiment of the present application further provides a computer-readable storage medium, the computer-readable storage medium storing a computer program, the computer program including program instructions, which, when executed by a processor, perform a method in an embodiment of the present application.

[0010] An embodiment of the present application further provides a computer program product, the computer program product including a computer program, the computer program being stored in a computer-readable storage medium, a processor of a computing device reading the computer program from the computer-readable storage medium, and the processor executing the computer program to cause the computing device to perform a method in an embodiment of the present application. [Brief description of the drawings]

[0011] [Figure 1] FIG. 1 is a diagram of a network architecture provided by an embodiment of the present application. [Diagram 2] FIG. 2 is a scene schematic diagram of interface rendering for a sub-program application provided by an embodiment of the present application; [Diagram 3] FIG. 2 is a flow diagram of a data processing method provided by an embodiment of the present application. [Figure 4] FIG. 2 is a flow diagram of a structure tree generation provided by an embodiment of the present application; [Diagram 5] FIG. 2 is an architecture diagram of interlanguage communication provided by an embodiment of the present application. [Figure 6] FIG. 2 is a schematic diagram of a rendering thread framework provided by an embodiment of the present application. [Figure 7] FIG. 2 is a thread architecture diagram of a logic sub-thread and a rendering sub-thread provided by an embodiment of the present application. [Figure 8] FIG. 13 is a logic flow diagram for rendering a sub-program application provided by an embodiment of the present application; [Figure 9]FIG. 2 is a structural schematic diagram of a data processing device provided by an embodiment of the present application; [Figure 10] FIG. 2 is a structural schematic diagram of a computer device provided by an embodiment of the present application; DETAILED DESCRIPTION OF THE PREFERRED EMBODIMENTS

[0012] Hereinafter, the technical solutions in the embodiments of the present application will be described clearly and completely in conjunction with the drawings in the embodiments of the present application. Of course, the described embodiments are only some of the embodiments of the present application, and not all of the embodiments. Based on the embodiments of the present application, all other embodiments obtained by those skilled in the art under the premise of not making creative efforts are all within the scope of protection of the present application.

[0013] In the current rendering work of sub-program applications (such as mini-program applications), the rendering engine adopted has the problem that the rendering process is relatively long and the internal memory is relatively large, which not only brings about the problem of reduced rendering efficiency, but also leads to the problem that when the display page obtained by rendering is displayed on the smart terminal device, the quality of the displayed page still cannot meet the quality requirements and is not high enough.

[0014] The solutions provided by the embodiments of the present application relate to related technical concepts such as native applications and sub-program applications, and in order to facilitate understanding, the following description will prioritize related technical concepts such as native applications and sub-program applications.

[0015] Sub-program application: a kind of application that can be used without needing to be downloaded and installed, and the sub-program application can realize the same functions as native applications without needing to be downloaded and installed. The sub-program application can be called by other programs, and after realizing a function, the sub-program application will automatically return to the calling program. In a normal case, it can run parasitically in another native application, and when the sub-program application runs parasitically in a native application, the parasitized native application may be called the host application of the sub-program application. Exemplarily, the host application may be an independently operating social application (e.g., an instant messaging application), but is not limited thereto, and the mini-program application may be one of the sub-program applications. For example, mini-program applications such as a shopping application and a real-time food ordering application hosted in a native application may all be sub-program applications.

[0016] Native application: A native solution or technology, which may refer to an application program that runs directly on the current operating system (e.g., iOS operating system, Android operating system, etc.). Exemplarily, a native application may be an independently running audio-video application, a social application, a shopping application, etc., but is not limited to these.

[0017] It should be understood that, as the scope of use of sub-program applications is becoming wider, the requirements for the sub-program applications are also becoming higher. Illustratively, as sub-program applications develop day by day, users have higher requirements for the rendering quality of the display page of mini-program applications, and it is required that the rendering quality of mini-program applications can be equivalent to native. Meanwhile, in order to improve the rendering quality of these sub-program applications including mini-program applications, the embodiment of the present application proposes a data processing method, and specifically, the embodiment of the present application introduces a mobile application program development framework in the rendering business of the sub-program application, and enables the mobile application program development framework to perform rendering on the interface of the sub-program application. Here, the mobile application program development framework here may refer to the Flutter framework, and for ease of understanding, the Flutter framework will be described below.

[0018] Flutter Framework: The Flutter framework may refer to a cross-platform mobile UI (User Interface) framework that can rapidly build high-quality native user interfaces (the native user interface may refer to an interface used to generate user interactions, and therefore the native user interface may be called a native interaction interface) on a native operating system (e.g., iOS, Android system), and developers can develop Flutter applications (native applications) using the Dart language.

[0019] For ease of understanding, please refer to FIG. 1, which is a network architecture diagram provided by an embodiment of the present application. As shown in FIG. 1, the network architecture may include a business server 1000 and a terminal device cluster. The terminal device cluster may include one or more terminal devices, and no limitation is made to the number of terminal devices here. As shown in FIG. 1, the multiple terminal devices may include terminal device 100a, terminal device 100b, terminal device 100c, ..., and terminal device 100n. As shown in FIG. 1, the terminal device 100a, terminal device 100b, terminal device 100c, ..., and terminal device 100n can respectively make a network connection with the business server 1000, so that each terminal device can be connected to the business server 1000 by the network to facilitate data interaction.

[0020] It can be understood that each of the terminal devices shown in FIG. 1 may have an application installed therein, and when the application runs on each terminal device, the application may perform data interaction with the business server 1000 shown in FIG. 1, allowing the business server 1000 to receive business data from each terminal device. Here, the application may include an application having a data information function of displaying text, image, audio, video, etc., and for example, the application may be a social application, an educational application, a video application, an entertainment application, etc. Here, the application may be an independent application, and may be installed in the terminal device and run on the current operating system of the terminal device, and the application may also be called a native application.

[0021] The terminal device in the embodiment of the present application may include, but is not limited to, a smart terminal having a multimedia data processing function (e.g., a video data playback function, a music data playback function, a text data playback function), such as a smartphone, a tablet computer, a notebook computer, a laptop computer, a smart TV, a smart speaker, a desktop computer, a smart watch, a smart car-mounted device, a smart voice interaction device, a smart home appliance, etc. For example, taking the terminal device 100a shown in FIG. 1 as an example, the above applications may be integrated in the terminal device 100a, and in this case, the terminal device 100a may perform data interaction with the business server 1000 through the applications. The business server 1000 in the present application may acquire business data based on these applications, for example, the business server 1000 may acquire business data through a user's bind account. Here, the bind account may refer to an account that a user binds in an application, and the user may log in to the application, upload data, acquire data, etc. through the corresponding bind account. On the other hand, the business server may use the bind account to obtain the user's login status and uploaded data, or send data to the user.

[0022] It should be understood that an application (e.g., a social application) in the present application may be a host application of a sub-program application (e.g., a mini-program application), and the sub-program application may run parasitically within the host application. When the sub-program application runs in the host application, the terminal device may perform data interaction with the business server 1000 through the sub-program application in the host application. The business server 1000 in the embodiment of the present application may obtain business data based on these applications (host application, sub-program application), and for example, the business server 1000 may obtain business data through a bind account of a user. Here, the bind account may refer to an account that a user binds in a host application (or an account that a user binds in a sub-program application), and the user may log in to the application, upload data, obtain data, etc. through the corresponding bind account. Meanwhile, the business server may obtain the user's login status, uploaded data, send data to the user, etc. through the bind account.

[0023] It should be understood that when a user generates an interaction operation in a sub-program application, the terminal device may send the interaction operation to the business server 1000. The business server 1000 in the embodiment of the present application may perform interface rendering based on a rendering framework (including the above-mentioned Flutter framework) to obtain an interaction interface corresponding to the interaction operation, and then return the interaction interface to the terminal device. Meanwhile, the terminal device may output and display the interaction interface. In some embodiments, the above-mentioned rendering framework may be various architectures that can realize a graphics rendering function. The terminal device may display a graphics user interface of a visualization application (e.g., a sub-program application) on a screen through the rendering framework. Specifically, when a user performs an interaction operation in a sub-program application (for example, an operation to launch a sub-program application or an operation to check the details of an item), the terminal device may generate an interface rendering command indicated by the interaction operation in response to the interaction operation on the sub-program application, and then the terminal device may transmit the interface rendering command to the business server 1000. The business server 1000 may inquire what kind of framework the rendering framework indicated in the interface rendering command is, and if the rendering framework indicated by the interface rendering command is the above mobile application program development framework (for example, the above Flutter framework), the business server may interpret the interface rendering command as an execution environment corresponding to the sub-program application (the execution environment of the host application) through a first communication port.The execution environment may be understood as the execution environment of the development program language of the host application. For example, if the host application is developed using C / C++, the execution environment of the host application may be understood as the execution environment of C / C++. In this case, the execution environment of the sub-program application may also be understood as the execution environment of C / C++. Here, the above-mentioned first communication port may be understood as a communication port between the development program language (which may be called the first program language) of the sub-program application (e.g., a mini-program application) and the development program language (which may be called the second program language) of the host application. For example, in the case where the sub-program application is a mini-program application, if the first program language for developing the mini-program application is JavaScript and the second program language is C / C++, and communication between JavaScript and C / C++ may be performed through a JSBinding port (for example, JavaScript and C / C++ may call each other through a JSBinding port), the JSBinding port may be the above-mentioned first communication port.

[0024] Further, in the execution environment, a second communication port may be called based on the interface rendering command. Here, the second communication port may be a communication port between a development program language of a host application (which may be referred to as a second program language) and a development program language of a mobile application program framework (for example, a development program language of a Flutter framework, which may be referred to as a third program language). For example, if the second program language is C / C++ and the third program language is Dart, and communication between C / C++ and Dart may be performed through two ports for communicating with native C / C++, namely, a local extension port (Native Extension, Dart API) and a Dart FFI (for example, Dart and C / C++ may call each other through the Dart API or the Dart FFI), the Dart API or the Dart FFI may be the second communication port.

[0025] It should be understood that in the execution environment, the above-mentioned mobile application program development framework may be called through the above-mentioned second communication port, and the interaction operation may render an interaction interface corresponding to the mobile application program development framework based on the mobile application program development framework. Then, the business server 1000 may return the interaction interface to the terminal device, and the terminal device may display the interaction interface in a terminal display interface (i.e., output the interaction interface).

[0026] It should be understood that the above two ports (first and second communication ports) enable the host application of the sub-program application (e.g., mini-program application) to be a communication bridge between the sub-program application and the mobile application program development framework, so that the mobile application program development framework (Flutter framework) can be introduced into the sub-program application based on the communication bridge, and the rendering task of the sub-program application can make good use of the mobile application program development framework to perform rendering. Since the rendering flow of the Flutter framework is simple, the rendering efficiency of the sub-program application can be improved, and at the same time, since the Flutter framework has the ability to build a native user interface, the interaction interface of the sub-program application rendered by the Flutter framework has a quality that is almost the same as native quality and has a fairly high quality. Therefore, by introducing the mobile application program development framework, the rendering efficiency and the rendering quality can be improved at the same time in the rendering task of the sub-program application.

[0027] It can be understood that the method provided by the embodiments of the present application may be executed by a computer device, including but not limited to a terminal device or a business server, where the business server may be an independent physical server, a server cluster or a distributed system consisting of multiple physical servers, and may be a cloud server providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms.

[0028] Here, the user terminal and the business server may be directly or indirectly connected by wired or wireless communication, and the present application is not limited thereto.

[0029] It should be noted that in the specific embodiment of the present application, data related to a user, such as user information and user data (for example, the above-mentioned user's bind account and data uploaded by the user, etc.) is processed after obtaining the permission given by the user. In other words, when the embodiment of the present application is applied in a specific product or technology, it is necessary to obtain the permission or consent of the user, and the collection, use and processing of related data must comply with the relevant laws, regulations and standards of the relevant countries and regions.

[0030] It should be noted that in the embodiments of the present application, descriptions such as "B corresponding to A", "B associated with A", "B is associated with A", and "B is determined based on A" can all indicate that A and B are associated with each other. Note that determining B based on A does not mean determining B based only on A, but may refer to determining B based on A together with other information.

[0031] In some embodiments, it can be understood that the above computer devices (e.g., the above business server 1000, the terminal device 100a, the terminal device 100b, etc.) may be a node in a distributed system. Here, the distributed system may be a blockchain system, and the blockchain system may be a distributed system formed by connecting the multiple nodes in the form of network communication. Here, a peer-to-peer (P2P) network may be formed between the nodes, and the P2P protocol is an application layer protocol that operates on the Transmission Control Protocol (TCP) protocol. In the distributed system, any type of computer device, such as an electronic device such as a business server, a terminal device, etc., can all join the peer-to-peer network to become a node in the blockchain system. For ease of understanding, the concept of blockchain will be described below. Blockchain is a new application mode of computer technologies such as distributed data storage, peer-to-peer transmission, consensus mechanism, and encryption algorithm, which is mainly used to organize data in chronological order and encrypt it into a ledger that cannot be tampered with or forged, and can simultaneously verify, store, and update data. When a computer device is a node of the blockchain, due to the immutability and anti-forgery characteristics of the blockchain, the data in this application (such as data uploaded by users, interaction interfaces obtained by rendering, etc.) can be provided with authenticity and security, so that the results obtained after performing related data processing based on these data can be more reliable.

[0032] The embodiments of the present application can be applied to various scenes, including but not limited to cloud technology, artificial intelligence, smart transportation, driving assistance, etc. For ease of understanding, refer to FIG. 2 as well, which is a scene schematic diagram of interface rendering for a sub-program application provided by an embodiment of the present application. Here, the business server shown in FIG. 2 may be the above-mentioned business server 1000, and the terminal device M shown in FIG. 2 may be any one of the terminal devices selected in the terminal device cluster of the embodiment corresponding to the above-mentioned FIG. 1, for example, the terminal device may be the above-mentioned terminal device 100b.

[0033] Here, the embodiment of the present application will be described by taking the case where the sub-program application is a mini-program application as an example. Specifically, the embodiment of the present application will be described by taking the case where the social application (native application) is a host application of a game application (the game application is a mini-program application), and the user can launch and operate the game application by the social application as an example. As shown in FIG. 2, after the user m launches the game application, assuming that the player character in the game application of the user m is currently in a skydiving descent state and the parachute has not yet opened, the user m can open the parachute by clicking the umbrella opening control. When the user m clicks the umbrella opening control, the click trigger operation of the user m may be understood as one interaction operation, and the terminal device M may generate an interface rendering command for the interaction operation and send the interface rendering command to the business server. After that, the business server may perform rendering on the business data triggered by the umbrella opening control after receiving the interface rendering command, thereby obtaining one rendering image (rendering image layer) as the interaction interface corresponding to the interaction operation.

[0034] For example, after the business server receives the interface rendering command, if the rendering framework indicated by the interface rendering command is a mobile application program development framework (here, Flutter framework is taken as an example), the business server may obtain the development program language of the game application (here, JavaScript is taken as an example) and the development program language of the social application (here, C / C++ is taken as an example), and obtain the communication port between the two development program languages. Based on the communication port, the business server may send the interface rendering command to the execution environment of the host application, and then, in the execution environment, obtain the development program language of the Flutter framework (here, Dart is taken as an example), and obtain the communication port between the development program language of the social application and the development program language of the Flutter framework. Based on the communication port, the Flutter framework can be called, and the business data triggered by the umbrella opening control can be rendered based on the Flutter framework, so as to obtain the rendering diagram layer (interaction interface) shown in FIG. 2.

[0035] Furthermore, the business server may return the rendering layer to the terminal device, and the terminal device may display the rendering layer (interaction interface) in the terminal display interface. It should be understood that after the user m clicks the umbrella opening control, the rendering layer rendered based on the Ftutter framework can be examined on the display interface of the terminal device M. As shown in Figure 2, the parachute of the player character in the rendering layer is already in an open state.

[0036] Further, as shown in FIG. 3, FIG. 3 is a flow diagram of a data processing method provided by an embodiment of the present application. The method may be executed by a terminal device (for example, any terminal device in the terminal device cluster shown in FIG. 1 above, for example, the terminal device 100a), or a business server (for example, the business server 1000 shown in FIG. 1 above), or may be executed by both the terminal device and the business server. For ease of understanding, in this embodiment, a case where the method is executed by the terminal device is described as an example. Here, the data processing method may include at least the following steps S101 to S104.

[0037] Step S101: In response to an interaction operation on a sub-program application, generate an interface rendering command indicated by the interaction operation, and the interface rendering command is used for rendering an interaction interface corresponding to the interaction operation.

[0038] In the embodiment of the present application, an application may be deployed in the terminal device, and the application may be a video application, a social application, an educational application, etc. When a user uses the terminal device, the user can launch the application in the terminal device, for example, the user can click the application and click the launch control to run the application. Here, the application may be a native application that can be installed and run in the current operating system of the current terminal device, and different sub-programs may be embedded in the application. These sub-programs do not need to be installed and downloaded, and they all depend on the application to run. That is, the application is the host application of these sub-programs. In the embodiment of the present application, the sub-program may be called a sub-program application, and the user may launch the sub-program application in the application and perform a corresponding operation. In this case, the interaction operation may refer to any operation (e.g., a launch operation, an operation to check an item, an operation to check comments, etc.) that the user causes in the sub-program application. When a user performs an interaction operation on the sub-program application, the terminal device may generate an interface rendering command for the interaction operation in response to the interaction operation. Exemplarily, a mini-program application may be a kind of sub-program application, that is, a shopping application, a real-time food ordering application, etc. may all be called a sub-program application, which may parasitize and run in a host application.

[0039] Here, the interface rendering command may include business data for the interaction operation, and these business data may specifically include a style shadow structure tree. Specifically, a specific implementation manner of generating an interface rendering command indicated by an interaction operation on a sub-program application in response to the interaction operation may be as follows: When a user generates an interaction operation on the sub-program application, the terminal device may obtain a page rendering template file of the sub-program application in response to the interaction operation on the sub-program application. Then, a template parser (or an analyzer that performs template analysis) may be called, and the page rendering template file may be analyzed based on the template parser, and a style shadow structure tree corresponding to the interaction operation may be generated based on the analysis result. Here, the style shadow structure tree is composed of N shadow nodes, each shadow node includes element encapsulation information of one page element, N is a positive integer, and the page element refers to an element used to construct an interaction interface. Thereafter, a rendering command including the style shadow structure tree may be generated, and the rendering command including the style shadow structure tree may be determined as an interface rendering command indicated by the interaction operation.

[0040] It can be understood that, taking the sub-program application as an example of a mini-program application, the above page rendering template file may refer to a template file used to describe the page content of the mini-program application. Specifically, it may refer to a template file provided in WXML (WeiXin Markup Language) in the rendering flow of the mini-program application. Here, WXML is a tag language designed by a framework, which can be used in conjunction with a basic component and an event system to build a page structure. The template parser in the present application may refer to a component management framework (e.g., Exparser framework) in the mini-program application, and can load the page rendering template file based on the Exparser framework and parse the page rendering template file, thereby generating a style shadow structure tree corresponding to the interaction operation based on the parsing result. Here, the style shadow structure tree here may refer to a shadow tree, and the shadow tree may be specifically understood as a structure tree generated for encapsulation. A shadow tree allows a component to have its own "shadow" (hidden form), which cannot be freely accessed in the main document, and its specific function is to hide the component's internal structure and add styles that are only valid within the component. That is, the above style shadow structure tree may be understood as being composed of multiple nodes (which may be called shadow nodes), while each node mainly contains hidden encapsulation information of each component (where, for a certain interaction operation, each node may actually be understood as encapsulation information of each page element in a certain page, and in this case, the encapsulation information contained in each node may be called element encapsulation information).), and can generate interface rendering commands based on the style shadow structure tree.

[0041] Step S102: if the rendering framework indicated by the interface rendering command is a mobile application program development framework, send the interface rendering command to a sub-program application execution environment through a first communication port, where the sub-program application execution environment is a native application execution environment, the native application is a host application of the sub-program application, the first communication port is a communication port between a first program language and a second program language, the first program language refers to the program language supported by the interface rendering command, the second program language refers to the program language supported by the native application, and the mobile application program development framework is used for building a native interaction interface on a native operating system.

[0042] In the embodiment of the present application, for each page of the sub-program application, the developer may specify a rendering framework. For example, if the sub-program application is a mini-program application, the rendering framework here may include a page view framework (webview framework) and a mobile application program development framework (Fltutter framework). The above interface rendering command may include the rendering framework specified by the developer. If the rendering framework is the mobile application program development framework, the terminal device may obtain the development program language of the sub-program application (which may be referred to as a first program language, for example, for a mini-program application, the development program language may refer to JavaScript) and the development program language of the host application (which may be referred to as a second program language, for example, the development program language may refer to C / C++). Generally speaking, the first program language and the second program language are two different program languages, while the first program language and the second program language may refer to languages ​​that can communicate with each other because the sub-program application needs to be hosted and run in the host application. That is, when the first program language and the second program language are different, there is a communication port between the first program language and the second program language, and communication is performed by using it.Here, take the case where the first program language is JavaScript and the second program language is C / C++ as an example, JavaScript and C / C++ can communicate with each other through the JSBinding mechanism, and the first communication port can be determined as JSBinding.Of course, when the first program language and the second program language are other languages, the first communication port can be determined based on the situation of a specific scene, and the present description is merely given by way of example.

[0043] It should be understood that the terminal device may obtain a first communication port between the first program language and the second program language, and send the interface rendering command to the execution environment of the sub-program application based on the first communication port. Here, since the sub-program application runs parasitically in the host application, the execution environment of the sub-program application may actually be understood as the execution environment of the host application, and specifically, the execution environment of the host application may refer to the execution environment of the development program language (e.g., the execution environment of the second program language described above). Based on the above first communication port, even if the development program language of the sub-program application is different from the development program language of the host application, the interface rendering command can be sent to the execution environment of the sub-program application based on the above first communication port. Here, the execution environment may include a base layer rendering framework of the sub-program application (e.g., a mini-program application), and in this case, the execution environment may perform interface rendering of the sub-program application.

[0044] Step S103: In the execution environment, call a second communication port according to the interface rendering command, call a mobile application program development framework through the second communication port, and render an interaction interface corresponding to the interaction operation according to the mobile application program development framework. The second communication port is a communication port between the second program language and a third program language, and the third program language is a development language supported by the mobile application program development framework.

[0045] In the embodiment of the present application, the execution environment may call a second communication port according to the interface rendering command, and the above mobile application program development framework may be called by the second communication port, and interface rendering may be performed according to the mobile application program development framework. Specifically, in the embodiment of the present application, after generating rendering data corresponding to the interaction operation according to the interface rendering command, the mobile application program development framework may be further called, and rendering may be performed on the rendering data. Here, the rendering data here may specifically refer to a page element structure tree. Specifically, before calling the second communication port, in the embodiment of the present application, the execution environment may create a page element structure tree corresponding to the interaction operation according to the interface rendering command. Here, the page element structure tree is composed of N element nodes, each element node corresponds to one page element, each element node includes element description data, and one element description data refers to style description data of one page element, and the page element refers to an element used to build the interaction interface. In response to the completion of the page element structure tree creation, the execution environment may perform a step of calling the second communication port according to the interface rendering command.

[0046] It should be understood that the above element description data may refer to style description data of page elements, and these page elements may constitute one page. Specifically, the element description data may refer to a widget, and each widget may be understood as a basic module for constructing a UI, and various complex interfaces may be formed by combining and assembling these widgets. Meanwhile, in the Flutter framework, the construction of a UI can be completed very simply by combining various widgets. In this case, the embodiment of the present application may determine corresponding style description data for each page element based on an interface rendering command, and one style description data may correspond to one node (which may be called an element node), and the above page element structure tree may be constructed and obtained based on these element nodes (in this way, the page element structure tree may be understood as a widget tree). When the page element structure tree is successfully created, the above second communication port may be called, and a mobile application program development framework may be called based on the second communication port, and rendering may be performed on the page element structure tree based on the mobile application program development framework.

[0047] Here, as can be seen from the above, the above interface rendering command includes a style shadow structure tree (the style shadow structure tree is composed of N shadow nodes, and each shadow node includes element encapsulation information of one page element) corresponding to the interaction operation, while in the embodiment of the present application, a page element structure tree may actually be generated based on the style shadow structure tree (the information in each shadow node can be converted to obtain one element description data, and then an element node including the element description data can be obtained, so that a page element structure tree constructed by the element node can be configured). Specifically, for a specific implementation manner of generating a page element structure tree based on a style shadow structure tree, reference can be made to the description in the embodiment corresponding to FIG. 4 below.

[0048] Furthermore, after generating the page element structure tree, in the execution environment, the mobile application program development framework may be called according to the second communication port, and the mobile application program development framework and the interaction interface corresponding to the interaction operation may be rendered according to the page element structure tree. i For example, the specific implementation process may include the following: i A program object may be created that corresponds to the element node S. i Based on the program object corresponding to element node S i A mount operation is performed on the element description data corresponding to element node S iWhen the mount objects corresponding to the N element nodes are determined, a structure tree composed of the N element nodes including the corresponding mount objects may be determined as an element mount structure tree corresponding to the interaction operation. A rendering process may be performed on the element mount structure tree based on the mobile application program development framework to obtain an interaction interface.

[0049] It can be understood that the mount operation process here may specifically refer to a Mount operation process, and in the rendering logic realization, for each element node, a corresponding program object (take the third program language as Dart for example, a corresponding Dart object can be created in an isolated internal memory called Dart Isolate, and the Dart object can be called a program object corresponding to the node) may be created through the second communication port in the isolated operating environment of the third program language. The program object may be held by a widget (element description data) object corresponding to the element node, and the process can be understood as a mount process. That is, a mount operation process is performed on the element description data based on the program object, and thus a mount object corresponding to each element node can be obtained. Furthermore, an element mount structure tree (widget tree mount) including each node of the mount object can be obtained. Based on the mobile application program development framework, a rendering process is performed on the element mount structure tree to obtain an interaction interface.

[0050] Here, a specific implementation manner for performing a rendering process on the element mounting structure tree based on the mobile application program development framework to obtain an interaction interface may be as follows: performing an interface layout process on the element mounting structure tree based on the mobile application program development framework to obtain interaction interface layout information of the interaction interface; then performing an interface drawing process according to the interaction interface layout information to obtain a drawing interface; then the drawing interface can be determined as the interaction interface.

[0051] Step S104: Output the interaction interface.

[0052] In the embodiment of the present application, for the above-mentioned interaction interface, if the above-mentioned interaction interface is an interface that has not undergone rasterization processing, in order to further improve the interface quality, the interaction interface may be subjected to rasterization processing to obtain a rasterized processing interface, and then the rasterized processing interface may be output; on the other hand, if the above-mentioned interaction interface is an interface that has undergone rasterization processing, the interaction interface may be directly output.

[0053] In an embodiment of the present application, a mobile application program development framework is introduced in the interface rendering business of a sub-program application (e.g., a mini-program application). Specifically, for an interaction operation of a sub-program application, an interface rendering command indicated by the interaction operation can be generated in response to the interaction operation. If the rendering framework indicated by the interface rendering command is the above mobile application program development framework, the interface rendering command can be sent to the execution environment of the sub-program application through a first communication port. Here, it can be understood that the sub-program application is an application that runs in another native application (an application developed based on a second program language, the native application corresponds to the second program language, and the native application may be called a host application). In this case, the execution environment of the sub-program application may actually be understood as the execution environment of a host application. The program language to which the interface rendering command corresponds is a first program language, and if communication between two languages ​​is desired, communication may be performed through a first communication port. Then, in the execution environment, a second communication port may be called according to the above interface rendering command, and a mobile application program development framework may be called through the second communication port, and an interaction interface corresponding to the interaction operation may be rendered according to the mobile application program development framework. Here, since the mobile application program development framework is a framework developed based on a third programming language, communication may be performed between the second programming language and the third programming language according to the second communication port to enable the mobile application program development framework to be called.In this way, the first communication port and the second communication port may be used to call the execution environment of the native application a communication bridge. The communication between the first program language and the second program language allows the sub-program application developed based on the first program language to be effectively called by the mobile application program development framework. It should be understood that the mobile application program development framework is a framework used to build a native interaction interface on a native operating system, which has the characteristic of a simple rendering flow, and therefore has efficient rendering performance. At the same time, the interface it renders can be equivalent to a native interface, and therefore has a fairly high rendering quality. In this case, after the mobile application program development framework is introduced into the interface rendering business of the sub-program application, the efficient rendering performance of the mobile application program development framework can provide a display quality close to native for the interaction interface of the sub-program application, and the rendering efficiency can be increased while the rendering quality can be improved in the interface rendering business of the sub-program application.

[0054] Further, as shown in FIG. 4, FIG. 4 is a flow diagram of a structure tree generation provided by an embodiment of the present application. Here, the flow may correspond to the flow of generating a page element structure tree in the embodiment corresponding to FIG. 3 above. The page element structure tree may be specifically generated based on a style shadow structure tree in an interface rendering command (the style shadow structure tree is composed of N shadow nodes, and each shadow node includes element encapsulation information of one page element). Here, the N shadow nodes of the style shadow structure tree are the shadow nodes S iShadow node S i The element encapsulation information contained in i A specific implementation method for generating a page element structure tree will be described using the case where N and i are both positive integers as an example. As shown in Fig. 4, the flow may include at least the following steps S401 to S404.

[0055] Step S401: obtain a style rule set, which includes element style rules corresponding to each page component, where the page component refers to the component used to configure the application interface of the sub-program application, and the application interface includes an interaction interface.

[0056] Specifically, the style rule set may refer to a set used to define an element style of an application interface of a sub-program application (e.g., a mini-program application). It includes element style rules of each page component of the application interface, and the element style rules may be composed of a selector, an attribute, and a value, and specifically may include a selector type, an identity (Identification, id), a class, a background color, a font attribute, an outline, and a frame, etc. The page component may refer to each element (e.g., a title, an image, a text, etc.) used to configure a page. The style rule set may specifically refer to a RuleSet, and the RuleSet may be generated based on a page style table. That is, specifically, a specific implementation manner of obtaining the style rule set may be as follows: Obtain a page style configuration table. Here, the page style configuration table may include attribute definition information of each page component. Then, a style parser may be called. Based on the style parser, the attribute definition information included in the page style configuration table may be parsed. Based on the parsing result, a style rule set may be generated. Here, taking the case where the sub-program application is a mini-program application as an example, the style parser here may be included in the mini-program basic library. This may specifically refer to a component dedicated to generating a RuleSet by performing page style table analysis, and the RuleSet can be obtained by automatically performing analysis on the page style configuration table based on the style parser. The page style configuration table here may be called a page style table, and in the rendering business, the page style table is a kind of markup language used to control the page style and allow the style information to be separated from the page content. Here, the style is a format, and specifically may refer to the size of the characters on the page, the color, the position of the image, etc., all of which are styles that set the page content.In the present application, a file may be created to define a page style, which may be the page style configuration table, and the page style configuration table may be directly introduced (or inserted) in the rendering task of the mini-program application, while the style parser may parse the page style configuration table to generate the style rule set.

[0057] Step S402: In the style rule set, element encapsulation information K i Determine the element style rules that match the shadow node S. i Determine the style of the node element that corresponds to the

[0058] Specifically, Shadow Node S i Regarding the above, the embodiment of the present application uses element encapsulation information K i A matching element style rule may be selected from the style rule set based on the element encapsulation information K. Specifically, in the embodiment of the present application, a matching element style rule may be selected from within the RuleSet based on information such as the tag, identity (id) and class (category) of the shadow node. For example, taking the case of selecting a matching element style rule based on class as an example, assuming that the class in the element encapsulation information of the shadow node is "into", an element style rule with class "into" can be queried from the RuleSet, and the element style rule may be the matching element style rule. Here, the element encapsulation information K i Shadow node S i For example, in the style rule set, element encapsulation information K iA specific implementation method for determining an element style rule that matches the style rule set may be as follows: i The configuration category information that matches the node category information of the shadow node S may be determined as the matching configuration category information. Then, the element style rule corresponding to the matching configuration category information in the style rule set may be determined as the matching configuration category information of the shadow node S. i Based on the candidate element style rules, the element encapsulation information K i It should be understood that the node category information and the component category information here may refer to a field used to ascertain a category based on a certain type of programming language. Based on the field, the category to which the shadow node belongs can be determined, and the type of category to which the style rule belongs can also be determined. Of course, the method of matching style rules based on node category information is only described by way of example here, but in reality, a specific scene may correspond to different matching methods. For example, the method of matching styles may be based on information such as the tag and id of a node to match styles (for example, matching based on tag, id, and class) from the RuleSet, but the present application is not limited thereto.

[0059] Further, here, the number of candidate element style rules is at least two. j (j is a positive integer), for example, element encapsulation information K i A specific implementation of determining a matching element style rule that matches the candidate element style rule C may be as follows: j The style priority attribute D corresponds to jThe style priority attribute D j Based on the above, candidate element style rule C j When the priority weights corresponding to the at least two candidate element style rules are determined, the candidate element style rule corresponding to the maximum priority weight among the at least two priority weights may be included in the element encapsulation information K i may be determined as a matching element style rule that matches

[0060] Here, the style priority attribute D j For example, if the style priority attribute D j Based on the above, candidate element style rule C j A specific implementation of determining the priority weight corresponding to the rare attribute may be as follows: A rare value corresponding to the rare attribute may be obtained. If the value attribute is a value effective attribute and the rare value is greater than the rare threshold, a first weight value that matches the rare value in the first weight interval is set as the candidate element style rule C j On the other hand, if the value attribute is a value effective attribute and the rare value is less than the rare threshold, the second weight value that matches the rare value in the second weight interval may be determined as the priority weight corresponding to the candidate element style rule C j Here, the weight value in the second weight interval is smaller than the weight value in the first weight interval, and if the value attribute is a value-invalid attribute and the rare value is greater than the rare threshold, a third weight value that matches the rare value in the third weight interval may be determined as the priority weight corresponding to the candidate element style rule C. j Here, the weight value in the third weight interval is less than the weight value in the second weight interval, and if the value attribute is a value-invalid attribute and the rare value is less than the rare threshold, a fourth weight value that matches the rare value in the fourth weight interval may be determined as the priority weight corresponding to the candidate element style rule C. j where the weight values ​​in the fourth weight interval are less than the weight values ​​in the third weight interval.

[0061] It can be understood that after completing the construction of the style shadow structure tree, a candidate element style rule may be obtained by matching styles from the style rule set based on information such as tag, id, and class of each shadow node. Then, when the number of the candidate element style rules is at least two, a priority weight corresponding to each candidate element style rule may be determined based on the corresponding style priority attribute, and the style with the highest weight may be applied to the shadow node. Here, each candidate element style rule includes a style attribute parameter (e.g., a position attribute, an order attribute, etc.), and the style priority attribute here may refer to an attribute parameter used to determine the style priority among the definition attribute parameters included in the candidate element style rule. Specifically, this may refer to a style definition position attribute (inline style / wxss), an order attribute, a value attribute (which may include a value-enabled attribute and a value-disabled attribute, and may be understood as an importance attribute, i.e., whether the style is important or not; if the style is an important attribute, the value attribute may be a value-enabled attribute, and if the style is a non-important attribute, the value attribute may be a value-disabled attribute), a specificity attribute (specificity, specifically, may refer to the specificity attribute of the selector included in the style rule; for each style rule, the specificity of the selector is calculated, thereby enabling correct display when there is a contradiction in the element attribute statement), etc., and the priority weight of each candidate element style rule can be determined based on one or more attributes of the style definition position attribute, order attribute, value attribute, and specificity attribute.

[0062] Since the uniqueness may be used to determine whether a style rule is unique (rare or not), the uniqueness attribute can be called a rare attribute here. For example, when the priority weight is determined jointly based on both the value attribute and the rarity attribute, the style priority attribute D jmay include a value attribute and a rare attribute. In the present application, a rare value corresponding to the rare attribute may be obtained, and the larger the rare value, the higher the priority weight corresponding to the candidate element style rule. Of course, the priority weight corresponding to the candidate element style rule is determined jointly based on both the value attribute and the rare value. In this case, when the value attribute is a value effective attribute, the larger the rare value, the higher the priority weight. When the rare value is greater than the rare threshold, the weight value matching the rare value in the first weight interval is set as the weight value of the candidate element style rule C. j When the rare value is smaller than the rare threshold, the priority weight should be slightly smaller than the above case. In this case, the weight value that matches the rare value in the second weight interval (the weight value in the second weight interval is smaller than the weight value in the first weight interval) may be determined as the priority weight corresponding to the candidate element style rule C. j Similarly, when the value attribute is a value-invalid attribute, and the rare value is greater than the rare threshold, the priority weight should be slightly smaller than the second type of case. In this case, the weight value matching the rare value in the third weight interval (the weight value in the third weight interval is smaller than the weight value in the second weight interval) may be determined as the priority weight corresponding to the candidate element style rule C j When the rare value is smaller than the rare threshold, the priority weight should be slightly smaller than the third type case. In this case, the weight value that matches the rare value in the fourth weight interval (the weight value in the fourth weight interval is smaller than the weight value in the third weight interval) may be determined as the priority weight corresponding to the candidate element style rule C. j The priority weight may be determined as the priority weight corresponding to

[0063] Further, the candidate element style rule to which the maximum priority weight corresponds may be determined as the matching element style rule for the shadow node. After determining the matching element style rules for each shadow node, these matching element style rules may be determined as the node element style for each shadow node.

[0064] Step S403: According to the style conversion rule, the shadow node S i Transform the node element style corresponding to the shadow node S i Obtain the element description data corresponding to

[0065] Specifically, the shadow node S is transformed according to a style transformation rule (also called a style transformation standard). i , so that the node element style corresponding to the shadow node S i In this case, the element description data corresponding to the node element style can be obtained, and the element description data corresponding to each shadow node can be obtained by adopting a similar method. Specifically, as can be seen from the above, the element description data here can refer to the configuration data used to describe a page element, and the element description data can specifically refer to the widget corresponding to each node element style. In the node element style and the widget, there is a corresponding conversion standard, and the conversion standard can convert the style into a corresponding widget, or convert the widget into a corresponding style. In this case, the embodiment of the present application can obtain the style conversion rule (or called the style conversion standard), and generate a corresponding widget (i.e., element description data) from the matching element style rule of each shadow node based on the style conversion rule.

[0066] Step S404: When the element description data corresponding to each of the N shadow nodes has been determined, each shadow node is determined as an element node, and a structure tree consisting of the N element nodes including the corresponding element description data is determined as a page element structure tree corresponding to the interaction operation.

[0067] Specifically, when element description data corresponding to each of N shadow nodes is determined, each shadow node may be determined as an element node, and a structure tree composed of the N element nodes containing the corresponding element description data may be determined as a page element structure tree (widget tree).

[0068] In the embodiment of the present application, the above two ports (first and second communication ports) enable the host application of the sub-program application (e.g., mini-program application) to be a bridge of communication between the sub-program application and the mobile application program development framework. Thus, based on the bridge of communication, a mobile application program development framework (Flutter framework) may be introduced into the sub-program application, and the rendering task of the sub-program application may be performed by making good use of the mobile application program development framework. Since the rendering flow of the Flutter framework is simple, the rendering efficiency of the sub-program application can be improved, and at the same time, since the Flutter framework has the ability to build a native user interface, the interaction interface of the sub-program application rendered by the Flutter framework has a quality that is almost the same as the native quality and has a fairly high quality. Therefore, by introducing the mobile application program development framework, the rendering task of the sub-program application can improve the rendering efficiency and the rendering quality at the same time.

[0069] Furthermore, for ease of understanding, please refer to Figure 5, which is an architecture diagram of the inter-language communication provided by the embodiment of the present application, where the architecture may specifically refer to the inter-language communication architecture between a first program language and a third program language.

[0070] Here, the first program language may refer to the development program language of the sub-program application (e.g., mini-program application), which may refer to any program language having a function of developing an application, such as JavaScript, C / C++, Python, etc. Generally speaking, when referring to a mini-program application, the development program language of the mini-program application generally refers to JavaScript, and the port layer of the mini-program application is also programmed using JavaScript. The second program language may refer to the development program language of the host application (native application) of the sub-program application, which may refer to any program language having a function of developing an application, such as JavaScript, C / C++, Python, etc., and in the embodiment of the present application, the second program language may specifically refer to C / C++. The third program language may refer to the development program language of the above mobile application program development framework, and in the embodiment of the present application, the mobile application program development framework may specifically refer to the Fltutter framework. The Fltutter framework is programmed using the Dart language, and in this case, the third program language may specifically refer to the Dart language.

[0071] It should be understood that the first communication port in the embodiment of the present application may refer to a communication port between a first program language and a second program language, for example, it may specifically refer to a communication port between JavaScript and C / C++ (for example, JSBinding mechanism), and the second communication port may refer to a communication port between a second program language and a third program language. For example, it may specifically refer to a communication port between Dart and C / C++ (for example, Dart API, or Dart FFI. Because the performance of Dart FFI is relatively good, Dart FFI may be preferentially used as the second communication port.) By using the second program language as a communication bridge, it is possible to realize communication between the first program language and the third program language, that is, it is possible to effectively introduce the Flutter framework into the sub-program application.

[0072] As can be seen from the above, in the embodiment of the present application, a mobile application program development framework may be introduced to perform rendering on the interface of a sub-program application. Of course, in the embodiment of the present application, rendering on the interface of a sub-program application (e.g., a mini-program application) may be performed simultaneously based on the remaining rendering framework (e.g., a page view framework, i.e., a webview framework). For a similar interface rendering command, the embodiment of the present application may perform rendering simultaneously based on the mobile application program development framework and the webview framework, respectively. If the mobile application program development framework completes the rendering first, the rendering image obtained by the mobile application program development framework may be output and displayed; if the webview framework completes the rendering preferentially, the rendering image obtained by the webview framework may be output and displayed. Thus, the response efficiency of the sub-program application may be significantly improved while ensuring the rendering quality.

[0073] It should be understood that in the rendering flow based on the webview framework, the sub-program application (e.g., mini-program application) is a dual-thread model that is divided based on the logic layer (AppService) and the view layer (webview), and the steps of JS logic (background program logic, in which the sub-program application adopts JavaScript for development, the background program logic may be JS logic), DOM tree (which may be understood as a shadow tree), page style table analysis, style matching, layout, drawing, etc. are all generated in the main thread. In the main thread, there are too many tasks, the parallel degree is not high enough, and the efficiency is reduced, and at the same time, the JS tasks take a very long time, which may cause the interface to freeze. In addition, communication between the divided threads needs to be frequently performed by JSBridge, and the state needs to be synchronized between the two threads, and the tree structure needs to be maintained, which requires a large communication cost.

[0074] In order to reduce the occurrence of the above problems and to improve the fluency of the interface, in the embodiment of the present application, a new thread (specifically, may be called a rendering thread) is created in the rendering framework of the sub-program application (e.g., mini-program application). While the embodiment of the present application can run the view (wxml) and logic (js logic) simultaneously in the logic layer (AppService), the layout and rendering of the view may occur in the new thread because it is implemented internally. By dividing some logic (e.g., layout, rendering) etc. into a new thread, the multi-core CPU of the device can be fully utilized, thereby improving the degree of parallelism, improving the fluency of interface rendering and interaction, and reducing the rendering time and delay.

[0075] For ease of understanding, FIG. 6 is also referred to, which is a schematic diagram of a framework of a rendering thread provided by an embodiment of the present application. Here, the framework shown in FIG. 6 may be a schematic diagram for explaining the framework of a rendering thread of a sub-program application, for example, when the sub-program application is a mini-program application. As shown in FIG. 6, the rendering framework of a mini-program application can be generally divided into a logic sub-thread (AppService sub-thread), an interface rendering sub-thread, and a rasterization sub-thread (Raster sub-thread). For ease of understanding, each sub-thread will be specifically described below.

[0076] Logic sub-thread: In the logic sub-thread, logic such as mini-program JS logic, mini-program framework operation node operation, style calculation, etc. can be executed. Here, the mini-program JS logic may specifically include the steps of creating a shadow tree and generating an interface rendering command. The mini-program framework operation node may specifically include the steps of generating a RuleSet and parsing the shadow tree after the execution environment receives the interface rendering command. The style calculation may specifically include the steps of performing style matching for each node of the shadow tree in the execution environment and calculating the matching style rule of each node.

[0077] Rendering sub-thread: The rendering sub-thread may include logic such as style application, layout, and painting. Here, for the matching style rules of each node matched in the logic sub-thread, the rendering sub-thread applies them, and generates a widget corresponding to the style, so as to obtain a widget tree. After that, the widget tree performs a Mount operation for each node, and then transmits it to the Flutter framework to perform layout and painting processing on it, and generates a painting interface.

[0078] Rasterization sub-thread: The drawing interface obtained by the above-mentioned Flutter framework can be submitted to the rasterization sub-thread for rasterization processing, and the final rasterization processing interface can be used by the terminal device for display.

[0079] Here, the specific implementation methods of each step in each of the above sub-threads can be referred to in the embodiments corresponding to the above-mentioned FIGS. 3 and 4, and therefore will not be described in detail again here.

[0080] It should be understood that, as seen from the above, the main rendering thread of the sub-program application (e.g., mini-program application) of the present application may include a development logic sub-thread (AppService sub-thread) and an interface rendering sub-thread (rendering sub-thread). The step of generating an interface rendering command indicated by an interaction operation and the step of creating a page element structure tree (widget tree) corresponding to the interaction operation based on the interface rendering command in the execution environment may both be performed in the development logic sub-thread. The step of calling a second communication port based on the interface rendering command in the execution environment, calling a mobile application program development framework through the second communication port, and rendering an interaction interface corresponding to the interaction operation based on the mobile application program development framework (specifically, may include a mount operation (style application), layout, and drawing) may be performed in the interface rendering sub-thread.

[0081] In the embodiment of the present application, some logic (e.g., layout, drawing) is divided and executed in the rendering sub-thread, so that the multi-core CPU of the device can be fully utilized, thereby improving the degree of parallelism and improving the fluency of interface rendering and interaction. At the same time, by adopting a single thread rather than a divided dual-thread model for rendering, the communication loss caused by frequent communication can be reduced, and the stability of the tree structure can be maintained very well, so that the rendering time and delay can be reduced while providing safe control.

[0082] Based on the above logic sub-thread and rendering sub-thread, in order to improve safety, in the present application, the basic libraries (basic libraries of mini program applications) originally running on the webview side and the built-in components may both be run under a new subdomain within the logic sub-thread, thereby isolating them from the developer's program and improving safety.

[0083] For ease of understanding, FIG. 7 is also referred to, which is a thread architecture diagram of a logic sub-thread and a rendering sub-thread provided by an embodiment of the present application. Here, the thread architecture shown in FIG. 7 is a thread architecture in which the sub-program application is a mini-program application as an example. As shown in FIG. 7, the logic layer sub-thread may include sub-domain 1, sub-domain 2, main domain, client, rendering framework, and JS development standard (a JS VM can provide a JSBinding port, and here, for example, the development language of the mini-program application is JavaScript, in this case, the development standard here may refer to the JS development standard, and when the development language of the mini-program application is another programming language, the development standard may be the corresponding development standard). In the sub-domain 1, specifically, the wxml template of the mini-program application, the mini-program built-in component, the component management framework (e.g., Exparser), and the JS communication port (e.g., the above-mentioned JSBinding port) may be included. In the sub-domain 2, specifically, the mini-program JS logic code, the basic library of the mini-program, and the JS bridge (e.g., JS Bridge) may be included. Any two of the subdomain 1, subdomain 2, and main editor may communicate with each other. The client in the logic sub-thread may specifically refer to the host application, and the rendering framework may be a new rendering framework proposed in the present application (a rendering framework that performs rendering based on a mobile application program development framework). It should be understood that in the embodiment of the present application, both the basic library (basic library of mini program application) originally running on the webview side and the built-in components are run under one new subdomain in the logic sub-thread, thereby isolating them from the developer's program and improving safety.

[0084] It should be understood that the rendering sub-thread is actually a UI sub-thread, which may include a mobile application program development framework, a rendering engine, and a JS development standard; the rendering data obtained in the logic sub-thread (e.g., a structure tree after a mounting process) may be submitted to the rendering sub-thread, which may perform rendering processing on it based on the rendering engine.

[0085] In the embodiment of the present application, some logic (e.g., layout, drawing) is divided and executed in the rendering sub-thread, so that the multi-core CPU of the device can be fully utilized, thereby improving the degree of parallelism and improving the fluency of interface rendering and interaction. At the same time, by adopting a single thread rather than a separate dual-thread model for rendering, the communication loss caused by frequent communication can be reduced, the stability of the tree structure can be maintained very well, and the rendering time and delay can be reduced while ensuring safe control.

[0086] Further, for ease of understanding, as also referred to in FIG. 8, FIG. 8 is a logic flow schematic diagram of rendering in a sub-program application provided by an embodiment of the present application. Here, the rendering logic flow shown in FIG. 8 may be a logic flow explained by taking as an example that the sub-program application is a mini-program application. As shown in FIG. 8, the rendering architecture of the mini-program application may mainly include a logic sub-thread (AppService sub-thread), a rendering sub-thread, and a rasterization sub-thread. Here, the logic sub-thread may include a style table insertion module, a style table analysis module, a style rule set generation module, a template analysis module, a structure tree creation module, and a style matching module, the rendering sub-thread may include a mount processing module, a layout module, and a drawing module, and the rasterization sub-thread may include a rasterization module and a display module. For ease of understanding, each module will be specifically described below.

[0087] For the logic sub-thread, after receiving an interface rendering command, the Exparser framework in the template parsing module can load and parse the page rendering template file, and transmit the parsing result to the structure tree creation module. The structure tree creation module can create a style shadow structure tree (shadow tree) based on the parsing result. At the same time, the style table insertion module in the logic sub-thread can insert a page style table, and the style table parsing module can parse the page style table and transmit the parsing result to the style rule set generation module. In the style rule set generation module, a style rule set (e.g., RuleSet) can be generated based on the above parsing result. Furthermore, in the style matching module in the logic sub-thread, the shadow nodes in the shadow tree can be traversed (e.g., pre-order traversal), allowing each shadow node to enter a parsing flow (inflate flow) and a style recalculation flow (RecalcStyle flow). In the RecalcStyle flow, a style can be matched from within the RuleSet based on information such as the tag, id, and class of the shadow node. The matched styles may be used as candidate element style rules, and the matched styles may determine their priority weights based on information such as style definition position, order, importance, and specificity, and the candidate styles with higher weights may be applied to the nodes. Then, in the style matching module, the style of each node may generate a corresponding widget, thereby obtaining a widget tree (page element structure tree).

[0088] For the rendering sub-thread, the above generated widget tree can be submitted to the rendering sub-thread, and a mount processing module in the rendering sub-thread can traverse each node in the widget tree (e.g., post-order traversal), and perform a Mount operation on the node one by one by traversing (e.g., a corresponding Dart object may be created in a Dart Isolate by a Dart FFI port and held by the widget), and an element mount structure tree can be generated by performing the Mount operation. The element mount structure tree can then be submitted to a layout module, in which layout processing can be performed on it based on the Flutter framework. In the drawing module, drawing processing can be performed on it based on the Flutter framework.

[0089] Regarding the rasterization sub-thread, the image obtained by the above drawing process may be submitted to the rasterization sub-thread, and the rasterization module can perform rasterization processing on it to obtain a rasterization processing interface, which can then be transmitted to the display module, and the display module can output and display the rasterization processing interface.

[0090] In the embodiment of the present application, the first communication port and the second communication port enable the host application of the sub-program application (e.g., a mini-program application) to be a communication bridge between the sub-program application and the mobile application program development framework. Thus, a mobile application program development framework (Flutter framework) can be introduced into the sub-program application based on the communication bridge, and the rendering task of the sub-program application can be well utilized to perform rendering by using the mobile application program development framework. Since the rendering flow of the Flutter framework is simple, the rendering efficiency of the sub-program application can be improved. At the same time, since the Flutter framework has the ability to build a native user interface, the quality of the interaction interface of the sub-program application rendered by the Flutter framework is almost the same as that of the native quality, and has a fairly high quality. Therefore, by introducing the mobile application program development framework, the rendering efficiency can be improved and the rendering quality can be improved at the same time in the rendering task of the sub-program application. At the same time, by dividing and executing some logic (e.g., layout, drawing) in the rendering sub-thread, the multi-core CPU of the device can be fully utilized, thereby improving the parallelism and improving the fluency of interface rendering and interaction. At the same time, by adopting a single-threaded rather than a separate dual-threaded model for rendering, the communication loss caused by frequent communication can be reduced, the stability of the tree structure can be better maintained, and the rendering time and delay can be reduced while ensuring safe control.

[0091] Further, refer to FIG. 9, which is a structural schematic diagram of a data processing device provided by an embodiment of the present application. The data processing device is a computer program (including program code) that runs on a computer device. For example, the data processing device is an application software, and the data processing device can be used to execute the method shown in FIG. 3. As shown in FIG. 9, the data processing device 1 may include a command generating module 11, a command sending module 12, a port calling module 13, a framework calling module 14, an interface rendering module 15, and an interface output module 16.

[0092] The command generating module 11 is used for generating an interface rendering command in response to an interaction operation on a sub-program application, the interface rendering command being used for rendering an interaction interface corresponding to the interaction operation; The command sending module 12 is used to send the interface rendering command to a sub-program application execution environment through a first communication port if the rendering framework indicated by the interface rendering command is a mobile application program development framework, where the execution environment of the sub-program application is a native application execution environment, and the native application is a host application of the sub-program application, the first communication port is a communication port between a first program language and a second program language, the first program language refers to the program language supported by the interface rendering command, and the second program language refers to the program language supported by the native application; The port invocation module 13 is used in the execution environment for invoking a second communication port according to an interface rendering command; The framework calling module 14 is used for calling the mobile application program development framework through a second communication port, the second communication port being a communication port between the second program language and a third program language, the third program language being a development language supported by the mobile application program development framework; The interface rendering module 15 is used for rendering an interaction interface corresponding to the interaction operation according to the mobile application program development framework; The interface output module 16 is used to output the interaction interface.

[0093] Here, the specific implementation methods of the command generating module 11, the command sending module 12, the port calling module 13, the framework calling module 14, the interface rendering module 15, and the interface output module 16 can be referred to the description of steps S101 to S104 in the embodiment corresponding to Figure 3 above, so they will not be described in detail again here.

[0094] In some embodiments, the command generation module 11 may include a template acquisition unit 111, a shadow tree generation unit 112, and a command generation unit 113.

[0095] The template acquisition unit 111 is used for acquiring a page rendering template file of the sub-program application in response to an interaction operation on the sub-program application; The shadow tree generating unit 112 is used to call a template parser, parse the page rendering template file according to the template parser to obtain a first parsing result, and generate a style shadow structure tree corresponding to the interaction operation according to the first parsing result, where the style shadow structure tree is composed of N shadow nodes, each shadow node includes element encapsulation information of a page element, N is a positive integer, and the page element refers to an element used to construct the interaction interface; The command generating unit 113 is used for generating a rendering command including the style shadow structure tree, and determining the rendering command including the style shadow structure tree as the interface rendering command indicated by the interaction operation.

[0096] Here, the specific implementation methods of the template acquisition unit 111, the shadow tree generation unit 112, and the command generation unit 113 can refer to the description of step S101 in the embodiment corresponding to Figure 3 above, so they will not be described in detail again here.

[0097] In some embodiments, the data processing device 1 may further include an element tree generating module 17 and a step executing module 18 .

[0098] The element tree generating module 17 is used in the execution environment to generate a page element structure tree corresponding to an interaction operation according to an interface rendering command, the page element structure tree being composed of N element nodes, each element node corresponding to a page element, each element node including element description data, each element description data indicating the style description data of a page element, and the page element indicating an element used to construct the interaction interface; The step execution module 18 is used for executing, in the execution environment, a step of calling a second communication port according to an interface rendering command in response to the completion of the page element structure tree creation.

[0099] Here, the specific implementation manner of the element tree generating module 17 and the step executing module 18 can refer to the description of step S103 in the embodiment corresponding to FIG. 3 above, so a detailed description will not be given here again.

[0100] In some embodiments, the interface rendering command includes a style shadow structure tree to which the interaction operations correspond, the style shadow structure tree being composed of N shadow nodes, each shadow node including element encapsulation information for one page element; The element tree generating module 17 may include a rule set obtaining unit 171 , a matching style determining unit 172 , a node style determining unit 173 , a description data determining unit 174 , and an element tree determining unit 175 .

[0101] The rule set acquiring unit 171 is used for acquiring a style rule set, the style rule set including element style rules respectively corresponding to each page component, the page component refers to the component used for configuring the application interface of the sub-program application, the application interface including the interaction interface; The matching style determination unit 172 determines the matching style of each shadow node S among the N shadow nodes. i For the style rule set, element encapsulation information K i is used to determine the element style rules that match the shadow node S i The element encapsulation information contained in is the element encapsulation information K i where N and i are positive integers. The node style determination unit 173 determines the style of each shadow node S among the N shadow nodes. i For element encapsulation information K i The element style rules that match the shadow node S i It is used to determine the style of the corresponding node element. The description data determination unit 174 determines the shadow node S according to the style conversion rules. i Transform the node element style corresponding to the shadow node S i is used to obtain element description data corresponding to When the element tree determination unit 175 determines the element description data corresponding to each of the N shadow nodes, it determines each shadow node as an element node, and determines a structure tree composed of the N element nodes containing the corresponding element description data as a page element structure tree corresponding to the interaction operation.

[0102] Here, the specific implementation methods of the rule set acquisition unit 171, the matching style determination unit 172, the node style determination unit 173, the description data determination unit 174, and the element tree determination unit 175 can be referred to the description of steps S401 to S404 in the embodiment corresponding to Figure 4 above, so they will not be described in detail again here.

[0103] In some embodiments, the rule set obtaining unit 171 may include a style table obtaining subunit 1711 and a rule set generating subunit 1712 .

[0104] The style table acquisition subunit 1711 is used for acquiring a page style configuration table, which includes attribute definition information of each page component; The rule set generation subunit 1712 is used to call a style parser, and based on the style parser, analyze the attribute definition information contained in the page style configuration table to obtain a second analysis result, and generate a style rule set based on the second analysis result.

[0105] Here, the specific implementation manner of the style table obtaining subunit 1711 and the rule set generating subunit 1712 can refer to the description of step S401 in the embodiment corresponding to FIG. 4 above, so a detailed description will not be given here again.

[0106] In some embodiments, the element encapsulation information K i is the shadow node S i The element style rules corresponding to each page component included in the style rule set include component category information, The matching style determination unit 172 may include a matching category determination subunit 1721 , a candidate style determination subunit 1722 , and a matching style determination subunit 1723 .

[0107] The matching category determination subunit 1721 determines whether the shadow node S i is used to determine the constituent category information that matches the node category information as the matching constituent category information; The candidate style determination subunit 1722 determines the element style rules corresponding to the matching constituent category information in the style rule set as the shadow node S i Used to determine candidate element style rules for The matching style determination subunit 1723 determines the element encapsulation information K based on the candidate element style rules. i The style rule is used to determine which matching element style rules match the given element.

[0108] Here, the specific implementation manners of the matching category determination subunit 1721, the candidate style determination subunit 1722, and the matching style determination subunit 1723 may refer to the description of step S402 in the embodiment corresponding to Figure 4 above, and therefore will not be described in detail again here.

[0109] In some embodiments, the number of candidate element style rules is at least two, and among the at least two candidate element style rules, there is a candidate element style rule C j where j is a positive integer, and each candidate element style rule C j In contrast, The matching style determination subunit 1723 further specifically determines the candidate element style rule C j The style priority attribute D corresponds to j It is used to obtain The matching style determination subunit 1723 further specifically determines the style priority attribute D j Based on the above, candidate element style rule C j is used to determine the priority weights corresponding to Specifically, when the matching style determination subunit 1723 determines the priority weights corresponding to the at least two candidate element style rules, the matching style rule corresponding to the maximum priority weight among the at least two priority weights is stored in the element encapsulation information K i This is used to determine which matching element style rules match.

[0110] In some embodiments, the style priority attribute D j includes a value attribute and a rare attribute, The matching style determining subunit 1723 is further specifically used for obtaining a rare value corresponding to a rare attribute; The matching style determination subunit 1723 further specifically determines, if the value attribute is a value effective attribute and the rare value is greater than a rare threshold, a first weight value that matches the rare value in the first weight interval as the candidate element style rule C j is used to determine the priority weight corresponding to The matching style determination subunit 1723 further specifically determines, if the value attribute is a value effective attribute and the rare value is less than the rare threshold, a second weight value that matches the rare value in the second weight interval as the candidate element style rule C j The weight value in the second weight range is smaller than the weight value in the first weight range; The matching style determination subunit 1723 further specifically determines, if the value attribute is a value null attribute and the rare value is greater than the rare threshold, a third weight value that matches the rare value in the third weight interval as the candidate element style rule C j The weight value in the third weight range is smaller than the weight value in the second weight range; The matching style determination subunit 1723 further specifically determines whether the value attribute is a value-invalid attribute and the rare value is less than the rare threshold value, and determines a fourth weight value that matches the rare value in the fourth weight interval as the candidate element style rule C j , and the weight value in the fourth weight interval is smaller than the weight value in the third weight interval.

[0111] In some embodiments, the interface rendering module 15 may include a program object creation unit 151 , a mount processing unit 152 , a mount tree determination unit 153 , and an interface rendering unit 154 .

[0112] The program object creation unit 151 creates each of the element nodes S iBased on the second communication port, a shadow node S in an isolated operating environment of a third programming language is i is used to create a program object corresponding to The mount processing unit 152 mounts each of the element nodes S i For shadow node S i Based on the program object corresponding to the shadow node S i A mount operation is performed on the node element style corresponding to the shadow node S i to obtain a mount object corresponding to the mount tree determination unit 153 is used for determining, when the mount objects corresponding to the N shadow nodes are determined, a structure tree composed of the N shadow nodes including the corresponding mount objects as an element mount structure tree corresponding to the interaction operation; The interface rendering unit 154 is used to perform rendering processing on the element mounting structure tree according to the mobile application program development framework to obtain an interaction interface.

[0113] Here, the specific implementation manners of the program object creation unit 151, the mount processing unit 152, the mount tree determination unit 153, and the interface rendering unit 154 may refer to the description of step S103 in the embodiment corresponding to Figure 3 above, and therefore will not be described in detail again here.

[0114] In some embodiments, the interface rendering unit 154 may include a layout subunit 1541 and a drawing subunit 1542.

[0115] The layout subunit 1541 is used for performing interface layout processing on the element mounting structure tree according to the mobile application program development framework, and obtaining interaction interface layout information of the interaction interface; The drawing sub-unit 1542 is used for performing an interface drawing process according to the interaction interface layout information, obtaining a drawing interface, and determining the drawing interface as the interaction interface.

[0116] Here, the specific implementation manner of the layout subunit 1541 and the drawing subunit 1542 can refer to the description of step S103 in the embodiment corresponding to FIG. 3 above, and thus will not be described in detail again here.

[0117] In some embodiments, interface output module 16 may include a rasterization processing unit 161 and an interface output unit 162 .

[0118] The rasterization processing unit 161 is used for performing rasterization processing on the interaction interface to obtain a rasterization processing interface; The interface output unit 162 is used for outputting the rasterization processing interface.

[0119] Here, the specific implementation manner of the rasterization processing unit 161 and the interface output unit 162 can refer to the description of step S104 in the embodiment corresponding to FIG. 3 above, and will not be described in detail again here.

[0120] In some embodiments, the main rendering thread of the above sub-program application includes a development logic sub-thread and an interface rendering sub-thread. The steps of generating an interface rendering command indicated by the interaction operation and creating a page element structure tree corresponding to the interaction operation according to the interface rendering command in the execution environment are both performed in the development logic sub-thread. The steps of calling a second communication port according to the interface rendering command, calling a mobile application program development framework through the second communication port, and rendering an interaction interface corresponding to the interaction operation according to the mobile application program development framework in the execution environment are both performed in the interface rendering sub-thread.

[0121] In the embodiment of the present application, the first communication port and the second communication port enable the host application of the sub-program application to be a communication bridge between the sub-program application and the mobile application program development framework, so that a mobile application program development framework (Flutter framework) can be introduced into the sub-program application based on the communication bridge, and the rendering task of the sub-program application can be well utilized to perform rendering by using the mobile application program development framework. Since the rendering flow of the Flutter framework is simple, the rendering efficiency of the sub-program application can be improved. At the same time, since the Flutter framework has the ability to build a native user interface, the quality of the interaction interface of the sub-program application rendered by the Flutter framework is almost the same as that of the native quality, and has a fairly high quality. Therefore, by introducing the mobile application program development framework, the rendering efficiency can be improved and the rendering quality can be improved at the same time in the rendering task of the sub-program application. At the same time, by dividing and executing some logic (e.g., layout, drawing) in the rendering sub-thread, the multi-core CPU of the device can be fully utilized, thereby improving the parallel degree and improving the fluency of interface rendering and interaction. At the same time, by adopting a single-threaded rendering model rather than a separate dual-threaded model, the communication loss caused by frequent communication can be reduced, the stability of the tree structure can be maintained very well, and the time and delay involved in rendering can be reduced while ensuring safe control.

[0122] Further, as shown in FIG. 10, FIG. 10 is a structural schematic diagram of a computer device provided by an embodiment of the present application. As shown in FIG. 10, the data processing device 1 in the embodiment corresponding to the above FIG. 9 can be applied to the above computer device 8000. The above computer device 8000 may include a processor 8001, a network port 8004, and a memory 8005, and the above computer device 8000 may further include a user port 8003 and at least one communication bus 8002. Here, the communication bus 8002 is used to realize the connection communication between these components. Here, the user port 8003 may include a display and a keyboard, and optionally the user port 8003 may further include a standard wired port and a wireless port. The network port 8004 may include a standard wired port and a wireless port (e.g., a WI-FI port). The memory 8005 may be a high-speed RAM memory, or a non-volatile memory, such as at least one magnetic disk memory. The memory 8005 may further include at least one storage device located remotely from the processor 8001. As shown in Fig. 10, the memory 8005, which is one type of computer-readable storage medium, may include an operating system, a network communication module, a user port module, and a device control application program.

[0123] 10, the network port 8004 can provide a network communication function. Meanwhile, the user port 8003 is mainly used to provide a port for input to a user. Meanwhile, the processor 8001 may be used to realize the following by calling a device control application program stored in the memory 8005.

[0124] In response to an interaction operation on the sub-program application, generate an interface rendering command indicated by the interaction operation; If the rendering framework indicated by the interface rendering command is a mobile application program development framework, sending the interface rendering command to a sub-program application execution environment through a first communication port, the sub-program application execution environment is a native application execution environment, and the native application is a host application of the sub-program application, the first communication port is a communication port between a first program language and a second program language, the first program language refers to the program language supported by the interface rendering command, and the second program language refers to the program language supported by the native application, and the mobile application program development framework is used for building a native interaction interface on a native operating system; In the execution environment, call a second communication port according to the interface rendering command, call a mobile application program development framework through the second communication port, and render an interaction interface corresponding to the interaction operation according to the mobile application program development framework, the second communication port being a communication port between the second program language and a third program language, and the third program language being a development language supported by the mobile application program development framework; Output the interaction interface.

[0125] It should be understood that in the embodiments of the present application, the described computer device 8000 may execute the description of the data processing method in the embodiment corresponding to Figures 3 to 4 above, or the description of the data processing device 1 in the embodiment corresponding to Figure 9 above, and will not be described in detail again here. In addition, the description of the beneficial effects of adopting the same method will not be described in detail again.

[0126] It should be noted that the embodiment of the present application further provides a computer-readable storage medium, in which a computer program for processing the data mentioned above is stored and executed by the computer device 8000. The computer program includes program instructions, and when the processor executes the program instructions, the description of the data processing method in the embodiment corresponding to the above-mentioned Figures 3 to 4 can be executed, so it will not be described in detail again here. In addition, the description of the beneficial effects of adopting the same method will not be described in detail again. For technical details not presented in the computer-readable storage medium embodiment of the present application, please refer to the description of the method embodiment of the present application.

[0127] The computer-readable storage medium may be the data processing device provided by any of the above embodiments, or the internal storage unit of the computer device, such as the hard disk or internal memory of the computer device. The computer-readable storage medium may be an external storage device of the computer device, such as a plug-in hard disk, a smart media card (SMC), a secure digital (SD) card, a flash card, etc., mounted on the computer device. In addition, the computer-readable storage medium may also include the internal storage unit and the external storage device of the computer device. The computer-readable storage medium is used to store the computer program and other programs and data required by the computer device. The computer-readable storage medium may also be used to temporarily store data that has already been output or is to be output.

[0128] In one aspect of the present application, a computer program product or computer program is provided, the computer program product or computer program comprising computer instructions stored in a computer readable storage medium, the computer instructions being read by a processor of a computing device from the computer readable storage medium, the processor executing the computer instructions to cause the computing device to perform a method according to one aspect of the present application.

[0129] The terms "first", "second", etc. in the description, claims, and drawings of the embodiments of the present application are used to distinguish different objects, and are not used to describe a particular order. The term "comprises" and any variations thereof are intended to cover non-exclusive inclusions. For example, a process, method, apparatus, product, or device that includes a series of steps or units is not limited to the listed steps or modules, and may optionally include unlisted steps or modules, or may optionally include other step units inherent to the process, method, apparatus, product, or device.

[0130] As those skilled in the art can recognize, each exemplary unit and algorithm step described in conjunction with the embodiments disclosed herein may be realized as electronic hardware, computer software, or a combination of both. In order to clearly describe the compatibility of hardware and software, the above description has already generally described each exemplary configuration and step according to its function. Whether these functions are implemented in either hardware or software manner depends on the specific application and design constraints of the technical solution. Those skilled in the art may realize the described functions using different methods for each specific application, but such realization should not be treated as going beyond the scope of the present application.

[0131] The method and related device provided by the embodiment of the present application are described with reference to the flow diagrams and / or structural diagrams of the method provided by the embodiment of the present application, and in particular, each flow and / or block of the flow diagrams and / or structural diagrams, and combinations of flows and / or blocks in the flow diagrams and / or block diagrams can be realized by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, and the instructions executed by the processor of the computer or other programmable data processing device can produce an apparatus used to realize the function specified in a flow or flows of the flow diagrams and / or a block or blocks of the structural diagrams. These computer program instructions can be stored in a computer-readable memory that can direct the computer or other programmable data processing device to operate in a specific manner, and the instructions stored in the computer-readable memory can produce an article of manufacture including the instruction device. The instruction device implements the functions specified in a flow or flows of the flow diagrams and / or a block or blocks of the structural diagrams. These computer program instructions may be loaded onto a computer or other programmable data processing device and execute a series of operational steps on the computer or other programmable device to produce a computer-implemented process, whereby the instructions executing on the computer or other programmable device provide the steps used to implement the functions specified in a flow or flows of the flow diagrams and / or a block or blocks of the structural diagrams.

[0132] The above is merely a preferred embodiment of the present application, and it is obvious that the scope of the claims of the present application cannot be limited by this. Therefore, any equivalent modifications made according to the claims of the present application still belong to the scope of coverage of the present application.

Claims

1. 1. A data processing method implemented by a computing device, comprising: generating an interface rendering command in response to an interaction operation on a sub-program application, the interface rendering command being used to render an interaction interface corresponding to the interaction operation; if the rendering framework indicated by the interface rendering command is a mobile application program development framework, sending the interface rendering command to the execution environment of the sub-program application through a first communication port, where the execution environment of the sub-program application is an execution environment of a native application, the native application is a host application of the sub-program application, the first communication port is a communication port between a first program language and a second program language, the first program language refers to a program language supported by the interface rendering command, the second program language refers to a program language supported by the native application, and the mobile application program development framework is used for building a native interaction interface on a native operating system; In the execution environment, calling a second communication port according to the interface rendering command, calling the mobile application program development framework through the second communication port, and rendering an interaction interface corresponding to the interaction operation according to the mobile application program development framework, the second communication port being a communication port between the second program language and a third program language, and the third program language being a development language supported by the mobile application program development framework; and outputting the interaction interface.

2. The step of generating an interface rendering command in response to an interaction operation on a sub-program application, the interface rendering command being instructed by the interaction operation, comprises: obtaining a page rendering template file of the sub-program application in response to an interaction operation on the sub-program application; calling a template parser, and parsing the page rendering template file according to the template parser to obtain a first parsing result; and generating a style shadow structure tree corresponding to the interaction operation according to the first parsing result, the style shadow structure tree being composed of N shadow nodes, each shadow node including element encapsulation information of a page element, N being a positive integer, and the page element indicating an element used to construct the interaction interface; The method of claim 1 , further comprising: generating a rendering command including the style shadow structure tree; and determining the rendering command including the style shadow structure tree as an interface rendering command indicated by the interaction operation.

3. creating, in the execution environment, a page element structure tree corresponding to the interaction operation according to the interface rendering command, the page element structure tree being composed of N element nodes, each element node corresponding to a page element, each element node including element description data used for describing style description data of the page element corresponding to the element node, the page element pointing to an element used for constructing the interaction interface; 2. The method of claim 1, further comprising: in response to completion of the page element structure tree creation, performing, in the execution environment, the step of invoking a second communication port based on the interface rendering command.

4. The interface rendering command includes a style shadow structure tree to which the interaction operation corresponds, the style shadow structure tree being composed of N shadow nodes, each shadow node including element encapsulation information of one page element; In the execution environment, creating a page element structure tree corresponding to the interaction operation according to the interface rendering command includes: obtaining a set of style rules, the set of style rules including element style rules respectively corresponding to each page component, the page components refer to components used to configure an application interface of the sub-program application, the application interface including the interaction interface; Each shadow node S among the N shadow nodes ｉ , performing the following operations on the shadow node S: ｉ The element encapsulation information included in ｉ where N and i are both positive integers, and the operation is In the style rule set, the element encapsulation information K ｉ and assigning the matching element style rules to the shadow node S. ｉ An operation of determining the node element style corresponding to According to the style conversion rules, the shadow node S ｉ Transform the node element style corresponding to the shadow node S ｉ obtaining element description data corresponding to the 4. The method of claim 3, further comprising: when element description data corresponding to each of the N shadow nodes is determined, determining each of the shadow nodes as an element node, and determining a structure tree consisting of the N element nodes including the corresponding element description data as a page element structure tree corresponding to the interaction operation.

5. The step of obtaining a set of style rules includes: A step of acquiring a page style configuration table, the page style configuration table including attribute definition information of each of the page components; 5. The method of claim 4, further comprising the steps of: calling a style parser; analyzing attribute definition information included in the page style configuration table based on the style parser to obtain a second analysis result; and generating the style rule set based on the second analysis result.

6. The element encapsulation information K ｉ The shadow node S ｉ The element style rules corresponding to each page component included in the style rule set include configuration category information, In the style rule set, the element encapsulation information K ｉ Determining which element style rules match Among the constituent category information included in each element style rule in the style rule set, the shadow node S ｉ determining configuration category information that matches the node category information as matching configuration category information; The element style rule corresponding to the matching configuration category information in the style rule set is defined as the shadow node S ｉ determining the element as a candidate element style rule; Based on the candidate element style rules, the element encapsulation information K ｉ and determining the element style rules that match the element style rules.

7. the number of the candidate element style rules is at least two; Based on the candidate element style rules, the element encapsulation information K ｉ determining the element style rules that match j is a positive integer, and each candidate element style rule C ｊ performing the following operations on The candidate element style rule C ｊ The style priority attribute D corresponding to ｊ and The style priority attribute D ｊ Based on the candidate element style rule C ｊ determining a priority weight corresponding to each of the plurality of nodes; When the priority weights corresponding to the at least two candidate element style rules are determined, the candidate element style rule having the maximum priority weight among the at least two priority weights is defined as the element encapsulation information K ｉ and determining as the element style rule that matches

8. The style priority attribute D ｊ includes a value attribute and a rare attribute, The style priority attribute D ｊ Based on the candidate element style rule C ｊ The step of determining a priority weight corresponding to obtaining a rare value corresponding to the rare attribute; If the value attribute is a value effective attribute and the rare value is greater than a rare threshold, a first weight value that matches the rare value in a first weight interval is set as the candidate element style rule C. ｊ as a priority weight corresponding to the If the value attribute is a value effective attribute and the rare value is less than the rare threshold, a second weight value that matches the rare value in a second weight interval is determined as the candidate element style rule C. ｊ a step of determining as a priority weight a weight value corresponding to the first weight interval, the weight value being smaller than the weight value in the second weight interval; If the value attribute is a value null attribute and the rare value is greater than a rare threshold, a third weight value that matches the rare value in a third weight interval is added to the candidate element style rule C. ｊ a step of determining as a priority weight a weight value corresponding to the first weight interval, the weight value being less than the weight value in the second weight interval; If the value attribute is a value null attribute and the rare value is less than a rare threshold, a fourth weight value that matches the rare value in a fourth weight interval is set as the candidate element style rule C. ｊ wherein weight values ​​in the fourth weight interval are less than weight values ​​in the third weight interval.

9. Rendering an interaction interface corresponding to the interaction operation based on the mobile application program development framework includes: Each element node S among the N element nodes ｉ performing the following operations on The element node S is generated in an isolated operating environment of the third programming language based on the second communication port. ｉ An operation to create a program object corresponding to The element node S ｉ Based on the program object corresponding to the element node S ｉ A mount operation process is performed on the element description data corresponding to the element node S ｉ and obtaining a mount object corresponding to the mount object. determining, when the mount objects corresponding to the N element nodes are determined, a structure tree composed of the N element nodes including the corresponding mount objects as an element mount structure tree corresponding to the interaction operation; The method of claim 4 , further comprising: performing a rendering process on the element mount structure tree based on the mobile application program development framework to obtain the interaction interface.

10. performing a rendering process on the element mounting structure tree based on the mobile application program development framework to obtain the interaction interface; performing an interface layout process on the element mounting structure tree according to the mobile application program development framework to obtain interaction interface layout information of the interaction interface; The method of claim 9 , further comprising: performing an interface drawing according to the interaction interface layout information to obtain a drawing interface; and determining the drawing interface as the interaction interface.

11. The step of outputting the interaction interface includes: performing a rasterization process on the interaction interface to obtain a rasterization process interface; and outputting the rasterization interface.

12. 2. The method of claim 1, wherein the main rendering thread of the sub-program application includes a development logic sub-thread and an interface rendering sub-thread, and the steps of generating an interface rendering command indicated by the interaction operation and creating a page element structure tree corresponding to the interaction operation based on the interface rendering command in the execution environment are both performed in the development logic sub-thread, and the steps of calling a second communication port based on the interface rendering command, calling the mobile application program development framework through the second communication port, and rendering an interaction interface corresponding to the interaction operation based on the mobile application program development framework in the execution environment are performed in the interface rendering sub-thread.

13. 1. A data processing device, comprising: The method includes: a command generating module, a command sending module, a port calling module, an interface rendering module, and an interface output module; The command generating module is used for generating an interface rendering command in response to an interaction operation on a sub-program application, the interface rendering command being used for rendering an interaction interface corresponding to the interaction operation; If the rendering framework indicated by the interface rendering command is a mobile application program development framework, the command sending module sends the interface rendering command to the execution environment of the sub-program application through a first communication port, the execution environment of the sub-program application is an execution environment of a native application, the native application is a host application of the sub-program application, the first communication port is a communication port between a first program language and a second program language, the first program language refers to a program language supported by the interface rendering command, and the second program language refers to a program language supported by the native application; the port invocation module is used to invoke a second communication port according to the interface rendering command in the execution environment; the interface rendering module is used for calling the mobile application program development framework through the second communication port, and rendering an interaction interface corresponding to the interaction operation according to the mobile application program development framework, the second communication port being a communication port between the second program language and a third program language, the third program language being a development language supported by the mobile application program development framework; The interface output module is used for outputting the interaction interface.

14. A computer device comprising a processor, a memory, and a network port, A computer device, wherein the processor is coupled to the memory and the network port, the network port is used for providing a network communication function, the memory is used for storing a computer program, and the processor is used for calling the computer program to cause the computer device to execute a method according to any one of claims 1 to 12.

15. A computer program adapted to be read and executed by a processor to cause a computing device having said processor to carry out the method according to any one of claims 1 to 12.

Images