[go: up one dir, main page]

CN113220339A - Page generation method and device - Google Patents

Page generation method and device Download PDF

Info

Publication number
CN113220339A
CN113220339A CN202110534142.6A CN202110534142A CN113220339A CN 113220339 A CN113220339 A CN 113220339A CN 202110534142 A CN202110534142 A CN 202110534142A CN 113220339 A CN113220339 A CN 113220339A
Authority
CN
China
Prior art keywords
view tree
data
control
view
configuration
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN202110534142.6A
Other languages
Chinese (zh)
Other versions
CN113220339B (en
Inventor
王小建
王志昱
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Jingdong Tuoxian Technology Co Ltd
Original Assignee
Beijing Jingdong Tuoxian Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Jingdong Tuoxian Technology Co Ltd filed Critical Beijing Jingdong Tuoxian Technology Co Ltd
Priority to CN202110534142.6A priority Critical patent/CN113220339B/en
Publication of CN113220339A publication Critical patent/CN113220339A/en
Application granted granted Critical
Publication of CN113220339B publication Critical patent/CN113220339B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING OR CALCULATING; COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/70Software maintenance or management
    • G06F8/71Version control; Configuration management
    • GPHYSICS
    • G06COMPUTING OR CALCULATING; COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Computer Security & Cryptography (AREA)
  • Human Computer Interaction (AREA)
  • Stored Programmes (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

The invention discloses a page generation method and device, and relates to the technical field of computers. A specific embodiment of the method comprises the steps of receiving an application program operation instruction, and acquiring view tree configuration data corresponding to an application program from a view tree data configuration interface of a configuration layer; registering the view tree configuration data to a basic layer, rendering each node of the view tree into a control through a protocol control rendering engine of the basic layer, and transmitting the control to a view loader in a business layer for page layout and loading; and based on the data request address of the view tree configuration data, a data filler of the service layer acquires a data source so as to fill the data source into the corresponding control. Therefore, the implementation mode of the invention can solve the problems of poor compatibility and poor user experience of the existing application program page updating.

Description

Page generation method and device
Technical Field
The invention relates to the technical field of computers, in particular to a page generation method and device.
Background
With the continuous development of the mobile terminal technology, the requirements of a user on the function and performance of an application program App are higher and higher, and a typical expression is that under special scenes such as promotion and traditional holidays, if the application program App needs to present a corresponding theme style and a special playing method to the user through version upgrading every time, the user experience is very poor.
At present, the application App is dynamically updated by pushing new content to all devices installed with the application App in a patch manner through a hot update technology, and the devices download the patch in a silent downloading manner and update the application App under the condition that a user does not perceive the patch. New content can also be pushed to the user by using cross-platform technology such as ReactNative, Flutter and the like and the instant update technology of the H5 webpage when the content of the page changes. Also, components may be built in the application App, and these components are composed of a series of controls, and perform data filling and style rendering according to the content returned in the network interface.
In the process of implementing the invention, the inventor finds that at least the following problems exist in the prior art:
the hot update technology still cannot download and install patches for part of terminal models in a specific scene, and the compatibility is poor. And cross-platform development technologies such as ReactNative and Flutter are only suitable for displaying some simple pages, and are not good in compatibility of some excessively complex and frequently interactive pages. The H5 page may enable immediate updates, but because it is a web page embedded in WebView, the user's interaction experience is greatly compromised.
In addition, since the control positions in the components are fixed, new versions still need to be sent when the interface styles need to be adjusted. And as versions of the application program App are iterated, more and more built-in components are arranged, so that the installation package volume is larger and larger. And as the Android and IOS are built-in components, the problem of inconsistent Android and IOS display can occur.
Disclosure of Invention
In view of this, embodiments of the present invention provide a page generation method and apparatus, which can solve the problems of poor compatibility and poor user experience in updating an existing application page.
In order to achieve the above object, according to an aspect of the embodiments of the present invention, a page generating method is provided, including receiving an application program running instruction, and acquiring view tree configuration data corresponding to an application program from a view tree data configuration interface of a configuration layer; registering the view tree configuration data to a basic layer, rendering each node of the view tree into a control through a protocol control rendering engine of the basic layer, and transmitting the control to a view loader in a business layer for page layout and loading; and based on the data request address of the view tree configuration data, a data filler of the service layer acquires a data source so as to fill the data source into the corresponding control.
Optionally, before obtaining the view tree configuration data corresponding to the application program from the view tree data configuration interface of the configuration layer, the method includes:
acquiring a page code, calling a protocol view tree mapping engine in a basic layer, and mapping the page code into a protocol view tree; configuring a field name of each node data source in a protocol view tree and a data request address corresponding to the protocol view tree, and further generating view tree configuration data together with the protocol view tree; and uploading the view tree configuration data to a view tree data configuration interface of a configuration layer.
Optionally, mapping the page code into a protocol view tree, comprising:
performing depth-first traversal on DOM trees in the page codes to obtain the attribute of each DOM node, and mapping the attribute into a protocol view tree in a JSON format; each JsonObject in the protocol view tree represents a DOM node, the nesting relation of the JsonObjects represents the nesting relation of the view tree, and the name of the JsonObject is the name of a control.
Optionally, comprising:
and identifying an application program running platform, rendering each node of the view tree into a control of a corresponding platform through a protocol control rendering engine of the base layer, and transmitting the control to a view loader of the corresponding platform in the service layer for page layout and loading.
Optionally, rendering each node of the view tree into a control by a base layer's agreed-upon control rendering engine, comprising:
and performing subsequent traversal on the view tree through a protocol control rendering engine of the base layer, and rendering each traversed node into a control.
Optionally, comprising:
and rendering each node of the view tree into a control by using a preset thread pool and a protocol control rendering engine of the base layer.
Optionally, based on the data request address of the view tree configuration data, the data populator of the service layer obtains the data source, including:
and based on the data request address of the view tree configuration data, the data filler of the service layer calls a corresponding interface or a local database to acquire a data source.
In addition, the invention also provides a page generating device, which comprises an acquisition module, a display module and a display module, wherein the acquisition module is used for receiving the operation instruction of the application program and acquiring the view tree configuration data corresponding to the application program from the view tree data configuration interface of the configuration layer;
the generating module is used for registering the view tree configuration data to a basic layer, rendering each node of the view tree into a control through a protocol control rendering engine of the basic layer, and further transmitting the control to a view loader in a business layer for page layout and loading; and based on the data request address of the view tree configuration data, a data filler of the service layer acquires a data source so as to fill the data source into the corresponding control.
One embodiment of the above invention has the following advantages or benefits: the invention can dynamically render based on the configured and the agreed mobile end view tree, ensures the flexibility, the dynamic property and the double-end consistency of the page, and realizes that the user can see the latest UI effect without sending an upgraded version; moreover, only one set of codes of Web layout needs to be compiled through a protocol view tree mapping engine, so that a set of protocol view trees which are common to the Android and the IOS and are protocol-based can be generated; in addition, the protocol view tree generated by the view tree mapping engine can be analyzed in a sub thread through the protocol control rendering engine, and a specific control is created and rendered; in addition, the data filler based on configuration and protocol can read the interface address request interface data from the configuration and fill the data into the specific control according to the mapping relation between the field and the control in the configuration.
Further effects of the above-mentioned non-conventional alternatives will be described below in connection with the embodiments.
Drawings
The drawings are included to provide a better understanding of the invention and are not to be construed as unduly limiting the invention. Wherein:
fig. 1 is a schematic diagram of a main flow of a page generation method according to a first embodiment of the present invention;
FIG. 2 is a schematic diagram of a page generation method according to an embodiment of the present invention;
FIG. 3 is a timing diagram of a page generation method according to a second embodiment of the present invention;
FIG. 4 is a schematic diagram of the main modules of a page generation apparatus according to an embodiment of the present invention;
FIG. 5 is an exemplary system architecture diagram in which embodiments of the present invention may be employed;
fig. 6 is a schematic block diagram of a computer system suitable for use in implementing a terminal device or server of an embodiment of the invention.
Detailed Description
Exemplary embodiments of the present invention are described below with reference to the accompanying drawings, in which various details of embodiments of the invention are included to assist understanding, and which are to be considered as merely exemplary. Accordingly, those of ordinary skill in the art will recognize that various changes and modifications of the embodiments described herein can be made without departing from the scope and spirit of the invention. Also, descriptions of well-known functions and constructions are omitted in the following description for clarity and conciseness.
Fig. 1 is a schematic diagram of a main flow of a page generation method according to a first embodiment of the present invention, and as shown in fig. 1, the page generation method includes:
step S101, receiving an application program operation instruction, and acquiring view tree configuration data corresponding to the application program from a view tree data configuration interface of a configuration layer.
As an embodiment of the present invention, as shown in fig. 2, it is a schematic diagram of an architecture of a page generation method, and the schematic diagram includes a base layer, a service layer, and a configuration layer. The method comprises the steps that two engines are provided in a base layer, namely a protocol view tree mapping engine and a protocol control rendering engine, the protocol view tree engine is used for converting a page code into a view tree, and the protocol control rendering engine is used for generating a specific control on a corresponding platform according to nodes in the protocol view tree.
It should be noted that both the engines provided by the present invention are protocol-based, and view tree mapping and control rendering can be performed according to the controls and control style attributes on different platforms, so that processing is performed using the same style protocol for different platforms. For example: the control and control style attributes on the Android and IOS platforms are different, and a set of style protocols needs to be defined, namely a set of common style names are used for being compatible with the Android and the IOS.
The service layer may further include a view loader and a data populator, the view loader is used for traversing the configured and delivered agreed view tree, and the data populator is used for populating data to be presented on the control. Preferably, the method and the device can realize page generation for different platforms, and respectively set view loaders for different platforms, such as an Android view loader and an IOS view loader, in a service layer.
In addition, the configuration layer may provide a view tree data configuration interface, where the view tree data configuration includes a protocol view tree, a field name of each node data source in the protocol view tree, and a data request address corresponding to the protocol view tree.
As another embodiment, before obtaining the view tree configuration data corresponding to the application program from the view tree data configuration interface of the configuration layer, the method includes: and acquiring a page code, calling a protocol view tree mapping engine in a base layer, and mapping the page code into a protocol view tree. And 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 further generating view tree configuration data together with the protocol view tree. And uploading the view tree configuration data to a view tree data configuration interface of a configuration layer.
Therefore, the invention can map the page code into a view tree, configure each node in the view tree, and configure the interface for calling through the view tree data of the configuration layer.
In a further embodiment, when the page code is mapped into the protocol view tree, depth-first traversal can be performed on the DOM tree in the page code to obtain the attributes (such as the attributes of width, height, inner and outer margins, Flex layout parameters and the like) of each DOM node, and then the DOM tree is mapped into the protocol view tree in the JSON format; each JsonObject in the protocol view tree represents a DOM node, the nesting relation of the JsonObjects represents the nesting relation of the view tree, and the name of the JsonObject is the name of a control.
It can be seen that the view tree mapping engine of the present invention converts the UI view on the design draft into a JSON view tree, and can map the code written at the Web end into a view tree that can be applied to different platforms simultaneously. That is to say, the control name and the control attribute in the JSON view tree are elements of the Web end, so that the JSON view tree can be regarded as a view tree protocol commonly used between Android and iOS platforms.
For example: for a set of UI views, firstly using a standard HTML5 language and using Flex layout to realize a set of webpage codes of a Web end, and then performing view tree conversion through a view tree engine in a protocol.
And step S102, registering the view tree configuration data to a basic layer, rendering each node of the view tree into a control through a protocol control rendering engine of the basic layer, and transmitting the control to a view loader in a business layer for page layout and loading.
In some embodiments, an application program running platform is identified, each node of a view tree is rendered into a control of a corresponding platform through a protocol control rendering engine of a base layer, and the control is transmitted to a view loader of the corresponding platform in a business layer to be subjected to page layout and loading. For example: and rendering each node of the view tree into a corresponding control of an Android or IOS platform by a protocol control rendering engine of the base layer, and then respectively carrying out page layout and loading of the control by an Android view loader and an IOS view loader in the service layer.
It is worth pointing out that the protocol control element rendering engine receives a protocol view node in JSON format, renders the node into an independent control element and transmits the control element to the view loader of the Android or IOS service layer, and does not care about the parent node and the child node of the node. And traversing each JsonObject node in the view tree by the Android or IOS view loader, transmitting the nodes to a protocol control rendering engine one by one to analyze the JsonObject nodes, mapping the names of the JsonObject nodes into controls corresponding to the platform, mapping the attributes in the JsonObject nodes and the attributes of the corresponding platform controls and configuring the attributes to the corresponding controls.
For example: the method comprises the steps that a JsonObject name and control mapping relation and a JSON attribute and control mapping relation are built in a protocol control rendering engine of an Android platform. For example, a node with JsonObject name div corresponds to the FlexboxLayout control of the Android platform, and a div node with JsonObject name label corresponds to the TextView control of the Android platform. And the attribute with the JSON attribute of fontSize corresponds to the textSize attribute of the Android platform textView control, and the like.
In other embodiments, the view tree is traversed in a subsequent order by a base layer of a agreed-upon control rendering engine, and each traversed node is rendered as a control. Preferably, the protocol control rendering engine performs tree subsequent traversal on the protocol view tree issued by the configuration, and renders each traversed JsonObject node from the leaf node to the root node to obtain a specific control corresponding to the platform. For example: the Android platform mainly processes the layout mode and the layout position of controls such as TextView and ImageView in FlexboxLayout layout, searches layout nodes from bottom to top through a tree subsequent traversal algorithm, adds nodes in subtrees of the layout nodes to the layout control for layout when the layout nodes are found until the root nodes are traversed, and returns the root nodes to a service layer, so that the control loading of the view tree is completed.
It is also worth noting that each node of the view tree is rendered into a control through a protocol control rendering engine of the base layer by utilizing a preset thread pool. In other words, in consideration of the time consumption required for creating and rendering the control, the invention sets the processing process of rendering each node of the view tree into the control by the protocol control rendering engine of the base layer as a task, and puts the task into the preset thread pool for processing, so as to reduce the system blockage and improve the user experience.
Step S103, based on the data request address of the view tree configuration data, the data filler of the service layer acquires the data source to fill the data source into the corresponding control.
In some embodiments, based on the data request address of the view tree configuration data, the data populator of the business layer calls the corresponding interface or local database to obtain the data source. That is, the data request address may be an interface address or a table name of a local database, and the data populator acquires data from the network interface address or the local database after acquiring an acquisition manner of the data source through the data request address, and then acquires a specific data value from the data source according to a field mapping relationship configured on the control, populates the data value into the specific control, and displays the data value on the user interface.
In summary, the present invention can map the HTML code written at the Web end into the view tree which can be applied to different platforms simultaneously, and render the control through the view tree which is applied to different platforms, thereby ensuring the consistency of the display effect on different platforms. In addition, all the controls are dynamically rendered through the configured view tree, namely the positions of all the controls are flexible and variable, so that high dynamization can be ensured. In addition, when a new view style requirement comes, a user can directly see a new control without upgrading an application program App and performing any hot update only by mapping a new view tree and then configuring the view tree to the cloud.
Fig. 3 is a timing diagram of a page generation method according to a second embodiment of the present invention, where the page generation method may include:
when a new view style change requirement comes, page codes are acquired (for example, a set of HTML codes based on a Flex layout style is designed and developed at a Web end), a protocol view tree mapping engine in a base layer is called, and the page codes are mapped into a protocol view tree (for example, the HTML codes are mapped into a protocol view tree in a JSON format). And 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 further generating view tree configuration data together with the protocol view tree. And uploading the view tree configuration data to a view tree data configuration interface of a configuration layer.
Receiving an application program operation instruction, and acquiring view tree configuration data corresponding to an application program from a view tree data configuration interface of a configuration layer; and registering the view tree configuration data to a basic layer to identify an application program running platform, rendering each node of the view tree into a control of a corresponding platform through a protocol control rendering engine of the basic layer, and transmitting the control to a view loader of the corresponding platform in a service layer to perform page layout and loading. Meanwhile, based on the data request address of the view tree configuration data, a data filler of the service layer acquires a data source so as to fill the data source into the corresponding control.
Therefore, the dynamic state of the mobile terminal view is improved, the view on the page can be dynamically and flexibly changed through the dynamic generation, the dynamic rendering and the dynamic filling of the view tree, and the on-line user can see the latest view effect on the premise of not upgrading the sending version of the application program App by a developer. In addition, the concept of components in the traditional dynamic scheme is removed, dynamic loading of the views can be perfectly realized only by inheriting one set of view tree data configuration interface on the Android platform and the IOS platform, a plurality of sets of component codes are not required to be built in any more, and therefore the installation package volume of the application program App can be greatly reduced. In addition, the invention maps the view style through the view tree mapping engine of the agreement, let different platforms share a set of style code, can guarantee the conformance of the view effect on two platforms, facilitate the investigation and processing of the problem.
Fig. 4 is a schematic diagram of main modules of a page generation apparatus according to an embodiment of the present invention, and as shown in fig. 4, the page generation apparatus 400 includes an obtaining module 401 and a generating module 402. The obtaining module 401 receives an application program running instruction, and obtains view tree configuration data corresponding to the application program from a view tree data configuration interface of a configuration layer; the generating module 402 registers the view tree configuration data to the base layer, so as to render each node of the view tree into a control by a protocol control rendering engine of the base layer, and further transmit the control to a view loader in the service layer for page layout and loading; and based on the data request address of the view tree configuration data, a data filler of the service layer acquires a data source so as to fill the data source into the corresponding control.
In some embodiments, the obtaining module 401 is further configured to:
before obtaining the view tree configuration data corresponding to the application program from the view tree data configuration interface of the configuration layer, the method includes:
acquiring a page code, calling a protocol view tree mapping engine in a basic layer, and mapping the page code into a protocol view tree;
configuring a field name of each node data source in a protocol view tree and a data request address corresponding to the protocol view tree, and further generating view tree configuration data together with the protocol view tree;
and uploading the view tree configuration data to a view tree data configuration interface of a configuration layer.
In some embodiments, the obtaining module 401 maps the page code into a protocol view tree, including:
performing depth-first traversal on DOM trees in the page codes to obtain the attribute of each DOM node, and mapping the attribute into a protocol view tree in a JSON format; each JsonObject in the protocol view tree represents a DOM node, the nesting relation of the JsonObjects represents the nesting relation of the view tree, and the name of the JsonObject is the name of a control.
In some embodiments, the generating module 402 is further configured to:
and identifying an application program running platform, rendering each node of the view tree into a control of a corresponding platform through a protocol control rendering engine of the base layer, and transmitting the control to a view loader of the corresponding platform in the service layer for page layout and loading.
In some embodiments, the generating module 402 renders each node of the view tree into a control by a base layer's agreed-upon control rendering engine, including:
and performing subsequent traversal on the view tree through a protocol control rendering engine of the base layer, and rendering each traversed node into a control.
In some embodiments, the generating module 402 is further configured to:
and rendering each node of the view tree into a control by using a preset thread pool and a protocol control rendering engine of the base layer.
In some embodiments, the generating module 402 is further configured to:
based on the data request address of the view tree configuration data, the data populator of the service layer acquires a data source, and the method comprises the following steps:
and based on the data request address of the view tree configuration data, the data filler of the service layer calls a corresponding interface or a local database to acquire a data source.
It should be noted that the page generation method and the page generation apparatus of the present invention have corresponding relationships in the specific implementation content, and therefore, the repeated content is not described again.
Fig. 5 illustrates an exemplary system architecture 500 to which the page generation method or page generation apparatus of an embodiment of the present invention may be applied.
As shown in fig. 5, the system architecture 500 may include terminal devices 501, 502, 503, a network 504, and a server 505. The network 504 serves to provide a medium for communication links between the terminal devices 501, 502, 503 and the server 505. Network 504 may include various connection types, such as wired, wireless communication links, or fiber optic cables, to name a few.
The user may use the terminal devices 501, 502, 503 to interact with a server 505 over a network 504 to receive or send messages or the like. Various communication client applications may be installed on the terminal devices 501, 502, 503.
The terminal devices 501, 502, 503 may be various electronic devices having a page generating screen and supporting web browsing, including but not limited to smart phones, tablet computers, laptop portable computers, desktop computers, and the like.
The server 505 may be a server providing various services, such as a back-office management server (for example only) providing support for users utilizing the terminal devices 501, 502, 503. The backend management server may analyze and perform other processing on the received data such as the product information query request, and feed back a processing result (for example, target push information, product information — just an example) to the terminal device.
It should be noted that the page generation method provided by the embodiment of the present invention is generally executed by the server 505, and accordingly, the computing device is generally disposed in the server 505.
It should be understood that the number of terminal devices, networks, and servers in fig. 5 is merely illustrative. There may be any number of terminal devices, networks, and servers, as desired for implementation.
Referring now to FIG. 6, a block diagram of a computer system 600 suitable for use with a terminal device implementing an embodiment of the invention is shown. The terminal device shown in fig. 6 is only an example, and should not bring any limitation to the functions and the scope of use of the embodiments of the present invention.
As shown in fig. 6, the computer system 600 includes a Central Processing Unit (CPU)601 that 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 section 608 into a Random Access Memory (RAM) 603. In the RAM603, various programs and data necessary for the operation of the computer system 600 are also stored. The CPU601, ROM602, and RAM603 are connected to each other via a bus 604. An input/output (I/O) interface 605 is also connected to bus 604.
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 a display such as a Cathode Ray Tube (CRT), a liquid crystal page generator (LCD), and the like, 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, a modem, or the like. The communication section 609 performs communication processing via a network such as the internet. The driver 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, a semiconductor memory, or the like is mounted on the drive 610 as necessary, so that a computer program read out therefrom is mounted in the storage section 608 as necessary.
In particular, according to the embodiments of the present disclosure, the processes described above with reference to the flowcharts may be implemented as computer software programs. For example, embodiments of the present disclosure include a computer program product comprising a computer program embodied on a computer readable medium, the computer program comprising program code for performing the method illustrated in the flow chart. In such an embodiment, the computer program may be downloaded and installed from a network through the communication section 609, and/or installed from the removable medium 611. The computer program performs the above-described functions defined in the system of the present invention when executed by the Central Processing Unit (CPU) 601.
It should be noted that the computer readable medium shown in the present invention can be a computer readable signal medium or a computer readable storage medium or any combination of the two. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples of the computer readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the present invention, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In the present invention, however, a computer readable signal medium may include a propagated data signal with computer readable program code embodied therein, for example, in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, fiber optic cable, RF, etc., or any suitable combination of the foregoing.
The flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present invention. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams or flowchart illustration, and combinations of blocks in the block diagrams or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
The modules described in the embodiments of the present invention may be implemented by software or hardware. The described modules may also be provided in a processor, which may be described as: a processor includes an acquisition module and a generation module. Wherein the names of the modules do not in some cases constitute a limitation of the module itself.
As another aspect, the present invention also provides a computer-readable medium that may be contained in the apparatus described in the above embodiments; or may be separate and not incorporated into the device. The computer readable medium carries one or more programs, and when the one or more programs are executed by a device, the device includes a receiving application program running instruction, and obtains view tree configuration data corresponding to the application program from a view tree data configuration interface of a configuration layer; registering the view tree configuration data to a basic layer, rendering each node of the view tree into a control through a protocol control rendering engine of the basic layer, and transmitting the control to a view loader in a business layer for page layout and loading; and based on the data request address of the view tree configuration data, a data filler of the service layer acquires a data source so as to fill the data source into the corresponding control.
According to the technical scheme of the embodiment of the invention, the problems of poor updating compatibility and poor user experience of the conventional application program page can be solved.
The above-described embodiments should not be construed as limiting the scope of the invention. Those skilled in the art will appreciate that various modifications, combinations, sub-combinations, and substitutions can occur, depending on design requirements and other factors. Any modification, equivalent replacement, and improvement made within the spirit and principle of the present invention should be included in the protection scope of the present invention.

Claims (10)

1.一种页面生成方法,其特征在于,包括:1. a page generation method, is characterized in that, comprises: 接收应用程序运行指令,从配置层的视图树数据配置接口中获取所述应用程序对应的视图树配置数据;Receive the 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; 将所述视图树配置数据注册到基础层,以通过基础层的协议化控件渲染引擎将视图树的每个节点渲染成控件,进而将所述控件传递给业务层中视图加载器进行页面布局并加载;The view tree configuration data is registered in the base layer, so that each node of the view tree is rendered into a control by the protocolized control rendering engine of the base layer, and then the control is passed to the view loader in the business layer for page layout and control. load; 基于视图树配置数据的数据请求地址,业务层的数据填充器获取数据源,以将所述数据源填充到对应的控件中。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 corresponding control with the data source. 2.根据权利要求1所述的方法,其特征在于,从配置层的视图树数据配置接口中获取所述应用程序对应的视图树配置数据之前,包括:2. The method according to claim 1, wherein before acquiring the view tree configuration data corresponding to the application program from the view tree data configuration interface of the configuration layer, the method comprises: 获取页面代码,调用基础层中的协议化视图树映射引擎,将页面代码映射成协议视图树;Get the page code, call the protocolized view tree mapping engine in the base layer, and map the page code into the 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. 3.根据权利要求2所述的方法,其特征在于,将页面代码映射成协议视图树,包括:3. The method according to claim 2, wherein the page code is mapped into a protocol view tree, comprising: 对页面代码中的DOM树进行深度优先遍历,以得到每一个DOM节点的属性,进而映射成JSON格式的协议视图树;其中,协议视图树中的每个JsonObject代表一个DOM节点,JsonObject的嵌套关系代表视图树的嵌套关系,JsonObject的名称为控件的名称。Depth-first traversal is performed on the DOM tree in the page code to obtain the attributes of each DOM node, which is then mapped into a protocol view tree in JSON format; wherein, each JsonObject in the protocol view tree represents a DOM node, and the nesting of JsonObject The relationship represents the nesting relationship of the view tree, and the name of the JsonObject is the name of the control. 4.根据权利要求1所述的方法,其特征在于,包括:4. The method of claim 1, comprising: 识别应用程序运行平台,通过基础层的协议化控件渲染引擎将视图树的每个节点渲染成相应平台的控件,进而将所述控件传递给业务层中相应平台的视图加载器进行页面布局并加载。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 . 5.根据权利要求1所述的方法,其特征在于,通过基础层的协议化控件渲染引擎将视图树的每个节点渲染成控件,包括:5. The method according to claim 1, wherein each node of the view tree is rendered into a control by the protocolized control rendering engine of the base layer, comprising: 通过基础层的协议化控件渲染引擎对视图树进行后序遍历,将遍历到的每一个节点渲染成控件。The view tree is traversed in post-order through the protocolized control rendering engine of the base layer, and each node traversed is rendered into a control. 6.根据权利要求1所述的方法,其特征在于,包括:6. The method of claim 1, comprising: 利用预设的线程池,通过基础层的协议化控件渲染引擎将视图树的每个节点渲染成控件。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. 7.根据权利要求1-6中任一所述的方法,其特征在于,基于视图树配置数据的数据请求地址,业务层的数据填充器获取数据源,包括:7. The method according to any one of claims 1-6, wherein, based on the data request address of the view tree configuration data, the data filler of the business layer obtains the data source, comprising: 基于视图树配置数据的数据请求地址,业务层的数据填充器调用对应的接口或本地数据库获取数据源。Based on the data request address of the view tree configuration data, the data filler of the business layer calls the corresponding interface or the local database to obtain the data source. 8.一种页面生成装置,其特征在于,包括:8. A page generating device, comprising: 获取模块,用于接收应用程序运行指令,从配置层的视图树数据配置接口中获取所述应用程序对应的视图树配置数据;an acquisition module, configured to receive an application program running instruction, and acquire the view tree configuration data corresponding to the application program from the view tree data configuration interface of the configuration layer; 生成模块,用于将所述视图树配置数据注册到基础层,以通过基础层的协议化控件渲染引擎将视图树的每个节点渲染成控件,进而将所述控件传递给业务层中视图加载器进行页面布局并加载;基于视图树配置数据的数据请求地址,业务层的数据填充器获取数据源,以将所述数据源填充到对应的控件中。The generation module is used to register the view tree configuration data in the base layer, so as to render each node of the view tree into a control through the protocolized control rendering engine of the base layer, and then pass the control to the view loading in the business layer. The controller performs 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. 9.一种电子设备,其特征在于,包括:9. An electronic device, characterized in that, comprising: 一个或多个处理器;one or more processors; 存储装置,用于存储一个或多个程序,storage means for storing one or more programs, 当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现如权利要求1-7中任一所述的方法。The one or more programs, when executed by the one or more processors, cause the one or more processors to implement the method of any of claims 1-7. 10.一种计算机可读介质,其上存储有计算机程序,其特征在于,所述程序被处理器执行时实现如权利要求1-7中任一所述的方法。10. A computer-readable medium on which a computer program is stored, characterized in that, when the program is executed by a processor, the method according to any one of claims 1-7 is implemented.
CN202110534142.6A 2021-05-17 2021-05-17 Page generation method and device Active CN113220339B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110534142.6A CN113220339B (en) 2021-05-17 2021-05-17 Page generation method and device

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110534142.6A CN113220339B (en) 2021-05-17 2021-05-17 Page generation method and device

Publications (2)

Publication Number Publication Date
CN113220339A true CN113220339A (en) 2021-08-06
CN113220339B CN113220339B (en) 2025-08-19

Family

ID=77092349

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110534142.6A Active CN113220339B (en) 2021-05-17 2021-05-17 Page generation method and device

Country Status (1)

Country Link
CN (1) CN113220339B (en)

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114357339A (en) * 2022-03-17 2022-04-15 杭州互链互联网技术有限公司 Page loading method and device and storage medium
CN114417220A (en) * 2022-01-20 2022-04-29 霖久智慧(广东)科技有限公司 H5 distributed application hot update release platform based on APP embedding
CN114489916A (en) * 2022-03-08 2022-05-13 京东城市(北京)数字科技有限公司 Method and device for loading visual large-screen page component
CN116302090A (en) * 2023-02-07 2023-06-23 武汉鼎元同立科技有限公司 APP multi-terminal integrated universal implementation method based on JSON intermediate format

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20170091159A1 (en) * 2015-09-25 2017-03-30 Yahoo! Inc. Programmatic native rendering of structured content
CN107656759A (en) * 2017-09-04 2018-02-02 口碑(上海)信息技术有限公司 A kind of rendering intent and device for user interface
CN109634598A (en) * 2018-12-14 2019-04-16 北京字节跳动网络技术有限公司 A kind of page display method, device, equipment and storage medium
CN110955850A (en) * 2019-11-18 2020-04-03 国云科技股份有限公司 A Processing Method of Componentized Tree Control
CN112558970A (en) * 2020-12-24 2021-03-26 贵阳货车帮科技有限公司 Rendering generation method and device for front-end page, front-end equipment and storage medium

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20170091159A1 (en) * 2015-09-25 2017-03-30 Yahoo! Inc. Programmatic native rendering of structured content
CN107656759A (en) * 2017-09-04 2018-02-02 口碑(上海)信息技术有限公司 A kind of rendering intent and device for user interface
CN109634598A (en) * 2018-12-14 2019-04-16 北京字节跳动网络技术有限公司 A kind of page display method, device, equipment and storage medium
CN110955850A (en) * 2019-11-18 2020-04-03 国云科技股份有限公司 A Processing Method of Componentized Tree Control
CN112558970A (en) * 2020-12-24 2021-03-26 贵阳货车帮科技有限公司 Rendering generation method and device for front-end page, front-end equipment and storage medium

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
韩思雨: "组件化可配置B2B2C平台供应商前端系统的设计与实现", 中国优秀硕士学位论文全文数据库信息科技辑, no. 5, 15 May 2021 (2021-05-15), pages 5 - 14 *

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114417220A (en) * 2022-01-20 2022-04-29 霖久智慧(广东)科技有限公司 H5 distributed application hot update release platform based on APP embedding
CN114489916A (en) * 2022-03-08 2022-05-13 京东城市(北京)数字科技有限公司 Method and device for loading visual large-screen page component
CN114357339A (en) * 2022-03-17 2022-04-15 杭州互链互联网技术有限公司 Page loading method and device and storage medium
CN114357339B (en) * 2022-03-17 2022-07-22 杭州互链互联网技术有限公司 Page loading method and device and storage medium
CN116302090A (en) * 2023-02-07 2023-06-23 武汉鼎元同立科技有限公司 APP multi-terminal integrated universal implementation method based on JSON intermediate format

Also Published As

Publication number Publication date
CN113220339B (en) 2025-08-19

Similar Documents

Publication Publication Date Title
CN113220339B (en) Page generation method and device
CN112612452B (en) API platform realization method, device, equipment and storage medium
CN107391169A (en) The dynamic updating method and device of the Android page
WO2018072626A1 (en) Method and apparatus for invoking component, and method and apparatus for processing component data
CN110888794B (en) Interface testing method and device
CN104615462B (en) Cross-platform Mobile solution generation service end and system
CN110554876A (en) Method and device for compiling android project
CN112486482B (en) Page display method and device
CN101944032A (en) Microware updating method, client, server and system
CN113760324A (en) Method and device for constructing micro front-end application
CN113076163A (en) Card rendering method and device
CN111026439B (en) Application program compatibility method, device, equipment and computer storage medium
CN111294395A (en) Terminal page transmission method, device, medium and electronic equipment
CN113760283A (en) Text rendering method and device
CN112015384B (en) Interface mapping method and device
CN114721681A (en) Configuration file updating method, device, equipment and storage medium
WO2022099913A1 (en) Interface configuration method and apparatus, and device and medium
CN111753226A (en) A page loading method and device
CN116301951B (en) Micro-service application installation upgrading method and device based on kubernetes
CN108733370B (en) Stylized display method, device, terminal and storage medium of native APP
CN109669720B (en) Chain type asynchronous request processing method and device based on Promise and electronic equipment
CN113495730A (en) Resource package generation and analysis method and device
CN114816469A (en) Web system upgrading method and device, electronic equipment and computer readable medium
CN114428615A (en) CSS compiling method, style updating method, device, medium and equipment
CN112104544B (en) Method and device for sending dynamic mail based on Freemarker

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant