CN112306594A - Rendering method and device based on mobile terminal and storage medium - Google Patents
Rendering method and device based on mobile terminal and storage medium Download PDFInfo
- Publication number
- CN112306594A CN112306594A CN202010297959.1A CN202010297959A CN112306594A CN 112306594 A CN112306594 A CN 112306594A CN 202010297959 A CN202010297959 A CN 202010297959A CN 112306594 A CN112306594 A CN 112306594A
- Authority
- CN
- China
- Prior art keywords
- data
- component
- rendering
- native
- data content
- 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.)
- Pending
Links
- 238000009877 rendering Methods 0.000 title claims abstract description 115
- 238000000034 method Methods 0.000 title claims abstract description 42
- 238000013507 mapping Methods 0.000 claims abstract description 40
- 238000011161 development Methods 0.000 claims abstract description 22
- 238000007405 data analysis Methods 0.000 claims description 4
- 238000010586 diagram Methods 0.000 description 10
- 230000006870 function Effects 0.000 description 10
- 230000008569 process Effects 0.000 description 4
- 230000007547 defect Effects 0.000 description 3
- 238000012545 processing Methods 0.000 description 3
- 238000004590 computer program Methods 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 238000007726 management method Methods 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 238000013500 data storage Methods 0.000 description 1
- 238000001514 detection method Methods 0.000 description 1
- 238000007599 discharging Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012544 monitoring process Methods 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
- 230000005477 standard model Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/12—Use of codes for handling textual entities
- G06F40/14—Tree-structured documents
Abstract
The application discloses a rendering method, a rendering device and a storage medium based on a mobile terminal, which specifically comprise the following steps: requesting to receive data through a network; analyzing the received data to obtain data content, data attributes and data labels; under a cross-platform development framework of a mobile terminal, searching a corresponding native component in an established native component mapping table according to a data tag; if the corresponding native component is found, rendering the data content by using the found native component according to the data attribute; and if the corresponding native component is not found, rendering the data content according to the data attribute by utilizing the existing browser component. The embodiment of the application combines the native component and the browser component, preferentially utilizes the native component to render, and only when the corresponding native component does not exist, the existing browser component is utilized to render, so that the rapid rendering speed is ensured, and the requirement of rendering rich styles is met.
Description
Technical Field
The present application relates to the field of image processing technologies, and in particular, to a rendering method based on a mobile terminal, a rendering apparatus based on a mobile terminal, a computer-readable storage medium, and an electronic device.
Background
With the development of smart phones and mobile internet, more and more information can be displayed on a mobile terminal for users to browse news, sports, entertainment, commodities and the like. Such applications capable of presenting mobile information at the mobile end generally render data content using a native (native) component or a browser component, and then present the rendered data content to the user at the mobile end. The native component can be created in a native application (native APP) of the mobile terminal, and although the received content can be directly and quickly rendered, the supportable style is single and cannot meet the requirements of rich and variable content. Browser components (such as Webview components) are components using a browser engine (such as WebKit), and have rich supportable styles, but limited support capability of mobile end systems and slow rendering speed.
Disclosure of Invention
Aiming at the prior art, the embodiment of the application discloses a rendering method based on a mobile terminal, which can avoid the defects of single support style of a native component and low rendering speed of a browser component.
The rendering method based on the mobile terminal in the embodiment of the application specifically includes:
requesting to receive data through a network;
analyzing the received data to obtain data content, data attributes and data labels, wherein the data labels are marks used for representing the beginning and the end of the data content, and the data attributes are display styles used for representing the data content;
under a cross-platform development framework of a mobile terminal, searching a corresponding native component in an established native component mapping table according to a data tag;
if the corresponding native component is found, rendering the data content by using the found native component according to the data attribute;
and if the corresponding native component is not found, rendering the data content according to the data attribute by utilizing the existing browser component.
Further, the air conditioner is provided with a fan,
the data is hypertext markup language (html) data; the step of analyzing the received data to obtain data content, data attributes and data labels comprises:
generating a Document Object Model (DOM) tree from the received html data, wherein each node in the DOM tree stores the data content, the data attribute and a corresponding data tag;
and traversing and analyzing the DOM tree, and dividing the data tags into standard tags and custom tags according to tag types, wherein the standard tags are data tags created by an operating system, and the custom tags are data tags newly set based on a mobile end cross-platform development framework.
Further, the air conditioner is provided with a fan,
between the step of analyzing the received data to obtain the data content and the data label and the step of searching the corresponding native component in the established native component mapping table according to the data label, the method further comprises the following steps:
and transmitting the corresponding data content and data attribute in the DOM tree to a corresponding standard component aiming at the standard tag, and rendering the data content by the standard component according to the data attribute, wherein the standard component is a native component created by an operating system.
Further, the air conditioner is provided with a fan,
the step of searching the corresponding native component in the established native component mapping table according to the data tag comprises the following steps:
and searching a corresponding custom component in the established native component mapping table according to the custom tag, wherein the custom component is a native component newly set under the mobile-end-based cross-platform development framework.
Further, the air conditioner is provided with a fan,
if the corresponding native component is found, the step of rendering the data content according to the data attribute by using the found native component comprises the following steps:
and if the custom component corresponding to the custom tag is found, transmitting the corresponding data content and data attribute in the DOM tree to the corresponding custom component, and rendering the data content by the custom component according to the data attribute.
Further, the air conditioner is provided with a fan,
if the corresponding native component is not found, the step of rendering the data content according to the data attribute by using the existing browser component comprises the following steps:
and if the custom component corresponding to the custom tag is not found, transmitting the custom tag, the data content and the data attribute to the browser component, and rendering the data content by the browser component according to the data attribute.
Further, the air conditioner is provided with a fan,
when the browser component renders the data content according to the data attribute, the method further comprises:
and if the rendering of the browser component fails, giving up the rendering and recording a data tag corresponding to the rendering failure.
The embodiment of the application also provides a rendering device based on the mobile terminal, which can avoid the defects of single support style of the native component and low rendering speed of the browser component.
The rendering device based on the mobile terminal provided by the embodiment of the application comprises:
the data receiving module is used for requesting to receive data through a network;
the data analysis module is used for analyzing the received data to obtain data content, data attributes and data labels, wherein the data labels are marks used for indicating the beginning and the end of the data content, and the data attributes are display styles used for indicating the data content;
the component mapping module is used for searching a corresponding native component in the established native component mapping table according to the data tag under the mobile end cross-platform development framework;
the component rendering module is used for rendering the data content according to the data attribute by utilizing the searched native component if the corresponding native component is found by the component mapping module; and if the corresponding native component is not found by the component mapping module, rendering the data content according to the data attribute by utilizing the existing browser component.
Further, the air conditioner is provided with a fan,
and the component rendering module is further used for transmitting the corresponding data content and data attribute in the DOM tree to the corresponding standard component aiming at the standard tag, and rendering the data content by the standard component according to the data attribute, wherein the standard component is a native component created by an operating system.
Embodiments of the present application further provide a computer-readable storage medium, on which computer instructions are stored, and when the instructions are executed by a processor, the mobile-end-based rendering method may be implemented.
An embodiment of the present application further provides an electronic device, which at least includes the above-mentioned computer-readable storage medium, and further includes a processor;
the processor is configured to read the executable instructions from the computer-readable storage medium and execute the instructions to implement the mobile-side-based rendering method.
In summary, the embodiment of the application combines the native component and the browser component, preferentially utilizes the native component for rendering, and utilizes the existing browser component for rendering when the corresponding native component is not found in the native component mapping table, so that the rapid rendering speed is ensured, the requirement for rendering rich styles is met, and the user experience feeling can be enhanced.
Drawings
In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings needed to be used in the description of the embodiments are briefly introduced below, and it is obvious that the drawings in the following description are only some embodiments of the present application, and it is obvious for those skilled in the art to obtain other drawings based on these drawings without inventive labor.
Fig. 1 is a flowchart of a first embodiment of a rendering method based on a mobile terminal according to the present application.
Fig. 2 is a flowchart of a second embodiment of the rendering method based on a mobile terminal according to the present application.
FIG. 3 is a schematic diagram of a DOM tree in the embodiment of the present application.
Fig. 4 is a rendering effect diagram in the embodiment of the present application.
Fig. 5 is a schematic structural diagram of a rendering apparatus of a mobile terminal according to a first embodiment of the present application.
Fig. 6 is a schematic structural diagram of an electronic device in an embodiment of the present application.
Detailed Description
The technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are only a part of the embodiments of the present application, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.
The terms "first," "second," "third," "fourth," and the like in the description and in the claims, as well as in the drawings, if any, are used for distinguishing between similar elements and not necessarily for describing a particular sequential or chronological order. It is to be understood that the data so used is interchangeable under appropriate circumstances such that the embodiments of the invention described herein are, for example, capable of operation in sequences other than those illustrated or otherwise described herein. Furthermore, the terms "comprising" and "having," as well as any variations thereof, are intended to cover non-exclusive inclusions. For example, a process, method, system, article, or apparatus that comprises a list of steps or elements is not necessarily limited to those steps or elements explicitly listed, but may include other steps or elements not explicitly listed or inherent to such process, method, article, or apparatus.
The technical solution of the present invention will be described in detail with specific examples. Several of the following embodiments may be combined with each other and some details of the same or similar concepts or processes may not be repeated in some embodiments.
In the embodiment of the application, a new rendering method based on a mobile terminal is provided to avoid the defects of single style supported by a native component and rendering speed of a browser component. According to the method and the device, under a mobile end cross-platform development framework, the native component is created in the native application, the browser component is utilized, and the advantages of the native component and the browser component are combined to render. When the native component cannot be used for rendering, the browser component is used for rendering, the rendering style which can be supported by the native application is enriched, the rendering speed is greatly increased, and therefore user experience is further enhanced.
Fig. 1 is a flowchart of a first embodiment of a rendering method based on a mobile terminal according to the present application. As shown in fig. 1, the method includes:
step B1: the data is requested to be received over the network.
The data, i.e. information such as news, sports, entertainment or goods browsed by the user, can be transmitted in html format. In practical applications, XML, JSON or other formats may also be used.
Step B2: analyzing the received data to obtain data content, data attributes and data labels, wherein the data labels are marks used for representing the beginning and the end of the data content, and the data attributes are display styles used for representing the data content.
In practical applications, data tags are usually used to identify different data contents. For example, in the html format, the data label of < p > … </p > can be used to indicate that the data content is text, and the data label of < img > … </img > can be used to indicate that the data content is picture. In addition, in order to represent the display style of the data content, it is also necessary to use data attributes for description, such as color, size, position, and the like.
Step B3: and under a cross-platform development framework of the mobile terminal, searching a corresponding native component in the established native component mapping table according to the data tag.
In practical application, the mobile terminal has different operating systems, such as IOS, Android (Android), and the like. In order to avoid repeated development, the development of native applications can be performed under a mobile-end-based cross-platform development framework (such as RN, Flutter, etc.), so as to be suitable for different operating systems.
In the embodiment of the application, the native component can be created in advance based on the mobile-end cross-platform development framework, and the corresponding data tag is set. During implementation, the data label and the corresponding native component address are added into the established mapping table, the corresponding native component address is obtained from the native component mapping table according to the analyzed data label, and the native component is operated in the subsequent steps.
Step B4: and if the corresponding native component is found, rendering the data content by using the found native component according to the data attribute.
In practice, the required parameters, such as data content and data attributes, may be transferred to the native components. The native component can render the data content to be displayed in the native application in accordance with the data attribute.
Step B5: and if the corresponding native component is not found, rendering the data content according to the data attribute by utilizing the existing browser component.
The browser component is a component of a browser engine, can render data content, can support richer display styles, and is slow in rendering speed. In order to accelerate the rendering speed, the rendering of the native component and the browser component is combined, the native component is preferentially utilized for rendering, and the existing browser component is utilized for rendering only when the corresponding native component does not exist, so that the rapid rendering speed is ensured, and the requirement of rendering rich styles is met.
In order to better illustrate the embodiments of the present application, a detailed description is given below using method example two. In the second embodiment of the method, it is assumed that data received by the network is hypertext markup language (html) data, the Native application is developed under a mobile end cross-platform development framework such as a Native reaction (RN, read Native), the browser engine is a WebKit engine, and the browser component is Webview.
Fig. 2 is a flowchart of a second embodiment of the rendering method based on a mobile terminal according to the present application. As shown in fig. 2, the method includes:
step C1: and receiving html data through a network request.
As mentioned above, html data needs to be organized in html format, such as the following is a common example of html data:
wherein, the data label < div > … </div > represents the layer, can also be regarded as the container of other elements; … represents that the data content is text; … Theimg represents that the data content is pictures; < CustomView > … </CustomView > represents a component in which a user is customized. In short, the data required to be displayed by the task can be expressed according to the html format.
Step C2: and generating a Document Object Model (DOM) tree from the received html data, wherein each node in the DOM tree stores the data content, the data attribute and the corresponding data tag.
In practical applications, html data is arranged in a certain order and may contain nested data. For clear representation of its data relationships, a DOM tree representation can be utilized. The DOM tree is a standard model of a web page used to represent objects in a document, and the objects in the document are organized in a tree structure. The result of the html data in the above step C1 represented by the DOM tree is shown in fig. 3.
Step C3: and traversing and analyzing the DOM tree, and dividing the data tags into standard tags and custom tags according to tag types, wherein the standard tags are data tags created by an operating system, and the custom tags are data tags newly set based on a mobile end cross-platform development framework.
In practical applications, the native component may be a native component of the operating system itself, or a native component newly created by a developer under the RN framework, and both may implement the rendering function in the native application. To distinguish the two, the former is called a standard component, and the corresponding label is called a standard label; the latter are referred to as custom components and their corresponding tags are referred to as custom tags.
The step C2 to the step C3 are steps of specifically parsing the received html data, and obtaining the data tag, the data attribute, and the data content of the html data after parsing.
Step C4: and transmitting the corresponding data content and data attribute in the DOM tree to a corresponding standard component aiming at the standard tag, and rendering the data content by the standard component according to the data attribute, wherein the standard component is a native component created by an operating system.
Those skilled in the art will appreciate that standard components are of a single type and a small number, such as UILabel components, UIImage components, etc. under the IOS operating system. Since the RN framework already knows the correspondence between the standard raw component and the standard tag, the corresponding standard raw component may be automatically obtained according to the standard tag, for example, obtained from the RN bundle packet. Therefore, if the received html data needs to be rendered by using the standard native component, the step C5 is not required to be executed, and the step C4 is used for rendering. Of course, in practical applications, standard components carried by the operating system may not be utilized, but are created in the RN framework, so that the functions of the standard native components may be completed by the custom components, and step C4 may be omitted.
Step C5: and searching a corresponding custom component in the established native component mapping table according to the custom tag, wherein the custom component is a newly set native component under the RN framework.
As described above, in the embodiment of the present application, a custom component may be newly set under the RN framework to increase the types of native components, thereby improving the rendering speed. In order to accurately find the corresponding custom component according to the custom tag in the html data, a native component mapping table needs to be established in advance and stored in the RN bundle package. CustomView, such as that described above, is a custom component that assumes its function is to render content representing a merchandise display. Of course, other fields such as JDScrollView component representing scrolling display, JDSkuView component representing card display, etc. may be provided. The custom components can be created by developers according to actual situations.
Regardless of which custom native components are created, the native component mapping table may be built as follows:
| custom label | Custom assembly |
| Custom tag 1 | Self-defining component 1 |
| Custom tag 2 | Custom component 2 |
| Custom tag 3 | Custom component 3 |
| … | … |
Watch 1
Of course, if the native application adds or modifies the custom component, it also needs to update its native component mapping table in the RN bundle package.
Step C6: and if the custom component corresponding to the custom tag is found, transmitting the corresponding data content and data attribute in the DOM tree to the corresponding custom component, and rendering the data content by the custom component according to the data attribute.
As described above, each node in the DOM tree holds data content, data attributes, and corresponding data tags. And if the custom component corresponding to the custom tag is found from the native component mapping table, acquiring the data content and the data attribute from the node of the DOM tree, and transmitting the data content and the data attribute serving as parameters to the corresponding custom component. Such as: traversing the DOM tree shown in FIG. 3 to the node of the custom label CustomView, determining a corresponding CustomView component according to the native component mapping table, transmitting the data content and the data attribute in the node to the CustomView component, and rendering the data content by the CustomView component according to the data attribute.
Step C7: and if the user-defined component corresponding to the user-defined label is not found, transmitting the user-defined label, the data content and the data attribute to the Webview component, and rendering the data content by the Webview component according to the data attribute.
In order to further enrich the supportable styles, if a node in the DOM tree is neither a standard tag nor a custom tag, the step can transmit the data tag, the data attribute and the data content of the node to the Webview component together, and the Webview component renders the data tag, the data attribute and the data content.
Step C8: and if the Webview component fails to render, giving up the rendering and recording the data label corresponding to the rendering failure.
In practical applications, the types of html data formats transmitted from a network are very huge, and there may be a case where current native applications cannot render. In this case, rendering of data content corresponding to a certain data tag may be abandoned, and the data tag that failed rendering may be recorded in the buffer area. In this way, if a rendering-failed data tag is subsequently received again, it can be directly discarded to further increase the rendering speed.
Assuming that the scheme of the embodiment of the present application is used to render the above received html data, the effect thereof can be as shown in fig. 4. The text 1, the text 3, the picture 1 and the picture 3 can be rendered by a standard component, and the text 2, the picture 2, the price and the button are rendered by a custom component CustomView after a native component mapping table is searched.
The embodiment of the application also provides a rendering device based on the mobile terminal. Fig. 5 is a schematic structural diagram of a rendering apparatus of a mobile terminal according to a first embodiment of the present application. As shown in fig. 5, the apparatus includes: a data receiving module S1, a data parsing module S2, a component mapping module S3, and a component rendering module S4. Wherein:
a data receiving module S1, configured to request to receive data through the network.
And the data analysis module S2 is configured to analyze the received data to obtain data content, data attributes, and data tags, where the data tags are identifiers indicating a start of the data content and an end of the data content, and the data attributes are display styles used for indicating the data content.
And the component mapping module S3 is used for searching a corresponding native component in the established native component mapping table according to the data tag under the mobile-end cross-platform development framework.
A component rendering module S4, if the component mapping module S3 finds the corresponding native component, rendering the data content according to the data attribute using the found native component; and if the corresponding native component is not found by the component mapping module S3, rendering the data content according to the data attribute by using the existing browser component.
That is, the data reception module S1 requests reception of data through the network; the data analysis module S2 analyzes the received data to obtain data content, data attributes, and data tags; under a cross-platform development framework of a mobile terminal, the component mapping module S3 searches a corresponding native component in the established native component mapping table according to the data tag; if the component mapping module S3 finds the corresponding native component, the component rendering module S4 renders the data content according to the data attribute using the found native component; if the component mapping module S3 does not find the corresponding native component, the component rendering module S4 renders the data content according to the data attributes using the existing browser components.
According to the embodiment of the application, the native component is preferentially utilized for rendering, and only when the corresponding native component does not exist, the existing browser component is utilized for rendering, so that the rapid rendering speed is ensured, and the requirement for rendering rich styles is met.
In another embodiment of the apparatus, if the received data is html data, when the data parsing module S2 parses the received data, it may: generating a Document Object Model (DOM) tree from the received html data, wherein each node in the DOM tree stores the data content, the data attribute and a corresponding data tag; and traversing and analyzing the DOM tree, and dividing the data tags into standard tags and custom tags according to tag types, wherein the standard tags are data tags created by an operating system, and the custom tags are data tags newly set based on a mobile end cross-platform development framework.
In another apparatus embodiment, the component rendering module S4 is further configured to, for the standard tag, transmit the corresponding data content and data attribute in the DOM tree to a corresponding standard component, and render the data content according to the data attribute by the standard component, where the standard component is a native component that has been created by an operating system.
In another apparatus embodiment, when the component mapping module S3 finds a corresponding native component in the established native component mapping table, it may find a corresponding custom component in the established native component mapping table according to the custom tag, where the custom component is a native component newly set in the mobile-end-based cross-platform development framework; if the custom component corresponding to the custom tag is found, transmitting the corresponding data content and data attribute in the DOM tree to the corresponding custom component, and rendering the data content by the native component according to the data attribute; and if the custom component corresponding to the custom tag is not found, transmitting the custom tag, the data content and the data attribute to the browser component, and rendering the data content by the browser component according to the data attribute.
In another embodiment of the apparatus, the component rendering module S4 is further configured to, when rendering of the browser component fails, abandon the rendering and record the data tag corresponding to the rendering failure.
By applying the scheme of the embodiment of the application, the native application can make full use of the existing standard component and browser component, and the new custom component is set under the RN framework, wherein the standard component and the custom component are native components, and can be directly rendered in the native application, so that the rendering speed is improved. Rendering by the browser component is only done in order to enrich the supportable styles if it cannot be rendered by the native component. Therefore, the rendering speed can be ensured, the requirement of supporting rich styles is met, and the user experience is greatly enhanced.
Embodiments of the present application also provide a computer-readable storage medium storing instructions, which when executed by a processor may perform the steps in the mobile-end-based rendering method as described above. In practical applications, the computer readable medium may be included in each device/apparatus/system of the above embodiments, or may exist separately and not be assembled into the device/apparatus/system. Wherein instructions are stored in a computer readable storage medium, which stored instructions, when executed by a processor, may perform the steps in the mobile-end based rendering method as described above.
According to embodiments disclosed herein, the computer-readable storage medium may be a non-volatile computer-readable storage medium, which may include, for example and without limitation: 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), a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing, without limiting the scope of the present disclosure. In the embodiments disclosed herein, 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.
As shown in fig. 6, an embodiment of the present invention further provides an electronic device. As shown in fig. 6, it shows a schematic structural diagram of an electronic device according to an embodiment of the present invention, specifically:
the electronic device may include a processor 601 of one or more processing cores, memory 602 of one or more computer-readable storage media, and a computer program stored on the memory and executable on the processor. The mobile terminal-based rendering method described above may be implemented when the program of the memory 602 is executed.
Specifically, in practical applications, the electronic device may further include a power supply 603, an input/output unit 604, and the like. Those skilled in the art will appreciate that the configuration of the electronic device shown in fig. 6 is not intended to be limiting of the electronic device and may include more or fewer components than shown, or some components in combination, or a different arrangement of components. Wherein:
the processor 601 is a control center of the electronic device, connects various parts of the whole electronic device by using various interfaces and lines, and performs various functions of the server and processes data by running or executing software programs and/or modules stored in the memory 602 and calling data stored in the memory 602, thereby performing overall monitoring of the electronic device.
The memory 602 may be used to store software programs and modules, i.e., the computer-readable storage media described above. The processor 601 executes various functional applications and data processing by executing software programs and modules stored in the memory 602. The memory 602 may mainly include a program storage area and a data storage area, wherein the program storage area may store an operating system, an application program required for at least one function, and the like; the storage data area may store data created according to the use of the server, and the like. Further, the memory 602 may include high speed random access memory, and may also include non-volatile memory, such as at least one magnetic disk storage device, flash memory device, or other volatile solid state storage device. Accordingly, the memory 602 may also include a memory controller to provide the processor 601 with access to the memory 602.
The electronic device further includes a power supply 603 for supplying power to each component, and the power supply 603 may be logically connected to the processor 601 through a power management system, so as to implement functions of managing charging, discharging, and power consumption through the power management system. The power supply 603 may also include any component of one or more dc or ac power sources, recharging systems, power failure detection circuitry, power converters or inverters, power status indicators, and the like.
The electronic device may also include an input-output unit 604, the input-unit output 604 being operable to receive entered numeric or character information and to generate keyboard, mouse, joystick, optical or trackball signal inputs related to user settings and function control. The input unit output 604 may also be used to display information input by or provided to the user as well as various graphical user interfaces, which may be composed of graphics, text, icons, video, and any combination thereof.
The flowchart and block diagrams in the figures of the present application illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments disclosed herein. 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.
Those skilled in the art will appreciate that various combinations and/or combinations of features recited in the various embodiments and/or claims of the present disclosure can be made, even if such combinations or combinations are not explicitly recited in the present application. In particular, the features recited in the various embodiments and/or claims of the present application may be combined and/or coupled in various ways, all of which fall within the scope of the present disclosure, without departing from the spirit and teachings of the present application.
The principles and embodiments of the present invention are explained herein using specific examples, which are provided only to help understanding the method and the core idea of the present invention, and are not intended to limit the present application. It will be appreciated by those skilled in the art that changes may be made in this embodiment and its broader aspects and without departing from the principles, spirit and scope of the invention, and that all such modifications, equivalents, improvements and equivalents as may be included within the scope of the invention are intended to be protected by the claims.
Claims (11)
1. A rendering method based on a mobile terminal is characterized by comprising the following steps:
requesting to receive data through a network;
analyzing the received data to obtain data content, data attributes and data labels, wherein the data labels are marks used for representing the beginning and the end of the data content, and the data attributes are display styles used for representing the data content;
under a cross-platform development framework of a mobile terminal, searching a corresponding native component in an established native component mapping table according to a data tag;
if the corresponding native component is found, rendering the data content by using the found native component according to the data attribute;
and if the corresponding native component is not found, rendering the data content according to the data attribute by utilizing the existing browser component.
2. The method of claim 1, wherein the data is hypertext markup language (html) data; the step of analyzing the received data to obtain data content, data attributes and data labels comprises:
generating a Document Object Model (DOM) tree from the received html data, wherein each node in the DOM tree stores the data content, the data attribute and a corresponding data tag;
and traversing and analyzing the DOM tree, and dividing the data tags into standard tags and custom tags according to tag types, wherein the standard tags are data tags created by an operating system, and the custom tags are data tags newly set based on a mobile end cross-platform development framework.
3. The method of claim 2, wherein between the step of parsing the received data to obtain data content and data tags and the step of finding corresponding native components in the established native component mapping table according to the data tags, the method further comprises:
and transmitting the corresponding data content and data attribute in the DOM tree to a corresponding standard component aiming at the standard tag, and rendering the data content by the standard component according to the data attribute, wherein the standard component is a native component created by an operating system.
4. The method of claim 3, wherein the step of looking up the corresponding native component in the established native component mapping table according to the data tag comprises:
and searching a corresponding custom component in the established native component mapping table according to the custom tag, wherein the custom component is a native component newly set under the mobile-end-based cross-platform development framework.
5. The method according to claim 4, wherein the step of rendering the data content according to the data attribute using the found native component if the corresponding native component is found comprises:
and if the custom component corresponding to the custom tag is found, transmitting the corresponding data content and data attribute in the DOM tree to the corresponding custom component, and rendering the data content by the custom component according to the data attribute.
6. The method of claim 3, wherein the step of rendering the data content according to the data attributes using an existing browser component if the corresponding native component is not found comprises:
and if the custom component corresponding to the custom tag is not found, transmitting the custom tag, the data content and the data attribute to the browser component, and rendering the data content by the browser component according to the data attribute.
7. The method of claim 6, wherein when the browser component renders the data content according to the data attributes, the method further comprises:
and if the rendering of the browser component fails, giving up the rendering and recording a data tag corresponding to the rendering failure.
8. A rendering apparatus based on a mobile terminal, the apparatus comprising:
the data receiving module is used for requesting to receive data through a network;
the data analysis module is used for analyzing the received data to obtain data content, data attributes and data labels, wherein the data labels are marks used for indicating the beginning and the end of the data content, and the data attributes are display styles used for indicating the data content;
the component mapping module is used for searching a corresponding native component in the established native component mapping table according to the data tag under the mobile end cross-platform development framework;
the component rendering module is used for rendering the data content according to the data attribute by utilizing the searched native component if the corresponding native component is found by the component mapping module; and if the corresponding native component is not found by the component mapping module, rendering the data content according to the data attribute by utilizing the existing browser component.
9. The apparatus of claim 8,
and the component rendering module is further used for transmitting the corresponding data content and data attribute in the DOM tree to the corresponding standard component aiming at the standard tag, and rendering the data content by the standard component according to the data attribute, wherein the standard component is a native component created by an operating system.
10. A computer-readable storage medium, on which computer instructions are stored, wherein the instructions, when executed by a processor, can implement the mobile-end based rendering method according to any one of claims 1 to 7.
11. An electronic device, characterized in that the electronic device comprises at least the computer-readable storage medium of claim 10, further comprising a processor;
the processor is configured to read the executable instructions from the computer-readable storage medium and execute the instructions to implement the mobile-side based rendering method according to any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010297959.1A CN112306594A (en) | 2020-04-16 | 2020-04-16 | Rendering method and device based on mobile terminal and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010297959.1A CN112306594A (en) | 2020-04-16 | 2020-04-16 | Rendering method and device based on mobile terminal and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112306594A true CN112306594A (en) | 2021-02-02 |
Family
ID=74336772
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010297959.1A Pending CN112306594A (en) | 2020-04-16 | 2020-04-16 | Rendering method and device based on mobile terminal and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112306594A (en) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113064593A (en) * | 2021-04-12 | 2021-07-02 | 深圳市活力天汇科技股份有限公司 | Method and device for dynamic mobile APP, computer equipment and storage medium |
| CN113742014A (en) * | 2021-08-11 | 2021-12-03 | 深圳Tcl新技术有限公司 | Interface rendering method and device, electronic equipment and storage medium |
| CN116501719A (en) * | 2023-06-21 | 2023-07-28 | 北京长河数智科技有限责任公司 | Data modeling system and method based on visual view realization |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105354013A (en) * | 2014-08-18 | 2016-02-24 | 阿里巴巴集团控股有限公司 | Application interface rendering method and apparatus |
| CN106293645A (en) * | 2015-05-13 | 2017-01-04 | Tcl集团股份有限公司 | A kind of method and system improving Web application interface rendering efficiency |
| CN107291482A (en) * | 2016-03-30 | 2017-10-24 | 阿里巴巴集团控股有限公司 | The display methods and device of content of pages in application program |
| CN107368487A (en) * | 2016-05-12 | 2017-11-21 | 阿里巴巴集团控股有限公司 | A kind of page assembly Dynamic Distribution method, apparatus and client |
| CN109684580A (en) * | 2017-10-18 | 2019-04-26 | 中移(苏州)软件技术有限公司 | A kind of methods of exhibiting and electronic equipment of dynamic page |
| CN110427586A (en) * | 2019-07-29 | 2019-11-08 | 苏州亿歌网络科技有限公司 | A kind of page display method, device, equipment and storage medium |
-
2020
- 2020-04-16 CN CN202010297959.1A patent/CN112306594A/en active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105354013A (en) * | 2014-08-18 | 2016-02-24 | 阿里巴巴集团控股有限公司 | Application interface rendering method and apparatus |
| CN106293645A (en) * | 2015-05-13 | 2017-01-04 | Tcl集团股份有限公司 | A kind of method and system improving Web application interface rendering efficiency |
| CN107291482A (en) * | 2016-03-30 | 2017-10-24 | 阿里巴巴集团控股有限公司 | The display methods and device of content of pages in application program |
| CN107368487A (en) * | 2016-05-12 | 2017-11-21 | 阿里巴巴集团控股有限公司 | A kind of page assembly Dynamic Distribution method, apparatus and client |
| CN109684580A (en) * | 2017-10-18 | 2019-04-26 | 中移(苏州)软件技术有限公司 | A kind of methods of exhibiting and electronic equipment of dynamic page |
| CN110427586A (en) * | 2019-07-29 | 2019-11-08 | 苏州亿歌网络科技有限公司 | A kind of page display method, device, equipment and storage medium |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113064593A (en) * | 2021-04-12 | 2021-07-02 | 深圳市活力天汇科技股份有限公司 | Method and device for dynamic mobile APP, computer equipment and storage medium |
| CN113064593B (en) * | 2021-04-12 | 2022-04-12 | 深圳市活力天汇科技股份有限公司 | Method and device for dynamic mobile APP, computer equipment and storage medium |
| CN113742014A (en) * | 2021-08-11 | 2021-12-03 | 深圳Tcl新技术有限公司 | Interface rendering method and device, electronic equipment and storage medium |
| CN116501719A (en) * | 2023-06-21 | 2023-07-28 | 北京长河数智科技有限责任公司 | Data modeling system and method based on visual view realization |
| CN116501719B (en) * | 2023-06-21 | 2023-09-12 | 北京长河数智科技有限责任公司 | Data modeling system and method based on visual view realization |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11403364B2 (en) | Method and terminal device for extracting web page content | |
| CN111045655B (en) | Page rendering method and device, rendering server and storage medium | |
| CN112306594A (en) | Rendering method and device based on mobile terminal and storage medium | |
| CN110955428A (en) | Page display method and device, electronic equipment and medium | |
| CN110580189A (en) | method and device for generating front-end page, computer equipment and storage medium | |
| CN111240669B (en) | Interface generation method and device, electronic equipment and computer storage medium | |
| CN113343154B (en) | Page loading method and device, electronic equipment and storage medium | |
| CN110245069A (en) | The methods of exhibiting and device of the test method and device of page versions, the page | |
| CN113868126A (en) | Application debugging method, device and storage medium of equipment | |
| CN107515866B (en) | Data operation method, device and system | |
| CN110727429A (en) | Front-end page generation method, device and equipment | |
| CN110968314A (en) | Page generation method and device | |
| CN111552463A (en) | Page jump method and device, computer equipment and storage medium | |
| CN109299352B (en) | Method and device for updating website data in search engine and search engine | |
| CN111523065B (en) | Rich text data processing method and device, electronic equipment and computer storage medium | |
| CN113672504A (en) | Intelligent equipment testing method, device, equipment and storage medium | |
| CN113760242A (en) | Data processing method, device, server and medium | |
| CN110162301B (en) | Form rendering method, form rendering device and storage medium | |
| CN109582580B (en) | System, method and apparatus for debugging pages | |
| CN108536715B (en) | Preview page generation method, device, equipment and storage medium | |
| CN114328678A (en) | Method and device for displaying option information in service, electronic equipment and storage medium | |
| CN113419711A (en) | Page guiding method and device, electronic equipment and storage medium | |
| CN113282209A (en) | Electronic book information display method, electronic equipment and computer storage medium | |
| CN109558186B (en) | Page display method and device | |
| CN111209075A (en) | Multi-language interface maintenance method, system, storage medium and intelligent device |
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 |