CN108415702B - Dynamic rendering method and device for application interface of mobile terminal - Google Patents
Dynamic rendering method and device for application interface of mobile terminal Download PDFInfo
- Publication number
- CN108415702B CN108415702B CN201810059539.2A CN201810059539A CN108415702B CN 108415702 B CN108415702 B CN 108415702B CN 201810059539 A CN201810059539 A CN 201810059539A CN 108415702 B CN108415702 B CN 108415702B
- Authority
- CN
- China
- Prior art keywords
- attribute
- dom
- node
- dom node
- flex
- 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.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Abstract
The embodiment of the application provides a method and a device for dynamically rendering an application interface of a mobile terminal, and relates to the field of internet. The method comprises the following steps: according to the application of the visual interface of the mobile terminal, acquiring an updated XML file and a predefined script basic library of a server corresponding to the visual interface; analyzing the updated XML file according to a predefined script base to generate a Document Object Model (DOM) tree; sequentially traversing each DOM node on the document object model DOM tree; according to the flex typesetting attribute of the DOM node, creating flex typesetting nodes in a native mode, and binding corresponding preset views to each flex typesetting node; analyzing the conventional attribute of the DOM node through the predefined script base; and rendering and generating an updated visual interface according to the flex typesetting node and the analysis result of the conventional attribute of the DOM node. The problem of update mobile terminal application interface need the reprint among the prior art, development cost is higher is solved.
Description
Technical Field
The present application relates to the field of internet technologies, and in particular, to a method and an apparatus for dynamically rendering an application interface of a mobile terminal.
Background
With the popularization of network technology and the popularization of mobile internet terminals, the demand for information mobility is increasing day by day, and the information mobility requires the development, release, installation, update and other processes of mobile terminal applications of different platforms. The conventional development mode (i.e., native development mode) has high learning cost and high mobile cost due to problems such as cross-platform, and also has problems of re-release of the development end and re-installation of the application of the mobile terminal if functions are added or modified.
Based on the above problems, the prior art utilizes a large front-end solution, that is, combines methods such as HTML5 and reactive native, to improve development flexibility and convenience to a certain extent, but compared with a native development mode, fluency of a user in using an application is often reduced.
Disclosure of Invention
In view of the above problems, the present application embodiments are proposed to provide a mobile terminal application interface dynamic rendering method and a corresponding mobile terminal application interface dynamic rendering apparatus, which overcome the above problems or at least partially solve the above problems.
In order to solve the above problem, the present application discloses a method for dynamically rendering an application interface of a mobile terminal, including: according to the application of the visual interface of the mobile terminal, acquiring an updated XML file and a predefined script basic library of a server corresponding to the visual interface; analyzing the updated XML file according to a predefined script base to generate a Document Object Model (DOM) tree; sequentially traversing each DOM node on the document object model DOM tree; according to the flex typesetting attribute of the DOM node, creating flex typesetting nodes in a native mode, and binding corresponding preset views to each flex typesetting node; analyzing the conventional attribute of the DOM node through the predefined script base; and rendering and generating an updated visual interface according to the flex typesetting node and the analysis result of the conventional attribute of the DOM node.
Optionally, the regular attributes of the DOM node include: the event callback identifies one or more of the touch, pingback attributes.
Optionally, after the step of parsing the regular attributes of the DOM node through the predefined script base, the method further includes: if the conventional attribute of the DOM node is analyzed to be an item style attribute, converting the item style attribute data into attribute data corresponding to the mobile terminal system platform; wherein the item style attributes include: one or more of pixel, percentage, aspect ratio.
Optionally, after the step of parsing the regular attributes of the DOM node through the predefined script base, the method further includes: and if the conventional attribute of the DOM node is analyzed to be a touch attribute, acquiring a callback event corresponding to the touch attribute according to a predefined script base, and binding the callback event to the DOM node.
Optionally, after the step of parsing the regular attributes of the DOM node through the predefined script base, the method further includes: and if the regular attribute of the DOM node is analyzed to be a pingback attribute, acquiring a corresponding pingback event according to a predefined script base, and binding the pingback event to the DOM node.
The application discloses device is played up to mobile terminal application interface developments includes: the file acquisition module is used for acquiring an updated XML file and a predefined script basic library of a server side corresponding to a visual interface according to the visual interface applied by the mobile terminal; the analysis module is used for analyzing the updated XML file according to a predefined script base to generate a Document Object Model (DOM) tree; the attribute analysis module is used for sequentially traversing each DOM node on the document object model DOM tree; the typesetting module is used for creating flex typesetting nodes in a native mode according to the flex typesetting attributes of the DOM nodes and binding the corresponding preset views to the flex typesetting nodes; the conventional attribute analysis module is used for analyzing the conventional attributes of the DOM nodes through the predefined script base; and the updating module is used for rendering and generating an updated visual interface according to the flex typesetting node and the analysis result of the conventional attribute of the DOM node.
Optionally, the regular attributes of the DOM node include: the event callback identifies one or more of the touch, pingback attributes.
Optionally, the method further comprises: the item style attribute analyzing module is used for converting the item style attribute data into attribute data corresponding to the mobile terminal system platform if the item style attribute is analyzed to be the conventional attribute of the DOM node; wherein the item style attributes include: one or more of pixel, percentage, aspect ratio.
Optionally, the method further comprises: and the touch attribute analysis module is used for acquiring a call-back event corresponding to the touch attribute according to a predefined script base if the conventional attribute analyzed to the DOM node is the touch attribute, and binding the call-back event to the DOM node.
Optionally, the method further comprises: and the pingback attribute analysis module is used for acquiring a corresponding pingback event according to a predefined script base if the conventional attribute analyzed to the DOM node is the pingback attribute, and binding the pingback event to the DOM node.
The embodiment of the application has the following advantages:
the embodiment of the application, through detecting update XML file and the predefined script basic library that corresponds the visual interface of mobile terminal application, according to predefined script basic library analysis dynamic update XML file, generate the DOM tree, analyze the attribute of the DOM node of DOM tree, according to the analytic result of node attribute, establish flex typesetting node through native mode to analyze according to predefined script basic library the conventional attribute of DOM node is finally according to flex typesetting node, and the analytic result of the conventional attribute of DOM node, the visual interface that the rendering generated the update has solved the problem that the update mobile terminal application interface needs the renewed edition among the prior art, has reached when reducing development cost, improves the update speed to the beneficial effect of interface update dynamism has been realized.
Drawings
Fig. 1 is a flowchart illustrating steps of an embodiment of a method for dynamically rendering an application interface of a mobile terminal according to the embodiment of the present application;
fig. 2 is a flowchart illustrating steps of an embodiment of a method for dynamically rendering an application interface of a mobile terminal according to the embodiment of the present application;
FIG. 2A is a schematic diagram of an application infrastructure according to an embodiment of the present application;
fig. 2B is a schematic structural diagram of an application interface dynamic rendering system provided in the embodiment of the present application;
fig. 3 is a block diagram illustrating a structure of an embodiment of a dynamic rendering apparatus for an application interface of a mobile terminal according to an embodiment of the present disclosure;
fig. 4 is a block diagram illustrating a structure of an embodiment of a dynamic rendering apparatus for an application interface of a mobile terminal according to an embodiment of the present disclosure.
Detailed Description
In order to make the aforementioned objects, features and advantages of the present application more comprehensible, the present application is described in further detail with reference to the accompanying drawings and the detailed description.
Example one
Referring to fig. 1, a flowchart illustrating steps of an embodiment of a method for dynamically rendering an application interface of a mobile terminal according to the present application is shown, which may specifically include the following steps:
In the embodiment of the invention, aiming at each visual interface applied by the mobile terminal, a url address of the XML file of the corresponding current visual interface exists at the server side, and the corresponding XML file and the predefined script can be obtained from the server side according to the url address.
Specifically, relevant technicians deploy corresponding XML files on a server for a visual interface of an application, first, the deployed XML files include defined XML skin rules, support cascading style css attributes, support typesetting based on flex rules, and the like, and the predefined script base is a luakit base.
After the related technical personnel upload the updates at the server, the related technical personnel can inform the corresponding application on the mobile terminal of requesting to download the updates at the server by sending an update prompting message to the client.
And 102, analyzing the updated XML file according to a predefined script base to generate a Document Object Model (DOM) tree.
In the embodiment of the invention, after the application of the mobile terminal requests to download the corresponding updated XML file and the predefined script basic library at the server end, the XML skin file is analyzed through the Luakit library script, and the DOM tree is generated.
The DOM treats an XML document as a tree structure. The DOM tree structure is referred to as a node tree through which all nodes can be accessed. Their contents can be modified or deleted, and new elements can be created, the DOM node tree showing the set of nodes, and the associations between them. The DOM tree starts at the root node and then grows branches at the lowest level of the tree towards the text nodes.
And 103, traversing each DOM node in the document object model DOM tree in sequence.
In the embodiment of the invention, after the DOM tree is generated according to the updated XML file, the preset parser is used for parsing the DOM tree, and when the parser is loaded locally for parsing, each DOM node on the DOM tree is traversed sequentially. For example, an XML file is loaded by using the function loadXMLDoc (), and traversal is performed in sequence according to the DOM node list in the file and the upper and lower level association relationship of each node.
And 104, creating flex typesetting nodes in a native mode according to the flex typesetting attributes of the DOM nodes, and binding the corresponding preset views to each flex typesetting node.
In the embodiment of the invention, when traversing DOM nodes, the name and the type of the node attribute can be determined according to the nodeName and nodeType, the XML file is loaded into the XMLDoc by using loadXMLDoc (), then the child nodes of the root element are obtained, the node type of each child node is checked, if the node type is '1', the node is an element node, and if the node is an element node, the name of the node is output.
According to the method, when the DOM node is traversed, if the name of the returned node is flex, the DOM node is a flex node, the traversal node is determined to contain the flex typesetting attribute, and the flex typesetting can be created in a native mode.
Specifically, Flex is an abbreviation of Flex Box, a flexible Box layout, and the main idea of the Flex Box layout is that elements can change in size to fit available space, when the available space becomes larger, the Flex elements will expand to fill the available space, when the Flex elements exceed the available space, the Flex elements will automatically shrink, and native ways are used to define attributes of the flexible container, including display, Flex-direction, Flex-wrap, Flex-flow, just-content, align-items, respectively defining the flexible direction of the block-level flexible container, and processing ways when insufficient in expansion, and the like.
And 105, analyzing the conventional attribute of the DOM node through the predefined script base.
In the embodiment of the invention, if the nodeName and nodeType returned by traversing the DOM node further analyze the conventional attribute of the DOM node, and according to the analyzed conventional attribute, finding the corresponding event and binding the event to the DOM node.
And step 106, rendering and generating an updated visual interface according to the flex typesetting node and the analysis result of the conventional attribute of the DOM node.
In the embodiment of the invention, after traversing the DOM tree, according to the typesetting nodes, the layout form, the bound view and the event, the skins such as page colors, backgrounds and the like are drawn, the control is generated, and finally the updated application interface is generated.
In the embodiment of the invention, an updated XML file and a predefined script basic library of a server side corresponding to a visual interface are obtained according to the visual interface applied by a mobile terminal; analyzing the updated XML file according to a predefined script base to generate a Document Object Model (DOM) tree; sequentially traversing each DOM node on the document object model DOM tree; according to the flex typesetting attribute of the DOM node, creating flex typesetting nodes in a native mode, and binding corresponding preset views to each flex typesetting node; analyzing the conventional attribute of the DOM node through the predefined script base; and rendering and generating an updated visual interface according to the flex typesetting node and the analysis result of the conventional attribute of the DOM node. The corresponding XML file is downloaded according to the interface update, and dynamic analysis and update are carried out, so that the method has the advantages of reducing development cost and improving development flexibility.
Example two
Referring to fig. 2, a flowchart illustrating steps of an embodiment of a method for dynamically rendering an application interface of a mobile terminal according to the present application is shown, which may specifically include the following steps:
This step is the same as step 101 and will not be described in detail here.
This step is the same as step 102 and will not be described in detail here.
And step 203, traversing each DOM node in the document object model DOM tree in sequence.
This step is the same as step 103 and will not be described in detail here.
And 204, creating flex typesetting nodes in a native mode according to the flex typesetting attributes of the DOM nodes, and binding the corresponding preset views to the flex typesetting nodes.
This step is the same as step 104 and will not be described in detail here.
Preferably, the regular attributes of the DOM node include: the event callback identifies one or more of the touch, pingback attributes.
And step 205, analyzing the conventional attributes of the DOM node through the predefined script base.
This step is the same as step 105 and will not be described in detail.
Preferably, in another embodiment of the present invention, after step 205, the method further includes:
step A11, if the conventional attribute of the DOM node is analyzed to be a touch attribute, obtaining a call-back event corresponding to the touch attribute according to a predefined script base, and binding the call-back event to the DOM node.
Preferably, in another embodiment of the present invention, after step 205, the method further includes:
and step B11, if the regular attribute of the DOM node is analyzed to be a pingback attribute, acquiring a corresponding pingback event according to a predefined script base, and binding the pingback event to the DOM node.
In the embodiment of the present invention, through the description of the above steps, as shown in fig. 2A, an XML skin rule (skin Designer) is first predefined, css attributes are supported, and typesetting based on a flex rule is supported. Secondly, when a Script basic library luakit Script is downloaded and defined, the skin is analyzed according to the luakit Script, a tree structure similar to a DOM is generated by using a skin analyzer skin parser of a service layer, the XML skin is analyzed into the DOM structure and stored, then a native control corresponding to a building layer is generated from the engine layer to an object c end through the luakit library Bridge, wherein the native control comprises a UI component, a sound component, a network component, a timer control, an animation component, a pingback component and the like, and the native control is spliced into the corresponding tree structure. For example, the XML skin is first parsed into DOM structures and stored. And then traversing each DOM node in sequence, analyzing the conventional attribute of each node in sequence, and triggering a corresponding method through the luakit and oc Bridge mechanisms.
Secondly, the control protocol is issued to a specific platform in a text form, and the client performs localization processing according to the characteristics of the platform to convert the control protocol into control semantics which can be identified by the platform. For example, cs attribute unit conversion converts units such as pixel (px), percentage (%), aspect ratio (vw) in cs into units related to a platform, such as dp, sp, and the like, wherein the cs attribute screen is adapted, in most cases, mobile phones with different screen resolutions and screen sizes use the same cs standard, and a client multiplies the converted units by a specific screen coefficient according to the current screen density so as to adapt to different screens.
In the process of analyzing the DOM node, two situations are adopted: the method comprises the steps of firstly, if an analyzed DOM node is a flex node, searching the flex node, binding the flex node, and asynchronously driving the flex typesetting process, for example, if the traversed node is a flex node, traversing child nodes of the node, setting a flex Children in a native mode, creating the flex typesetting node by a native end, binding the flex node to an actual preset view, triggering the typesetting of the flex node, obtaining the position of the typesetting node after the typesetting is finished, and reversely synchronizing the position of the typesetting node to the bound preset view. In another case, when the parsed DOM node is not a flex node, the corresponding event is bound according to the attribute of the DOM node. For example, if the touch attribute is found in the process of analyzing the node, a corresponding callback event in the luakit script is searched, and the event is bound. And if finding the pingback attribute in the process of analyzing the node, searching a corresponding pingback event in the luakit script and binding the event.
When the DOM node is analyzed, the name of the node is obtained through the function nodeName, the value of the node is obtained through the function nodeValue, the type of the node is obtained through the function nodeType, the name, the attribute and the corresponding value of the DOM node are obtained through the read-only operation, and the corresponding values are respectively stored according to different attributes of the node so as to facilitate the next rendering.
Certainly, in practical application, the attributes of the DOM node further include attributes such as id, frame, bg, and the like, where id designates a control identifier, frame designates a predetermined region, and bg designates a background color, which are analyzed by corresponding content predetermined in a script library, and finally rendered into an updated application interface and content, which are displayed to a user in a system layer.
As shown in fig. 2B, the relevant technical staff configures a dynamic update template through a configuration tool, uploads the dynamic update template to the server to generate and store an update data packet, and after requesting to download the update data packet from the server, the mobile terminal performs parsing according to the downloaded skin packet and the predefined luakit script library, then parses the skin file and the node attribute in the DOM file, can correspondingly generate a flex typesetting node according to the parsing result, binds a view, performs semantic localization through the css style attribute, binds a corresponding event for a touch node and a pingback node, and finally completes updating of an application interface.
And step 207, rendering and generating an updated visual interface according to the flex typesetting node and the analysis result of the conventional attribute of the DOM node.
This step is the same as step 106 and will not be described in detail here.
In the embodiment of the invention, an updated XML file and a predefined script basic library of a server side corresponding to a visual interface are obtained according to the visual interface applied by a mobile terminal; analyzing the updated XML file according to a predefined script base to generate a Document Object Model (DOM) tree; sequentially traversing each DOM node on the document object model DOM tree; according to the flex typesetting attribute of the DOM node, creating flex typesetting nodes in a native mode, and binding corresponding preset views to each flex typesetting node; if the traversal DOM node is not a flex node, if the conventional attribute of the DOM node is analyzed to be an item style attribute, converting the item style attribute data into attribute data corresponding to the mobile terminal system platform; if the conventional attribute of the DOM node is analyzed to be a touch attribute, acquiring a call-back event corresponding to the touch attribute according to a predefined script base, and binding the call-back event to the DOM node; if the regular attribute of the DOM node is analyzed to be a pingback attribute, acquiring a corresponding pingback event according to a predefined script base, and binding the pingback event to the DOM node; and finally, rendering and generating an updated visual interface according to the flex typesetting node and the analysis result of the conventional attribute of the DOM node. The method and the device have the advantages that the corresponding XML files are downloaded according to the interface updating, dynamic analysis and updating are carried out, the style data and the behavior data are separated, the style and the behavior data are controlled by the cloud, dynamic updating is supported, standardized XML skins and Lua scripts are accessed, custom DSL is avoided, the interface development threshold is lowered, the flexibility of interface interaction of the mobile client is improved, and the requirements of products and operation can be better supported.
EXAMPLE III
Referring to fig. 3, a block diagram illustrating a structure of an embodiment of a dynamic rendering apparatus for an application interface of a mobile terminal according to the present application is shown, and the apparatus may specifically include the following modules:
the device 300 for dynamically rendering the application interface of the mobile terminal comprises:
the file acquisition module 301 is configured to acquire, according to a mobile terminal application visual interface, an updated XML file and a predefined script base library of a server corresponding to the visual interface;
the parsing module 302 is configured to parse the updated XML file according to a predefined script base to generate a document object model DOM tree;
the attribute analysis module 303 is configured to sequentially traverse each DOM node in the document object model DOM tree;
the typesetting module 304 is used for creating flex typesetting nodes in a native mode according to the flex typesetting attributes of the DOM nodes, and binding the corresponding preset views to the flex typesetting nodes;
a regular attribute parsing module 305, configured to parse regular attributes of the DOM node through the predefined script base;
and the updating module 306 is configured to render and generate an updated visual interface according to the flex typesetting node and the parsing result of the conventional attribute of the DOM node.
Example four
Referring to fig. 4, a block diagram illustrating a structure of an embodiment of a dynamic rendering apparatus for an application interface of a mobile terminal according to the present application is shown, and the apparatus may specifically include the following modules:
the apparatus 400 for dynamically rendering an application interface of a mobile terminal includes:
the file acquisition module 401 is configured to acquire, according to a mobile terminal application visual interface, an updated XML file and a predefined script base library of a server corresponding to the visual interface;
an analyzing module 402, configured to analyze the updated XML file according to a predefined script base, and generate a document object model DOM tree;
an attribute parsing module 403, configured to sequentially traverse each DOM node in the document object model DOM tree;
the typesetting module 404 is used for creating flex typesetting nodes in a native mode according to the flex typesetting attributes of the DOM nodes, and binding the corresponding preset views to the flex typesetting nodes;
preferably, the regular attributes of the DOM node include: the event callback identifies one or more of the touch, pingback attributes.
A conventional attribute parsing module 405, configured to parse the conventional attribute of the DOM node through the predefined script base;
preferably, the method further comprises the following steps:
an item style attribute parsing module 406, configured to convert the item style attribute data into attribute data corresponding to the mobile terminal system platform if the parsed regular attribute of the DOM node is an item style attribute; wherein the item style attributes include: one or more of pixel, percentage, aspect ratio.
Preferably, in another embodiment of the present invention, the method further comprises:
and the touch attribute analysis module is used for acquiring a call-back event corresponding to the touch attribute according to a predefined script base if the conventional attribute analyzed to the DOM node is the touch attribute, and binding the call-back event to the DOM node.
Preferably, in another embodiment of the present invention, the method further comprises:
and the pingback attribute analysis module is used for acquiring a corresponding pingback event according to a predefined script base if the conventional attribute analyzed to the DOM node is the pingback attribute, and binding the pingback event to the DOM node.
And the updating module 407 is configured to render and generate an updated visual interface according to the flex typesetting node and the parsing result of the conventional attribute of the DOM node.
In the embodiment of the invention, a file acquisition module is utilized to acquire an updated XML file and a predefined script basic library of a server end corresponding to a visual interface according to the visual interface applied by a mobile terminal; analyzing the updated XML file according to a predefined script base by an analysis module to generate a Document Object Model (DOM) tree; sequentially traversing each DOM node on the document object model DOM tree by using an attribute analysis module and a typesetting module, creating flex typesetting nodes in a native mode according to the flex typesetting attributes of the DOM nodes, and binding corresponding preset views to the flex typesetting nodes; analyzing the conventional attribute of the DOM node through the predefined script base by a conventional attribute analysis module; binding the corresponding event to the corresponding DOM node according to the type of the analyzed conventional attribute; and finally, according to the analysis result of the flex typesetting node and the conventional attribute of the DOM node, rendering and generating an updated visual interface. The method and the device have the advantages that the corresponding XML files are downloaded according to the interface updating, dynamic analysis and updating are carried out, the style data and the behavior data are separated, the style and the behavior data are controlled by the cloud, dynamic updating is supported, standardized XML skins and Lua scripts are accessed, custom DSL is avoided, the interface development threshold is lowered, the flexibility of interface interaction of the mobile client is improved, and the requirements of products and operation can be better supported.
For the device embodiment, since it is basically similar to the method embodiment, the description is simple, and for the relevant points, refer to the partial description of the method embodiment.
The embodiments in the present description are all described in a progressive manner, and the emphasis of each embodiment is to be described different from the other embodiments, and the same and similar parts among the embodiments can be referred to each other.
As will be appreciated by one of skill in the art, embodiments of the present application may be provided as a method, apparatus, or computer program product. Accordingly, embodiments of the present application may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, embodiments of the present application may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
In a typical configuration, the computer device includes one or more processors (CPUs), input/output interfaces, network interfaces, and memory. The memory may include forms of volatile memory in a computer readable medium, Random Access Memory (RAM) and/or non-volatile memory, such as Read Only Memory (ROM) or flash memory (flash RAM). Memory is an example of a computer-readable medium. Computer-readable media, including both non-transitory and non-transitory, removable and non-removable media, may implement information storage by any method or technology. The information may be computer readable instructions, data structures, modules of a program, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), Static Random Access Memory (SRAM), Dynamic Random Access Memory (DRAM), other types of Random Access Memory (RAM), Read Only Memory (ROM), Electrically Erasable Programmable Read Only Memory (EEPROM), flash memory or other memory technology, compact disc read only memory (CD-ROM), Digital Versatile Discs (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices, or any other non-transmission medium that can be used to store information that can be accessed by a computing device. As defined herein, computer readable media does not include non-transitory computer readable media (fransitory media), such as modulated data signals and carrier waves.
Embodiments of the present application are described with reference to flowchart illustrations and/or block diagrams of methods, terminal devices (systems), and computer program products according to embodiments of the application. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing terminal to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing terminal, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing terminal to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be loaded onto a computer or other programmable data processing terminal to cause a series of operational steps to be performed on the computer or other programmable terminal to produce a computer implemented process such that the instructions which execute on the computer or other programmable terminal provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
While preferred embodiments of the present application have been described, additional variations and modifications of these embodiments may occur to those skilled in the art once they learn of the basic inventive concepts. Therefore, it is intended that the appended claims be interpreted as including the preferred embodiment and all such alterations and modifications as fall within the true scope of the embodiments of the application.
Finally, it should also be noted that, herein, relational terms such as first and second, and the like may be used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Also, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or terminal that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or terminal. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other like elements in a process, method, article, or terminal that comprises the element.
The method and the device for dynamically rendering the application interface of the mobile terminal provided by the application are introduced in detail, specific examples are applied in the method to explain the principle and the implementation mode of the application, and the description of the embodiments is only used for helping to understand the method and the core idea of the application; meanwhile, for a person skilled in the art, according to the idea of the present application, there may be variations in the specific embodiments and the application scope, and in summary, the content of the present specification should not be construed as a limitation to the present application.
Claims (10)
1. A dynamic rendering method for an application interface of a mobile terminal is characterized by comprising the following steps:
according to the application of the visual interface of the mobile terminal, acquiring an updated XML file and a predefined script basic library of a server corresponding to the visual interface;
analyzing the updated XML file according to a predefined script base to generate a Document Object Model (DOM) tree;
sequentially traversing each DOM node on the document object model DOM tree;
according to the flex typesetting attribute of the DOM node, creating flex typesetting nodes in a native mode, and binding corresponding preset views to each flex typesetting node;
analyzing the conventional attribute of the DOM node through the predefined script base;
and rendering and generating an updated visual interface according to the flex typesetting node and the analysis result of the conventional attribute of the DOM node.
2. The method of claim 1, wherein the regular attributes of the DOM node comprise: the event callback identifies one or more of the touch, pingback attributes.
3. The method according to claim 2, further comprising, after the step of parsing the regular attributes of the DOM node through the predefined script base, the steps of:
if the conventional attribute of the DOM node is analyzed to be an item style attribute, converting the item style attribute data into attribute data corresponding to the mobile terminal system platform; wherein the item style attributes include: one or more of pixel, percentage, aspect ratio.
4. The method according to claim 2, further comprising, after the step of parsing the regular attributes of the DOM node through the predefined script base, the steps of:
and if the conventional attribute of the DOM node is analyzed to be a touch attribute, acquiring a callback event corresponding to the touch attribute according to a predefined script base, and binding the callback event to the DOM node.
5. The method according to claim 2, further comprising, after the step of parsing the regular attributes of the DOM node through the predefined script base, the steps of:
and if the regular attribute of the DOM node is analyzed to be a pingback attribute, acquiring a corresponding pingback event according to a predefined script base, and binding the pingback event to the DOM node.
6. An apparatus for dynamically rendering an application interface of a mobile terminal, the apparatus comprising:
the file acquisition module is used for acquiring an updated XML file and a predefined script basic library of a server side corresponding to a visual interface according to the visual interface applied by the mobile terminal;
the analysis module is used for analyzing the updated XML file according to a predefined script base to generate a Document Object Model (DOM) tree;
the attribute analysis module is used for sequentially traversing each DOM node on the document object model DOM tree;
the typesetting module is used for creating flex typesetting nodes in a native mode according to the flex typesetting attributes of the DOM nodes and binding the corresponding preset views to the flex typesetting nodes;
the conventional attribute analysis module is used for analyzing the conventional attributes of the DOM nodes through the predefined script base;
and the updating module is used for rendering and generating an updated visual interface according to the flex typesetting node and the analysis result of the conventional attribute of the DOM node.
7. The apparatus of claim 6, wherein the regular attributes of the DOM node comprise: the event callback identifies one or more of the touch, pingback attributes.
8. The apparatus of claim 7, further comprising:
the item style attribute analyzing module is used for converting the item style attribute data into attribute data corresponding to the mobile terminal system platform if the item style attribute is analyzed to be the conventional attribute of the DOM node; wherein the item style attributes include: one or more of pixel, percentage, aspect ratio.
9. The apparatus of claim 7, further comprising:
and the touch attribute analysis module is used for acquiring a call-back event corresponding to the touch attribute according to a predefined script base if the conventional attribute analyzed to the DOM node is the touch attribute, and binding the call-back event to the DOM node.
10. The apparatus of claim 7, further comprising:
and the pingback attribute analysis module is used for acquiring a corresponding pingback event according to a predefined script base if the conventional attribute analyzed to the DOM node is the pingback attribute, and binding the pingback event to the DOM node.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810059539.2A CN108415702B (en) | 2018-01-22 | 2018-01-22 | Dynamic rendering method and device for application interface of mobile terminal |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810059539.2A CN108415702B (en) | 2018-01-22 | 2018-01-22 | Dynamic rendering method and device for application interface of mobile terminal |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN108415702A CN108415702A (en) | 2018-08-17 |
| CN108415702B true CN108415702B (en) | 2021-05-25 |
Family
ID=63126020
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810059539.2A Active CN108415702B (en) | 2018-01-22 | 2018-01-22 | Dynamic rendering method and device for application interface of mobile terminal |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN108415702B (en) |
Families Citing this family (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109117230A (en) * | 2018-08-14 | 2019-01-01 | 福建网龙计算机网络信息技术有限公司 | The 1 pixel frame display methods based on retina screen, storage medium |
| CN109634598B (en) * | 2018-12-14 | 2020-09-18 | 北京字节跳动网络技术有限公司 | Page display method, device, equipment and storage medium |
| CN111381813B (en) * | 2018-12-28 | 2023-03-14 | 抖音视界有限公司 | Front-end page debugging method and device, computer equipment and storage medium |
| CN110083426A (en) * | 2019-04-28 | 2019-08-02 | 无线生活（杭州）信息科技有限公司 | A kind of application interface rendering method and device |
| CN110825373B (en) * | 2019-10-10 | 2023-04-25 | 上海上湖信息技术有限公司 | Mobile terminal dynamic method and device |
| CN110928772B (en) * | 2019-11-05 | 2022-03-08 | 深圳前海微众银行股份有限公司 | Test method and device |
| CN111124379B (en) * | 2019-11-25 | 2021-07-23 | 贝壳找房(北京)科技有限公司 | Page generation method and device, electronic equipment and storage medium |
| CN113705176A (en) * | 2020-06-22 | 2021-11-26 | 稿定（厦门）科技有限公司 | Plane typesetting method and system |
| CN112882772B (en) * | 2021-03-24 | 2022-04-22 | 腾讯科技（深圳）有限公司 | Configuration method of application interface of mobile terminal, mobile terminal and storage medium |
| CN113642295B (en) * | 2021-08-24 | 2023-10-20 | 北京百度网讯科技有限公司 | Page typesetting method, device and computer program product |
| CN114924815A (en) * | 2022-03-31 | 2022-08-19 | 北京达佳互联信息技术有限公司 | Page rendering method and device, electronic equipment and storage medium |
| CN117369820B (en) * | 2023-09-22 | 2024-04-02 | 北京渲光科技有限公司 | Rendering flow chart generation method, device and equipment |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101334728A (en) * | 2008-07-28 | 2008-12-31 | 北京航空航天大学 | Interface creating method and platform based on XML document description |
| CN101695032A (en) * | 2009-11-02 | 2010-04-14 | 中国电信股份有限公司 | Unified web client, service configuration method and system thereof |
| CN105354013A (en) * | 2014-08-18 | 2016-02-24 | 阿里巴巴集团控股有限公司 | Application interface rendering method and apparatus |
| CN106371844A (en) * | 2016-08-31 | 2017-02-01 | 北京奇艺世纪科技有限公司 | Method and system for presenting webpage by native user interface assembly |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20130205282A1 (en) * | 2012-02-07 | 2013-08-08 | Microsoft Corporation | Transferring program execution from compiled code to interpreted code |
-
2018
- 2018-01-22 CN CN201810059539.2A patent/CN108415702B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101334728A (en) * | 2008-07-28 | 2008-12-31 | 北京航空航天大学 | Interface creating method and platform based on XML document description |
| CN101695032A (en) * | 2009-11-02 | 2010-04-14 | 中国电信股份有限公司 | Unified web client, service configuration method and system thereof |
| CN105354013A (en) * | 2014-08-18 | 2016-02-24 | 阿里巴巴集团控股有限公司 | Application interface rendering method and apparatus |
| CN106371844A (en) * | 2016-08-31 | 2017-02-01 | 北京奇艺世纪科技有限公司 | Method and system for presenting webpage by native user interface assembly |
Also Published As
| Publication number | Publication date |
|---|---|
| CN108415702A (en) | 2018-08-17 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108415702B (en) | Dynamic rendering method and device for application interface of mobile terminal | |
| CN108279932B (en) | Method and device for dynamically configuring user interface of mobile terminal | |
| US10565293B2 (en) | Synchronizing DOM element references | |
| CN109388766B (en) | Page loading method and device | |
| CN110309451B (en) | Method and device for generating web preloading page | |
| CN110442330B (en) | List component conversion method and device, electronic equipment and storage medium | |
| CN108710490B (en) | Method and device for editing Web page | |
| CN106294493B (en) | Method and device for realizing document format conversion | |
| CN106886398B (en) | Method and equipment for extracting cascading style sheet | |
| CN110941428B (en) | Website creation method and device | |
| CN113126990A (en) | Page development method, device, equipment and storage medium | |
| CN110362792B (en) | Method and device for converting RN file into applet file and conversion equipment | |
| CN113495730A (en) | Resource package generation and analysis method and device | |
| CN111723314B (en) | Webpage display method and device, electronic equipment and computer readable storage medium | |
| CN106210918A (en) | The update method of a kind of user interface and system | |
| CN116301813B (en) | Low-code platform development method and system | |
| CN110807162A (en) | Method and device for loading occupation bitmap | |
| CN115268904A (en) | User interface design file generation method, device, equipment and medium | |
| CN111273903B (en) | Webpage making method and device, computer equipment and computer storage medium | |
| CN113535160B (en) | Method, device, system, electronic device and storage medium for multiplexing application modules | |
| CN114706582A (en) | Icon processing method and device during program operation, electronic equipment and storage medium | |
| CN113934957A (en) | Method and system for generating rendering sketch file from webpage | |
| CN110989982B (en) | Building block construction method and device with return value function, storage medium and processor | |
| CN111782257A (en) | Application installation package generation method and device and interface display method and device | |
| CN117251231B (en) | Animation resource processing method, device and system and electronic equipment |
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 |