Data processing method, device, equipment and readable storage medium

Abstract

The present application discloses a data processing method, apparatus, device, and readable storage medium, the method comprising: responding to an interactive operation on a subroutine application, generating an interface rendering instruction indicated by the interactive operation; if the rendering framework indicated by the interface rendering instruction is a mobile application development framework, sending the interface rendering instruction to the execution environment of the subroutine application via a first communication interface; in the execution environment, calling a second communication interface based on the interface rendering instruction, calling the mobile application development framework via the second communication interface, and rendering an interactive interface corresponding to the interactive operation based on the mobile application development framework; the second communication interface is a communication interface between a second programming language and a third programming language, and the third programming language is a development language corresponding to the mobile application development framework; and outputting the interactive interface. By adopting the present application, in the rendering business of the subroutine application, the rendering efficiency can be improved while the rendering quality can be improved.

Description

Technical Field

[0001] 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 Art

[0002] With the continuous development of computer technology, a variety of applications (APPs) have emerged one after another. These applications need to be installed on smart terminal devices (such as smartphones) to be used. However, installing a large number of APPs on smart terminal devices will occupy a large amount of memory, which may affect the operation of smart terminal devices.

[0003] To address these issues, sub-program applications (such as mini-programs) have emerged. These applications are ready to use without downloading or installing. Currently, as their use becomes increasingly widespread, the demand for them is also increasing. For example, the quality requirements for the display pages of sub-program applications are becoming increasingly stringent.

[0004] However, in the current rendering business of sub-program applications (such as mini-program applications), the rendering engine used has the problems of long rendering pipeline and large memory usage, which not only brings the problem of low rendering efficiency, but also causes the quality of the rendered display page on the smart terminal device to still fail to meet the quality requirements and the quality is not high enough. Summary of the Invention

[0005] The embodiments of the present application provide a data processing method, apparatus, device, and readable storage medium, which can improve rendering efficiency and rendering quality in the rendering business of subroutine applications.

[0006] On the one hand, an embodiment of the present application provides a data processing method, including:

[0007] In response to an interactive operation on a subprogram application, generating an interface rendering instruction indicated by the interactive operation;

[0008] If the rendering framework indicated by the interface rendering instruction is a mobile application development framework, the interface rendering instruction is sent to the execution environment of the subroutine application via the first communication interface; the execution environment of the subroutine application is the execution environment of the native application, and the native application is the host application of the subroutine application; the first communication interface is a communication interface between a first programming language and a second programming language, the first programming language is the programming language corresponding to the interface rendering instruction, and the second programming language is the programming language corresponding to the native application; the mobile application development framework is used to build a native interactive interface on the native operating system;

[0009] In the execution environment, a second communication interface is called based on the interface rendering instruction, a mobile application development framework is called through the second communication interface, and an interactive interface corresponding to the interactive operation is rendered based on the mobile application development framework; the second communication interface is a communication interface between the second programming language and the third programming language, and the third programming language is the development language corresponding to the mobile application development framework;

[0010] Output interactive interface.

[0011] In one aspect, an embodiment of the present application provides a data processing device, including:

[0012] An instruction generation module, configured to respond to an interactive operation on a subprogram application and generate an interface rendering instruction indicated by the interactive operation;

[0013] an instruction sending module configured to send the interface rendering instruction to the execution environment of the subroutine application via a first communication interface if the rendering framework indicated by the interface rendering instruction is a mobile application development framework; the execution environment of the subroutine application is the execution environment of the native application, and the native application is the host application of the subroutine application; the first communication interface is a communication interface between a first programming language and a second programming language, the first programming language being the programming language corresponding to the interface rendering instruction, and the second programming language being the programming language corresponding to the native application;

[0014] An interface calling module, configured to call the second communication interface based on the interface rendering instruction in the execution environment;

[0015] A framework calling module, configured to call the mobile application development framework via a second communication interface; the second communication interface being a communication interface between a second programming language and a third programming language, the third programming language being a development language corresponding to the mobile application development framework;

[0016] The interface rendering module is used to render the interactive interface corresponding to the interactive operation based on the mobile application development framework;

[0017] The interface output module is used to output the interactive interface.

[0018] In one embodiment, the instruction generation module may include:

[0019] A template acquisition unit, configured to respond to an interactive operation on a subprogram application and acquire a page rendering template file of the subprogram application;

[0020] The shadow tree generation unit is used to call the template parser, parse the page rendering template file based on the template parser, and generate a style shadow structure tree corresponding to the interactive operation based on the parsing result; the style shadow structure tree is composed of N shadow nodes, each shadow node contains the element encapsulation information of a page element; N is a positive integer; the page element refers to the element used to build the interactive interface;

[0021] The instruction generation unit is used to generate a rendering instruction containing a style shadow structure tree, and determine the rendering instruction containing the style shadow structure tree as the interface rendering instruction indicated by the interactive operation.

[0022] In one embodiment, the data processing device may further include:

[0023] The element tree generation module is used to create a page element structure tree corresponding to interactive operations based on interface rendering instructions in the execution environment. The page element structure tree consists of N element nodes, one element node corresponds to one page element. Each element node contains element description data, and an element description data refers to the style description data of a page element. A page element is an element used to build an interactive interface.

[0024] The step execution module is used to execute the step of calling the second communication interface based on the interface rendering instruction in the execution environment if the page element structure tree is successfully created.

[0025] In one embodiment, the interface rendering instruction includes a style shadow structure tree corresponding to the interactive operation. The style shadow structure tree is composed of N shadow nodes. Each shadow node includes element encapsulation information of a page element. The N shadow nodes include shadow nodes S i , shadow node S i The element encapsulation information contained is element encapsulation information K i ; N, i are both positive integers;

[0026] The element tree generation module may include:

[0027] A rule set acquisition unit is used to acquire a style rule set; the style rule set includes element style rules corresponding to each page configuration element in the page configuration element set; the page configuration element refers to a configuration element used to constitute the application interface of the subprogram application, and the application interface includes an interactive interface;

[0028] Matching style determination unit, used to determine the element encapsulation information K in the style rule set i Matching element style rules;

[0029] A node style determination unit, configured to determine a matching element style rule as a shadow node S i Corresponding node element style;

[0030] Description data determination unit, used to convert shadow node S according to style conversion standard i The corresponding node element style is converted to obtain the shadow node S i The corresponding element describes the data;

[0031] The element tree determination unit is used to determine each shadow node as an element node when the element description data corresponding to N shadow nodes are determined, and to determine the structure tree composed of N element nodes containing the corresponding element description data as the page element structure tree corresponding to the interactive operation.

[0032] In one embodiment, the rule set acquisition unit may include:

[0033] The style sheet acquisition subunit is used to acquire the page style configuration sheet; the page style configuration sheet contains the attribute definition information of each page configuration element;

[0034] The rule set generation subunit is used to call the style parser, parse the attribute definition information contained in the page style configuration table based on the style parser, and generate a style rule set based on the parsing result.

[0035] In one embodiment, the element encapsulation information K i Including shadow node S i Node category information; the element style rules corresponding to each page configuration element included in the style rule set include configuration category information;

[0036] The matching pattern determination unit may include:

[0037] a matching category determination subunit, configured to determine, in the configuration category information set corresponding to the style rule set, configuration category information that matches the node category information as matching configuration category information;

[0038] The candidate style determination subunit is used to determine the element style rule corresponding to the matching configuration category information in the style rule set as a candidate element style rule;

[0039] The matching style determination subunit is used to determine the element encapsulation information K according to the candidate element style rules i Matches the style rules of the matched elements.

[0040] In one embodiment, the number of candidate element style rules is at least two; the at least two candidate element style rules include candidate element style rule C j , j is a positive integer;

[0041] The matching style determination subunit is also specifically used to obtain the candidate element style rule Cj The corresponding style priority attribute D j ;

[0042] Matching pattern determination subunit, also specifically used to determine the style priority attribute D j , determine the candidate element style rule C j Corresponding priority weight;

[0043] The matching style determination subunit is further specifically configured to, when determining the priority weights corresponding to at least two candidate element style rules, determine the maximum priority weight among the at least two priority weights as the target priority weight, and determine the candidate element style rule corresponding to the target priority weight as the one corresponding to the element encapsulation information K. i Matches the style rules of the matched elements.

[0044] In one embodiment, the style priority attribute D j Including value attributes and rare attributes;

[0045] The matching pattern determination subunit is further specifically used to obtain a rare value corresponding to a rare attribute;

[0046] The matching pattern determination subunit is further specifically configured to determine the weight value matching the rarity value in the first weight interval as the candidate element style rule C if the value attribute is a valid value attribute and the rarity value is greater than the rarity threshold. j Corresponding priority weight;

[0047] The matching pattern determination subunit is further specifically configured to determine the weight value matching the rarity value in the second weight interval as the candidate element style rule C if the value attribute is a value-effective attribute and the rarity value is less than the rarity threshold. j corresponding priority weights; the second weight interval is smaller than the first weight interval;

[0048] The matching style determination subunit is further specifically configured to determine the weight value matching the rarity value in the third weight interval as the candidate element style rule C if the value attribute is an invalid value attribute and the rarity value is greater than the rarity threshold. j corresponding priority weights; the third weight interval is smaller than the second weight interval;

[0049] The matching pattern determination subunit is further specifically configured to determine the weight value matching the rarity value in the fourth weight interval as the candidate element style rule C if the value attribute is an invalid value attribute and the rarity value is less than the rarity threshold. j Corresponding priority weights; the fourth weight interval is smaller than the third weight interval.

[0050] In one embodiment, the interface rendering module may include:

[0051] A program object creation unit is configured to create a shadow node S in an isolated operating environment of a third program language based on the second communication interface. i The corresponding program object;

[0052] Mounting processing unit for shadow node S i The corresponding program object, for the shadow node S i The corresponding node element style is mounted and processed to obtain the shadow node S i The corresponding mount object;

[0053] The mount tree determining unit is configured to, when the mount objects corresponding to the N shadow nodes are determined, determine the structure tree composed of the N shadow nodes containing the corresponding mount objects as the element mount structure tree corresponding to the interactive operation;

[0054] The interface rendering unit is used to render the element mounting structure tree based on the mobile application development framework to obtain an interactive interface.

[0055] In one embodiment, the interface rendering unit may include:

[0056] The layout subunit is used to perform interface layout processing on the element mounting structure tree based on the mobile application development framework to obtain interactive interface layout information of the interactive interface;

[0057] The drawing subunit is used to perform interface drawing processing according to the interactive interface layout information to obtain a drawing interface, and determine the drawing interface as the interactive interface.

[0058] In one embodiment, the interface output module may include:

[0059] A raster processing unit, used for performing rasterization processing on the interactive interface to obtain a raster processing interface;

[0060] The interface output unit is used to output the raster processing interface.

[0061] In one embodiment, the total rendering thread of the above-mentioned subroutine application includes a development logic sub-thread and an interface rendering sub-thread. The steps of generating interface rendering instructions indicated by the interactive operation and creating a page element structure tree corresponding to the interactive operation based on the interface rendering instructions in the execution environment are all executed in the development logic sub-thread; in the execution environment, the steps of calling the second communication interface based on the interface rendering instructions, calling the mobile application development framework through the second communication interface, and rendering the interactive interface corresponding to the interactive operation based on the mobile application development framework are executed in the interface rendering sub-thread.

[0062] In one aspect, an embodiment of the present application provides a computer device, including: a processor and a memory;

[0063] The memory stores a computer program, and when the computer program is executed by the processor, the processor executes the method in the embodiment of the present application.

[0064] On one hand, an embodiment of the present application provides a computer-readable storage medium, which stores a computer program. The computer program includes program instructions. When the program instructions are executed by a processor, the method in the embodiment of the present application is executed.

[0065] In one aspect of the present application, a computer program product is provided, comprising a computer program stored in a computer-readable storage medium. A processor of a computer device reads the computer program from the computer-readable storage medium and executes the computer program, causing the computer device to perform the method provided in one aspect of the embodiments of the present application.

[0066] In an embodiment of the present application, a mobile application development framework is introduced in the interface rendering business of the subroutine application. Specifically, for the interactive operation of the subroutine application, an interface rendering instruction indicated by the interactive operation can be generated in response to the interactive operation; if the rendering framework indicated by the interface rendering instruction is the above-mentioned mobile application development framework, the interface rendering instruction can be sent to the execution environment of the subroutine application through the first communication interface. It can be understood that the subroutine application is an application hosted in other native applications (applications developed based on a second programming language, the native application corresponds to the second programming language, and the native application can be called a host application) for execution. The execution environment of the subroutine application can actually be understood as the execution environment of the host application, and the programming language corresponding to the interface rendering instruction is the first programming language. If communication between the two languages ​​is desired, communication can be carried out through the first communication interface. Subsequently, in the execution environment, the second communication interface can be called based on the above-mentioned interface rendering instruction, and the mobile application development framework can be called through the second communication interface, and the interactive interface corresponding to the interactive operation can be rendered based on the mobile application development framework. Among them, since the mobile application development framework is a framework developed based on a third programming language, in order to be able to call the mobile application development framework, communication can be carried out between the second programming language and the third programming language based on the second communication interface. Then, through the first communication interface and the second communication interface, the execution environment of the native application can be called a communication bridge, which can enable communication between the first programming language and the second programming language, so that the subroutine application developed based on the first programming language can effectively call the mobile application development framework. It should be understood that the mobile application development framework is a framework for building a native interactive interface on the native operating system. It has the characteristics of a simple rendering process and thus has efficient rendering performance. At the same time, the interface it renders is comparable to the native interface and has a very high rendering quality. After the mobile application development framework is introduced into the interface rendering business of the subroutine application, the efficient rendering performance of the mobile application development framework can be used to provide the interactive interface of the subroutine application with a display quality close to the native, which can improve the rendering efficiency and the rendering quality in the interface rendering business of the subroutine application. BRIEF DESCRIPTION OF THE DRAWINGS

[0067] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0068] Figure 1This is a network architecture diagram provided by an embodiment of the present application;

[0069] Figure 2 This is a schematic diagram of a scenario for performing interface rendering on a subroutine application provided in an embodiment of the present application;

[0070] Figure 3 This is a flow chart of a data processing method provided in an embodiment of the present application;

[0071] Figure 4 This is a schematic diagram of the process of generating a structure tree provided by an embodiment of the present application;

[0072] Figure 5 This is an architecture diagram of cross-language communication provided by an embodiment of the present application;

[0073] Figure 6 This is a schematic diagram of a rendering thread framework provided by an embodiment of the present application;

[0074] Figure 7 This is a thread architecture diagram of a logic sub-thread and a rendering sub-thread provided in an embodiment of the present application;

[0075] Figure 8 This is a logical flow diagram of rendering a subroutine application provided by an embodiment of the present application;

[0076] Figure 9 is a structural diagram of a data processing device provided in an embodiment of the present application;

[0077] Figure 10 It is a structural diagram of a computer device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0078] The following will be combined with the drawings in the embodiments of this application to clearly and completely describe the technical solutions in the embodiments of this application. Obviously, the embodiments described are only part of the embodiments of this application, not all of the embodiments. Based on the embodiments in this application, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of this application.

[0079] The solutions provided in the embodiments of the present application involve related technical concepts such as native applications and subroutine applications. For ease of understanding, the following will give priority to explaining related technical concepts such as native applications and subroutine applications.

[0080] Sub-program application: It is an application that can be used without downloading and installing. Sub-program application can achieve the same functions as native application without downloading and installing. Sub-program application can be called by other program applications. After achieving a certain function, the sub-program application will automatically return to the calling program. Normally, it can run parasitically in another native application. When the sub-program application runs parasitically in a native application, the parasitic native application can be called the host application of the sub-program application. For example, the host application can be but not limited to an independently running social application (such as an instant messaging application). The mini-program application can be one of the sub-program applications. For example, the shopping application, real-time ordering application, etc. that are hosted in the native application can all serve as sub-program applications.

[0081] Native applications: Native solutions or technologies refer to applications that run directly on the current operating system (such as iOS, Android, etc.). For example, native applications include, but are not limited to, independently running audio and video applications, social applications, shopping applications, etc.

[0082] It should be understood that as the scope of use of sub-program applications becomes wider and wider, the requirements for sub-program applications are also getting higher and higher. For example, with the increasing development of sub-program applications, users have higher and higher requirements for the rendering quality of the display pages of mini-program applications, requiring the rendering quality of mini-program applications to be comparable to native ones. In order to improve the rendering quality of these sub-program applications, including mini-program applications, the present application proposes a data processing method (actually an interface rendering method for sub-program applications). Specifically, the present application can introduce a mobile application development framework into the rendering business of the sub-program application, and render the interface of the sub-program application through the mobile application development framework. Among them, the mobile application development framework here can refer to the Flutter framework. For ease of understanding, the Flutter framework will be explained below.

[0083] Flutter framework: The Flutter framework can refer to a cross-platform mobile UI (User Interface) framework that can quickly build high-quality native user interfaces on native operating systems (such as iOS and Android systems). (Since the native user interface can refer to the interface used to interact with the user, the native user interface can also be called the native interactive interface.) Developers can use the Dart language to develop Flutter applications (native applications).

[0084] For easier understanding, see Figure 1 , Figure 1 This is a network architecture diagram provided by the embodiment of this application. Figure 1As shown, the network architecture may include a service server 1000 and a terminal device cluster. The terminal device cluster may include one or more terminal devices. The number of terminal devices is not limited here. Figure 1 As shown, the plurality of terminal devices may include a terminal device 100a, a terminal device 100b, a terminal device 100c, ..., a terminal device 100n; Figure 1 As shown, the terminal device 100a, the terminal device 100b, the terminal device 100c, ..., the terminal device 100n can respectively establish a network connection with the service server 1000, so that each terminal device can exchange data with the service server 1000 through the network connection.

[0085] It is understandable that if Figure 1 Each terminal device shown can be installed with a target application. When the target application is running in each terminal device, it can be respectively connected to the target application. Figure 1 The business servers 1000 shown in the figure exchange data with each other, so that the business servers 1000 can receive business data from each terminal device. The target application may include an application that has the function of displaying data information such as text, images, audio, and video. For example, the application may be a social application, an educational application, a video application, an entertainment application, etc. The application may be a standalone application that can be installed on the terminal device and run on the current operating system of the terminal device. The application may also be called a native application.

[0086] In the embodiment of the present application, a terminal device can be selected from multiple terminal devices as the target terminal device. The terminal device may include: smart phones, tablet computers, laptop computers, desktop computers, smart TVs, smart speakers, desktop computers, smart watches, smart cars, smart voice interaction devices, smart home appliances and other smart terminals with multimedia data processing functions (for example, video data playback function, music data playback function, text data playback function), but is not limited to these. For example, in the embodiment of the present application, Figure 1 The terminal device 100a shown is used as the target terminal device. The target terminal device can be integrated with the above-mentioned target application. In this case, the target terminal device can exchange data with the business server 1000 through the target application. The business server 1000 in this application can obtain business data based on these applications. For example, the business server 1000 can obtain business data through the user's bound account. The bound account can refer to the account bound by the user in the application; the user can log in to the application, upload data, obtain data, etc. through his corresponding bound account, and the business server can also obtain the user's login status, uploaded data, send data to the user, etc. through its bound account.

[0087] It should be understood that the target application (such as a social application) in this application can serve as the host application of a sub-program application (such as a mini-program application). The sub-program application can run parasitically in the target application. When the sub-program application runs in the target application, the target terminal device can exchange data with the business server 1000 through the sub-program application in the target application. The business server 1000 in this application can obtain business data based on these applications. For example, the business server 1000 can obtain business data through the user's bound account. Among them, the bound account can refer to the account bound by the user in the target application (or the account bound by the user in the sub-program application); the user can log in to the application, upload data, obtain data, etc. through his corresponding bound account, and the business server can also obtain the user's login status, uploaded data, send data to the user, etc. through its bound account.

[0088] It should be understood that when a user generates an interactive operation in a sub-program application, the terminal device can send the interactive operation to the business server 1000. The business server 1000 in this application can perform interface rendering based on the rendering framework (including the above-mentioned Flutter framework), and after obtaining the interactive interface corresponding to the interactive operation, return the interactive interface to the terminal device, and the terminal device can output and display the interactive interface. Specifically, when a user generates an interactive operation in a sub-program application (such as starting a sub-program application, viewing the details of an item, etc.), the terminal device can respond to this interactive operation on the sub-program application and generate an interface rendering instruction indicated by the interactive operation; then, the terminal device can send the interface rendering instruction to the business server 1000, and the business server 1000 can query what kind of framework the rendering framework indicated in the interface rendering instruction is. If the rendering framework indicated by the interface rendering instruction is the above-mentioned mobile application development framework (such as the above-mentioned Flutter framework), the business server can send the interface rendering instruction to the execution environment corresponding to the sub-program application through the first communication interface (which can be understood as the execution environment of the host application, and the execution environment can be understood as the execution environment of the development program language of the host application. For example, if the host application is developed in C / C++, then the The execution environment of the host application can be understood as the execution environment of C / C++, so the execution environment of the subroutine application can also be understood as the execution environment of C / C++); wherein, the above-mentioned first communication interface can be understood as the communication interface between the development programming language of the subroutine application (such as the applet application) (which can be called the first programming language) and the development programming language of the host application (which can be called the second programming language). For example, taking the subroutine application as a applet application as an example, if the first programming language for developing the applet application is JavaScript, and the second programming language is C / C++, communication can be carried out between JavaScript and C / C++ through the JSBinding interface (for example, JavaScript and C / C++ can call each other through the JSBinding interface), then the JSBinding interface can serve as the above-mentioned first communication interface.

[0089] Furthermore, in the execution environment, a second communication interface can be called based on the above-mentioned interface rendering instruction, wherein the second communication interface can be a communication interface between the development programming language of the host application (which can be referred to as the second programming language) and the development programming language of the mobile application framework (such as the development programming language of the Flutter framework, which can be referred to as the third programming language). For example, if the second programming language is C / C++ and the third programming language is Dart, communication can be carried out between C / C++ and Dart through two sets of interfaces that communicate with native C / C++, namely the native extension interface (Dart API) and Dart FFI (for example, Dart and C / C++ can call each other through the Dart API or Dart FFI), then the Dart API or Dart FFI can serve as the above-mentioned second communication interface.

[0090] It should be understood that, in the execution environment, the mobile application development framework can be called via the second communication interface, and the interactive interface corresponding to the interactive operation can be rendered based on the mobile application development framework. Subsequently, the business server 1000 can return the interactive interface to the terminal device, and the terminal device can display the interactive interface on the terminal display interface (i.e., output the interactive interface).

