CN113031946B - Method and device for rendering page component - Google Patents
Method and device for rendering page component Download PDFInfo
- Publication number
- CN113031946B CN113031946B CN202110215217.4A CN202110215217A CN113031946B CN 113031946 B CN113031946 B CN 113031946B CN 202110215217 A CN202110215217 A CN 202110215217A CN 113031946 B CN113031946 B CN 113031946B
- Authority
- CN
- China
- Prior art keywords
- component
- page
- information
- display
- attribute information
- 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
- 238000009877 rendering Methods 0.000 title claims abstract description 65
- 238000000034 method Methods 0.000 title claims abstract description 50
- 238000011161 development Methods 0.000 claims abstract description 9
- 238000004590 computer program Methods 0.000 claims description 10
- 230000000694 effects Effects 0.000 claims description 9
- 239000000758 substrate Substances 0.000 claims 2
- 230000008878 coupling Effects 0.000 abstract description 5
- 238000010168 coupling process Methods 0.000 abstract description 5
- 238000005859 coupling reaction Methods 0.000 abstract description 5
- 238000010586 diagram Methods 0.000 description 12
- 238000004891 communication Methods 0.000 description 6
- 230000006870 function Effects 0.000 description 6
- 238000013461 design Methods 0.000 description 5
- 230000004048 modification Effects 0.000 description 4
- 238000012986 modification Methods 0.000 description 4
- 230000003287 optical effect Effects 0.000 description 4
- 230000008859 change Effects 0.000 description 3
- 230000008569 process Effects 0.000 description 3
- 238000012545 processing Methods 0.000 description 3
- 230000002159 abnormal effect Effects 0.000 description 2
- 230000008901 benefit Effects 0.000 description 2
- 239000000835 fiber Substances 0.000 description 2
- 239000012634 fragment Substances 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 239000004065 semiconductor Substances 0.000 description 2
- 238000010276 construction Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Classifications
-
- 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/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- 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
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- Data Mining & Analysis (AREA)
- Human Computer Interaction (AREA)
- Processing Or Creating Images (AREA)
Abstract
The invention discloses a method and a device for rendering a page component, and relates to the technical field of computers. One embodiment of the method comprises the following steps: component attribute information of page components contained in the component file can be configured, and various states of the associated page information are indicated through configuration component attribute information; the display style corresponding to the page component is constructed by acquiring component attribute information in the component file, and the display style is combined with the set labels of various display platforms; to dynamically render the page component on the display platform to display the status of the associated page information; configuring component attribute information of the page component through a configuration component file, and developing the page component rendered on various display platforms; the problem of high coupling in the development of the page component is solved, and the flexibility and expansibility of developing the page component are improved.
Description
Technical Field
The present invention relates to the field of computer technologies, and in particular, to a method and apparatus for rendering a page component.
Background
Currently, with the popularization of internet applications, the internet applications become necessities in life of people, when people use the internet applications, the people often need to interact with application pages, and in a user interaction scene, the application pages usually comprise components (such as a switch component) for displaying states or changing states, so that users can input and correspondingly execute corresponding operations.
However, when developing a component for switching a state or changing an option, since frames used for developing an application are different, it is necessary to repeatedly develop for different frames (for example, an applet frame, an H5 frame, a VUE frame, a REACT frame, etc.), and thus there is a problem in that the component coupling is high and the flexibility of using the component is poor.
Disclosure of Invention
In view of this, the embodiments of the present invention provide a method and apparatus for rendering a page component, which can configure component attribute information of a page component included in a component file, and indicate multiple states of associated page information by configuring the component attribute information; the display style corresponding to the page component is constructed by acquiring component attribute information in the component file, and the display style is combined with the set labels of various display platforms; to dynamically render the page component on the display platform to display the status of the associated page information; configuring component attribute information of the page component through a configuration component file, and developing the page component rendered on various display platforms; the problem of high coupling in the development of the page component is solved, and the flexibility and expansibility of developing the page component are improved.
To achieve the above object, according to one aspect of an embodiment of the present invention, there is provided a method of rendering a page component, including: acquiring matched component attribute information for a page component from a configured component file, wherein the page component is associated with page information and indicates various states of the page information; constructing a display style corresponding to the page component according to the component attribute information; acquiring a setting tag of a display platform integrating the page component, and combining the setting tag with the display style; and rendering the page component for the display platform according to the combined result and the current state of the page information included by the display platform.
Optionally, the method for rendering a page component is further characterized by comprising: acquiring component structure information from the component file, wherein the component structure information indicates at least one shape and a plurality of states; constructing the page component using the at least one shape and the plurality of states; and associating the page component to the page information according to the association relation included in the component file.
Optionally, the method for rendering a page component is characterized in that the component attribute information includes: the size of at least one of the shapes and any one or more of color and animation effects that match at least one of the shapes and a plurality of the states.
Optionally, the method for rendering a page component is further characterized by comprising: generating a component configuration template corresponding to the page component according to the layout of the page; and acquiring configuration information input by a user, modifying the configuration information into component attribute information included in the component configuration template, and generating the component file.
Optionally, the method for rendering the page component is characterized in that the constructing the page component includes: and constructing the association of the combination of the multiple shapes and the multiple states to obtain the page component aiming at the condition that the component structure information indicates the multiple shapes and the multiple states.
Optionally, the method for rendering a page component is further characterized by comprising: the association relation comprises the following steps: the state identifiers of the states and the association relation between the states of the page information; and generating component attribute information of a plurality of shapes based on a plurality of state identifiers, and writing the component attribute information into the component file.
Optionally, the method for rendering the page component is characterized in that the constructing a display style corresponding to the page component includes: constructing a style data structure of the page component; storing the acquired component attribute information into the style data structure; and generating a display style corresponding to the page component by utilizing the component attribute information stored in the style data structure.
Optionally, the method for rendering the page component is characterized in that generating the display style corresponding to the page component includes: acquiring a state identifier from the component attribute information stored in the style data structure; acquiring component attribute information of at least one shape corresponding to the state identifier based on the state identifier; and generating the display style of the page component corresponding to the multiple states according to the component attribute information of at least one shape.
Optionally, the method for rendering a page component is characterized in that the presentation style comprises a plurality of presentation information; rendering the page component for the display platform, comprising: selecting a display information matched with the current state of the page information from the combined result; and rendering the page component by using the display information.
Optionally, the method for rendering a page component is further characterized by comprising: when the current state of the page information is detected to be changed, acquiring display information corresponding to the changed state; and re-rendering the page component by using the display information corresponding to the changed state.
To achieve the above object, according to a second aspect of an embodiment of the present invention, there is provided an apparatus for rendering a page component, including: comprising the following steps: the method comprises the steps of configuring a component file module, constructing a display style module and a rendering page component module; wherein,
the configuration component file module is used for acquiring matched component attribute information for a page component from a configured component file, wherein the page component is associated with page information and indicates various states of the page information;
the display style constructing module is used for constructing a display style corresponding to the page component according to the component attribute information;
the rendering page component module is used for acquiring a setting tag of a display platform integrating the page component and combining the setting tag with the display style; and rendering the page component for the display platform according to the combined result and the current state of the page information included by the display platform.
Optionally, the apparatus for rendering a page component is further characterized by comprising: acquiring component structure information from the component file, wherein the component structure information indicates at least one shape and a plurality of states; constructing the page component using the at least one shape and the plurality of states; and associating the page component to the page information according to the association relation included in the component file.
Optionally, the means for rendering a page component is characterized in that the component attribute information includes: the size of at least one of the shapes and any one or more of color and animation effects that match at least one of the shapes and a plurality of the states.
Optionally, the apparatus for rendering a page component is further characterized by comprising: generating a component configuration template corresponding to the page component according to the layout of the page; and acquiring configuration information input by a user, modifying the configuration information into component attribute information included in the component configuration template, and generating the component file.
Optionally, the apparatus for rendering a page component is configured to build the page component, including: and constructing the association of the combination of the multiple shapes and the multiple states to obtain the page component aiming at the condition that the component structure information indicates the multiple shapes and the multiple states.
Optionally, the apparatus for rendering a page component is further characterized by comprising: the association relation comprises the following steps: the state identifiers of the states and the association relation between the states of the page information; and generating component attribute information of a plurality of shapes based on a plurality of state identifiers, and writing the component attribute information into the component file.
Optionally, the device for rendering the page component is characterized in that the constructing a display style corresponding to the page component includes: constructing a style data structure of the page component; storing the acquired component attribute information into the style data structure; and generating a display style corresponding to the page component by utilizing the component attribute information stored in the style data structure.
Optionally, the device for rendering the page component is characterized in that generating the display style corresponding to the page component includes: acquiring a state identifier from the component attribute information stored in the style data structure; acquiring component attribute information of at least one shape corresponding to the state identifier based on the state identifier; and generating the display style of the page component corresponding to the multiple states according to the component attribute information of at least one shape.
Optionally, the means for rendering the page component is characterized in that the presentation style includes a plurality of presentation information; rendering the page component for the display platform, comprising: selecting a display information matched with the current state of the page information from the combined result; and rendering the page component by using the display information.
Optionally, the apparatus for rendering a page component is further characterized by comprising: when the current state of the page information is detected to be changed, acquiring display information corresponding to the changed state; and re-rendering the page component by using the display information corresponding to the changed state.
To achieve the above object, according to a third aspect of an embodiment of the present invention, there is provided an electronic device for rendering a page component, including: one or more processors; and storage means for storing one or more programs that, when executed by the one or more processors, cause the one or more processors to implement the method as described in any of the methods of rendering page components above.
To achieve the above object, according to a fourth aspect of embodiments of the present invention, there is provided a computer readable medium having stored thereon a computer program, characterized in that the program, when executed by a processor, implements a method as described in any one of the methods of rendering page components described above.
One embodiment of the above invention has the following advantages or benefits: component attribute information of page components contained in the component file can be configured, and various states of the associated page information are indicated through configuration component attribute information; the display style corresponding to the page component is constructed by acquiring component attribute information in the component file, and the display style is combined with the set labels of various display platforms; to dynamically render the page component on the display platform to display the status of the associated page information; configuring component attribute information of the page component through a configuration component file, and developing the page component rendered on various display platforms; the problem of high coupling in the development of the page component is solved, and the flexibility and expansibility of developing the page component are improved, so that the efficiency of developing the page component is improved.
Further effects of the above-described non-conventional alternatives are described below in connection with the embodiments.
Drawings
The drawings are included to provide a better understanding of the invention and are not to be construed as unduly limiting the invention. Wherein:
FIG. 1 is a flow diagram of a method of rendering a page component provided in one embodiment of the invention;
FIG. 2A is a schematic diagram of a page component indicating a status, provided in accordance with one embodiment of the present invention;
FIG. 2B is a schematic diagram of a page component indicating another state provided by one embodiment of the present invention;
FIG. 3 is a schematic diagram of an apparatus for rendering page components according to one embodiment of the present invention;
FIG. 4 is an exemplary system architecture diagram in which embodiments of the present invention may be applied;
fig. 5 is a schematic diagram of a computer system suitable for use in implementing an embodiment of the invention.
Detailed Description
Exemplary embodiments of the present invention will now be described with reference to the accompanying drawings, in which various details of the embodiments of the present invention are included to facilitate understanding, and are to be considered merely exemplary. Accordingly, those of ordinary skill in the art will recognize that various changes and modifications of the embodiments described herein can be made without departing from the scope and spirit of the invention. Also, descriptions of well-known functions and constructions are omitted in the following description for clarity and conciseness.
As shown in fig. 1, an embodiment of the present invention provides a method for rendering a page component, which may include the steps of:
Step S101: and acquiring matched component attribute information for a page component from the configured component file, wherein the page component is associated with the page information, and the page component indicates various states of the page information.
Specifically, the component file contains component attribute information corresponding to the page component; the component file may be a non-relational data table, and stores attribute information of each component in a format of key value pairs; the component file may also be a JSON (JavaScript Object Notation, JSON, a lightweight data exchange format) text file, and each component attribute information is stored using a JSON format text, for example, the following illustrates an example of a JSON format text fragment contained in the component file, taking color information and size information corresponding to the configuration component attribute information as an example:
further, a page component is associated with the page information, the page component indicating a plurality of states of the page information; for example: the page component is a virtual switch or a component containing a plurality of options; the page information indicated by the page component is in a flight mode, and the page information has two states: on and off; these two states correspond to: an on-flight mode and an off-flight mode. It can be understood that the page information can be any interactive information which can change the state according to the input of the user; for example: flight mode, mute option, volume adjustment, bluetooth use, etc.; for example: the page information corresponding to the volume adjustment corresponds to 5 states (volume size); then the 5 states of volume adjustment (i.e., 5 volumes) are indicated by the associated page component.
Further, acquiring component structure information from the component file, wherein the component structure information indicates at least one shape and a plurality of states; the page component is constructed using the at least one shape and the plurality of states. Specifically, the component structure information contains information of one or more portions constituting the page component, such as: taking the schematic diagrams of the page component in fig. 2A and fig. 2B as an example, the page component in fig. 2A or fig. 2B is formed by a rectangular portion and a circular portion, the component structure information includes information of each portion (a rectangular portion and a circular portion), and further, at least one shape and various states are indicated by the component structure information, for example: the component structure information corresponding to the page component in fig. 2A indicates the shape as shown in fig. 2A, and indicates a state such as: an "on" state; the component structure information corresponding to the page component in fig. 2B indicates the shape as shown in fig. 2B, and indicates another state, such as an "off" state; further, the page component is constructed using the shape and state indicated by the component structure information (e.g., the shape and corresponding state as shown in FIG. 2A or FIG. 2B); that is, the page component is constructed using at least one shape indicated by the component structure information and a plurality of the states. It will be appreciated that the shape of the portions of the constructed page component may be any one or more combinations of rectangles, rounded rectangles, circles, ovals, multi-pointed stars, polygons, etc., depending on the page design and scene setting, and that various combinations are utilized to indicate various states of the page information associated with the page component.
Further, the page component is associated to the page information according to the association relation included in the component file. Specifically, the association relationship between the page component and the page information may be included in the component file, for example: the page information associated with the page component is Bluetooth, and the page information has a page information identifier corresponding to Bluetooth, so that the page information identifier associated with the page component can be configured in the component file to determine the association relationship between the page component and the page information, wherein the association relationship comprises the corresponding relationship between the shape of the page component and the state of the page information and the corresponding relationship between the page component and the page information identifier; for example: the page information corresponding to the page component shown in fig. 2A is in a state of "bluetooth on"; and the shape of the page component shown in FIG. 2A corresponds to an "on" state; the page information corresponding to the page component shown in fig. 2B is in a state of "bluetooth off"; and the shape of the page component shown in FIG. 2B corresponds to an "off" state; thus, in the component file corresponding to the page component corresponding to the example of fig. 2A or 2B, the association relationship between the page component and the page information ("using bluetooth") as described above is configured; that is, the association relationship includes a correspondence relationship between the shape of the page component and the page information state, and a correspondence relationship between the page component and the page information identifier.
Further, building a page component includes: and constructing the association of the combination of the multiple shapes and the multiple states to obtain the page component aiming at the condition that the component structure information indicates the multiple shapes and the multiple states. Specifically, given that two states of the same page information (for example, a flight mode) are corresponding to fig. 2A and 2B, the state indicated by the shape of fig. 2A is "on", and the state indicated by the shape of fig. 2B is "off", that is, the component structure information indicates multiple shapes and multiple states, when the page component is constructed, the association of the shape of the page component shown in fig. 2A with the state "on" is constructed, the association of the shape of the page component shown in fig. 2B with the state "off" is constructed, that is, the association of the combination of multiple shapes with the multiple states is constructed, so that the page component is obtained, that is, fig. 2A and 2B show two shapes of one page component in two states.
Further, the component attribute information corresponding to the page component includes: the size of at least one of the shapes and any one or more of color and animation effects that match at least one of the shapes and a plurality of the states; specifically, the component attribute information corresponds to information of each part of the page component (e.g., color, size, animation effect, etc.); taking the shape of the page component shown in fig. 2A as an example, the color of the rectangle may be set to green, and the color of the circle overlapping the rectangle on the right end of the rectangle may be set to white, indicating that the state of the page information associated with the page component is "on"; taking the shape of the page component shown in fig. 2B as an example, a color of a rectangle may be set to be white, a color of a circle overlapping the rectangle and at the left end of the rectangle (wherein the size of the circle set is related to the size of the rectangle to show one shape) may be set to be pink, and a state of page information associated with the page component is represented as "off", wherein the circle may be set to have an animation effect to show the animation effect when the state is switched. It is to be appreciated that a page component can include multiple parts, such as: the on or off state is indicated by a shape composed of a rectangle, a circle a and a circle B, and when the on state is indicated, the state in which the circle a is transparent is set to display the on state by the color of the circle B, whereas when the on state is indicated, the state in which the circle B is transparent is set to display the off state by the color of the circle a; the invention is not limited to the number, color, shape, and number of states indicated for the portions included in the page component.
In a page, a plurality of page components included in the present invention may be included, and each page component has page information associated therewith, for example: in the "set" menu, a list of page information may be included, indicating a plurality of page information, and a corresponding list of page components; that is, the page component is associated to the page information according to the association relationship included in the component file. The component file may contain component attribute information corresponding to a page component; component attribute information corresponding to a plurality of page components can also be contained and distinguished by page component identifiers.
Further, the method for generating the configured component file may be: generating a component configuration template corresponding to the page component according to the layout of the page; and acquiring configuration information input by a user, modifying the configuration information into component attribute information included in the component configuration template, and generating the component file. Specifically, according to the layout of the page design, setting a component configuration template of page components contained in the page, so that a developer can read attribute information of each component in the configuration template based on the configuration template; for example: according to the layout of the page design, configuration information input by a user is obtained, modification is performed based on a component configuration template, namely, component attribute information included in the component configuration template is modified by the configuration information, for example, the shape of a page component corresponding to the configuration information input by the user is a rectangle, and text fragments of the component attribute information of the rectangle are exemplified as follows:
It can be seen that a developer can customize a page component according to the design and the use scene of the page, including defining (configuring) configuration information such as the shape (the shape composed of one or more parts), the size, the color and the like of the page component, and modifying the configuration information into component attribute information included in the component configuration template based on the component configuration template; namely, configuration information input by a user is obtained, the configuration information is modified into component attribute information included in the component configuration template, and the component file is generated. If the developer does not need to customize the page component, the attribute information of each component of the default configuration can be obtained from the component configuration template.
Further, according to the association relation included in the component file, the page component is associated to the page information; wherein, the association relation includes: the state identifiers of the states and the association relation between the states of the page information; and generating component attribute information of a plurality of shapes based on a plurality of state identifiers, and writing the component attribute information into the component file. Specifically, each component attribute information included in the component file includes attribute information corresponding to each state, for example, in the following examples:
"air-mode color": {// set color
“background”：“grey”，
“active”：“red”，}
Assuming that the page component is circular, indicating two states of on or off of page information ("flight mode") by using the page component, wherein color attribute information of the page component is related to the page information by using an "escape-mode color", in an example, setting a circular color part, "background" as an example of a state identifier, correspondingly setting a state as an example of an "off" state identifier, and an active "as an example of a state identifier, and correspondingly setting a state as" on "; the change of the positions of the plurality of graphics can be used for representing the change of different state identification indication states; that is, based on a plurality of the state identifications, component attribute information of a plurality of the shapes is generated, and further, the component attribute information is written into the component file.
It follows that the component file is generated by configuring component attribute information corresponding to the page component (the page component indicates various states of the page information) based on the component configuration template; when the page component is developed, particularly when the same page component is developed based on a plurality of display platforms, component attribute information of the page component can be acquired based on the same component file, so that flexibility and expansibility of the page component are improved, and efficiency of developing the component is improved.
Step S102: and constructing a display style corresponding to the page component according to the component attribute information.
Specifically, the description of the component attribute information contained in the configuration component file is identical to the description of step S101, and will not be repeated here.
Constructing a display style corresponding to the page component according to the component attribute information; the display style is page data corresponding to the page component, the page component can be rendered on the page by using the page data, and preferably, the display style is a CSS object; wherein, CSS (Cascading Style Sheets, cascading style sheet) is a computer language for representing document styles such as hypertext markup language; the method not only can statically modify the webpage, but also can dynamically format each element of the webpage in cooperation with various scripting languages.
Further, according to the component attribute information, constructing the presentation style corresponding to the page component may include two steps:
1) Constructing a style data structure of the page component; storing the acquired component attribute information into the style data structure; specifically, a style data structure is constructed, and preferably, a stack data structure and a queue data structure are constructed as the style data structure; storing the acquired assembly information of the page assembly into a style data structure; the sequence information of the component attributes is saved through the stack data structure and the queue data structure, so that the data containing the sequence is automatically acquired when the data is read. Illustratively, traversing the component attribute information in JSON format in the component file corresponding to the page component, extracting and converting each component attribute information into style data by using the JSON. Parameter method of JavaScript, and then storing the style data in a style stack (i.e. a style data structure).
2) And generating a display style corresponding to the page component by utilizing the component attribute information stored in the style data structure. Specifically, according to the component attribute information stored in the style data structure constructed in 1), sequentially reading the stored component attribute information of the page component from the style data structure, and then generating a presentation style (for example: CSS object). When the component attribute information of the page component is read from the style data structure, the component attribute information may be classified by using a distribution module, for example: when the display style is generated, respectively generating attribute information corresponding to color, attribute information corresponding to size and attribute information corresponding to animation effect according to the read component attribute information; when it is detected that the component information attribute contains abnormal information, abnormal information prompt may also be performed, so that a developer checks component attribute information in the component file and further modifies the component attribute information.
In generating the presentation style, illustratively, a setProperty (value) method may be utilized to generate a CSS object (i.e., a presentation style) to which the page component corresponds. For example: attribute information "background" corresponding to "color": "grey" is converted into "- -background" corresponding to the CSS object using the setProperty (- -var, value) method: "grey". The CSS object may be part of the HTML text, or may be a file (e.g., aaa. CSS) linked to the HTML text.
Further, generating a display style corresponding to the page component includes: acquiring a state identifier from the component attribute information stored in the style data structure; acquiring component attribute information of at least one shape corresponding to the state identifier based on the state identifier; and generating the display style of the page component corresponding to the multiple states according to the component attribute information of at least one shape. Specifically, since the page component is associated with page information and the page component indicates multiple states of the page information, each state has a corresponding state identifier, component attribute information of multiple shapes is generated based on multiple state identifiers; it can be seen that the style data structure stores component attribute information including component attribute information of at least one shape corresponding to the state identifier, for example: shape a, which indicates an "on" state, corresponds to a state identifier with "on", shape B, which indicates an "off" state, corresponds to a state identifier with "off"; the specific descriptions of the state identifier and the shape corresponding to the state identifier are consistent with the descriptions of step S101, and are not repeated here; further, when generating the presentation style (CSS object) of the page component, the attribute before and after of the CSS object may be used to correlate the status identifier of "on" or "off" to generate the presentation style of the page component corresponding to multiple statuses; thus, when the CSS object is rendered, component attribute information corresponding to the current state (on or off) is acquired, and the page component is rendered based on the component attribute information.
Step S103: acquiring a setting tag of a display platform integrating the page component, and combining the setting tag with the display style; and rendering the page component for the display platform according to the combined result and the current state of the page information included by the display platform.
Specifically, a setting tag of a display platform integrating the page component is obtained, wherein the types of the display platform can be differentiated based on different development page frames, and the development page frames include: applet frameworks, H5 frameworks (H5 refers to HTML5, i.e., fifth generation hypertext markup language), VUE frameworks (progressive JavaScript frameworks that build user interfaces), etc.; correspondingly, the display platform may be: an applet display platform, an H5 display platform, etc.; the setting label of the display platform includes: setting labels corresponding to the H5 framework and the VUE framework are < div >, and setting labels corresponding to the applet are < view >; the setup tag and the presentation style are combined (e.g., CSS object), such as: the page component is used for the H5 display platform, and then < div > (set label) is combined with the display style; the page component is used for the applet demonstration platform, and combines the < view > (set tag) with the demonstration style; therefore, according to the set labels, the data corresponding to the page components are packed for different display platforms so as to render the page components corresponding to the display platforms, so that the efficiency and flexibility of realizing the page components of a plurality of display platforms are improved, and the development efficiency of the page components on different platforms is improved.
Further, the page component is rendered for the display platform according to the combined result and the current state of the page information included by the display platform. For example: the display platform is an H5 display platform, the current state of the page information is "on", then a page component is rendered for the H5 display platform, the shape a (including color, size, etc.) of the page component indicates the "on" state, and the display style corresponding to the page component includes display information in various states, for example: the display information of the page component is a set A of component attribute information in the state that the current state is on, and is a set B of component attribute information in the state that the current state is off; correspondingly, under the condition that the current state of the corresponding page information is "on", acquiring a set A of component attribute information to render the page component to show the state of "on"; and under the condition that the current state of the corresponding page information is off, acquiring a set B of component attribute information to render the press surface component to show the off state. That is, from the combined result (i.e., the combined result of the setting tab and the presentation style), one kind of presentation information matching the current state of the page information is selected; and rendering the page component by using the display information.
The description about the different states of the page information indicated by the component attribute information of the page component is identical to the description of step S101, and will not be repeated here.
Further, when the current state of the page information is detected to be changed, display information corresponding to the changed state is obtained; and re-rendering the page component by using the display information corresponding to the changed state. When the user performs gesture input at the page of the application to switch the state of the page information, for example: changing a flight mode (namely page information) from a state of off to on in a setting page, and acquiring display information corresponding to the changed state; and re-rendering the page component by using the display information corresponding to the changed state so as to indicate the current state of the corresponding page information through the page component.
As shown in fig. 3, an embodiment of the present invention provides an apparatus 300 for rendering a page component, including: a configuration component file module 301, a build presentation style module 302, and a render page component module 303; wherein,
the configuration component file module 301 is configured to obtain, from a configured component file, matching component attribute information for a page component, where the page component is associated with page information, and the page component indicates multiple states of the page information;
The display style constructing module 302 is configured to construct a display style corresponding to the page component according to the component attribute information;
the rendering page component module 303 is configured to obtain a setting tag of a display platform integrated with the page component, and combine the setting tag with the display style; and rendering the page component for the display platform according to the combined result and the current state of the page information included by the display platform.
The embodiment of the invention also provides electronic equipment for rendering the page component, which comprises: one or more processors; and a storage device for storing one or more programs which, when executed by the one or more processors, cause the one or more processors to implement the method provided by any of the embodiments described above.
The embodiment of the invention also provides a computer readable medium, on which a computer program is stored, which when executed by a processor implements the method provided by any of the above embodiments.
FIG. 4 illustrates an exemplary system architecture 400 of a method of rendering a page component or an apparatus of rendering a page component to which embodiments of the invention may be applied.
As shown in fig. 4, the system architecture 400 may include terminal devices 401, 402, 403, a network 404, and a server 405. The network 404 is used as a medium to provide communication links between the terminal devices 401, 402, 403 and the server 405. The network 404 may include various connection types, such as wired, wireless communication links, or fiber optic cables, among others.
A user may interact with the server 405 via the network 404 using the terminal devices 401, 402, 403 to receive or send messages or the like. Various client applications, such as an electronic mall client application, a web browser application, a search class application, an instant messaging tool, etc., may be installed on the terminal devices 401, 402, 403.
The terminal devices 401, 402, 403 may be various electronic devices having a display screen and supporting various client applications including, but not limited to, smartphones, tablets, laptop and desktop computers, and the like.
The server 405 may be a server providing various services, such as a background management server providing support for client applications used by the user with the terminal devices 401, 402, 403. The background management server can process the received request for displaying the page and feed back the data corresponding to the page to the terminal equipment.
It should be noted that, the method for rendering a page component provided in the embodiment of the present invention is generally executed by the terminal devices 401, 402, 403, and accordingly, the device for rendering a page component is generally disposed in the terminal devices 401, 402, 403.
It should be understood that the number of terminal devices, networks and servers in fig. 4 is merely illustrative. There may be any number of terminal devices, networks, and servers, as desired for implementation.
Referring now to FIG. 5, there is illustrated a schematic diagram of a computer system 500 suitable for use in implementing an embodiment of the present invention. The terminal device shown in fig. 5 is only an example, and should not impose any limitation on the functions and the scope of use of the embodiment of the present invention.
As shown in fig. 5, the computer system 500 includes a Central Processing Unit (CPU) 501, which can perform various appropriate actions and processes according to a program stored in a Read Only Memory (ROM) 502 or a program loaded from a storage section 508 into a Random Access Memory (RAM) 503. In the RAM 503, various programs and data required for the operation of the system 500 are also stored. The CPU 501, ROM 502, and RAM 503 are connected to each other through a bus 504. An input/output (I/O) interface 505 is also connected to bus 504.
The following components are connected to the I/O interface 505: an input section 506 including a keyboard, a mouse, and the like; an output portion 507 including a Cathode Ray Tube (CRT), a Liquid Crystal Display (LCD), and the like, and a speaker, and the like; a storage portion 508 including a hard disk and the like; and a communication section 509 including a network interface card such as a LAN card, a modem, or the like. The communication section 509 performs communication processing via a network such as the internet. The drive 510 is also connected to the I/O interface 505 as needed. A removable medium 511 such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, or the like is mounted on the drive 510 as needed so that a computer program read therefrom is mounted into the storage section 508 as needed.
In particular, according to embodiments of the present disclosure, the processes described above with reference to flowcharts may be implemented as computer software programs. For example, embodiments of the present disclosure include a computer program product comprising a computer program embodied on a computer readable medium, the computer program comprising program code for performing the method shown in the flow chart. In such an embodiment, the computer program may be downloaded and installed from a network via the communication portion 509, and/or installed from the removable media 511. The above-described functions defined in the system of the present invention are performed when the computer program is executed by a Central Processing Unit (CPU) 501.
The computer readable medium shown in the present invention may be a computer readable signal medium or a computer readable storage medium, or any combination of the two. The computer readable storage medium can be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or a combination of any of the foregoing. More specific examples of the computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the context of this document, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In the present invention, however, the computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, with the computer-readable program code embodied therein. Such a propagated data signal may take any of a variety of forms, including, but not limited to, electro-magnetic, optical, or any suitable combination of the foregoing. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, fiber optic cable, RF, etc., or any suitable combination of the foregoing.
The flowcharts and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present invention. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams or flowchart illustration, and combinations of blocks in the block diagrams or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
The modules and/or units involved in the embodiments of the present invention may be implemented in software, or may be implemented in hardware. The described modules and/or units may also be provided in a processor, e.g., may be described as: a processor includes a configuration component file module, a build presentation style module, and a render page component module. The names of these modules do not limit the module itself in some cases, and for example, the rendering page component module may also be described as "a module that renders a corresponding page component according to the current state of the page information".
As another aspect, the present invention also provides a computer-readable medium that may be contained in the apparatus described in the above embodiments; or may be present alone without being fitted into the device. The computer readable medium carries one or more programs which, when executed by a device, cause the device to include: acquiring matched component attribute information for a page component from a configured component file, wherein the page component is associated with page information and indicates various states of the page information; constructing a display style corresponding to the page component according to the component attribute information; acquiring a setting tag of a display platform integrating the page component, and combining the setting tag with the display style; and rendering the page component for the display platform according to the combined result and the current state of the page information included by the display platform.
Component attribute information of page components contained in the component file can be configured, and various states of the associated page information are indicated through configuration component attribute information; the display style corresponding to the page component is constructed by acquiring component attribute information in the component file, and the display style is combined with the set labels of various display platforms; to dynamically render the page component on the display platform to display the status of the associated page information; configuring component attribute information of the page component through a configuration component file, and rendering the page component on various display platforms; the problem of high coupling in the development of the page component is solved, and the flexibility and expansibility of developing the page component are improved.
The above embodiments do not limit the scope of the present invention. It will be apparent to those skilled in the art that various modifications, combinations, sub-combinations and alternatives can occur depending upon design requirements and other factors. Any modifications, equivalent substitutions and improvements made within the spirit and principles of the present invention should be included in the scope of the present invention.
Claims (13)
1. A method of rendering a page component, comprising:
acquiring matched component attribute information for a page component from a configured component file, wherein the page component is associated with page information and indicates various states of the page information;
constructing a display style corresponding to the page component according to the component attribute information;
acquiring a setting tag of a display platform integrating the page component, and combining the setting tag with the display style; the setting tag is used for distinguishing development page frames used by the display platform;
and rendering the page component for the display platform according to the combined result and the current state of the page information included by the display platform.
2. The method as recited in claim 1, further comprising:
acquiring component structure information from the component file, wherein the component structure information indicates at least one shape and a plurality of states;
constructing the page component using the at least one shape and the plurality of states;
and associating the page component to the page information according to the association relation included in the component file.
3. The method of claim 2, wherein the step of determining the position of the substrate comprises,
the component attribute information includes: the size of at least one of the shapes and any one or more of color and animation effects that match at least one of the shapes and a plurality of the states.
4. The method as recited in claim 1, further comprising:
generating a component configuration template corresponding to the page component according to the layout of the page;
and acquiring configuration information input by a user, modifying the configuration information into component attribute information included in the component configuration template, and generating the component file.
5. The method of claim 2, wherein constructing the page component comprises:
For the case where the component structure information indicates various shapes and various states,
and constructing the association of the combination of the plurality of shapes and the plurality of states to obtain the page component.
6. The method as recited in claim 2, further comprising:
the association relation comprises the following steps: the state identifiers of the states and the association relation between the states of the page information;
and generating component attribute information of a plurality of shapes based on a plurality of state identifiers, and writing the component attribute information into the component file.
7. The method according to any one of claims 1 to 6, wherein constructing the presentation style corresponding to the page component comprises:
constructing a style data structure of the page component;
storing the acquired component attribute information into the style data structure;
and generating a display style corresponding to the page component by utilizing the component attribute information stored in the style data structure.
8. The method of claim 7, wherein generating the presentation style corresponding to the page component comprises:
acquiring a state identifier from the component attribute information stored in the style data structure;
Acquiring component attribute information of at least one shape corresponding to the state identifier based on the state identifier;
and generating the display style of the page component corresponding to the multiple states according to the component attribute information of at least one shape.
9. The method of claim 1, wherein the step of determining the position of the substrate comprises,
the display style comprises a plurality of display information;
rendering the page component for the display platform, comprising:
selecting a display information matched with the current state of the page information from the combined result;
and rendering the page component by using the display information.
10. The method as recited in claim 9, further comprising:
when the current state of the page information is detected to be changed, acquiring display information corresponding to the changed state;
and re-rendering the page component by using the display information corresponding to the changed state.
11. An apparatus for rendering a page component, comprising: the method comprises the steps of configuring a component file module, constructing a display style module and a rendering page component module; wherein,
the configuration component file module is used for acquiring matched component attribute information for a page component from a configured component file, wherein the page component is associated with page information and indicates various states of the page information;
The display style constructing module is used for constructing a display style corresponding to the page component according to the component attribute information;
the rendering page component module is used for acquiring a setting tag of a display platform integrating the page component and combining the setting tag with the display style; rendering the page component for the display platform according to the combined result and the current state of the page information included by the display platform; the setting labels are used for distinguishing development page frames used by the display platform.
12. An electronic device, comprising:
one or more processors;
storage means for storing one or more programs,
when executed by the one or more processors, causes the one or more processors to implement the method of any of claims 1-10.
13. A computer readable medium, on which a computer program is stored, characterized in that the program, when being executed by a processor, implements the method according to any of claims 1-10.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110215217.4A CN113031946B (en) | 2021-02-24 | 2021-02-24 | Method and device for rendering page component |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110215217.4A CN113031946B (en) | 2021-02-24 | 2021-02-24 | Method and device for rendering page component |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113031946A CN113031946A (en) | 2021-06-25 |
| CN113031946B true CN113031946B (en) | 2024-04-05 |
Family
ID=76462191
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110215217.4A Active CN113031946B (en) | 2021-02-24 | 2021-02-24 | Method and device for rendering page component |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113031946B (en) |
Families Citing this family (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113378059A (en) * | 2021-06-30 | 2021-09-10 | 北京字节跳动网络技术有限公司 | Page display method and device, computer equipment and storage medium |
| CN113672835B (en) * | 2021-07-13 | 2024-04-12 | 上海硬通网络科技有限公司 | Method, device, equipment and storage medium for setting dynamic special effects of web pages |
| CN114139083B (en) * | 2022-01-06 | 2023-03-14 | 北京百度网讯科技有限公司 | Webpage rendering method and device and electronic equipment |
| CN114741147B (en) * | 2022-03-30 | 2023-11-14 | 阿里巴巴（中国）有限公司 | Method for displaying page on mobile terminal and mobile terminal |
| CN116795368A (en) * | 2023-06-29 | 2023-09-22 | 企迈科技有限公司 | Web-based method for dynamically customizing applet page custom style |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| EP1906304A2 (en) * | 2006-09-29 | 2008-04-02 | Siemens Aktiengesellschaft | System for generating and operating a software application for medical image generation |
| CN108170428A (en) * | 2016-12-05 | 2018-06-15 | 阿里巴巴集团控股有限公司 | The page builds processing method, apparatus and system |
| CN111026396A (en) * | 2019-12-13 | 2020-04-17 | 北京小米移动软件有限公司 | Page rendering method and device, electronic equipment and storage medium |
| CN111258577A (en) * | 2019-12-02 | 2020-06-09 | 泰康保险集团股份有限公司 | Page rendering method and device, electronic equipment and storage medium |
| CN112100550A (en) * | 2019-06-17 | 2020-12-18 | 北京京东尚科信息技术有限公司 | Page construction method and device |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US11443011B2 (en) * | 2018-12-13 | 2022-09-13 | Salesforce, Inc. | Page objects library |
-
2021
- 2021-02-24 CN CN202110215217.4A patent/CN113031946B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| EP1906304A2 (en) * | 2006-09-29 | 2008-04-02 | Siemens Aktiengesellschaft | System for generating and operating a software application for medical image generation |
| CN108170428A (en) * | 2016-12-05 | 2018-06-15 | 阿里巴巴集团控股有限公司 | The page builds processing method, apparatus and system |
| CN112100550A (en) * | 2019-06-17 | 2020-12-18 | 北京京东尚科信息技术有限公司 | Page construction method and device |
| CN111258577A (en) * | 2019-12-02 | 2020-06-09 | 泰康保险集团股份有限公司 | Page rendering method and device, electronic equipment and storage medium |
| CN111026396A (en) * | 2019-12-13 | 2020-04-17 | 北京小米移动软件有限公司 | Page rendering method and device, electronic equipment and storage medium |
Non-Patent Citations (1)
| Title |
|---|
| FreeMarker模板引擎在Java开发中的应用;梁兴波;;硅谷(21);全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113031946A (en) | 2021-06-25 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN113031946B (en) | Method and device for rendering page component | |
| CN109582317B (en) | Method and apparatus for debugging hosted applications | |
| CN110780874B (en) | Method and device for generating information | |
| CN110554874A (en) | Method and device for reusing webpage components of SaaS platform | |
| CN113722124B (en) | Content processing method, device, equipment and storage medium of cloud mobile phone | |
| CN109062560B (en) | Method and apparatus for generating information | |
| CN112631588A (en) | File generation method and device, electronic equipment and computer readable medium | |
| CN115795211A (en) | Page display method, device, system, equipment and storage medium | |
| CN110647327B (en) | Method and device for dynamic control of user interface based on card | |
| CN112486482A (en) | Page display method and device | |
| CN111966344A (en) | Component code generation method, device, equipment and storage medium | |
| CN111198738A (en) | Mobile terminal page display method and device and electronic equipment | |
| CN110618811A (en) | Information presentation method and device | |
| CN109815455A (en) | Item file treating method and apparatus | |
| CN113296771A (en) | Page display method, device, equipment and computer readable medium | |
| CN113553123A (en) | Data processing method and device, electronic equipment and storage medium | |
| CN114115855A (en) | Code multiplexing method and device, computer readable storage medium and electronic equipment | |
| CN113849164A (en) | Data processing method and device, electronic equipment and memory | |
| CN112926294A (en) | Template file generation method and device | |
| CN113760279A (en) | Method and device for generating page | |
| CN113312900A (en) | Data verification method and device | |
| CN113784194A (en) | Embedding method and device of video player | |
| CN111831179A (en) | Signing method, device and computer readable medium | |
| CN114500505B (en) | Text processing method and device and electronic equipment | |
| CN115048138A (en) | Page adjusting method and 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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |