Cross-platform application development method and device, terminal and storage medium

Abstract

The embodiment of the invention discloses a cross-platform application development method and device, a terminal and a storage medium. According to the scheme, the application can be initialized, the first virtual DOM tree is created according to the structure of the current DOM, the second virtual DOM tree is created according to the change information of the application state, the difference information between the first virtual DOM tree and the second virtual DOM tree is calculated, and the difference information is applied to the current DOM to complete interface updating. And mapping each node in the first virtual DOM tree to a native component corresponding to the platform according to the platform type. And a cross-platform API interface is defined according to the function type, and adaptation is carried out according to different platform types. According to the scheme provided by the embodiment of the invention, a virtual DOM (Document Object Model) technology is adopted and a platform native component is combined, so that the application can have better performance on each terminal device, and the development difficulty is greatly reduced.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a cross-platform application development method, device, terminal and storage medium. Background Art

[0002] With the advent of the mobile Internet era, more and more applications need to support multiple terminal devices such as mobile phones, tablets and PCs at the same time. The traditional native application development model requires development and maintenance for different platforms separately, which not only has a long development cycle but also high costs. In recent years, cross-platform application development technologies such as hybrid applications based on Web technology, native applications based on ReactNative / Flutter, and desktop applications based on Electron have developed rapidly.

[0003] In actual use, the applicant found that: although existing cross-platform application development technologies, such as hybrid applications based on Web technology, native applications based on React Native / Flutter, and desktop applications based on Electron, have achieved cross-platform deployment to a certain extent, there are still some major problems: hybrid applications will have obvious performance problems in some scenarios due to their over-reliance on Web technology. At the same time, existing cross-platform application development technologies usually require developers to master a variety of different programming languages ​​and frameworks, which increases the learning cost and development difficulty. In addition, different cross-platform application development technologies use different programming languages, frameworks, and tools, which increases the complexity of development and maintenance. Summary of the invention

[0004] The embodiments of the present application provide a cross-platform application development method, device, terminal and storage medium, which adopt virtual document object model (DOM) technology and combine platform native components to ensure that the application can have better performance on each terminal device and greatly reduce the development difficulty.

[0005] The present application embodiment provides a cross-platform application development method, including:

[0006] Initialize the application and create a first virtual DOM tree according to the current DOM structure, and create a second virtual DOM tree according to the change information of the application state;

[0007] Calculate the difference information between the first virtual DOM tree and the second virtual DOM tree, and apply the difference information to the current DOM to complete the interface update;

[0008] Mapping each node in the first virtual DOM tree to a native component corresponding to the platform according to the platform type;

[0009] Define cross-platform API interfaces based on functional types and adapt them to different platform types.

[0010] The present application also provides a cross-platform application development device, including:

[0011] A creation unit, used to initialize the application and create a first virtual DOM tree according to the structure of the current DOM, and create a second virtual DOM tree according to the change information of the application state;

[0012] An updating unit, configured to calculate difference information between the first virtual DOM tree and the second virtual DOM tree, and apply the difference information to the current DOM to complete interface update;

[0013] A mapping unit, configured to map each node in the first virtual DOM tree to a native component corresponding to the platform according to a platform type;

[0014] The adaptation unit is used to define cross-platform API interfaces according to function types and adapt them to different platform types.

[0015] An embodiment of the present application also provides a terminal, which includes: a memory and a processor, wherein an application processing program is stored in the memory, and when the application processing program is executed by the processor, the steps of any one of the cross-platform application development methods provided in the embodiments of the present application are implemented.

[0016] An embodiment of the present application also provides a computer-readable storage medium, which stores multiple instructions, and the instructions are suitable for a processor to load to execute any cross-platform application development method provided in the embodiment of the present application.

[0017] The cross-platform application development method provided in the embodiment of the present application can initialize the application and create a first virtual DOM tree according to the structure of the current DOM, create a second virtual DOM tree according to the change information of the application state, calculate the difference information between the first virtual DOM tree and the second virtual DOM tree, apply the difference information to the current DOM to complete the interface update, and map each node in the first virtual DOM tree to the native component corresponding to the platform according to the platform type. Define the cross-platform API interface according to the function type and adapt it for different platform types. The solution provided in the embodiment of the present application adopts virtual DOM technology and combines platform native components to ensure that the application has better performance on each terminal device and greatly reduces the difficulty of development. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For those skilled in the art, other drawings can be obtained based on these drawings without creative work.

[0019] Figure 1 This is a first flow chart of the cross-platform application development method provided by the embodiment of the present application;

[0020] Figure 2 It is a schematic diagram of the structure of the virtual DOM tree corresponding to the user login interface provided in the embodiment of the present application;

[0021] Figure 3 This is a schematic diagram of a cross-platform application development framework provided by an embodiment of the present application;

[0022] Figure 4 This is a second flow chart of the cross-platform application development method provided in the embodiment of the present application;

[0023] Figure 5 This is a schematic diagram of the structure of a cross-platform application development device provided in an embodiment of the present application;

[0024] Figure 6 It is a schematic diagram of the structure of the terminal provided in the embodiment of the present application. DETAILED DESCRIPTION

[0025] Exemplary embodiments will be described in detail herein, examples of which are shown in the accompanying drawings. When the following description refers to the drawings, the same numbers in different drawings represent the same or similar elements unless otherwise indicated. The implementations described in the following exemplary embodiments do not represent all implementations consistent with the present application. Instead, they are merely examples of devices and methods consistent with some aspects of the present application as detailed in the appended claims.

[0026] It should be noted that, in this article, the terms "include", "comprises" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also includes other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, an element defined by the sentence "includes a ..." does not exclude the existence of other identical elements in the process, method, article or device including the element. In addition, components, features, and elements with the same name in different embodiments of the present application may have the same meaning or different meanings, and their specific meanings need to be determined by their explanation in the specific embodiment or further combined with the context of the specific embodiment.

[0027] It should be understood that, although the various steps in the flowchart in the embodiment of the present application are displayed in sequence according to the indication of the arrows, these steps are not necessarily performed in sequence according to the order indicated by the arrows. Unless there is a clear explanation in this article, the execution of these steps does not have a strict order restriction, and it can be performed in other orders. Moreover, at least a portion of the steps in the figure may include a plurality of sub-steps or a plurality of stages, and these sub-steps or stages are not necessarily performed at the same time, but can be performed at different times, and their execution order is not necessarily performed in sequence, but can be performed in turn or alternately with other steps or at least a portion of the sub-steps or stages of other steps.

[0028] It should be noted that, in this article, step codes such as 101, 102, etc. are used for the purpose of expressing the corresponding content more clearly and concisely, and do not constitute a substantial limitation on the sequence. When implementing the step, those skilled in the art may execute 102 first and then 101, etc., but these should all be within the scope of protection of this application.

[0029] Reference to "embodiments" herein means that a particular feature, structure, or characteristic described in conjunction with the embodiments may be included in at least one embodiment of the present application. The appearance of the phrase in various locations in the specification does not necessarily refer to the same embodiment, nor is it an independent or alternative embodiment that is mutually exclusive with other embodiments. It is explicitly and implicitly understood by those skilled in the art that the embodiments described herein may be combined with other embodiments.

[0030] An embodiment of the present application provides a cross-platform application development method, and the executor of the cross-platform application development method can be the cross-platform application development device provided in the embodiment of the present application, or an intelligent terminal and a server integrating the cross-platform application development device, wherein the cross-platform application development device can be implemented in hardware or software.

[0031] For details, please refer to Figure 1 , Figure 1 This is a first flow chart of the cross-platform application development method provided by the embodiment of the present application. The specific flow of the cross-platform application development method can be as follows:

[0032] 101. Initialize the application and create a first virtual DOM tree according to the current DOM structure, and create a second virtual DOM tree according to application state change information.

[0033] In one embodiment, when the application is initialized, a virtual DOM tree with the same structure as the current DOM (i.e., the actual DOM) is created, wherein the virtual DOM tree is a lightweight JavaScript object representation, and contains the attribute information of all UI elements, such as tag name, attribute, child node, etc. Then the state change is monitored and the virtual DOM tree is rebuilt. Specifically, when the application state changes, such as the user clicks a button or enters form data, a new virtual DOM tree is rebuilt according to the new state, and the new virtual DOM tree (i.e., the second virtual DOM tree) will have some differences with the previous virtual DOM tree (i.e., the first virtual DOM tree).