[0091] It should be understood that, through the two aforementioned first and second communication interfaces, the host application of a sub-program application (such as a mini-program application) can serve as a communication bridge between the sub-program application and the mobile application development framework. This allows the mobile application development framework (Flutter framework) to be introduced into the sub-program application based on the communication bridge, allowing the mobile application development framework to be effectively utilized for rendering within the sub-program application's rendering operations. Due to the Flutter framework's simplified rendering process, the rendering efficiency of the sub-program application can be improved. Furthermore, because the Flutter framework has the ability to build native user interfaces, the interactive interface of the sub-program application rendered using the Flutter framework is of comparable quality to the native interface, possessing a very high quality. Therefore, by introducing the mobile application development framework, rendering efficiency and quality can be improved within the sub-program application's rendering operations.

[0092] It is understood that the methods provided in the embodiments of the present application can be executed by computer devices, including but not limited to terminal devices or business servers. The business server can be an independent physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides 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.

[0093] The user terminal and the service server may be connected directly or indirectly via wired or wireless communication, which is not limited in this application.

[0094] It should be noted that in the specific implementation of this application, user information, user data, and other user-related data (such as the user's bound account, user-uploaded data, etc.) are only obtained and processed after obtaining the permissions granted by the user. In other words, when the embodiments of this application are applied to specific products or technologies, user permission or consent is required, and the collection, use, and processing of relevant data must comply with the relevant laws, regulations, and standards of the relevant countries and regions.

[0095] It should be noted that in the embodiments of the present application, descriptions involving "B corresponding to A," "B corresponding to A," or "B corresponds to A," or "determining B based on A" may all indicate that A and B are associated. In addition, determining B based on A does not mean determining B based solely on A; it may also mean determining B based on A and other information.

[0096] Optionally, it is understood that the aforementioned computer device (such as the aforementioned service server 1000, terminal device 100a, terminal device 100b, etc.) can be a node in a distributed system, wherein the distributed system can be a blockchain system, which can be formed by connecting multiple nodes via network communications. The nodes can form a peer-to-peer (P2P) network. The P2P protocol is an application layer protocol that runs on top of the Transmission Control Protocol (TCP). In a distributed system, any computer device, such as a service server, terminal device, or other electronic device, can become a node in the blockchain system by joining the peer-to-peer network. To facilitate understanding, the concept of blockchain is explained below: Blockchain is a novel application model of computer technologies, including distributed data storage, peer-to-peer transmission, consensus mechanisms, and encryption algorithms. It is primarily used to organize data in chronological order and encrypt it into a ledger to prevent tampering and forgery. It also allows for data verification, storage, and updates. When the computer device is a blockchain node, due to the tamper-proof and anti-counterfeiting characteristics of the blockchain, the data in this application (such as user-uploaded data, rendered interactive interfaces, etc.) can be authentic and secure, so that the results obtained after relevant data processing based on this data can be more reliable.

[0097] The embodiments of this application can be applied to various scenarios, including but not limited to cloud technology, artificial intelligence, smart transportation, assisted driving, etc. For ease of understanding, please refer to Figure 2 , Figure 2 This is a schematic diagram of a scenario for rendering an interface for a subroutine application provided by an embodiment of the present application. Figure 2 The business server shown may be the business server 1000 described above, and as Figure 2 The terminal device M shown can be Figure 1 Any terminal device selected from the terminal device cluster of the corresponding embodiment, for example, the terminal device may be the above-mentioned terminal device 100b.

[0098] The embodiment of the present application is described by taking the sub-program application as an example of a mini-program application. Specifically, the embodiment of the present application takes a social application (native application) as the host application of a game application (the game application is a mini-program application), and the user can start and run the game application through the social application as an example. Figure 2As shown, after user m launches a game application, assuming that their player character is currently parachuting and their parachute is not yet open, they can click on the parachute opening control to open it. When user m clicks on the parachute opening control, this click triggering action can be understood as an interactive operation. Terminal device M can generate an interface rendering instruction for this interactive operation and send it to the service server. Subsequently, upon receiving the interface rendering instruction, the service server can also render the service data triggered by the parachute opening control, thereby obtaining a rendered image (rendering layer) as the interactive interface corresponding to the interactive operation.

[0099] For example, after the business server receives the interface rendering instruction, if the rendering framework indicated by the interface rendering instruction is a mobile application development framework (here taking the Flutter framework as an example), the business server can obtain the development programming language of the game application (here taking JavaScript as an example), and the development programming language of the social application (here taking C / C++ as an example), and obtain the communication interface between the two development programming languages. Based on the communication interface, the business server can send the interface rendering instruction to the execution environment of the host application; then, in the execution environment, the development programming language of the Flutter framework (here taking Dart as an example) can be obtained, and the communication interface between the development programming language of the social application and the development programming language of the Flutter framework can be obtained. Based on the communication interface, the Flutter framework can be called, and based on the Flutter framework, the business data triggered by the umbrella opening control can be rendered, and the following is obtained. Figure 2 The rendering layer (interactive interface) shown.

[0100] Furthermore, the business server can return the rendering layer to the terminal device, and the terminal device can display the rendering layer (interactive 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 viewed on the display interface of the terminal device M, such as Figure 2 As shown, the player character's parachute in this rendering layer is already open.

[0101] Further, see Figure 3 , Figure 3 This is a flow chart of a data processing method provided by an embodiment of the present application. The method can be performed by a terminal device (for example, the above Figure 1 Any terminal device in the terminal device cluster shown, such as terminal device 100a) or a service server (such as the above Figure 1 The service server 1000 shown in FIG. 1000 may also be executed by the terminal device and the service server (as shown in FIG. Figure 1 The data processing method is executed by the service server 1000 in the corresponding embodiment. For ease of understanding, this embodiment uses the method executed by the above-mentioned terminal device as an example. Among them, the data processing method may include at least the following steps S101-S104:

[0102] Step S101 : In response to an interactive operation on a subprogram application, an interface rendering instruction indicated by the interactive operation is generated.

[0103] In this application, a target application may be deployed in a terminal device, and the target application may be a video application, a social application, an educational application, etc. When a user uses the terminal device, the user may launch the target application in the terminal device. For example, the user may click on the target application and then click on the launch control to run the target application. The target application may be a native application that can be installed and run in the current operating system of the current terminal device. Different sub-applications may be embedded in the target application. These sub-applications do not need to be installed or downloaded. They all run in conjunction with the target application. In other words, the target application is the host application for these sub-applications. In this application, the sub-application may be referred to as a sub-program application. The user may launch the sub-program application in the target application and perform corresponding operations on it. The interactive operation may refer to any operation generated by the user in the sub-program application (such as a launch operation, a viewing operation for a certain item, a comment viewing operation, etc.). When the user performs an interactive operation on the sub-program application, the terminal device may respond to the interactive operation and generate an interface rendering instruction for the interactive operation. For example, mini-program applications can be used as a type of sub-program application. That is, mini-program applications such as shopping applications and real-time ordering applications can all be called sub-program applications, which can all be parasitic on the target application and run in the target application.

[0104] The interface rendering instruction may include business data for the interactive operation, and these business data may specifically include a style shadow structure tree. Specifically, in response to an interactive operation on a subprogram application, a specific implementation method for generating the interface rendering instruction indicated by the interactive operation may be: when a user performs an interactive operation on the subprogram application, the terminal device may respond to the interactive operation on the subprogram application and obtain the page rendering template file of the subprogram application; then, a template parser may be called, and the page rendering template file may be parsed based on the template parser, and a style shadow structure tree corresponding to the interactive operation may be generated based on the parsing result; wherein, the style shadow structure tree is composed of N shadow nodes, and each shadow node contains element encapsulation information of a page element; N is a positive integer; a page element refers to an element used to construct an interactive interface; then, a rendering instruction containing a style shadow structure tree may be generated, and the rendering instruction containing the style shadow structure tree may be determined as the interface rendering instruction indicated by the interactive operation.

[0105] It can be understood that, taking the sub-program application as an example of a mini-program application, the above-mentioned page rendering template file can refer to a template file used to describe the page content of the mini-program application, which can specifically refer to the template file provided in WXML in the rendering process of the mini-program application, wherein WXML (WeiXin Markup Language) is a set of tag languages ​​designed by the framework, which, combined with basic components and event systems, can construct the structure of the page. The template parser in this application can refer to the component management framework in the mini-program application (for example, the Exparser framework), based on which the page rendering template file can be loaded and parsed, so that the style shadow structure tree corresponding to the interactive operation can be generated based on the parsing result. Among them, the style shadow structure tree here can refer to the shadow tree, which can be specifically understood as a structure tree generated by encapsulation. The shadow tree allows a component to have its own "shadow" (hidden form). This "shadow" cannot be accessed arbitrarily in the main document. Its specific function is to hide the internal structure of the component and add styles that are only valid within the component. In other words, the above style shadow structure tree can be understood as consisting of multiple nodes (called shadow nodes), and each node mainly contains the hidden encapsulation information of each component (here for a certain interactive operation, each node can actually be understood as the encapsulation information of each page element in a certain page, then the encapsulation information contained in each node can be called element encapsulation information). Based on this style shadow structure tree, interface rendering instructions can be generated.

[0106] In step S102, if the rendering framework indicated by the interface rendering instruction is a mobile application development framework, the interface rendering instruction is sent to the execution environment of the subroutine application through the first communication interface; the execution environment of the subroutine application is the execution environment of the native application, and the native application is the host application of the subroutine application; the first communication interface is a communication interface between the first programming language and the second programming language, the first programming language refers to the programming language corresponding to the interface rendering instruction, and the second programming language refers to the programming language corresponding to the native application; the mobile application development framework is used to build a native interactive interface on the native operating system.

[0107] In this application, for each page of the sub-program application, the developer can specify a rendering framework. Taking the sub-program application as a mini-program application as an example, the rendering framework here can include a page view framework (webview framework) and a mobile application development framework (Fltutter framework). The above-mentioned interface rendering instruction can include the rendering framework specified by the developer. If the rendering framework is the mobile application development framework, the terminal device can obtain the development programming language of the sub-program application (which can be called the first programming language. For example, taking the mini-program application as an example, the development programming language can refer to JavaScript) and the development programming language of the host application (which can be called the second programming language. For example, the development programming language can refer to C / C++). Generally speaking, the first programming language and the second programming language are two different programming languages. Since the sub-program application needs to be hosted in the host application for operation, the first programming language and the second programming language can refer to languages ​​that can communicate, that is, when the first programming language and the second programming language are different, there is a communication interface between the first programming language and the second programming language for communication. Here, taking the example of a first programming language being JavaScript and a second programming language being C / C++, JavaScript and C / C++ can communicate via the JSBinding mechanism, and the first communication interface can be determined as JSBinding. Of course, when the first programming language and the second programming language are other languages, the first communication interface can be determined based on the specific scenario. This is just an example.

[0108] It should be understood that the terminal device can obtain the first communication interface between the first programming language and the second programming language, and send the interface rendering instruction to the execution environment of the subroutine application based on the first communication interface. Among them, since the subroutine application runs parasitically in the target application, the execution environment of the subroutine application can actually be understood as the execution environment of the target application. Specifically, the execution environment of the target application can refer to the execution environment of the development programming language (such as the execution environment of the second programming language mentioned above). Based on the above-mentioned first communication interface, even if the development programming language of the subroutine application is different from the development programming language of the target application, the interface rendering instruction can be sent to the execution environment of the subroutine application based on the above-mentioned first communication interface. Among them, the execution environment can include the underlying rendering framework of the subroutine application (such as the applet application), and the interface rendering of the subroutine application can be performed in the execution environment.

[0109] Step S103: In the execution environment, the second communication interface is called based on the interface rendering instruction, the mobile application development framework is called through the second communication interface, and the interactive interface corresponding to the interactive operation is rendered based on the mobile application development framework; the second communication interface is a communication interface between the second programming language and the third programming language, and the third programming language is the development language corresponding to the mobile application development framework.

[0110] In the present application, in the execution environment, the second communication interface can be called based on the interface rendering instruction, and the above-mentioned mobile application development framework can be called through the second communication interface, and the interface rendering can be performed based on the mobile application development framework. Specifically, the present application can generate rendering data corresponding to the interactive operation based on the interface rendering instruction, and then call the mobile application development framework to render the rendering data. The rendering data here can specifically refer to a page element structure tree. Specifically, before calling the second communication interface, the present application can create a page element structure tree corresponding to the interactive operation based on the interface rendering instruction in the execution environment; wherein the page element structure tree is composed of N element nodes, and one element node corresponds to one page element; each element node contains element description data, and one element description data refers to the style description data of a page element; the page element refers to the element used to construct the interactive interface; if the page element structure tree is successfully created, the step of calling the second communication interface based on the interface rendering instruction in the execution environment can be executed.

[0111] It should be understood that the above-mentioned element description data may refer to the style description data of the page elements, and a page can be formed by these page elements. Specifically, the element description data may refer to a widget, and each widget can be understood as a basic module used to constitute the UI. By combining and assembling these widgets, various complex interfaces can be formed. In the Flutter framework, the construction of the UI can be completed very simply through various combinations of widgets. Then, based on the interface rendering instructions, the present application can determine the corresponding style description data for each page element. One style description data can correspond to a node (which can be called an element node), and the above-mentioned page element structure tree can be constructed based on these element nodes (then the page element structure tree can be understood as a widget tree). When the page element structure tree is successfully created, the above-mentioned second communication interface can be called, and the mobile application development framework can be called based on the second communication interface, and then the page element structure tree can be rendered based on the mobile application development framework.

[0112] Among them, it can be known from the above that the above interface rendering instructions contain the style shadow structure tree corresponding to the interactive operation (the style shadow structure tree is composed of N shadow nodes, and each shadow node contains the element encapsulation information of a page element), and in this application, the page element structure tree can actually be generated based on the style shadow structure tree (the information in each shadow node can be converted to obtain an element description data, and then obtain an element node containing the element description data, so as to form a page element structure tree constructed by the element nodes). Specifically, for the specific implementation method of generating a page element structure tree based on the style shadow structure tree, please refer to the subsequent Figure 4 Description in the corresponding embodiment.

[0113] Furthermore, after generating the page element structure tree, the mobile application development framework can be called based on the second communication interface in the execution environment, and the interactive interface corresponding to the interactive operation can be rendered based on the mobile application development framework and the page element structure tree. i For example, the specific implementation process may include: based on the second communication interface, an element node L may be created in an isolated running environment of a third programming language. i Corresponding program object; based on element node L i The corresponding program object can be used to i The corresponding element description data is mounted and processed to obtain the element node L i corresponding mounting objects; when the mounting objects corresponding to N element nodes are determined, the structure tree composed of the N element nodes containing the corresponding mounting objects can be determined as the element mounting structure tree corresponding to the interactive operation; based on the mobile application development framework, the element mounting structure tree can be rendered to obtain an interactive interface.

[0114] It is understood that the mount operation processing here specifically refers to the Mount operation processing. In the rendering logic implementation, for each element node, a corresponding program object can be created within the isolated runtime environment of the third programming language through the second communication interface (taking Dart as an example, a corresponding Dart object can be created in the isolated memory of the Dart Isolate, and this Dart object can be referred to as the program object corresponding to the node). This program object can be held by the widget (element description data) object corresponding to the element node. This process can be understood as the mount operation. In other words, the element description data is subjected to the mount operation processing based on the program object, thereby obtaining the mount object corresponding to each element node. Furthermore, an element mount structure tree (widgettree mount) containing each node of the mount object can be obtained. Based on the mobile application development framework, the element mount structure tree can be rendered to obtain an interactive interface.

[0115] Among them, based on the mobile application development framework, the element mounting structure tree can be rendered, and the specific implementation method of obtaining the interactive interface can be: based on the mobile application development framework, the element mounting structure tree can be rendered to obtain the interactive interface layout information of the interactive interface; then, the interface drawing processing can be performed according to the interactive interface layout information to obtain the drawing interface, and then the drawing interface can be determined as the interactive interface.

[0116] Step S104: outputting an interactive interface.

[0117] In this application, for the above-mentioned interactive interface, if the above-mentioned interactive interface is an interface that has not been rasterized, in order to further improve the interface quality, the interactive interface can be rasterized to obtain a rasterized interface, and then the rasterized interface can be output; and if the above-mentioned interactive interface is an interface that has been rasterized, the interactive interface can be directly output.

[0118] In an embodiment of the present application, a mobile application development framework is introduced into the interface rendering service of a sub-program application (such as a mini-program application). Specifically, for interactive operations of the sub-program application, an interface rendering instruction indicated by the interactive operation can be generated in response to the interactive operation; if the rendering framework indicated by the interface rendering instruction is the above-mentioned mobile application development framework, the interface rendering instruction can be sent to the execution environment of the sub-program application through a first communication interface. It can be understood that the sub-program application is an application hosted in another native application (an application developed based on a second programming language, the native application corresponds to the second programming language, and the native application can be referred to as a host application) for execution. The execution environment of the sub-program application can actually be understood as the execution environment of the host application, and the programming language corresponding to the interface rendering instruction is the first programming language. If communication between the two languages ​​is desired, communication can be carried out through the first communication interface. Subsequently, in the execution environment, the second communication interface can be called based on the above-mentioned interface rendering instruction, and the mobile application development framework can be called through the second communication interface, and the interactive interface corresponding to the interactive operation can be rendered based on the mobile application development framework. Among them, since the mobile application development framework is a framework developed based on a third programming language, in order to be able to call the mobile application development framework, communication can be carried out between the second programming language and the third programming language based on the second communication interface. Then, through the first communication interface and the second communication interface, the execution environment of the native application can be called a communication bridge, which can enable communication between the first programming language and the second programming language, so that the subroutine application developed based on the first programming language can effectively call the mobile application development framework. It should be understood that the mobile application development framework is a framework for building a native interactive interface on the native operating system. It has the characteristics of a simple rendering process and thus has efficient rendering performance. At the same time, the interface it renders is comparable to the native interface and has a very high rendering quality. After the mobile application development framework is introduced into the interface rendering business of the subroutine application, the efficient rendering performance of the mobile application development framework can be used to provide the interactive interface of the subroutine application with a display quality close to the native, which can improve the rendering efficiency and the rendering quality in the interface rendering business of the subroutine application.

[0119] Further, see Figure 4 , Figure 4 This is a flow chart of the structure tree generation process provided by the embodiment of the present application. Figure 3The process of generating a page element structure tree in the corresponding embodiment. The page element structure tree can be specifically generated based on the style shadow structure tree in the interface rendering instruction (the style shadow structure tree is composed of N shadow nodes, each shadow node contains the element encapsulation information of a page element). Here, the N shadow nodes of the style shadow structure tree include shadow node S i , shadow node S i The element encapsulation information contained is element encapsulation information K i (N, i are both positive integers) as an example to illustrate the specific implementation method of generating a page element structure tree. Figure 4 As shown, the process may include at least the following steps S401 to S404:

[0120] Step S401, obtaining a style rule set; the style rule set includes element style rules corresponding to each page configuration element in the page configuration element set; the page configuration element refers to a configuration element used to constitute the application interface of the subroutine application, and the application interface includes an interactive interface.

[0121] Specifically, a style rule set may refer to a set of element styles for specifying the application interface of a subprogram application (such as a mini-program application), which includes element style rules for each page configuration element of the application interface. The element style rules may specifically include the type of selector, identification (id), type (class), background color, font attributes, outline, border, etc. A page configuration element may refer to each element used to make up a page (for example, a title, image, text, etc.). A style rule set may specifically refer to a RuleSet, which may be generated based on a page style sheet. In other words, a specific implementation method for obtaining a style rule set may be as follows: a page style configuration sheet may be obtained; wherein the page style configuration sheet may include attribute definition information for each page configuration element; then, a style parser may be called, and based on the style parser, the attribute definition information contained in the page style configuration sheet may be parsed, and a style rule set may be generated based on the parsing results. Among them, taking the sub-program application as an example of a mini-program application, the style parser here can be included in the mini-program basic library, which can specifically refer to a component dedicated to parsing the page style sheet to generate a RuleSet. Based on the style parser, the page style configuration table can be automatically parsed to obtain the RuleSet. The page style configuration table here can also be called a page style sheet. In the rendering business, the page style sheet is a markup language used to control the page style and allow the style information to be separated from the page content. Among them, style is the format, which can specifically refer to the size, color, position of the image, etc. of the text in the page, all of which are the styles for setting the page content. This application can establish a file that defines the page style, which can be used as the page style configuration table. The page style configuration table can be directly introduced (or inserted) in the rendering business of the mini-program application, and the above-mentioned style parser can parse the page style configuration table to generate the above-mentioned style rule set.

[0122] Step S402: Determine the element encapsulation information K in the style rule set. i Matching element style rules are matched, and the matching element style rules are determined as shadow nodes S i The corresponding node element style.

[0123] Specifically, for the shadow node S i , this application can be based on the element encapsulation information K i, matching styles from the style rule set. Among them, the embodiment of the present application can specifically match styles from the RuleSet based on the tag (label), identifier (id), class (category) and other information of the shadow node. For example, taking the class-based style matching as an example, assuming that the class in the element encapsulation information of the shadow node is "into", the style rule with class "into" can be queried from the RuleSet, and the style rule can be used as the matching style rule. Here, the element encapsulation information K i Including shadow node S i For example, for the node category information of the page configuration element included in the style rule set, the element style rule corresponding to each page configuration element includes the configuration category information. For example, in the style rule set, the element encapsulation information K is determined. i The specific implementation method of the matching element style rule can be as follows: the configuration category information set corresponding to the style rule set and the node category information can 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 can be determined as the candidate element style rule; according to the candidate element style rule, the element style rule corresponding to the element encapsulation information K can be determined. i Matching element style rules. It should be understood that the node category information and configuration category information here can both refer to fields based on a certain programming language for indicating categories. Based on this field, you can clarify the category to which the shadow node belongs, and you can also clarify the category to which the style rule belongs. Of course, this is just an example of how to match style rules based on node category information. In fact, specific scenarios can correspond to different matching methods. For example, the style matching method can also match styles from the RuleSet based on the node's tag, id and other information (such as, matching based on tag, id, and class). This application does not limit this.

[0124] Furthermore, here, the number of candidate element style rules is at least two, and the at least two candidate element style rules include candidate element style rule C j (j is a positive integer) as an example, according to the candidate element style rules, determine the element encapsulation information K i The specific implementation method of the matching element style rule can be: the candidate element style rule C can be obtained j The corresponding style priority attribute D j ; According to the style priority attribute D j , we can determine the candidate element style rule C jWhen the priority weights corresponding to at least two candidate element style rules are determined, the maximum priority weight among the at least two priority weights can be determined as the target priority weight, and then the candidate element style rule corresponding to the target priority weight can be determined as the element encapsulation information K i Matches the style rules of the matched elements.

[0125] Among them, the style priority attribute D j Including value attributes and rare attributes as an example, for the style priority attribute D j , determine the candidate element style rule C j The specific implementation of the corresponding priority weight can be as follows: the rarity value corresponding to the rare attribute can be obtained; if the value attribute is a value-effective attribute and the rarity value is greater than the rarity threshold, the weight value in the first weight interval that matches the rarity value can be determined as the candidate element style rule C j If the value attribute is a valid value attribute and the rarity value is less than the rarity threshold, the weight value in the second weight interval that matches the rarity value can be determined as the candidate element style rule C. j The corresponding priority weight; wherein the second weight interval is smaller than the first weight interval; if the value attribute is an invalid value attribute and the rarity value is greater than the rarity threshold, the weight value in the third weight interval that matches the rarity value can be determined as the candidate element style rule C j The corresponding priority weight; wherein the third weight interval is smaller than the second weight interval; if the value attribute is an invalid value attribute and the rarity value is smaller than the rarity threshold, the weight value of the fourth weight interval that matches the rarity value can be determined as the candidate element style rule C j Corresponding priority weights; wherein, the fourth weight interval is smaller than the third weight interval.

[0126] It can be understood that after constructing the style shadow structure tree, the style can be matched from the style rule set according to the tag, id, class and other information of each shadow node to obtain the candidate element style rules; then, if the number of the candidate element style rules is at least two, the style priority attributes corresponding to each candidate element style rule can be used to determine the corresponding priority weights, and the style with the highest weight can be applied to the shadow node. Among them, each candidate element style rule will contain style attribute parameters (for example, position attributes, order attributes, etc.). The style priority attribute here can refer to the attribute parameters used to determine the style priority in the definition attribute parameters contained in the candidate element style rule, which can specifically refer to the style definition position attribute (inline style / wxss), order attribute, value attribute (can include value valid attribute and value invalid attribute; can also be understood as important attribute, that is, whether the style is important. If the style is an important attribute, the value attribute can be a value valid attribute; if the style is a non-important attribute, the value attribute can be a value invalid attribute), specificity attribute (specificity, specifically refers to the specificity attribute of the selector contained in the style rule. For each style rule, the specificity of the selector will be calculated, so that the element attribute declaration can be displayed correctly in the event of a conflict), etc. According to one or more attributes of the style definition position attribute, order attribute, value attribute and specificity attribute, the priority weight of each candidate element style rule can be determined.

[0127] Since the specificity can be used to determine whether the style rule is special or not (whether it is rare), the specificity attribute can be called the rare attribute. For example, when the priority weight is determined by both the value attribute and the rare attribute, the style priority attribute D j It can include value attributes and rarity attributes. This application can obtain the rarity value corresponding to the rarity attribute. The larger the rarity 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 based on both the value attribute and the rarity value. When the value attribute is a value-effective attribute, the larger the rarity value, the greater the priority weight. When the rarity value is greater than the rarity threshold, the weight value in the first weight interval that matches the rarity value can be determined as the candidate element style rule C. j Corresponding priority weight; when the rarity value is less than the rarity threshold, the priority weight at this time should be smaller than that in the above case, then the weight value matching the rarity value in the second weight interval (the second weight interval is less than the first weight interval) can be determined as the candidate element style rule C jSimilarly, when the value attribute is an invalid value attribute and the rarity value is greater than the rarity threshold, the priority weight at this time should be smaller than that in the second case above. Then, the weight value matching the rarity value in the third weight interval (the third weight interval is smaller than the second weight interval) can be determined as the candidate element style rule C. j The corresponding priority weight; when the rarity value is less than the rarity threshold, the priority weight at this time should be smaller than that in the third case above, then the weight value matching the rarity value in the fourth weight interval (the fourth weight interval is less than the third weight interval above) can be determined as the candidate element style rule C j The corresponding priority weight.

[0128] Furthermore, the candidate element style rule corresponding to the maximum priority weight can be determined as the matching element style rule of the shadow node. After the matching element style rule of each shadow node is determined, these matching element style rules can be determined as the node element style of each shadow node.

[0129] Step S403: According to the style conversion standard, the shadow node S i The corresponding node element style is converted to obtain the shadow node S i The corresponding element describes the data.

[0130] Specifically, the shadow node S can be converted according to the style conversion standard. i The corresponding node element style is converted to obtain the shadow node S i The corresponding element description data can be obtained in the same way as above to obtain the element description data corresponding to each shadow node. 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 widget, there is a corresponding conversion standard. The conversion standard can convert the style into the corresponding widget, or convert the widget into the corresponding style. Then, this application can obtain the style conversion standard. Based on the style conversion standard, the matching element style rule of each shadow node can be used to generate the corresponding widget (i.e., element description data).

[0131] Step S404, when the element description data corresponding to the N shadow nodes are determined, each shadow node is determined as an element node, and the structure tree composed of the N element nodes containing the corresponding element description data is determined as the page element structure tree corresponding to the interactive operation.

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

[0133] In an embodiment of the present application, through the above-mentioned two first communication interfaces and second communication interfaces, the host application of the sub-program application (such as the mini-program application) can become a communication bridge between the sub-program application and the mobile application development framework, so that the mobile application development framework (Flutter framework) can be introduced into the sub-program application based on the communication bridge, and the mobile application development framework can be well utilized for rendering in the rendering business of the sub-program application. Since the rendering process 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 interactive interface of the sub-program application rendered by the Flutter framework is of the same quality as the native quality and has a very high quality. Therefore, by introducing the mobile application development framework, the rendering efficiency can be improved in the rendering business of the sub-program application, while also improving the rendering quality.

[0134] For further understanding, please see Figure 5 , Figure 5 is a diagram of a cross-language communication architecture provided by an embodiment of the present application, wherein the architecture may specifically refer to a cross-language communication architecture between a first programming language and a third programming language.

[0135] Among them, the first programming language may refer to the development programming language of a sub-program application (such as a mini-program application), and the development programming language may be any programming language with the function of developing applications, for example, JavaScript, C / C++, Python, etc. Generally speaking, for mini-program applications, the development programming language of mini-program applications generally refers to JavaScript, and the interface layer of mini-program applications is also written in JavaScript. The second programming language may refer to the development programming language of the host application (native application) of the sub-program application, and the development programming language may be any programming language with the function of developing applications, for example, JavaScript, C / C++, Python, etc. In the embodiment of the present application, the second programming language may specifically refer to C / C++. The third programming language may refer to the development programming language of the above-mentioned mobile application development framework. In the embodiment of the present application, the mobile application development framework may specifically refer to the Fltutter framework. The Fltutter framework is written in the Dart language, so the third programming language may specifically refer to the Dart language.

[0136] It should be understood that the first communication interface in the embodiments of the present application may refer to a communication interface between a first programming language and a second programming language. For example, it may specifically refer to a communication interface between JavaScript and C / C++ (such as the JSBinding mechanism). The second communication interface may refer to a communication interface between a second programming language and a third programming language. For example, it may specifically refer to a communication interface between Dart and C / C++ (such as the Dart API or Dart FFI. Due to the better performance of Dart FFI, Dart FFI may be preferred as the second communication interface). By using the second programming language as a communication bridge, communication between the first programming language and the third programming language can be achieved, that is, the Flutter framework can be effectively introduced in the subroutine application.

[0137] From the above, it can be seen that the present application can introduce a mobile application development framework to render the interface of the sub-program application. Of course, the present application can also simultaneously render the interface of the sub-program application (such as the mini-program application) based on other rendering frameworks (such as the page view framework, i.e., the webview framework). For the same interface rendering instructions, the present application can render simultaneously based on the mobile application development framework and the webview framework. If the mobile application development framework is rendered first, the rendered image obtained by the mobile application development framework can be output and displayed; and if the webview framework is rendered first, the rendered image obtained by the webview framework can be output and displayed. This can greatly improve the response efficiency of the sub-program application while ensuring the rendering quality.

[0138] It should be understood that in the rendering process based on the webview framework, sub-program applications (such as mini-program applications) are based on a dual-threaded model that separates the logic layer (AppService) from the view layer (webview). JS logic (background program logic, here taking the sub-program application developed using JavaScript as an example, its background program logic can be JS logic), DOM tree (which can be understood as shadow tree) creation, page style sheet parsing, style matching, layout, drawing and other steps all occur on the main thread. The main thread has too many tasks and insufficient parallelism, resulting in low efficiency. At the same time, because JS tasks take too long, the interface will freeze. In addition, the separated threads need to communicate frequently through JSBridge and need to synchronize status and maintain the tree structure between the two threads, which will consume a lot of communication costs.

[0139] To mitigate these issues and improve interface smoothness, this application creates a new type of thread (specifically, a rendering thread) within the rendering framework of subprogram applications (such as mini-program applications). This application can run views (wxml) and logic (js logic) simultaneously in the logic layer (AppService). Internally, view layout and rendering can occur in this new thread. By splitting some logic (such as layout and rendering) into this new thread, the device's multi-core CPU can be fully utilized, thereby increasing parallelism, improving the smoothness of interface rendering and interaction, and reducing rendering time and latency.

[0140] For easier understanding, please refer to Figure 6 , Figure 6 This is a schematic diagram of a rendering thread framework provided by an embodiment of the present application. Figure 6 The framework shown may be a schematic diagram illustrating the framework of the rendering thread of the sub-program application, taking the sub-program application as an example. Figure 6 As shown in the figure, the rendering framework of the 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 explained in detail below.

[0141] Logical sub-thread: In this logical sub-thread, mini-program JS logic, mini-program framework operation node operations, style calculation, and other logic can be executed. Specifically, the mini-program JS logic may include the steps of creating a shadow tree and generating interface rendering instructions. 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 instructions. Style calculation may specifically include the steps of performing style matching for each node in the shadow tree in the execution environment and calculating the matching style rules for each node.

[0142] Rendering sub-thread: This sub-thread can include logic such as style application, layout, and painting. For each node matched in the logic sub-thread, the rendering sub-thread applies the matching style rules and generates a corresponding widget, resulting in a widget tree. Subsequently, each node in the widget tree is mounted and passed to the Flutter framework for layout and painting, generating a drawing interface.

[0143] Rasterization sub-thread: The drawing interface drawn by the above-mentioned Flutter framework will be submitted to the rasterization sub-thread for rasterization processing. The final raster processing interface can be used for display on the terminal device.

[0144] For the specific implementation of each step in the above sub-threads, please refer to the above Figure 3-Figure 4 The description in the corresponding embodiment will not be repeated here.

[0145] It should be understood that from the above, the total rendering thread of the sub-program application (such as the mini-program application) of the present application can include a development logic sub-thread (AppService sub-thread) and an interface rendering sub-thread (rendering sub-thread). The steps of generating the interface rendering instructions indicated by the interactive operation and creating the page element structure tree (widget tree) corresponding to the interactive operation based on the interface rendering instructions in the execution environment can be executed in the development logic sub-thread; in the execution environment, the steps of calling the second communication interface based on the interface rendering instructions, calling the mobile application development framework through the second communication interface, and rendering the interactive interface corresponding to the interactive operation based on the mobile application development framework (specifically, it may include mounting operations (style application), layout, and drawing) can be executed in the interface rendering sub-thread.

[0146] In an embodiment of the present application, by splitting part of the logic (such as layout and drawing) into a rendering sub-thread for execution, the multi-core CPU of the device can be fully utilized, thereby improving the degree of parallelism and improving the smoothness of interface rendering and interaction; at the same time, using a single-threaded rather than a separate dual-threaded model for rendering can reduce the communication loss caused by frequent communication, maintain the stability of the tree structure well, and reduce rendering time and delay while ensuring security management.

[0147] Based on the above-mentioned logical sub-thread and rendering sub-thread, in order to improve security, this application can run the basic library (basic library of the mini-program application) and built-in components originally running on the webview side in a new subdomain within the logical sub-thread, thereby isolating them from the developer's program and improving security.

[0148] For easier understanding, please refer to Figure 7 , Figure 7 This is a thread architecture diagram of a logic sub-thread and a rendering sub-thread provided by an embodiment of the present application. Figure 7 The thread architecture shown is a thread architecture that takes the subroutine application as an example. Figure 7As shown, in the logical layer sub-thread, it can include sub-domain 1, sub-domain 2, main domain, client, rendering framework and JS development standard (JS VM, which can provide JSBinding interface. Here, the development language of the mini-program application is JavaScript as an example. The development standard here can refer to the JS development standard. When the development language of the mini-program application is other programming languages, the development standard can be its corresponding development standard). In sub-domain 1, it can specifically include the wxml template of the mini-program application, the built-in components of the mini-program, the component management framework (such as Exparser), and the JS communication interface (such as the above-mentioned JSBinding interface); in sub-domain 2, it can specifically include the mini-program JS logic code, the basic library of the mini-program, and the JS bridge (such as JS Bridge). Any two of sub-domain 1, sub-domain 2 and the main editor can communicate with each other. The client in the logical sub-thread can specifically refer to the host application, and the rendering framework can refer to the new rendering framework proposed in this application (a rendering framework based on the mobile application development framework for rendering). It should be understood that the embodiment of the present application will run the basic library (basic library of the mini-program application) and built-in components originally running on the webview side in a new subdomain within the logical sub-thread, thereby isolating them from the developer's program and improving security.

[0149] It should be understood that the rendering sub-thread is actually the UI sub-thread, which can include the mobile application development framework, rendering engine and JS development standards; the rendering data obtained in the logical sub-thread (such as the structure tree after mounting processing) can be submitted to the rendering sub-thread, and the rendering sub-thread can perform rendering processing on it based on the rendering engine.

[0150] In an embodiment of the present application, by splitting part of the logic (such as layout and drawing) into a rendering sub-thread for execution, the multi-core CPU of the device can be fully utilized, thereby improving the degree of parallelism and improving the smoothness of interface rendering and interaction; at the same time, using a single-threaded rather than a separate dual-threaded model for rendering can reduce the communication loss caused by frequent communication, maintain the stability of the tree structure well, and reduce rendering time and delay while ensuring security management.

[0151] For further understanding, please refer to Figure 8 , Figure 8 This is a logical flow diagram of rendering a subroutine application provided by an embodiment of the present application. Figure 8 The logic flow of rendering shown in FIG. 1 may be a logic flow described by taking the subprogram application as an example of a mini-program application. Figure 8As shown in the figure, the rendering architecture of a mini-program application can mainly include a logic sub-thread (AppService sub-thread), a rendering sub-thread, and a rasterization sub-thread. The logic sub-thread can include a stylesheet insertion module, a stylesheet parsing module, a style rule generation module, a template parsing module, a structure tree creation module, and a style matching module. The rendering sub-thread can include a mount processing module, a layout module, and a drawing module. The rasterization sub-thread can include a rasterization module and a display module. For ease of understanding, each module will be described in detail below.

[0152] For the logical sub-thread, after receiving the interface rendering instruction, 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 sheet insertion module in the logical sub-thread can insert the page style sheet, and the style sheet parsing module can parse the page style sheet and send the parsing result to the style rule set generation module; in the style rule set generation module, a style rule set (such as RuleSet) can be generated based on the above parsing result. Furthermore, in the style matching module within the logical sub-thread, the shadow nodes in the shadow tree can be traversed (such as pre-order traversal), so that each shadow node can enter the parsing process (inflate process) and the style recalculation process (RecalcStyle process). In the RecalcStyle process, the style can be matched from the RuleSet based on the tag, id, class and other information of the shadow node. The matched style can be used as a candidate element style rule. The matched style can be determined based on the style definition position, order, importance and spcificity (specificity) and other information. Its priority weight can be determined, and the candidate style with a high weight can be applied to the node. Subsequently, in the style matching module, the widget corresponding to the style of each node can be generated, thereby obtaining the widget tree (page element structure tree).

[0153] For the rendering sub-thread, the widget tree generated above will be submitted to the rendering sub-thread. The mount processing module in the rendering sub-thread can traverse each node in the widget tree (such as post-order traversal), and perform the Mount operation on each node one by one through the traversal (for example, the corresponding Dart object can be created in the Dart Isolate through the Dart FFI interface and held by the widget); by performing the Mount operation, an element mount structure tree can be generated. Subsequently, the element mount structure tree can be submitted to the layout module, where it can be laid out based on the Flutter framework; in the drawing module, it can be drawn based on the Flutter framework.

[0154] For the rasterization sub-thread, the image obtained by the above drawing processing can be submitted to the rasterization sub-thread, and can be rasterized by the rasterization module to obtain a raster processing interface. Then, after transmitting it to the display module, the raster processing interface can be output and displayed through the display module.

[0155] In an embodiment of the present application, the host application of a sub-program application (such as a mini-program application) can be made into a communication bridge between the sub-program application and the mobile application development framework through the first communication interface and the second communication interface. Thus, the mobile application development framework (Flutter framework) can be introduced into the sub-program application based on the communication bridge, and the mobile application development framework can be well utilized for rendering in the rendering business of the sub-program application. Since the rendering process 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 interactive interface of the sub-program application rendered by the Flutter framework is of the same quality as the native quality and has a very high quality. Therefore, by introducing the mobile application development framework, the rendering efficiency can be improved in the rendering business of the sub-program application, while also improving the rendering quality. At the same time, by splitting part of the logic (such as layout and drawing) into the rendering sub-thread for execution, the multi-core CPU of the device can be fully utilized, thereby improving the degree of parallelism and the smoothness of interface rendering and interaction. At the same time, using a single-threaded rather than a separate dual-threaded model for rendering can reduce the communication loss caused by frequent communication, maintain the stability of the tree structure well, and reduce rendering time and delay while ensuring security control.

[0156] Further, see Figure 9 , Figure 9This is a structural diagram of a data processing device provided in an embodiment of the present application. The data processing device may be a computer program (including program code) running in a computer device, for example, the data processing device is an application software; the data processing device may be used to execute Figure 3 As shown in the method. Figure 9 As shown, the data processing device 1 may include: an instruction generating module 11, an instruction sending module 12, an interface calling module 13, a framework calling module 14, an interface rendering module 15 and an interface output module 16.

[0157] The instruction generation module 11 is used to respond to the interactive operation on the subroutine application and generate the interface rendering instruction indicated by the interactive operation;

[0158] The instruction sending module 12 is configured to send the interface rendering instruction to the execution environment of the subroutine application via the first communication interface if the rendering framework indicated by the interface rendering instruction is a mobile application development framework; the execution environment of the subroutine application is the execution environment of the native application, and the native application is the host application of the subroutine application; the first communication interface is a communication interface between a first programming language and a second programming language, the first programming language being the programming language corresponding to the interface rendering instruction, and the second programming language being the programming language corresponding to the native application;

[0159] The interface calling module 13 is used to call the second communication interface based on the interface rendering instruction in the execution environment;

[0160] The framework calling module 14 is used to call the mobile application development framework through the second communication interface; the second communication interface is a communication interface between the second programming language and the third programming language, and the third programming language is the development language corresponding to the mobile application development framework;

[0161] An interface rendering module 15 is used to render an interactive interface corresponding to the interactive operation based on a mobile application development framework;

[0162] The interface output module 16 is used to output the interactive interface.

[0163] The specific implementation of the instruction generation module 11, the instruction sending module 12, the interface calling module 13, the framework calling module 14, the interface rendering module 15 and the interface output module 16 can be found in the above Figure 3 The description of steps S101 to S104 in the corresponding embodiment will not be repeated here.

[0164] In one embodiment, the instruction generation module 11 may include: a template acquisition unit 111 , a shadow tree generation unit 112 , and an instruction generation unit 113 .

[0165] The template acquisition unit 111 is used to respond to the interactive operation on the sub-program application and acquire the page rendering template file of the sub-program application;

[0166] The shadow tree generation unit 112 is configured to call a template parser, parse the page rendering template file based on the template parser, and generate a style shadow structure tree corresponding to the interactive operation based on the parsing result; the style shadow structure tree is composed of N shadow nodes, each shadow node containing element encapsulation information of a page element; N is a positive integer; a page element refers to an element used to construct an interactive interface;

[0167] The instruction generating unit 113 is configured to generate a rendering instruction including a style shadow structure tree, and determine the rendering instruction including the style shadow structure tree as the interface rendering instruction indicated by the interactive operation.

[0168] The specific implementation of the template acquisition unit 111, the shadow tree generation unit 112 and the instruction generation unit 113 can be found in the above Figure 3 The description of step S101 in the corresponding embodiment will not be repeated here.

[0169] In one embodiment, the data processing device 1 may further include: an element tree generating module 17 and a step executing module 18 .

[0170] The element tree generation module 17 is used to create a page element structure tree corresponding to the interactive operation based on the interface rendering instruction in the execution environment; the page element structure tree is composed of N element nodes, and each element node corresponds to a page element; each element node contains element description data, and an element description data refers to the style description data of a page element; a page element is an element used to construct an interactive interface;

[0171] The step execution module 18 is used to execute the step of calling the second communication interface based on the interface rendering instruction in the execution environment if the page element structure tree is successfully created.

[0172] The specific implementation of the element tree generation module 17 and the step execution module 18 can be found in the above Figure 3 The description of step S103 in the corresponding embodiment will not be repeated here.

[0173] In one embodiment, the interface rendering instruction includes a style shadow structure tree corresponding to the interactive operation. The style shadow structure tree is composed of N shadow nodes. Each shadow node includes element encapsulation information of a page element. The N shadow nodes include shadow nodes S i , shadow node S i The element encapsulation information contained is element encapsulation information K i ; N, i are both positive integers;

[0174] The element tree generation module 17 may include: a rule set acquisition unit 171 , a matching pattern determination unit 172 , a node pattern determination unit 173 , a description data determination unit 174 , and an element tree determination unit 175 .

[0175] The rule set acquisition unit 171 is used to acquire a style rule set; the style rule set includes element style rules corresponding to each page configuration element in the page configuration element set; the page configuration element refers to a configuration element used to constitute the application interface of the subroutine application, and the application interface includes an interactive interface;

[0176] The matching pattern determination unit 172 is used to determine the pattern matching element encapsulation information K in the pattern rule set. i Matching element style rules;

[0177] The node pattern determining unit 173 is configured to determine the matching element pattern rule as a shadow node S i Corresponding node element style;

[0178] Description data determination unit 174, configured to convert shadow node S i The corresponding node element style is converted to obtain the shadow node S i The corresponding element describes the data;

[0179] The element tree determination unit 175 is used to determine each shadow node as an element node when the element description data corresponding to N shadow nodes are determined, and to determine the structure tree composed of N element nodes containing the corresponding element description data as the page element structure tree corresponding to the interactive operation.

[0180] The specific implementation of the rule set acquisition unit 171, the matching pattern determination unit 172, the node pattern determination unit 173, the description data determination unit 174 and the element tree determination unit 175 can be found in the above Figure 4 The description of steps S401 to S404 in the corresponding embodiment will not be repeated here.

[0181] In one embodiment, the rule set acquisition unit 171 may include: a style sheet acquisition subunit 1711 and a rule set generation subunit 1712 .

[0182] The style sheet acquisition subunit 1711 is used to acquire a page style configuration table; the page style configuration table includes attribute definition information of each page configuration element;

[0183] The rule set generating subunit 1712 is configured to call a style parser, parse the attribute definition information contained in the page style configuration table based on the style parser, and generate a style rule set based on the parsing result.

[0184] The specific implementation of the style sheet acquisition subunit 1711 and the rule set generation subunit 1712 can be found in the above Figure 4 The description of step S401 in the corresponding embodiment will not be repeated here.

[0185] In one embodiment, the element encapsulation information K i Including shadow node S i Node category information; the element style rules corresponding to each page configuration element included in the style rule set include configuration category information;

[0186] The matching pattern determination unit 172 may include a matching category determination subunit 1721 , a candidate pattern determination subunit 1722 , and a matching pattern determination subunit 1723 .

[0187] The matching category determination subunit 1721 is configured to determine, in the configuration category information set corresponding to the style rule set, configuration category information that matches the node category information as matching configuration category information;

[0188] The candidate style determination subunit 1722 is configured to determine the element style rule corresponding to the matching configuration category information in the style rule set as a candidate element style rule;

[0189] Matching pattern determination subunit 1723 is used to determine the element encapsulation information K according to the candidate element pattern rule. i Matches the style rules of the matched elements.

[0190] The specific implementation of the matching category determination subunit 1721, the candidate pattern determination subunit 1722, and the matching pattern determination subunit 1723 can be found in the above Figure 4 The description of step S402 in the corresponding embodiment will not be repeated here.

[0191] In one embodiment, the number of candidate element style rules is at least two; the at least two candidate element style rules include candidate element style rule C j , j is a positive integer;

[0192] The matching pattern determination subunit 1723 is also specifically used to obtain the candidate element style rule C j The corresponding style priority attribute D j ;

[0193] The matching pattern determination subunit 1723 is further configured to determine the matching pattern based on the pattern priority attribute D j , determine the candidate element style rule C j Corresponding priority weight;

[0194] The matching style determination subunit 1723 is further specifically configured to, when determining the priority weights corresponding to at least two candidate element style rules, determine the maximum priority weight among the at least two priority weights as the target priority weight, and determine the candidate element style rule corresponding to the target priority weight as the one corresponding to the element encapsulation information K. i Matches the style rules of the matched elements.

[0195] In one embodiment, the style priority attribute D j Including value attributes and rare attributes;

[0196] The matching pattern determination subunit 1723 is further specifically used to obtain a rare value corresponding to the rare attribute;

[0197] The matching pattern determination subunit 1723 is further specifically configured to determine the weight value in the first weight interval that matches the rarity value as the candidate element pattern rule C if the value attribute is a valid value attribute and the rarity value is greater than the rarity threshold. j Corresponding priority weight;

[0198] The matching pattern determination subunit 1723 is further specifically configured to determine the weight value matching the rarity value in the second weight interval as the candidate element pattern rule C if the value attribute is a valid value attribute and the rarity value is less than the rarity threshold. j corresponding priority weights; the second weight interval is smaller than the first weight interval;

[0199] The matching pattern determination subunit 1723 is further specifically configured to determine the weight value matching the rarity value in the third weight interval as the candidate element pattern rule C if the value attribute is an invalid value attribute and the rarity value is greater than the rarity threshold. j corresponding priority weights; the third weight interval is smaller than the second weight interval;

[0200] The matching pattern determination subunit 1723 is further configured to determine the weight value in the fourth weight interval that matches the rarity value as the candidate element pattern rule C if the value attribute is an invalid value attribute and the rarity value is less than the rarity threshold. j Corresponding priority weights; the fourth weight interval is smaller than the third weight interval.

[0201] In one embodiment, the interface rendering module 15 may include: a program object creating unit 151 , a mounting processing unit 152 , a mounting tree determining unit 153 , and an interface rendering unit 154 .

[0202] The program object creation unit 151 is used to create a shadow node S in the isolated running environment of the third program language based on the second communication interface. i The corresponding program object;

[0203] Mounting processing unit 152, for based on shadow node S i The corresponding program object, for the shadow node S i The corresponding node element style is mounted and processed to obtain the shadow node S i The corresponding mount object;

[0204] The mount tree determining unit 153 is configured to, when the mount objects corresponding to the N shadow nodes are determined, determine the structure tree composed of the N shadow nodes including the corresponding mount objects as the element mount structure tree corresponding to the interactive operation;

[0205] The interface rendering unit 154 is used to render the element mounting structure tree based on the mobile application development framework to obtain an interactive interface.

[0206] The specific implementation of the program object creation unit 151, the mount processing unit 152, the mount tree determination unit 153 and the interface rendering unit 154 can be found in the above Figure 3 The description of step S103 in the corresponding embodiment will not be repeated here.

[0207] In one embodiment, the interface rendering unit 154 may include: a layout subunit 1541 and a drawing subunit 1542 .

[0208] The layout subunit 1541 is used to perform interface layout processing on the element mounting structure tree based on the mobile application development framework to obtain interactive interface layout information of the interactive interface;

[0209] The drawing subunit 1542 is configured to perform interface drawing processing according to the interactive interface layout information to obtain a drawing interface, and determine the drawing interface as the interactive interface.

[0210] The specific implementation of the layout subunit 1541 and the drawing subunit 1542 can be found in the above Figure 3 The description of step S103 in the corresponding embodiment will not be repeated here.

[0211] In one embodiment, the interface output module 16 may include: a raster processing unit 161 and an interface output unit 162 .

[0212] The raster processing unit 161 is used to perform rasterization processing on the interactive interface to obtain a raster processing interface;

[0213] The interface output unit 162 is used to output the raster processing interface.

[0214] The specific implementation of the raster processing unit 161 and the interface output unit 162 can be found in the above Figure 3 The description of step S104 in the corresponding embodiment will not be repeated here.

[0215] In one embodiment, the total rendering thread of the above-mentioned subroutine application includes a development logic sub-thread and an interface rendering sub-thread. The steps of generating interface rendering instructions indicated by the interactive operation and creating a page element structure tree corresponding to the interactive operation based on the interface rendering instructions in the execution environment are all executed in the development logic sub-thread; in the execution environment, the steps of calling the second communication interface based on the interface rendering instructions, calling the mobile application development framework through the second communication interface, and rendering the interactive interface corresponding to the interactive operation based on the mobile application development framework are executed in the interface rendering sub-thread.

[0216] In an embodiment of the present application, the host application of the sub-program application can be made into a communication bridge between the sub-program application and the mobile application development framework through the first communication interface and the second communication interface, so that the mobile application development framework (Flutter framework) can be introduced into the sub-program application based on the communication bridge, and the mobile application development framework can be well utilized for rendering in the rendering business of the sub-program application. Since the rendering process 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 interactive interface of the sub-program application rendered by the Flutter framework is of the same quality as the native quality and has a very high quality. Therefore, by introducing the mobile application development framework, the rendering efficiency can be improved in the rendering business of the sub-program application, while the rendering quality can be improved. At the same time, by splitting part of the logic (such as layout and drawing) into the rendering sub-thread for execution, the multi-core CPU of the device can be fully utilized, thereby improving the degree of parallelism and the smoothness of interface rendering and interaction. At the same time, using a single-threaded rather than a separate dual-threaded model for rendering can reduce the communication loss caused by frequent communication, maintain the stability of the tree structure well, and reduce rendering time and delay while ensuring security control.

[0217] Further, see Figure 10 , Figure 10 This is a schematic diagram of the structure of a computer device provided in an embodiment of the present application. Figure 10 As shown above Figure 9The data processing device 1 in the corresponding embodiment can be applied to the above-mentioned computer device 8000, and the above-mentioned computer device 8000 may include: a processor 8001, a network interface 8004 and a memory 8005. In addition, the above-mentioned computer device 8000 also includes: a user interface 8003, and at least one communication bus 8002. The communication bus 8002 is used to realize the connection and communication between these components. The user interface 8003 may include a display screen (Display), a keyboard (Keyboard), and the user interface 8003 may optionally include a standard wired interface and a wireless interface. The network interface 8004 may optionally include a standard wired interface and a wireless interface (such as a WI-FI interface). The memory 8005 may be a high-speed RAM memory, or a non-volatile memory (non-volatile memory), such as at least one disk storage. The memory 8005 may optionally also be at least one storage device located away from the aforementioned processor 8001. As Figure 10 As shown, the memory 8005 as a computer-readable storage medium may include an operating system, a network communication module, a user interface module, and a device control application.

[0218] exist Figure 10 In the computer device 8000 shown, the network interface 8004 can provide network communication functions; the user interface 8003 is mainly used to provide an interface for user input; and the processor 8001 can be used to call the device control application stored in the memory 8005 to achieve:

[0219] In response to an interactive operation on a subprogram application, generating an interface rendering instruction indicated by the interactive operation;

[0220] If the rendering framework indicated by the interface rendering instruction is a mobile application development framework, the interface rendering instruction is sent to the execution environment of the subroutine application via the first communication interface; the execution environment of the subroutine application is the execution environment of the native application, and the native application is the host application of the subroutine application; the first communication interface is a communication interface between a first programming language and a second programming language, the first programming language is the programming language corresponding to the interface rendering instruction, and the second programming language is the programming language corresponding to the native application; the mobile application development framework is used to build a native interactive interface on the native operating system;

[0221] In the execution environment, a second communication interface is called based on the interface rendering instruction, a mobile application development framework is called through the second communication interface, and an interactive interface corresponding to the interactive operation is rendered based on the mobile application development framework; the second communication interface is a communication interface between the second programming language and the third programming language, and the third programming language is the development language corresponding to the mobile application development framework;

[0222] Output interactive interface.

[0223] It should be understood that the computer device 8000 described in the embodiment of the present application can execute the above Figures 3 to 4 The description of the data processing method in the corresponding embodiment can also be performed as described above. Figure 9 The description of the data processing device 1 in the corresponding embodiment will not be repeated here. In addition, the description of the beneficial effects of adopting the same method will not be repeated here either.

[0224] In addition, it should be noted that: the embodiment of the present application also provides a computer-readable storage medium, and the computer-readable storage medium stores a computer program executed by the computer device 8000 for data processing mentioned above, and the computer program includes program instructions. When the processor executes the program instructions, the computer program can execute the above-mentioned data processing. Figures 3 to 4 The description of the above-mentioned data processing method in the corresponding embodiment will therefore not be repeated here. In addition, the description of the beneficial effects of adopting the same method will not be repeated. For technical details not disclosed in the computer-readable storage medium embodiment involved in this application, please refer to the description of the method embodiment of this application.

[0225] The computer-readable storage medium can be the data processing apparatus provided in any of the aforementioned embodiments, or the internal storage unit of the computer device, such as the computer device's hard drive or memory. The computer-readable storage medium can also be an external storage device of the computer device, such as a plug-in hard drive, a smart media card (SMC), a secure digital (SD) card, a flash memory card, etc. Furthermore, the computer-readable storage medium can include both the internal storage unit of the computer device and an external storage 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 can also be used to temporarily store data that has been output or is about to be output.

[0226] In one aspect of the present application, a computer program product or computer program is provided. The computer program product or computer program includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the method provided in one aspect of the embodiments of the present application.

[0227] The terms "first", "second", etc. in the description, claims, and drawings of the embodiments of the present application are used to distinguish different objects, rather than to describe a specific order. In addition, the terms "comprising" and any variations thereof are intended to cover non-exclusive inclusions. For example, a process, method, apparatus, product, or device comprising a series of steps or units is not limited to the listed steps or modules, but may optionally include steps or modules not listed, or may optionally include other step units inherent to these processes, methods, apparatuses, products, or devices.

[0228] Those skilled in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the composition and steps of each example have been generally described in terms of function in the above description. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application.

[0229] The methods and related devices provided by the embodiments of the present application are described with reference to the method flow charts and / or structural diagrams provided by the embodiments of the present application. Specifically, each process and / or block in the method flow charts and / or structural diagrams, as well as the combination of processes and / or blocks in the flow charts and / or block diagrams, can be implemented 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 generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the steps in the process. Figure 1 Schematic diagram of one or more processes and / or structures Figure 1 These computer program instructions can also be stored in a computer-readable memory that can guide a computer or other programmable data processing device to work in a specific way, so that the instructions stored in the computer-readable memory produce a product including the instruction device, which implements the function specified in the process. Figure 1 Schematic diagram of one or more processes and / or structures Figure 1 These computer program instructions can also be loaded onto a computer or other programmable data processing device, so that a series of operation steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process in the process. Figure 1 The flow or flows and / or structures illustrate the steps of the functions specified in one block or multiple blocks.

[0230] The above disclosure is only a preferred embodiment of the present application, and certainly cannot be used to limit the scope of rights of the present application. Therefore, equivalent changes made according to the claims of the present application are still within the scope covered by the present application.

Claims

1. A data processing method, characterized in that: include: In response to an interactive operation on a subprogram application, generating an interface rendering instruction indicated by the interactive operation; If the rendering framework indicated by the interface rendering instruction is a mobile application development framework, the interface rendering instruction is sent to the execution environment of the sub-program application through the first communication interface; the execution environment of the sub-program application is the execution environment of the native application, and the native application is the host application of the sub-program application; the first communication interface is a communication interface between a first programming language and a second programming language, the first programming language is the programming language corresponding to the interface rendering instruction, and the second programming language is the programming language corresponding to the native application; the mobile application development framework is used to build a native interactive interface on the native operating system; In the execution environment, a second communication interface is called based on the interface rendering instruction, the mobile application development framework is called through the second communication interface, and an interactive interface corresponding to the interactive operation is rendered based on the mobile application development framework; the second communication interface is a communication interface between the second programming language and a third programming language, and the third programming language is a development language corresponding to the mobile application development framework; The interactive interface is output.

2. The method according to claim 1, characterized in that The step of responding to an interactive operation of a subprogram application and generating an interface rendering instruction indicated by the interactive operation includes: In response to an interactive operation on the sub-program application, obtaining a page rendering template file of the sub-program application; Calling a template parser, parsing the page rendering template file based on the template parser, and generating a style shadow structure tree corresponding to the interactive operation based on the parsing result; the style shadow structure tree is composed of N shadow nodes, each shadow node contains element encapsulation information of a page element; N is a positive integer; the page element refers to an element used to construct the interactive interface; A rendering instruction including the style shadow structure tree is generated, and the rendering instruction including the style shadow structure tree is determined as the interface rendering instruction indicated by the interactive operation.

3. The method according to claim 1, characterized in that The method further comprises: In the execution environment, a page element structure tree corresponding to the interactive operation is created based on the interface rendering instruction; the page element structure tree is composed of N element nodes, each element node corresponds to a page element; each element node contains element description data, and an element description data refers to style description data of a page element; the page element refers to an element used to construct the interactive interface; If the page element structure tree is created successfully, the step of calling the second communication interface based on the interface rendering instruction in the execution environment is executed.

4. The method according to claim 3, characterized in that The interface rendering instruction includes a style shadow structure tree corresponding to the interactive operation, and the style shadow structure tree is composed of N shadow nodes, each shadow node includes element encapsulation information of a page element; the N shadow nodes include shadow nodes S i , the shadow node S i The element encapsulation information contained is element encapsulation information K i ; N , i are all positive integers; The step of creating a page element structure tree corresponding to the interactive operation based on the interface rendering instruction in the execution environment includes: Obtaining a style rule set; the style rule set includes element style rules corresponding to each page configuration element in the page configuration element set; the page configuration element refers to a configuration element used to constitute an application interface of the subprogram application, and the application interface includes the interactive interface; In the style rule set, determine the element encapsulation information K i The matching element style rule is matched, and the matching element style rule is determined as the shadow node S i Corresponding node element style; According to the style conversion standard, the shadow node S i The corresponding node element style is converted to obtain the shadow node S i The corresponding element describes the data; When the element description data corresponding to the N shadow nodes are determined, each shadow node is determined as an element node, and the structure tree composed of the N element nodes containing the corresponding element description data is determined as the page element structure tree corresponding to the interactive operation.

5. The method according to claim 4, characterized in that The obtaining of the style rule set includes: Obtaining a page style configuration table; the page style configuration table includes attribute definition information of each page configuration element; A style parser is called, and based on the style parser, the attribute definition information contained in the page style configuration table is parsed, and the style rule set is generated based on the parsing result.

6. The method according to claim 4, characterized in that The element encapsulation information K i Including the shadow node S i Node category information; the element style rules corresponding to each page configuration element included in the style rule set include configuration category information; In the style rule set, determine the element encapsulation information K i Matching element style rules, including: Determining, in the configuration category information set corresponding to the style rule set, configuration category information that matches the node category information as matching configuration category information; Determining the element style rule corresponding to the matching configuration category information in the style rule set as a candidate element style rule; According to the candidate element style rule, determine the element encapsulation information K i Matches the style rules of the matched elements.

7. The method according to claim 6, characterized in that The number of the candidate element style rules is at least two; the at least two candidate element style rules include candidate element style rule C j , j is a positive integer; The element encapsulation information K is determined based on the candidate element style rule. i Matching element style rules, including: Get the candidate element style rule C j The corresponding style priority attribute D j ; According to the style priority attribute D j , determine the candidate element style rule C j Corresponding priority weight; When the priority weights corresponding to at least two candidate element style rules are determined, the maximum priority weight among the at least two priority weights is determined as the target priority weight, and the candidate element style rule corresponding to the target priority weight is determined as the element encapsulation information K. i Matches the style rules of the matched elements.

8. The method according to claim 7, characterized in that The style priority attribute D j Including value attributes and rare attributes; According to the style priority attribute D j , determine the candidate element style rule C j The corresponding priority weights include: Obtaining a rare value corresponding to the rare attribute; If the value attribute is a value-effective attribute and the rarity value is greater than the rarity threshold, the weight value in the first weight interval that matches the rarity value is determined as the candidate element style rule C. j Corresponding priority weight; If the value attribute is a value-effective attribute and the rarity value is less than the rarity threshold, the weight value in the second weight interval that matches the rarity value is determined as the candidate element style rule C. j corresponding priority weight; the second weight interval is smaller than the first weight interval; If the value attribute is an invalid value attribute and the rarity value is greater than the rarity threshold, the weight value in the third weight interval that matches the rarity value is determined as the candidate element style rule C. j corresponding priority weight; the third weight interval is smaller than the second weight interval; If the value attribute is an invalid value attribute and the rarity value is less than the rarity threshold, the weight value of the fourth weight interval that matches the rarity value is determined as the candidate element style rule C. j Corresponding priority weight; the fourth weight interval is smaller than the third weight interval.

9. The method according to claim 4, characterized in that The rendering of the interactive interface corresponding to the interactive operation based on the mobile application development framework includes: Based on the second communication interface, an element node L is created in the isolated running environment of the third programming language. i The corresponding program object; Based on the element node L i The corresponding program object, for the element node L i The corresponding element description data is mounted and processed to obtain the element node L i The corresponding mount object; 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 is determined as the element mount structure tree corresponding to the interactive operation; Based on the mobile application development framework, the element mounting structure tree is rendered to obtain the interactive interface.

10. The method according to claim 9, characterized in that The rendering process of the element mounting structure tree based on the mobile application development framework to obtain the interactive interface includes: Based on the mobile application development framework, performing interface layout processing on the element mounting structure tree to obtain interactive interface layout information of the interactive interface; An interface drawing process is performed according to the interactive interface layout information to obtain a drawing interface, and the drawing interface is determined as the interactive interface.

11. The method according to claim 1, wherein The outputting the interactive interface includes: Performing rasterization processing on the interactive interface to obtain a raster processing interface; Output the raster processing interface.

12. The method according to claim 3, characterized in that The overall rendering thread of the subroutine application includes a development logic sub-thread and an interface rendering sub-thread, and the steps of generating the interface rendering instruction indicated by the interactive operation and creating, in the execution environment, a page element structure tree corresponding to the interactive operation based on the interface rendering instruction are both executed in the development logic sub-thread; In the execution environment, the second communication interface is called based on the interface rendering instruction, the mobile application development framework is called through the second communication interface, and the step of rendering the interactive interface corresponding to the interactive operation based on the mobile application development framework is executed in the interface rendering sub-thread.

13. A data processing device, characterized in that: include: An instruction generation module, configured to respond to an interactive operation on a subprogram application and generate an interface rendering instruction indicated by the interactive operation; an instruction sending module, configured to send the interface rendering instruction to the execution environment of the subroutine application via a first communication interface if the rendering framework indicated by the interface rendering instruction is a mobile application development framework; the execution environment of the subroutine application is the execution environment of a native application, and the native application is a host application of the subroutine application; the first communication interface is a communication interface between a first programming language and a second programming language, the first programming language being the programming language corresponding to the interface rendering instruction, and the second programming language being the programming language corresponding to the native application; An interface calling module, configured to call a second communication interface based on the interface rendering instruction in the execution environment; an interface rendering module, configured to call the mobile application development framework through the second communication interface and render an interactive interface corresponding to the interactive operation based on the mobile application development framework; the second communication interface is a communication interface between the second programming language and a third programming language, and the third programming language is a development language corresponding to the mobile application development framework; The interface output module is used to output the interactive interface.

14. A computer device, characterized in that: include: processor, memory, and network interface; The processor is connected to the memory and the network interface, wherein the network interface is used to provide a network communication function, the memory is used to store a computer program, and the processor is used to call the computer program so that the computer device executes the method according to any one of claims 1 to 12.

15. A computer-readable storage medium, characterized in that The computer-readable storage medium stores a computer program, and the computer program is suitable for being loaded by a processor and executing the method according to any one of claims 1 to 12.

16. A computer program product, characterized in that The computer program product comprises a computer program stored in a computer-readable storage medium. The computer program is suitable for being read and executed by a processor, so that a computer device having the processor executes the method according to any one of claims 1 to 12.

Images