Page generation method and device
Through the protocolized view tree mapping and control rendering engine, the problem of poor application page update compatibility and user experience is solved, cross-platform view consistency and dynamic rendering are achieved, reducing the installation package size and improving user experience.
Patent Information
- Application Number
- CN202110534142.6
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2021-05-17
- Publication Date
- 2025-08-19
- Estimated Expiration
- 2041-05-17
AI Technical Summary
The existing application page update compatibility is poor and the user experience is poor, especially in special scenarios, the thermal update technology compatibility is poor, the cross-platform development technology interaction experience is poor, the component installation package is large in size, and the Android and IOS display is inconsistent.
The page code is mapped into a protocol view tree through the protocol view tree mapping engine, and the protocol control rendering engine is used to render controls on different platforms, and dynamically fill data through the data filler to achieve dynamic rendering and loading of the page, reducing the need for version upgrades.
It realizes the flexibility and dynamic pages, ensures the consistency of view of Android and IOS platforms, reduces the size of the installation package, improves the user experience, and allows you to see the latest UI effects without version upgrades.
Smart Images

Figure CN113220339B_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the field of computer technology, and in particular to a page generation method and device. Background Art
[0002] With the continuous development of mobile technology, users have higher and higher requirements for the functions and performance of application apps. A typical manifestation is that in special scenarios such as big sales and traditional festivals, if the application app needs to be upgraded every time to present the corresponding theme styles and special gameplay to users, the user experience will be very poor.
[0003] Currently, apps can be made dynamic through hot update technology, pushing new content via patches to all devices that have the app installed. These devices download the patches silently and update the app without the user noticing. Alternatively, cross-platform technologies like React Native and Flutter, as well as HTML5 web page instant update technologies, can be used to push new content to users when page content changes. Furthermore, apps can be built with built-in components. These components consist of a series of controls that are populated with data and rendered in styles based on content returned by network interfaces.
[0004] In the process of implementing the present invention, the inventors discovered that the prior art has at least the following problems:
[0005] Hot update technology still fails to download and install patches on some terminal models in certain scenarios, resulting in poor compatibility. Cross-platform development technologies like React Native and Flutter are only suitable for displaying simple pages and lack compatibility with overly complex, interactive pages. H5 pages can be updated instantly, but because they are embedded in a WebView, the user experience is significantly reduced.
[0006] Furthermore, because the control positions within a component are fixed, adjustments to the interface style still require releasing a new version. Furthermore, as the app's version evolves, more and more built-in components are added, resulting in an increasing size of the installation package. Furthermore, because both Android and iOS have built-in components, display inconsistencies between Android and iOS may occur. Summary of the Invention
[0007] In view of this, an embodiment of the present invention provides a page generation method and apparatus, which can solve the problems of poor compatibility and poor user experience in existing application page updates.
[0008] To achieve the above-mentioned purpose, according to one aspect of an embodiment of the present invention, a page generation method is provided, comprising receiving an application running instruction, obtaining view tree configuration data corresponding to the application from the view tree data configuration interface of the configuration layer; registering the view tree configuration data to the basic layer, so as to render each node of the view tree into a control through the protocolized control rendering engine of the basic layer, and then passing the control to the view loader in the business layer for page layout and loading; based on the data request address of the view tree configuration data, the data filler of the business layer obtains the data source to fill the data source into the corresponding control.
[0009] Optionally, before obtaining the view tree configuration data corresponding to the application from the view tree data configuration interface of the configuration layer, the method includes:
[0010] Obtain the page code, call the protocolized view tree mapping engine in the base layer, and map the page code into a protocol view tree; configure the field name of each node data source in the protocol view tree and the data request address corresponding to the protocol view tree, and then generate view tree configuration data together with the protocol view tree; upload the view tree configuration data to the view tree data configuration interface of the configuration layer.
[0011] Optionally, map the page code to a protocol view tree, including:
[0012] Perform a depth-first traversal of the DOM tree in the page code to obtain the attributes of each DOM node, and then map it into a protocol view tree in JSON format; each JsonObject in the protocol view tree represents a DOM node, the nested relationship of JsonObject represents the nested relationship of the view tree, and the name of JsonObject is the name of the control.
[0013] Optionally include:
[0014] Identify the application running platform, render each node of the view tree into a control of the corresponding platform through the protocolized control rendering engine of the base layer, and then pass the control to the view loader of the corresponding platform in the business layer for page layout and loading.
[0015] Optionally, each node of the view tree is rendered into a control through the protocolized control rendering engine of the base layer, including:
[0016] The view tree is traversed in post-order through the protocolized control rendering engine of the base layer, and each traversed node is rendered as a control.
[0017] Optionally include:
[0018] Using the preset thread pool, each node of the view tree is rendered into a control through the protocolized control rendering engine of the base layer.
[0019] Optionally, based on the data request address of the view tree configuration data, the data filler of the business layer obtains the data source, including:
[0020] Based on the data request address of the view tree configuration data, the data filler of the business layer calls the corresponding interface or local database to obtain the data source.
[0021] In addition, the present invention also provides a page generation device, comprising an acquisition module for receiving an application program running instruction and acquiring view tree configuration data corresponding to the application program from a view tree data configuration interface of a configuration layer;
[0022] A generation module is used to register the view tree configuration data with the base layer so that each node of the view tree can be rendered into a control through the protocolized control rendering engine of the base layer, and then the control can be passed to the view loader in the business layer for page layout and loading; based on the data request address of the view tree configuration data, the data filler of the business layer obtains the data source to fill the data source into the corresponding control.
[0023] One embodiment of the above invention has the following advantages or beneficial effects: the present invention can perform dynamic rendering based on a configured and protocolized mobile terminal view tree, ensuring the flexibility, dynamism and dual-end consistency of the page, so that users can see the latest UI effects without sending an upgraded version; and, through a protocolized view tree mapping engine, only a set of Web layout code needs to be written to generate a set of protocolized Android and IOS common protocol view trees; and, through a protocolized control rendering engine, the protocol view tree generated by the view tree mapping engine can be parsed in a child thread, and specific controls can be created and rendered; in addition, the present invention is based on a data filler for configuration and protocol, which can read the interface address request interface data from the configuration, and then fill the data into the specific control according to the mapping relationship between the fields and controls in the configuration.
[0024] The further effects of the above-mentioned non-conventional optional manner will be described below in conjunction with specific embodiments. BRIEF DESCRIPTION OF THE DRAWINGS
[0025] The accompanying drawings are provided for a better understanding of the present invention and are not intended to limit the present invention.
[0026] Figure 1 is a schematic diagram of the main process of the page generation method according to the first embodiment of the present invention;
[0027] Figure 2 is a schematic diagram of the architecture of a page generation method according to an embodiment of the present invention;
[0028] Figure 3is a timing diagram of a page generation method according to a second embodiment of the present invention;
[0029] Figure 4 is a schematic diagram of main modules of a page generating apparatus according to an embodiment of the present invention;
[0030] Figure 5 is an exemplary system architecture diagram in which embodiments of the present invention may be applied;
[0031] Figure 6 It is a schematic diagram of the structure of a computer system of a terminal device or a server suitable for implementing an embodiment of the present invention. DETAILED DESCRIPTION
[0032] The following description of exemplary embodiments of the present invention is made in conjunction with the accompanying drawings, in which various details of the embodiments of the present invention are included to facilitate understanding. These details should be considered as merely exemplary. Therefore, it should be appreciated by those skilled in the art that various changes and modifications may be made to the embodiments described herein without departing from the scope and spirit of the present invention. Similarly, for the sake of clarity and conciseness, descriptions of well-known functions and structures are omitted in the following description.
[0033] Figure 1 FIG. 1 is a schematic diagram of the main process of the page generation method according to the first embodiment of the present invention. Figure 1 As shown, the page generation method includes:
[0034] Step S101: Receive an application program execution instruction, and obtain view tree configuration data corresponding to the application program from the view tree data configuration interface of the configuration layer.
[0035] As an embodiment of the present invention, Figure 2 The following is an architectural diagram of the page generation method, which includes the foundation layer, business layer, and configuration layer. The foundation layer provides two engines: a protocolized view tree mapping engine and a protocolized control rendering engine. The protocolized view tree engine converts page code into a view tree, while the protocolized control rendering engine generates specific controls for the corresponding platform based on nodes in the protocolized view tree.
[0036] It should be noted that both engines in this invention are protocol-based, allowing view tree mapping and control rendering based on the controls and control style attributes on different platforms, thereby enabling the use of the same set of style protocols for processing across different platforms. For example, if the controls and control style attributes on Android and iOS differ, it is necessary to define a set of style protocols, that is, use a set of common style names to ensure compatibility between Android and iOS.
[0037] Furthermore, the business layer may include a view loader and a data populator. The view loader traverses the protocolized view tree issued by the configuration, while the data populator populates the data to be displayed on the control. Preferably, the present invention can implement page generation for different platforms by providing view loaders for different platforms in the business layer, such as an Android view loader and an iOS view loader.
[0038] In addition, the configuration layer may provide a view tree data configuration interface, wherein the view tree data configuration includes the protocol view tree, the field name of each node data source in the protocol view tree, and the data request address corresponding to the protocol view tree.
[0039] In other embodiments, before obtaining the view tree configuration data corresponding to the application from the view tree data configuration interface of the configuration layer, the method includes: obtaining the page code, calling the protocolized view tree mapping engine in the base layer, and mapping the page code into a protocol view tree. The method further includes configuring the field name of each node data source in the protocol view tree and the data request address corresponding to the protocol view tree, and then generating view tree configuration data together with the protocol view tree. The method further includes uploading the view tree configuration data to the view tree data configuration interface of the configuration layer.
[0040] It can be seen that the present invention can map the page code into a view tree, and configure each node in the view tree, and provide it for calling through the view tree data configuration interface of the configuration layer.
[0041] In a further embodiment, when mapping the page code into a protocol view tree, the DOM tree in the page code can be depth-first traversed to obtain the properties of each DOM node (for example, properties such as width, height, inner and outer margins, and Flex layout parameters), and then mapped into a protocol view tree in JSON format; wherein each JsonObject in the protocol view tree represents a DOM node, the nested relationship of the JsonObject represents the nested relationship of the view tree, and the name of the JsonObject is the name of the control.
[0042] As can be seen, the view tree mapping engine of the present invention converts the UI view in the design draft into a JSON view tree, mapping the code written on the web side into a protocolized view tree that can be applied to different platforms. In other words, because the control names and control properties in this JSON view tree are all elements of the web side, it can be regarded as a view tree protocol that is universally applicable across Android and iOS platforms.
[0043] For example, both Android and IOS platforms have Flex-style layout controls, such as FlexboxLayout on Android and UIStackView on IOS. For a set of UI views, first use the standard HTML5 language and Flex layout to implement a set of web-side page codes, and then use the protocolized view tree engine to convert the view tree.
[0044] Step S102, registering the view tree configuration data to the base layer, so that each node of the view tree is rendered into a control through the protocolized control rendering engine of the base layer, and then passing the control to the view loader in the business layer for page layout and loading.
[0045] In some embodiments, the platform on which the application is running is identified, and each node in the view tree is rendered into a control for the corresponding platform via a protocol-based control rendering engine in the base layer. The control is then passed to the view loader for the corresponding platform in the business layer for page layout and loading. For example, the protocol-based control rendering engine in the base layer renders each node in the view tree into a control for the Android or iOS platform, and the Android view loader and iOS view loader in the business layer respectively perform page layout and loading of the control.
[0046] It's worth noting that the protocolized control rendering engine receives a protocolized view node in JSON format, renders it into a separate control, and passes it to the Android or iOS business layer's view loader, regardless of the node's parent and child nodes. The Android or iOS view loader traverses each JsonObject node in the view tree and passes each node to the protocolized control rendering engine, which parses the JsonObject node, maps the JsonObject node name to the corresponding platform control, and maps the JsonObject node's properties to the properties of the corresponding platform control before assigning them to the corresponding control.
[0047] For example, the Android platform's protocolized control rendering engine has built-in mappings between JsonObject names and controls, and between JSON attributes and control properties. For example, a node with the JsonObject name div corresponds to the Android platform's FlexboxLayout control, a div node with the JsonObject name label corresponds to the Android platform's TextView control, and a JSON attribute named fontSize corresponds to the Android platform's TextView control's textSize property. And so on.
[0048] As other embodiments, the view tree is traversed in post-order by the protocolized control rendering engine of the base layer, and each traversed node is rendered into a control. Preferably, the protocolized control rendering engine performs a post-order traversal of the protocolized view tree issued by the configuration, from the leaf node to the root node, and renders each traversed JsonObject node to obtain the specific control corresponding to the platform. For example: The Android platform mainly deals with the layout method and layout position of controls such as TextView and ImageView in the FlexboxLayout layout. The layout node is searched from bottom to top through the post-order traversal algorithm of the tree. When the layout node is found, the nodes in its subtree are added to the layout control for layout until the root node is traversed, and the root node is returned to the business layer, thus completing the loading of the control of the view tree.
[0049] It's also worth noting that each node in the view tree is rendered into a control by the underlying protocolized control rendering engine, utilizing a preset thread pool. In other words, considering that creating and rendering controls takes time, the present invention assigns the process of rendering each node in the view tree into a control via the underlying protocolized control rendering engine as a task and places it in a preset thread pool for processing, thereby reducing system lag and improving the user experience.
[0050] Step S103: Based on the data request address of the view tree configuration data, the data filler of the business layer obtains the data source to fill the data source into the corresponding control.
[0051] In some embodiments, based on the data request address of the view tree configuration data, the data populator at the business layer calls the corresponding interface or local database to obtain the data source. That is, the data request address can be an interface address or a table name in a local database. After obtaining the data source acquisition method from the data request address, the data populator retrieves data from the network interface address or local database. Then, based on the field mapping relationship configured on the control, it obtains specific data values from the data source and populates them into specific controls for display on the user interface.
[0052] In summary, the present invention can map the HTML code written on the Web side into a protocolized view tree that can be applied to different platforms at the same time, and render controls through the protocolized view tree to ensure consistency of display effects on different platforms. Moreover, all controls of the present invention are dynamically rendered through a configured view tree, that is, the positions of all controls are flexible and changeable, so that a high degree of dynamism can be guaranteed. In addition, when a new view style requirement comes, it is only necessary to map out a new view tree and then configure it to the cloud. Users can directly see the new controls without upgrading the application App or doing any hot updates.
[0053] Figure 3 is a timing diagram of a page generation method according to a second embodiment of the present invention, the page generation method may include:
[0054] When a new view style change is required, obtain the page code (for example, design and develop a set of HTML code based on the Flex layout style on the Web side), call the protocolized view tree mapping engine in the base layer, and map the page code into a protocol view tree (for example, map the HTML code into a protocol view tree in JSON format). Configure the field name of each node data source in the protocol view tree and the data request address corresponding to the protocol view tree, and then generate view tree configuration data together with the protocol view tree. Upload the view tree configuration data to the view tree data configuration interface of the configuration layer.
[0055] Receive an application execution instruction and obtain the view tree configuration data corresponding to the application from the view tree data configuration interface of the configuration layer. Register the view tree configuration data with the foundation layer to identify the application execution platform. Use the foundation layer's protocolized control rendering engine to render each node in the view tree into a control for the corresponding platform. These controls are then passed to the view loader of the corresponding platform in the business layer for page layout and loading. Simultaneously, based on the data request address of the view tree configuration data, the data populator in the business layer obtains the data source and populates it into the corresponding control.
[0056] It can be seen that the present invention improves the dynamic nature of mobile terminal views. Through the dynamic generation, dynamic rendering and dynamic filling of data of the view tree, the view on the page can be changed dynamically and flexibly, allowing developers to let online users see the latest view effects without upgrading the application App. In addition, the present invention eliminates the concept of components in traditional dynamic solutions. On the Android and IOS platforms, only one set of view tree data configuration interfaces needs to be inherited to perfectly realize the dynamic loading of views. There is no need to build in multiple sets of component codes, which can greatly reduce the size of the application App installation package. In addition, the present invention uses a protocolized view tree mapping engine to map view styles, allowing different platforms to share a set of style codes. This ensures the consistency of view effects on the two platforms, making it easier to troubleshoot and handle problems.
[0057] Figure 4 FIG. 1 is a schematic diagram of the main modules of the page generating device according to an embodiment of the present invention. Figure 4As shown, the page generation device 400 includes an acquisition module 401 and a generation module 402. The acquisition module 401 receives an application running instruction and obtains the view tree configuration data corresponding to the application from the view tree data configuration interface of the configuration layer; the generation module 402 registers the view tree configuration data with the basic layer, so that each node of the view tree is rendered into a control by the protocolized control rendering engine of the basic layer, and then the control is passed to the view loader in the business layer for page layout and loading; based on the data request address of the view tree configuration data, the data filler in the business layer obtains the data source and fills the data source into the corresponding control.
[0058] In some embodiments, the acquisition module 401 is further configured to:
[0059] Before obtaining the view tree configuration data corresponding to the application from the view tree data configuration interface of the configuration layer, including:
[0060] Get the page code, call the protocol view tree mapping engine in the base layer, and map the page code into a protocol view tree;
[0061] Configuring the field name of each node data source in the protocol view tree and the data request address corresponding to the protocol view tree, and then generating view tree configuration data together with the protocol view tree;
[0062] The view tree configuration data is uploaded to the view tree data configuration interface of the configuration layer.
[0063] In some embodiments, the acquisition module 401 maps the page code into a protocol view tree, including:
[0064] Perform a depth-first traversal of the DOM tree in the page code to obtain the attributes of each DOM node, and then map it into a protocol view tree in JSON format; each JsonObject in the protocol view tree represents a DOM node, the nested relationship of JsonObject represents the nested relationship of the view tree, and the name of JsonObject is the name of the control.
[0065] In some embodiments, the generating module 402 is further configured to:
[0066] Identify the application running platform, render each node of the view tree into a control of the corresponding platform through the protocolized control rendering engine of the base layer, and then pass the control to the view loader of the corresponding platform in the business layer for page layout and loading.
[0067] In some embodiments, the generation module 402 renders each node of the view tree into a control through the protocolized control rendering engine of the base layer, including:
[0068] The view tree is traversed in post-order through the protocolized control rendering engine of the base layer, and each traversed node is rendered as a control.
[0069] In some embodiments, the generating module 402 is further configured to:
[0070] Using the preset thread pool, each node of the view tree is rendered into a control through the protocolized control rendering engine of the base layer.
[0071] In some embodiments, the generating module 402 is further configured to:
[0072] Based on the data request address of the view tree configuration data, the data filler of the business layer obtains the data source, including:
[0073] Based on the data request address of the view tree configuration data, the data filler of the business layer calls the corresponding interface or local database to obtain the data source.
[0074] It should be noted that the page generation method and the page generation device of the present invention have corresponding relationships in terms of specific implementation contents, so repeated contents will not be described again.
[0075] Figure 5 An exemplary system architecture 500 is shown to which the page generation method or the page generation apparatus according to the embodiment of the present invention can be applied.
[0076] like Figure 5 As shown, system architecture 500 may include terminal devices 501, 502, 503, a network 504, and a server 505. Network 504 is used to provide a medium for communication links between terminal devices 501, 502, 503 and server 505. Network 504 may include various connection types, such as wired or wireless communication links or fiber optic cables.
[0077] Users can use terminal devices 501, 502, 503 to interact with server 505 via network 504 to receive or send messages, etc. Various communication client applications can be installed on terminal devices 501, 502, 503.
[0078] The terminal devices 501 , 502 , and 503 may be various electronic devices that have a page generation screen and support web browsing, including but not limited to smart phones, tablet computers, laptop computers, and desktop computers.
[0079] Server 505 may be a server that provides various services, such as a background management server (for example only) that provides support for users using terminal devices 501, 502, and 503. The background management server may analyze and process received data such as product information query requests, and feed back processing results (for example, target push information, product information—for example only) to the terminal device.
[0080] It should be noted that the page generation method provided in the embodiment of the present invention is generally executed by the server 505 , and accordingly, the computing device is generally set in the server 505 .
[0081] It should be understood that Figure 5 The number of terminal devices, networks and servers in the embodiment is merely illustrative. Any number of terminal devices, networks and servers may be provided as required.
[0082] Reference below Figure 6 , which shows a schematic structural diagram of a computer system 600 of a terminal device suitable for implementing an embodiment of the present invention. Figure 6 The terminal device shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present invention.
[0083] like Figure 6 As shown, the computer system 600 includes a central processing unit (CPU) 601, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 602 or a program loaded from a storage unit 608 into a random access memory (RAM) 603. Various programs and data required for the operation of the computer system 600 are also stored in the RAM 603. The CPU 601, ROM 602, and RAM 603 are connected to each other via a bus 604. An input / output (I / O) interface 605 is also connected to the bus 604.
[0084] The following components are connected to the I / O interface 605: an input section 605 including a keyboard, a mouse, and the like; an output section 606 including devices such as a cathode ray tube (CRT), a liquid crystal display (LCD), and a speaker; a storage section 608 including a hard disk and the like; and a communication section 609 including a network interface card such as a LAN card or a modem. The communication section 609 performs communication processing via a network such as the Internet. A drive 610 is also connected to the I / O interface 605 as needed. A removable medium 611, such as a magnetic disk, an optical disk, a magneto-optical disk, or a semiconductor memory, is installed in the drive 610 as needed, so that a computer program read therefrom can be installed into the storage section 608 as needed.
[0085] In particular, according to the embodiments disclosed in the present invention, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, the embodiments disclosed in the present invention include a computer program product comprising a computer program carried on a computer-readable medium, the computer program comprising program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network via the communication section 609, and / or installed from a removable medium 611. When the computer program is executed by the central processing unit (CPU) 601, the above-mentioned functions defined in the system of the present invention are performed.
[0086] It should be noted that the computer-readable medium described in the present invention can be a computer-readable signal medium or a computer-readable storage medium, or any combination thereof. A computer-readable storage medium can be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of computer-readable storage media can include, but are not limited to, an electrical connection having one or more conductors, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination thereof. In the present invention, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. In the present invention, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. This propagated data signal can take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A computer-readable signal medium may also be any computer-readable medium other than a computer-readable storage medium that can transmit, propagate, or transport a program for use by or in conjunction with an instruction execution system, apparatus, or device. Program code embodied on a computer-readable medium may be transmitted using any suitable medium, including but not limited to wireless, wireline, optical fiber cable, RF, or any suitable combination thereof.
[0087] The flowcharts and block diagrams in the accompanying drawings illustrate the possible implementation architecture, functions and operations of the systems, methods and computer program products according to various embodiments of the present invention. In this regard, each box in the flowchart or block diagram can represent a module, program segment, or a part of code, and the above-mentioned module, program segment, or a part of code contains one or more executable instructions for implementing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in an order different from that marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram or flowchart, and the combination of boxes in the block diagram or flowchart, can be implemented with a dedicated hardware-based system that performs the specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.
[0088] The modules described in the embodiments of the present invention may be implemented in software or hardware. The modules described may also be provided in a processor. For example, a processor may be described as including an acquisition module and a generation module. The names of these modules do not, in some cases, limit the modules themselves.
[0089] As another aspect, the present invention further provides a computer-readable medium, which may be included in the device described in the above embodiment; or may exist independently and not be assembled into the device. The above computer-readable medium carries one or more programs, and when the above one or more programs are executed by a device, the device includes receiving an application running instruction, obtaining view tree configuration data corresponding to the application from the view tree data configuration interface of the configuration layer; registering the view tree configuration data with the base layer, so that each node of the view tree is rendered into a control through the protocolized control rendering engine of the base layer, and then passing the control to the view loader in the business layer for page layout and loading; based on the data request address of the view tree configuration data, the data filler of the business layer obtains the data source to fill the data source into the corresponding control.
[0090] The technical solution according to the embodiment of the present invention can solve the problems of poor compatibility and poor user experience in existing application page updates.
[0091] The above specific embodiments do not limit the scope of protection of the present invention. Those skilled in the art will appreciate that various modifications, combinations, sub-combinations, and substitutions may occur depending on design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of the present invention are intended to be included within the scope of protection of the present invention.
Claims
1. A page generation method, characterized in that: include: When a new view style requirement comes, the page code is obtained, and the protocolized view tree mapping engine in the base layer is called to map the page code into a protocol view tree. Mapping the page code into a protocol view tree includes: performing a depth-first traversal on the DOM tree in the page code to obtain the attributes of each DOM node, and then mapping it into a protocol view tree in JSON format. Each JsonObject in the protocol view tree represents a DOM node, the nested relationship of the JsonObject represents the nested relationship of the view tree, and the name of the JsonObject is the name of the control. Configuring the field name of each node data source in the protocol view tree and the data request address corresponding to the protocol view tree, and then generating view tree configuration data together with the protocol view tree; Uploading the view tree configuration data to the view tree data configuration interface of the configuration layer; Receive an application program running instruction, and obtain the view tree configuration data corresponding to the application program from the view tree data configuration interface of the configuration layer; Registering the view tree configuration data with the base layer so that each node of the view tree is rendered into a control by the base layer's protocolized control rendering engine, and then passing the control to the view loader in the business layer for page layout and loading; wherein the base layer also identifies the application running platform and renders the node into a control of the corresponding platform, and the view loader is the view loader of the corresponding platform; Based on the data request address of the view tree configuration data, the data filler of the business layer obtains the data source to fill the data source into the corresponding control.
2. The method according to claim 1, characterized in that include: Identify the application running platform, render each node of the view tree into a control of the corresponding platform through the protocolized control rendering engine of the base layer, and then pass the control to the view loader of the corresponding platform in the business layer for page layout and loading.
3. The method according to claim 1, characterized in that Each node in the view tree is rendered into a control through the protocolized control rendering engine of the base layer, including: The view tree is traversed in post-order through the protocolized control rendering engine of the base layer, and each traversed node is rendered as a control.
4. The method according to claim 1, wherein include: Using the preset thread pool, each node of the view tree is rendered into a control through the protocolized control rendering engine of the base layer.
5. The method according to any one of claims 1 to 4, characterized in that: Based on the data request address of the view tree configuration data, the data filler of the business layer obtains the data source, including: Based on the data request address of the view tree configuration data, the data filler of the business layer calls the corresponding interface or local database to obtain the data source.
6. A page generating device, characterized in that: include: The acquisition module is used to obtain the page code when a new view style requirement arrives, call the protocolized view tree mapping engine in the base layer, and map the page code into a protocol view tree. The mapping of the page code into the protocol view tree includes: performing a depth-first traversal of the DOM tree in the page code to obtain the attributes of each DOM node, and then mapping it into a protocol view tree in JSON format. Each JsonObject in the protocol view tree represents a DOM node, the nested relationship of the JsonObject represents the nested relationship of the view tree, and the name of the JsonObject is the name of the control. Configuring the field name of each node data source in the protocol view tree and the data request address corresponding to the protocol view tree, and then generating view tree configuration data together with the protocol view tree; Uploading the view tree configuration data to the view tree data configuration interface of the configuration layer; Receive an application program running instruction, and obtain the view tree configuration data corresponding to the application program from the view tree data configuration interface of the configuration layer; A generation module for registering the view tree configuration data with the base layer, so that each node of the view tree is rendered into a control by the base layer's protocolized control rendering engine, and then the control is passed to the view loader in the business layer for page layout and loading; wherein the base layer also identifies the application running platform and renders the node into a control of the corresponding platform, and the view loader is the view loader of the corresponding platform; Based on the data request address of the view tree configuration data, the data filler of the business layer obtains the data source to fill the data source into the corresponding control.
7. An electronic device, characterized in that: include: one or more processors; a storage device for storing one or more programs, When the one or more programs are executed by the one or more processors, the one or more processors implement the method according to any one of claims 1 to 5.
8. A computer-readable medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the method according to any one of claims 1 to 5 is implemented.
Citation Information
Patent Citations
Page display method, device and equipment and storage medium
CN109634598A