[0034] Specifically, the user login interface is used as an example for explanation. The user login interface may include a user name input box, a password input box, and a login button. For an example of the structure of the corresponding first virtual DOM tree, please refer to Figure 2 , where div is the root node, representing a container, input1 represents the username input box, and its attributes are type="text", placeholder="username", input2 represents the password input box, and its attributes are type="password", placeholder="password", input3 represents a hidden input box, and button is the login button, and its attributes are type="submit", text="login". When the user enters content in the username input box, the attributes of the username input box in the second virtual DOM tree are changed compared with the first virtual DOM tree, and its attributes are newly added with value="input username", while the other parts remain unchanged. By comparing the two virtual DOM trees, it can be determined that only the DOM element of the username input box needs to be updated, without re-rendering the entire page, thereby improving rendering efficiency.

[0035] 102. Calculate difference information between the first virtual DOM tree and the second virtual DOM tree, and apply the difference information to the current DOM to complete interface update.

[0036] Furthermore, this embodiment can use the Diff algorithm to compare the difference information of the first virtual DOM tree and the second virtual DOM tree one by one, and calculate the minimum DOM change set that needs to be updated, such as which nodes need to be added, modified or deleted. Finally, these minimum changes (that is, the difference information) are applied to the real DOM at one time, thereby completing the update of the UI (interface). This process is very efficient because only the necessary parts are updated instead of all re-rendering.

[0037] Specifically, after using the Diff algorithm to compare the first virtual DOM tree and the second virtual DOM tree, the difference information obtained may include node attribute modification, node content modification, new node addition, and node deletion, etc., and then find the target node to be updated in the real DOM according to the correspondence between the virtual DOM node and the real DOM node. It can be achieved by traversing the real DOM tree or using an existing mapping relationship (such as the correspondence with the real DOM node established when the virtual DOM tree is created). Then, for the difference information of attribute modification, the corresponding attribute value is directly updated on the real DOM node. For node content modification, such as button text changes, the text content of the real DOM node can be directly updated. When there is a new node, a new real DOM node can be created and inserted into the correct position according to the node structure and attribute information in the virtual DOM tree. For the nodes that need to be deleted, the corresponding nodes can be directly removed from the real DOM tree. Through the above steps, the difference information between the virtual DOM trees can be accurately and efficiently applied to the real DOM to complete the interface update.

[0038] In this embodiment, a virtual DOM tree is used to manage the UI elements of the application. Compared with direct DOM operation, the virtual DOM tree can greatly improve the rendering efficiency. The virtual DOM tree tracks the changes in the page state, and then efficiently calculates the minimum set of DOM changes that need to be updated, and finally updates it to the actual DOM at one time. This mechanism avoids performance problems caused by frequent DOM operations, ensuring that the application can provide a smooth user experience on various terminal devices.

[0039] 103. Map each node in the first virtual DOM tree to a native component corresponding to the platform according to the platform type.

[0040] In one embodiment, in order to further optimize performance, the first virtual DOM tree will be mapped to the platform native component, making full use of the hardware acceleration capabilities of each platform. This method can minimize the performance loss of cross-platform applications. Specifically, for the iOS platform, the first virtual DOM tree will be mapped to the UIKit component, where UIKit is the native UI component library of iOS, providing rich controls and a powerful rendering engine. This embodiment will convert each node in the first virtual DOM tree into a corresponding UIKit component such as UIView, UILabel, UIButton, and set the corresponding properties. For the Android platform, the first virtual DOM tree will be mapped to the Android native component, where Android native controls include TextView, Button, ListView, etc. This embodiment will convert each node in the first virtual DOM tree into a corresponding Android native control and set the corresponding properties. This mapping process will reuse the native UI components of each platform as much as possible, avoid implementing cross-platform custom components by yourself, and can maximize performance, because the framework can use the platform's native rendering engine and hardware acceleration capabilities, and ensure that the application can run smoothly on each platform.

[0041] 104. Define cross-platform API interfaces based on functional types and adapt them to different platform types.

[0042] In this embodiment, the differences between various platforms can also be adapted and encapsulated to provide a unified API for upper-level applications, including cross-platform adaptation in terms of UI components, API calls, and permission management, to ensure that developers can write a set of codes that can be applied to different platforms. Through the encapsulation of this module, developers can focus on the development of business logic without paying too much attention to platform differences.

[0043] The cross-platform application development method provided in the embodiment of the present application is applied to a modular cross-platform application development framework. The structure of the framework can be found in Figure 3 , which can specifically include: view rendering module, event system module, state management module, navigation routing module, platform adaptation module and plug-in system module. Specifically, the above view rendering module is responsible for efficiently mapping the virtual DOM tree to the native UI components of each platform. For the iOS platform, it will convert the nodes in the virtual DOM tree into UIKit components, using the native rendering engine and hardware acceleration capabilities of iOS. For the Android platform, it will convert the nodes in the virtual DOM tree into Android native components, using the rendering advantages of the Android platform. This method of direct mapping to native components can minimize the performance loss of cross-platform applications and provide a smooth experience close to native applications.

[0044] Furthermore, the event system module is responsible for handling various user interaction events, such as clicks, scrolls, inputs, etc. It abstracts native events of different platforms into a unified event model. Developers can use a consistent API to handle events. This module is responsible for event distribution and response processing to ensure that events can be correctly routed to the corresponding event handlers. At the same time, it also provides advanced event processing mechanisms such as event bubbling and event capture to facilitate developers to implement complex interaction logic. The specific working process of the event system module includes: receiving native events corresponding to different platforms, creating corresponding event objects according to the type of native events, and executing callback functions corresponding to the type of native events to distribute event objects to event handlers.

[0045] The state management module is responsible for the unified management of the application state and provides a subscription and notification mechanism for state changes. It can adopt classic state management modes such as flux and redux to ensure that the view layer can automatically re-render efficiently according to state changes. The state management module also provides advanced functions such as state snapshots, time travel, and state debugging, which enhances the maintainability and debuggability of the application.

[0046] The navigation routing module is responsible for the page navigation and routing management of the application, and provides declarative routing definitions and navigation APIs. It can support advanced routing functions such as nested routing and dynamic routing, making it easier for developers to build complex applications. At the same time, the module will also adapt to the navigation mechanisms of different platforms to shield platform differences for upper-level applications.

[0047] The platform adaptation module is responsible for adapting and encapsulating the differences between various platforms and providing a unified API for upper-level applications. By adapting and encapsulating the differences between various platforms through the platform adaptation module, developers can focus on the development of business logic without paying too much attention to platform differences.

[0048] The plug-in system module provides a plug-in mechanism, allowing developers to freely expand the functionality of the framework as needed. Plug-ins can be independent functional modules or enhancements to existing modules. This plug-in system ensures the scalability and customizability of the framework itself, allowing the framework to better adapt to various complex business needs.

[0049] Therefore, the above cross-platform application development framework uses modular design to clearly divide and decouple various functions, thereby improving the flexibility and maintainability of the framework. Each module has clear responsibilities and boundaries, and communicates with each other through standard interfaces, reducing the degree of coupling. This modular design not only facilitates customization and expansion by developers, but also makes the framework itself easier to evolve and iterate.

[0050] In one embodiment, in order to improve development efficiency, the framework can also integrate complete development, debugging and deployment tools, including code editor plug-ins, debugging tools, packaging tools, etc. These tools can help developers efficiently complete the entire application development life cycle, from code writing to debugging and testing, and then to final deployment and release. At the same time, the framework also supports command line tools, making continuous integration and automated deployment easier to achieve.

[0051] In one embodiment, the above-mentioned cross-platform application development framework also supports an application hot update mechanism, and developers can push application updates to users instantly without the need for users to reinstall or update. The application hot update mechanism is based on the principle of incremental update, and only updates the changed parts, which greatly improves the update speed and user experience. At the same time, hot updates also reduce the cost of application maintenance, and developers can fix bugs and iterate new functions more quickly. The specific process includes: when receiving the application update message returned by the server, downloading the update package corresponding to the application, parsing the update package, confirming the target module that needs to be updated, and replacing the initial code of the target module with the code corresponding to the current application state according to the update package, and mapping the initial application state to the updated target module. The step of downloading the update package corresponding to the application may include: determining the change code between the current application state and the initial application state, generating an update package based on the change code, and downloading the update package in an incremental update manner.

[0052] For example, when an application is started, it will actively check whether a new version of the application code is available. This is usually achieved by sending a version check request to the server, and the server will return the latest code version information. If a new version is detected, the application will automatically download the incremental update package. The incremental update package usually only contains the changed code, not the entire application code, which can greatly reduce the size of the update package and increase the update speed. After the download is complete, the application will parse and analyze the update package to calculate which modules have changed and need to be incrementally updated. After determining the modules that need to be updated, the application will dynamically load these modules and replace the old version of the code. This process is completed while the application is running and does not require restarting the application. In order to ensure the continuity of the application state, when loading the updated module, state migration is also required, that is, mapping the original application state to the updated module to ensure the smoothness of user operation. When all update operations are completed, the application will notify the user that the update has taken effect. The user can immediately use the new version of the function without restarting the application. The entire hot update process is completed while the application is running, and the user is unaware. This not only improves the update speed, but also enhances the user experience, and developers do not need to frequently release new versions of applications.

[0053] As described above, the cross-platform application development method proposed in the embodiment of the present application can initialize the application and create a first virtual DOM tree according to the structure of the current DOM, create a second virtual DOM tree according to the change information of the application state, calculate the difference information between the first virtual DOM tree and the second virtual DOM tree, apply the difference information to the current DOM to complete the interface update, and map each node in the first virtual DOM tree to the native component corresponding to the platform according to the platform type. Define the cross-platform API interface according to the function type and adapt it for different platform types. The solution provided in the embodiment of the present application adopts virtual DOM technology and combines platform native components to ensure that the application has better performance on each terminal device and greatly reduces the difficulty of development.

[0054] The method described in the above embodiment will be further described below.

[0055] See also Figure 4 , Figure 4 This is a second flow chart of the cross-platform application development method provided in the embodiment of the present application. The method comprises:

[0056] 201. Initialize the application and create a first virtual DOM tree according to the current DOM structure, and create a second virtual DOM tree according to the change information of the application state.

[0057] 202. Traverse the first virtual DOM tree and the second virtual DOM tree to obtain an identifier of each node.

[0058] 203. Compare corresponding nodes in the first virtual DOM tree and the second virtual DOM tree according to the identifier to confirm the modified target node.

[0059] 204. Record the node information of the target node, generate a difference information list, and generate an instruction set for updating the current DOM according to the difference information list to complete the interface update.

[0060] For example, after the application is initialized, JavaScript objects (or components provided by a specific framework) can be used to represent the structure and state of the DOM and build the first virtual DOM tree. This tree is built entirely in memory and does not involve actual DOM operations. Then, with user interaction or other events (such as API responses), the state of the application may change. According to the new state of the application, a new virtual DOM tree is rebuilt, which is also built entirely in memory. Through depth-first search (DFS) or other algorithms, two virtual DOM trees are traversed, and each node in the virtual DOM tree is assigned a unique identifier (possibly through a key attribute, which is particularly important in React), and then the corresponding nodes in the two virtual DOM trees are compared based on these identifiers. For each pair of nodes compared, check whether their attributes and child nodes are different. If there are differences, these nodes are marked as target nodes that need to be updated to generate a difference information list, which details which nodes need to be added, deleted, moved or updated, as well as their new attributes or child node information. Based on the difference information list, a series of instructions for updating the actual DOM are generated, and these instructions are used to minimize DOM changes. For example, if only the list of child nodes of a certain node has changed, only the child nodes of this node will be re-rendered, not the entire DOM tree. According to the above instructions, the actual DOM is updated to reflect the new state of the application, and the updated DOM can respond to further user interactions, which may trigger a new round of virtual DOM tree creation, comparison, and update process.

[0061] 205. According to the current platform type, select a corresponding native component mapping rule, match each node in the first virtual DOM tree with the native component mapping rule, and determine the native component corresponding to each node.

[0062] 206. Generate a native component tree for the current platform to achieve interface display of cross-platform applications.

[0063] First, the application needs to identify which platform it is currently running on, which can be achieved through environment variables, conditional compilation instructions, or APIs provided by the framework. After determining the platform type, you can further select appropriate native component mapping rules based on the platform. These rules define how different types of nodes in the virtual DOM tree should be mapped to specific native components. Traverse each node in the first virtual DOM tree, and find the corresponding native component from the mapping rules according to its type (such as tag name, attributes, etc.) and the current platform type. By matching nodes with native components, the entire virtual DOM tree can be converted into a native component tree that can be understood and rendered by the current platform. This conversion process can be automatic (completed by the framework) or it can be manually completed by the developer through specific syntax or API when writing components. This embodiment does not further limit this. Finally, the framework will use the rendering capabilities of the native platform to render this native component tree, thereby realizing the interface display of cross-platform applications.

[0064] 207. According to the types of functions that the application needs to implement, build a set of general API interfaces, and create corresponding API interface adaptation layers for different platform types.

[0065] 208. Through the API interface adaptation layer, the call of the general API interface is converted into the native API call of the corresponding platform to realize the unified call of cross-platform functions.

[0066] Specifically, define a cross-platform API interface according to the function type, and adapt and optimize it for different platform types. The following steps may be included:

[0067] First, clarify the functional requirements of the API interface. This includes defining the input parameters, output results, and expected behaviors of the interface. Through detailed requirements analysis, you can ensure that the API has uniform functional performance on different platforms.

[0068] Secondly, choose a suitable cross-platform framework. There are many excellent cross-platform frameworks on the market, such as ReactNative, Flutter, and Xamarin. According to the project requirements and team technology stack, choose a most suitable framework for development.

[0069] Next, design a unified API interface specification. In order to ensure compatibility between different platforms, a set of common interface protocols needs to be defined. This can be achieved by using RESTful API design principles or technologies such as GraphQL to ensure that the interface specification is concise, easy to understand, and easy to expand.

[0070] Then, adapt and optimize for different platforms. Although this embodiment defines a unified interface specification, each platform may differ in implementation details. For example, on the iOS platform, you may need to use Swift or Objective-C language for development; on the Android platform, you may use Java or Kotlin. It is necessary to perform corresponding adaptation work according to the characteristics of each platform to ensure that the API interface can run normally on each platform. In addition, write detailed API documentation. Documentation is an indispensable part of API interface development. It is also necessary to write clear instructions for use, parameter descriptions, and sample codes for each interface so that developers can quickly get started and use the API correctly.

[0071] Finally, conduct sufficient testing. Testing of cross-platform API interfaces needs to be performed on different platforms to ensure that the interfaces perform consistently and stably on each platform. Automated testing tools can be used to improve testing efficiency, while manual testing is also required to ensure the performance of the interfaces under various boundary conditions.

[0072] By following the above steps, you can successfully define and implement a cross-platform API interface, which not only improves development efficiency but also provides users with a consistent experience.

[0073] As described above, the cross-platform application development method proposed in the embodiment of the present application can initialize the application and create a first virtual DOM tree according to the structure of the current DOM, create a second virtual DOM tree according to the change information of the application state, traverse the first virtual DOM tree and the second virtual DOM tree, obtain the identifier of each node, compare the corresponding nodes in the first virtual DOM tree and the second virtual DOM tree according to the identifier, confirm the modified target node, record the node information of the target node, generate a difference information list, and generate an instruction set for updating the current DOM according to the difference information list to complete the interface update, select the corresponding native component mapping rule according to the current platform type, match each node in the first virtual DOM tree with the native component mapping rule, determine the native component corresponding to each node, and generate a native component tree for the current platform to realize the interface display of the cross-platform application, and build a set of general API interfaces according to the function type that the application needs to implement, and create corresponding API interface adaptation layers for different platform types. Through the API interface adaptation layer, the call of the general API interface is converted into the native API call of the corresponding platform to realize the unified call of cross-platform functions. The solution provided in the embodiment of the present application adopts virtual DOM technology and combines platform native components to ensure that the application can have better performance on each terminal device and greatly reduce the difficulty of development.

[0074] For example, Figure 5, which is a schematic diagram of the first structure of a cross-platform application development device provided in an embodiment of the present application. The cross-platform application development device may include:

[0075] A creation unit 301 is used to initialize the application and create a first virtual DOM tree according to the structure of the current DOM, and create a second virtual DOM tree according to the change information of the application state;

[0076] An updating unit 302 is used to calculate difference information between the first virtual DOM tree and the second virtual DOM tree, and apply the difference information to the current DOM to complete the interface update;

[0077] A mapping unit 303 is used to map each node in the first virtual DOM tree to a native component corresponding to the platform according to the platform type;

[0078] The adaptation unit 304 is used to define a cross-platform API interface according to the function type and adapt it to different platform types.

[0079] The cross-platform application development device proposed in the embodiment of the present application can initialize the application and create a first virtual DOM tree according to the structure of the current DOM, create a second virtual DOM tree according to the change information of the application state, calculate the difference information between the first virtual DOM tree and the second virtual DOM tree, apply the difference information to the current DOM to complete the interface update, and map each node in the first virtual DOM tree to the native component corresponding to the platform according to the platform type. Define the cross-platform API interface according to the function type and adapt it for different platform types. The solution provided in the embodiment of the present application adopts virtual DOM technology and combines platform native components to ensure that the application has better performance on each terminal device and greatly reduces the difficulty of development.

[0080] The present application also provides a terminal, such as Figure 6 As shown, the terminal 400 may include a memory 401 and a processor 402, wherein the memory 401 stores an application processing program, and when the application processing program is executed by the processor 402, the steps of the above-mentioned cross-platform application development method in the embodiment of the present application are implemented.

[0081] Specifically in this embodiment, the processor 402 in the terminal will load the executable files corresponding to the processes of one or more applications into the memory 401 according to the following instructions, and the processor 402 will run the application stored in the memory 401 to implement various functions:

[0082] Initialize the application and create a first virtual DOM tree according to the current DOM structure, and create a second virtual DOM tree according to the change information of the application state;

[0083] Calculate the difference information between the first virtual DOM tree and the second virtual DOM tree, and apply the difference information to the current DOM to complete the interface update;

[0084] Mapping each node in the first virtual DOM tree to a native component corresponding to the platform according to the platform type;

[0085] Define cross-platform API interfaces based on functional types and adapt them to different platform types.

[0086] In the above embodiments, the description of each embodiment has its own focus. For the part that is not described in detail in a certain embodiment, please refer to the detailed description of the cross-platform application development method above, which will not be repeated here.

[0087] As can be seen from the above, the terminal of the embodiment of the present application can initialize the application and create a first virtual DOM tree according to the structure of the current DOM, create a second virtual DOM tree according to the change information of the application state, calculate the difference information between the first virtual DOM tree and the second virtual DOM tree, and apply the difference information to the current DOM to complete the interface update, and map each node in the first virtual DOM tree to the native component corresponding to the platform according to the platform type. Define a cross-platform API interface according to the function type and adapt it for different platform types. The solution provided by the embodiment of the present application adopts virtual DOM technology and combines platform native components to ensure that the application has better performance on each terminal device and greatly reduces the difficulty of development.

[0088] A person of ordinary skill in the art will appreciate that all or part of the steps in the various methods of the above embodiments may be completed by instructions, or by controlling related hardware through instructions. The instructions may be stored in a computer-readable storage medium and loaded and executed by a processor.

[0089] To this end, an embodiment of the present application provides a computer-readable storage medium, in which a plurality of instructions are stored, and the instructions can be loaded by a processor to execute the steps in any cross-platform application development method provided in the embodiment of the present application. For example, the instructions can execute the following steps:

[0090] Initialize the application and create a first virtual DOM tree according to the current DOM structure, and create a second virtual DOM tree according to the change information of the application state;

[0091] Calculate the difference information between the first virtual DOM tree and the second virtual DOM tree, and apply the difference information to the current DOM to complete the interface update;

[0092] Mapping each node in the first virtual DOM tree to a native component corresponding to the platform according to the platform type;

[0093] Define cross-platform API interfaces based on function types and adapt them to different platform types.

[0094] The specific implementation of the above operations can be found in the previous embodiments, which will not be described in detail here.

[0095] The storage medium may include: a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, etc.

[0096] Since the instructions stored in the storage medium can execute the steps in any cross-platform application development method provided in the embodiments of the present application, the beneficial effects that can be achieved by any cross-platform application development method provided in the embodiments of the present application can be achieved. Please refer to the previous embodiments for details and will not be repeated here.

[0097] The above is a detailed introduction to a cross-platform application development method, device, terminal and storage medium provided in the embodiments of the present application. Specific examples are used in this article to illustrate the principles and implementation methods of the present application. The description of the above embodiments is only used to help understand the method of the present application and its core idea; at the same time, for technical personnel in this field, according to the ideas of the present application, there will be changes in the specific implementation methods and application scopes. In summary, the content of this specification should not be understood as a limitation on the present application.

Claims

1. A cross-platform application development method, characterized in that: include: Initialize the application and create a first virtual DOM tree according to the current DOM structure, and create a second virtual DOM tree according to the change information of the application state; Calculate the difference information between the first virtual DOM tree and the second virtual DOM tree, and apply the difference information to the current DOM to complete the interface update; Mapping each node in the first virtual DOM tree to a native component corresponding to the platform according to the platform type; Define cross-platform API interfaces based on function types and adapt them to different platform types.

2. The cross-platform application development method according to claim 1, characterized in that: The calculating difference information between the first virtual DOM tree and the second virtual DOM tree includes: Traverse the first virtual DOM tree and the second virtual DOM tree to obtain an identifier of each node; Compare corresponding nodes in the first virtual DOM tree and the second virtual DOM tree according to the identifier to confirm the modified target node; Recording the node information of the target node and generating a difference information list; Generates a set of instructions for updating the current DOM based on the difference information list.

3. The cross-platform application development method according to claim 2, characterized in that: The mapping each node in the first virtual DOM tree to a native component corresponding to the platform according to the platform type includes: According to the current platform type, select the corresponding native component mapping rule; Match each node in the first virtual DOM tree with the native component mapping rule to determine the native component corresponding to each node; Generate a native component tree for the current platform to achieve cross-platform application interface display.

4. The cross-platform application development method according to claim 3, characterized in that: The cross-platform API interface is defined according to the function type and adapted to different platform types, including: Build a set of common API interfaces based on the types of functions that the application needs to implement; Create corresponding API interface adaptation layers for different platform types; Through the API interface adaptation layer, the call of the general API interface is converted into the native API call of the corresponding platform to realize the unified call of cross-platform functions.

5. The cross-platform application development method according to any one of claims 1 to 4, characterized in that: The method further comprises: Receive native events corresponding to different platforms, and create corresponding event objects according to the types of the native events; A callback function corresponding to the type of the native event is executed to distribute the event object to an event handler.

6. The cross-platform application development method according to any one of claims 1 to 4, characterized in that: The method further comprises: When receiving an application update message returned by the server, downloading an update package corresponding to the application; Parsing the update package to confirm the target module that needs to be updated; According to the update package, the initial code of the target module is replaced with the code corresponding to the current application state, and the initial application state is mapped to the updated target module.

7. The cross-platform application development method according to claim 6, characterized in that: The downloading of the update package corresponding to the application includes: Determine the change code between the current application state and the initial application state; The update package is generated based on the changed code, and the update package is downloaded in an incremental update manner.

8. A cross-platform application development device, characterized in that: include: A creation unit, used to initialize the application and create a first virtual DOM tree according to the structure of the current DOM, and create a second virtual DOM tree according to the change information of the application state; An updating unit, configured to calculate difference information between the first virtual DOM tree and the second virtual DOM tree, and apply the difference information to the current DOM to complete the interface update; A mapping unit, configured to map each node in the first virtual DOM tree to a native component corresponding to the platform according to a platform type; The adaptation unit is used to define cross-platform API interfaces according to function types and adapt them to different platform types.

9. A terminal, characterized in that: The terminal comprises: a memory and a processor, wherein the memory stores an application processing program, and when the application processing program is executed by the processor, the steps of the cross-platform application development method according to any one of claims 1 to 7 are implemented.

10. A computer-readable storage medium, characterized in that: The storage medium stores a plurality of instructions, and the instructions are suitable for being loaded by a processor to execute the cross-platform application development method according to any one of claims 1 to 7.

Images