Method, apparatus, computer device, and storage medium for dynamically rendering a view page

Abstract

The present invention provides a method, apparatus, computer device and storage medium for dynamically rendering a view page. The method includes: when the imported picture is a PSD picture, parsing the PSD picture and mapping the parsed layer attributes to a document data model and an element data model respectively according to a preset allocation rule; parsing the document data model and drawing a background canvas in the view page according to the global attributes of the parsed PSD picture; parsing the element data model and performing z-index positioning on the elements of the PSD picture according to the parsed element attributes to determine the stacking order, where the element attributes include key layout attributes and custom tags; dynamically loading corresponding VUE components according to the custom tags; and dynamically mounting the VUE components to the background canvas through the VUE framework mechanism according to the key layout attributes and the stacking order to achieve dynamic rendering of the view page. It effectively improves the R & D efficiency and the consistency problem of user experience.

Description

Technical Field

[0001] The present invention relates to the technical field of page development, and in particular, to a method, device, computer device and storage medium for dynamically rendering view pages. Background Art

[0002] H5 refers to the fifth generation of HTML, and also refers to all digital products made with H5 language. HTML is a hypertext markup language. Hypertext means that a page can contain non-text elements such as pictures, links, and even music and programs. Markup means that these hypertexts must be marked by start and end tags containing attributes.

[0003] Currently, when developing H5 pages, usually designers need to design the design drafts of H5 pages and cut corresponding pictures and icons according to R & D requirements. Then, developers need to customize and develop corresponding page logics, components, and style codes using technology stacks such as Vue, JavaScript, HTML, and CSS according to the design drafts provided by the designers.

[0004] However, when developing H5 pages in the above way, front-end developers need to customize and develop from scratch, resulting in the need to customize and develop a large number of activity pages. Moreover, the reduction degree of the design drafts is limited, leading to low R & D efficiency and the problem that the user experience cannot reach consistency. Summary of the Invention

[0005] Based on this, it is necessary to provide a method, device, computer device and storage medium for dynamically rendering view pages to solve the problems of low R & D efficiency and inconsistent user experience in the prior art.

[0006] In a first aspect, a method for dynamically rendering a view page is provided, including:

[0007] When the imported picture is a PSD picture, parse the PSD picture, and map the parsed layer attributes to the document data model and the element data model respectively according to a preset allocation rule;

[0008] Parse the document data model, and draw a background canvas in the view page according to the global attributes of the parsed PSD picture;

[0009] Parse the element data model, and perform z-index positioning on the elements of the PSD picture according to the parsed element attributes to determine the stacking order, where the element attributes include key layout attributes and custom tags;

[0010] Dynamically load the corresponding VUE component according to the custom tag;

[0011] According to the key layout attributes and stacking order, through the VUE framework mechanism, the VUE components are dynamically mounted into the background canvas to achieve dynamic rendering of the view page.

[0012] In one embodiment, the PSD picture is parsed, and the parsed layer attributes are respectively mapped into the document data model and the element data model according to a preset allocation rule, including:

[0013] The PSD picture is parsed by a core engine to obtain layer attributes, and the layer attributes include the element type tags;

[0014] According to the element type tags, the layer attributes are divided into element attributes and global attributes;

[0015] The global attributes are allocated to the document data model, and the element attributes are allocated to the element data model.

[0016] In one embodiment, the z-index positioning of each layer of the PSD picture is performed according to the parsed element attributes to determine the stacking order of the layers, including:

[0017] The z-index positioning of the elements of the PSD picture is performed according to the parsed element attributes to determine the stacking order, including:

[0018] According to the parsed element attributes, a positioning element and the coordinate information of the positioning element are determined;

[0019] According to the coordinate system of the view page, the coordinate information of the positioning element is converted into the coordinate information corresponding to the coordinate system of the view page;

[0020] According to the converted coordinate information of the positioning element, corresponding z-index values are respectively assigned to the positioning element as index values;

[0021] The stacking order is determined according to the magnitudes of the index values.

[0022] In one embodiment, the dynamic loading of corresponding VUE components according to custom tags includes:

[0023] According to the custom tags, the view format types of all elements of the PSD picture are obtained;

[0024] The view format types of all elements of the PSD picture are mapped one by one into a preset VUE component library;

[0025] The VUE components corresponding to all elements of the PSD picture are dynamically loaded in the VUE component library.

[0026] In one embodiment, based on the key layout attributes and the stacking order, the VUE component is dynamically mounted to the background canvas through the VUE framework mechanism, including:

[0027] Determine the mounting order and mounting position of the VUE component according to the key layout attributes and the stacking order;

[0028] Dynamically mount the VUE component to the background canvas through the VUE framework mechanism according to the mounting order and mounting position.

[0029] In one embodiment, before performing z-index positioning on the element attributes of the parsed PSD image, it includes:

[0030] Judge whether the element data model is empty or in an abnormal state;

[0031] If the judgment result is yes, output an abnormal message;

[0032] If the judgment result is no, execute the step of performing z-index positioning on the element attributes of the parsed PSD image.

[0033] In a second aspect, a device for dynamically rendering a view page is provided, including:

[0034] An attribute assignment unit, configured to parse the PSD image when the imported image is a PSD image, and map the parsed layer attributes to the document data model and the element data model respectively according to a preset assignment rule;

[0035] A background canvas drawing unit, configured to parse the document data model and draw a background canvas in the view page according to the global attributes of the parsed PSD image;

[0036] A layer positioning unit, configured to parse the element data model and perform z-index positioning on each layer of the PSD image according to the parsed element attributes to determine the stacking order of the element attributes, where the element attributes include key layout attributes and custom tags;

[0037] A VUE component acquisition unit, configured to dynamically load a corresponding VUE component according to the custom tag;

[0038] A view page generation unit, configured to dynamically mount the VUE component to the background canvas through the VUE framework mechanism according to the key layout attributes and the stacking order to implement dynamic rendering of the view page.

[0039] In one embodiment, the VUE component acquisition unit is further configured to:

[0040] Obtain the view format types of all elements of the PSD picture according to the custom tag;

[0041] Map the view format types of all elements of the PSD picture to a preset VUE component library one by one;

[0042] Dynamically load the VUE components corresponding to all elements of the PSD picture in the VUE component library.

[0043] In a third aspect, a computer device is provided, including a memory, a processor, and computer-readable instructions stored in the memory and executable on the processor. When the processor executes the computer-readable instructions, the method for dynamically rendering a view page as described above is implemented.

[0044] In a fourth aspect, a readable storage medium for computer-readable instructions is provided. When the computer-readable instructions are executed by one or more processors, the one or more processors are caused to execute the method for dynamically rendering a view page as described above.

[0045] The method, device, computer device, and storage medium for dynamically rendering a view page as described above. The implementation of the method includes: when the imported picture is a PSD picture, parsing the PSD picture, and mapping the parsed layer attributes to a document data model and an element data model respectively according to a preset allocation rule; parsing the document data model, and drawing a background canvas in the view page according to the global attributes of the parsed PSD picture; parsing the element data model, and performing z-index positioning on the elements of the PSD picture according to the parsed element attributes to determine the stacking order, where the element attributes include key layout attributes; configuring custom tags, and dynamically loading corresponding VUE components according to the custom tags; and dynamically mounting the VUE components to the background canvas through a VUE framework mechanism according to the key layout attributes and the stacking order to implement dynamic rendering of the view page. In this application, by mapping the layer attributes of the PSD picture to the document data model and the element data model respectively, calculating, and automatically generating corresponding VUE components for the layers according to the custom tags, and mounting them to the background canvas drawn according to the global attributes in the document data model according to the position, shape, and relationship of the layer components, and then performing rendering, the problems of a large number of active page customization R & D and design draft restoration can be effectively solved, and the R & D efficiency and user experience are improved. Description of the Drawings

[0046] To more clearly illustrate the technical solutions of the embodiments of the present invention, the following briefly introduces the accompanying drawings required for the description of the embodiments of the present invention. Obviously, the accompanying drawings in the following description are only some embodiments of the present invention. For those of ordinary skill in the art, without creative efforts, other accompanying drawings can be obtained based on these drawings.

[0047] Figure 1 is a flowchart of an implementation of a method for dynamically rendering a view page in an embodiment of the present invention;

[0048] Figure 2 is a schematic structural diagram of an apparatus for dynamically rendering a view page in an embodiment of the present invention;

[0049] Figure 3 is a schematic diagram of a computer device in an embodiment of the present invention. Detailed implementation manners

[0050] The following will clearly and completely describe the technical solutions in the embodiments of the present invention with reference to the accompanying drawings in the embodiments of the present invention. Obviously, the described embodiments are some, but not all, of the embodiments of the present invention. All other embodiments obtained by those of ordinary skill in the art based on the embodiments of the present invention without creative efforts fall within the protection scope of the present invention.

[0051] In one embodiment, as Figure 1 shown, a method for dynamically rendering a view page is provided, including the following steps:

[0052] In step S110, when the imported picture is a PSD picture, parse the PSD picture, and map the parsed layer attributes to the document data model and the element data model respectively according to a preset allocation rule;

[0053] In an embodiment of the present application, when importing a picture, it can first be determined whether the picture is a PSD picture. When the determination result is yes, parse the PSD picture, and the PSD picture is a PSD file.

[0054] In an embodiment of the present application, the core engine provided by the PSD library can be used to parse the PSD picture into an open-source library of the PSD layer data model to obtain layer attributes.

[0055] Among them, the layer attributes may include layer coordinate information, width information, height information, color, name, layer label and other attribute information.

[0056] In the embodiment of the present application, after parsing the PSD picture and obtaining the layer attributes, the layer attributes can be further mapped to the document data model and the element data model respectively according to the preset allocation rules. Specifically, the layer attributes can be classified according to the layer tags, the data belonging to the element attributes is mapped to the element data model, and the data belonging to the global attributes is mapped to the document data model.

[0057] In step S120, the document data model is parsed, and according to the global attributes of the PSD picture parsed out, a background canvas is drawn on the view page;

[0058] In the embodiment of the present application, the document data model includes the global attributes of the entire picture and is an object data model. Exemplarily, the global attributes may include attributes such as width, height, background-color, etc.

[0059] In the embodiment of the present application, after obtaining the global attributes of the PSD picture, a background canvas tag can be added in HTML5. Through this background canvas tag, a rectangular blank area can be generated on the view page. The height and width of this blank area are adjusted according to the width and height in the global attributes, and then the background color of the blank area can be configured according to the background-color, and finally the background canvas can be drawn.

[0060] In step S130, the element data model is parsed, and according to the parsed element attributes, the elements of the PSD picture are positioned by z-index to determine the stacking order, and the element attributes include key layout attributes;

[0061] In the embodiment of the present application, the element data model includes the attribute set of all elements of the PSD picture and is an array data model. Exemplarily, the element attributes may include attributes such as the width, height, positioning (bottom, right, top, left), name, opacity, imageSrc, type, visible of the element.

[0062] In the embodiment of the present application, the key layout attributes may include width, height, positioning (bottom, right, top, left), etc., which are attributes representing the size and position of the element.

[0063] In the embodiments of the present application, according to the element attributes, positioning elements are determined, that is, elements with the position attribute value of relative or absolute or fixed. Then, according to the coordinate position information of the positioning elements, the coordinate position information of the positioning elements can be converted according to the coordinate system of the browser view page, and a z-index value is configured for the converted positioning elements, that is, different index values are assigned to the positioning elements. According to this index value, the stacking order between the positioning elements can be determined, and they are stacked in ascending order of the index value. That is, the larger the index value, the higher the height of the positioning element.

[0064] Among them, the z-index value can be a positive number or a negative number.

[0065] Among them, the positioning element can be a layer of a PSD picture.

[0066] In step S140, according to the custom tag, the corresponding VUE component is dynamically loaded;

[0067] In the embodiments of the present application, when configuring a PSD picture, a custom tag of the PSD picture can be configured. In the custom tag, the view format types of each element of the PSD picture can be customized. For example, an input view format, a reload view format, a view format for displaying as a picture, etc.

[0068] In an embodiment of the present application, the custom tag is mapped one by one to the VUE components in a preset VUE component library, and through the VUE framework mechanism, the corresponding VUE components are dynamically loaded.

[0069] In the embodiments of the present application, the VUE component includes the VUE component codes corresponding to all element components required for view page development, so as to improve the restoration degree of the design draft and bring a consistent user experience to users.

[0070] In step S150, according to the key layout attribute and the stacking order, through the VUE framework mechanism, the VUE component is dynamically mounted to the background canvas to achieve dynamic rendering of the view page.

[0071] In the embodiments of the present application, according to the key layout attribute and the stacking attribute, the positions, shapes, and stacking relationships between the various elements of the PSD picture are determined. Then, through the VUE framework, the VUE components are dynamically mounted to the corresponding positions on the background canvas according to the positions, shapes, and stacking relationships to form a view page. Then, using the Vue framework mechanism, when performing Dom parsing, the view page is dynamically rendered.

[0072] The above method for dynamically rendering a view page includes: when the imported picture is a PSD picture, parsing the PSD picture, and mapping the parsed layer attributes to a document data model and an element data model respectively according to a preset allocation rule; parsing the document data model, and drawing a background canvas on the view page according to the global attributes of the parsed PSD picture; parsing the element data model, and performing z-index positioning on the elements of the PSD picture according to the parsed element attributes to determine the stacking order, where the element attributes include key layout attributes; configuring custom tags, and dynamically loading corresponding VUE components according to the custom tags; and dynamically mounting the VUE components to the background canvas through a VUE framework mechanism according to the key layout attributes and the stacking order to achieve dynamic rendering of the view page. In this application, by mapping the layer attributes of the PSD picture to the document data model and the element data model respectively, calculating, and automatically generating corresponding VUE components for the layers according to the custom tags, and mounting them to the background canvas drawn according to the global attributes in the document data model according to the position, shape, and relationship of the layer components, and then performing rendering, it can effectively solve the problems of a large number of activity page customization R & D and the reduction degree of design drafts, and improve the R & D efficiency and user experience.

[0073] In one embodiment, the present application provides a method for dynamically rendering a view page, including the following processes:

[0074] In step S110, when the imported picture is a PSD picture, parsing the PSD picture, and mapping the parsed layer attributes to a document data model and an element data model respectively according to a preset allocation rule;

[0075] In one embodiment of the present application, when importing a picture, it can first be determined whether the picture is a PSD picture. When the determination result is yes, the PSD picture is parsed, and the PSD picture is a PSD file.

[0076] In one embodiment of the present application, the PSD picture can be parsed into an open-source library of a PSD layer data model through a core engine provided by a PSD library to obtain layer attributes.

[0077] Among them, the layer attributes may include attribute information such as layer coordinate information, width information, height information, color, name, and layer label.

[0078] In one embodiment of the present application, parsing the PSD picture and mapping the parsed layer attributes to a document data model and an element data model respectively according to a preset allocation rule includes:

[0079] The core engine is used to parse the PSD image to obtain layer attributes, and the layer attributes include the element type tags;

[0080] According to the element type tags, the layer attributes are divided into the element attributes and the global attributes;

[0081] The global attributes are assigned to the document data model, and the element attributes are assigned to the element data model.

[0082] In the embodiment of the present application, the element attributes may include attributes such as the width, height, positioning (bottom, right, top, left), name, opacity, imageSrc, type, visible of the element.

[0083] In the embodiment of the present application, the global attributes may include attributes such as width, height, background-color.

[0084] In the embodiment of the present application, the element type tags can be used to identify the attribute types of different layer attributes.

[0085] In the embodiment of the present application, after parsing the PSD image to obtain the layer attributes, the layer attributes can be further divided into global attributes and element attributes according to the element type tags, and then the global attributes are mapped to the document data model, and the element attributes are mapped to the element data model.

[0086] In step S120, the document data model is parsed, and according to the global attributes of the PSD image parsed out, a background canvas is drawn on the view page;

[0087] In the embodiment of the present application, the document data model includes the global attributes of the entire image and is an object data model. Exemplarily, the global attributes may include attributes such as width, height, background-color.

[0088] In an embodiment of the present application, after obtaining the global attributes of the PSD image, a background canvas tag can be added in HTML5. Through this background canvas tag, a rectangular blank area can be generated in the web view. The height and width of this blank area can be adjusted according to the width and height in the global attributes, and then the background color of the blank area can be configured according to the background-color, and finally the background canvas can be drawn.

[0089] In step S130, the element data model is parsed, and according to the parsed element attributes, the elements of the PSD image are positioned by z-index to determine the stacking order. The element attributes include key layout attributes and custom tags.

[0090] In an embodiment of the present application, the element data model includes a set of attributes of all elements of the PSD image and is an array data model. Exemplarily, the element attributes may include attributes such as width, height, positioning (bottom, right, top, left), name, opacity, imageSrc (address source), type (tag), visible (element box visible), etc.

[0091] In an embodiment of the present application, the key layout attributes may include attributes such as width, height, positioning (bottom, right, top, left) that represent the size and position of the element.

[0092] In an embodiment of the present application, before positioning the element attributes of the parsed PSD image by z-index, it includes:

[0093] Determine whether the element data model is empty or in an abnormal state;

[0094] If the judgment result is yes, an exception message is output;

[0095] If the judgment result is no, the step of positioning the element attributes of the parsed PSD image by z-index is executed.

[0096] Specifically, it can be determined that the element data model is in an abnormal state according to whether the element attributes in the element data model are empty, or problems such as the element data model running error or parsing failure. When the element data model is in an abnormal state or empty, an exception is thrown and the subsequent steps are stopped. When the element data model is in a normal state, the step of positioning the element attributes of the parsed PSD image by z-index is executed.

[0097] In an embodiment of the present application, positioning the elements of the PSD picture according to the parsed element attributes to determine the stacking order includes:

[0098] Determining the positioning element and the coordinate information of the positioning element according to the parsed element attributes;

[0099] Converting the coordinate information of the positioning element into the coordinate information corresponding to the coordinate system of the view page according to the coordinate system of the view page;

[0100] Assigning corresponding z-index values to the positioning element respectively according to the converted coordinate information of the positioning element as index values;

[0101] Determining the stacking order according to the magnitude of the index values.

[0102] In an embodiment of the present application, the elements of the PSD picture can be divided into positioning elements and ordinary elements. The positioning element refers to an element whose position attribute value is relative or absolute or fixed. Only the positioning element can be subjected to z-index positioning.

[0103] In an embodiment of the present application, after obtaining the element attributes, the positioning element can be determined according to the position attribute value of each element, and then the coordinate position information of the positioning element is determined in the element attributes. Since the coordinate system of the PSD layer is different from the coordinate system of the browser view page, it is necessary to convert the current coordinate position information of the positioning element into the coordinate system of the browser view page to obtain the coordinate information of the positioning element located in the browser view page, and then assign a z-index value to the positioning element according to the coordinate information of the browser view page as an index value. For example, if the Z-axis coordinate of the positioning element A is 2 and the Z-axis coordinate of the positioning element B is 3, then the z-index value of the positioning element A is less than the z-index value of the positioning element B. The stacking order can be determined according to the magnitude of the index value, and the stacking order is stacked in ascending order of the index value, that is, the larger the index value, the closer the corresponding element is to the side facing the user.

[0104] Among them, the z-index value can be a positive number or a negative number.

[0105] Among them, the positioning element can be a layer of the PSD picture.

[0106] In step S140, dynamically load the corresponding VUE component according to the custom tag;

[0107] In the embodiment of the present application, before dynamically loading the corresponding VUE component, it is further possible to determine whether the custom tag of the single element is correct. When the determination result is yes, the step of dynamically loading the corresponding VUE component is executed; otherwise, an exception is thrown.

[0108] In an embodiment of the present application, dynamically loading the corresponding VUE component according to the custom tag includes:

[0109] Obtain the view format types of all elements of the PSD picture according to the custom tag;

[0110] Map the view format types of all elements of the PSD picture one by one to a preset VUE component library;

[0111] Dynamically load the VUE components corresponding to all elements of the PSD picture in the VUE component library.

[0112] In the embodiment of the present application, when configuring the PSD picture, the custom tag of the PSD picture can be configured. In the custom tag, the view format types of each element of the PSD picture can be customized. For example, the view format can be an input type, a reload type, a view format for displaying in the form of a picture, etc.

[0113] In an embodiment of the present application, map the custom tag one by one to a preset VUE component library to obtain the VUE component code corresponding to the element component, and then through the VUE framework mechanism, dynamically load the corresponding VUE component code.

[0114] In the embodiment of the present application, the VUE component may include the VUE component codes corresponding to all element components required for view page development, so as to improve the restoration degree of the design draft and bring a consistent user experience to the user.

[0115] In step S150, according to the key layout attribute and the stacking order, through the VUE framework mechanism, dynamically mount the VUE component to the background canvas to realize the dynamic rendering of the view page.

[0116] In the embodiment of the present application, the step of dynamically mounting the VUE component to the background canvas according to the key layout attribute and the stacking order through the VUE framework mechanism includes:

[0117] Determine the mounting order and mounting position of the VUE component according to the key layout attribute and the stacking order;

[0118] Dynamically mount the VUE component to the background canvas through the VUE framework mechanism according to the mounting order and mounting position.

[0119] Specifically, according to the key layout attribute and the stacking attribute, the positions, shapes, and stacking relationships among the elements of the PSD image are determined, so that the mounting order and mounting positions of each VUE component can be determined. Then, through the VUE framework, the VUE components can be dynamically mounted to the corresponding positions on the background canvas according to the corresponding mounting order and mounting positions. Using the Vue framework mechanism, when performing Dom parsing, the view page is dynamically rendered.

[0120] In this application, by mapping the layer attributes of the PSD image to the document data model and the element data model respectively, calculating, and automatically generating corresponding VUE components for the layers according to custom tags, and mounting them to the background canvas drawn according to the global attributes in the document data model based on the positions, shapes, and relationships of the layer components, and then rendering, it can effectively solve the problems of a large number of activity page customization R & D and the restoration degree of design drafts, improving the R & D efficiency and user experience.

[0121] It should be understood that the magnitudes of the sequence numbers of the steps in the above embodiments do not mean the order of execution. The execution order of each process should be determined according to its function and internal logic, and should not constitute any limitation to the implementation process of the embodiments of the present invention.

[0122] In one embodiment, a device for dynamically rendering a view page is provided. The device for dynamically rendering a view page corresponds one-to-one to the method for dynamically rendering a view page in the above embodiment. As Figure 2 shown, the device for dynamically rendering a view page includes an attribute assignment unit 10, a background canvas drawing unit 20, a layer positioning unit 30, a VUE component obtaining unit 40, and a view page generating unit 50. The detailed descriptions of each component are as follows:

[0123] The attribute assignment unit 10 is configured to, when the imported image is a PSD image, parse the PSD image, and map the parsed layer attributes to the document data model and the element data model respectively according to a preset assignment rule;

[0124] The background canvas drawing unit 20 is configured to parse the document data model, and draw a background canvas in the view page according to the parsed global attributes of the PSD image;

[0125] The layer positioning unit 30 is configured to parse the element data model, and perform z-index positioning on the elements of the PSD image according to the parsed element attributes to determine the stacking order, where the element attributes include key layout attributes and custom tags;

[0126] A VUE component acquisition unit 40, configured to dynamically load a corresponding VUE component according to the custom tag;

[0127] A dynamic rendering unit 50, configured to dynamically mount the VUE component to the background canvas through a VUE framework mechanism according to the key layout attribute and the stacking order, so as to implement dynamic rendering of the view page.

[0128] In one embodiment, the VUE component acquisition unit 40 is further configured to:

[0129] Obtain the view format types of all elements of the PSD picture according to the custom tag;

[0130] Map the view format types of all elements of the PSD picture to a preset VUE component library one by one;

[0131] Dynamically load the VUE components corresponding to all elements of the PSD picture in the VUE component library.

[0132] In one embodiment, the attribute assignment unit 10 is further configured to:

[0133] Parse the PSD picture through a core engine to obtain layer attributes, where the layer attributes include the element type tag;

[0134] Divide the layer attributes into the element attributes and the global attributes according to the element type tag;

[0135] Assign the global attributes to the document data model, and assign the element attributes to the element data model.

[0136] In one embodiment, the layer positioning unit 30 is further configured to:

[0137] Determine a positioning element and the coordinate information of the positioning element according to the parsed element attributes;

[0138] Convert the coordinate information of the positioning element into the coordinate information corresponding to the coordinate system of the view page according to the coordinate system of the view page;

[0139] Assign corresponding z-index values to the positioning element as index values according to the converted coordinate information of the positioning element;

[0140] Determine the stacking order according to the magnitude of the index value.

[0141] In one embodiment, the VUE component acquisition unit 40 is further configured to:

[0142] Obtain the view format types of all elements of the PSD image according to the custom tags;

[0143] Map the view format types of all elements of the PSD image one by one to a preset VUE component library;

[0144] Dynamically load the VUE components corresponding to all elements of the PSD image in the VUE component library.

[0145] In one embodiment, the view page generation unit 50 is further configured to:

[0146] Determine the mounting order and mounting position of the VUE components according to the key layout attributes and the stacking order;

[0147] Dynamically mount the VUE components to the background canvas through the VUE framework mechanism according to the mounting order and mounting position.

[0148] In one embodiment, the layer positioning unit 30 is further configured to:

[0149] Judge whether the element data model is empty or in an abnormal state;

[0150] If the judgment result is yes, output an exception message;

[0151] If the judgment result is no, perform the step of performing z-index positioning on the element attributes of the parsed PSD image.

[0152] In this application, by mapping the layer attributes of the PSD image to the document data model and the element data model respectively, calculating, and automatically generating corresponding VUE components for the layers according to the custom tags, and mounting them to the background canvas drawn according to the global attributes in the document data model according to the position, shape and relationship of the layer components, and then rendering, it can effectively solve the problems of a large number of activity page customization R & D and design draft restoration, and improve the R & D efficiency and user experience.

[0153] For the specific limitations on the device for dynamically rendering the view page, reference can be made to the limitations on the method for dynamically rendering the view page in the above text, which will not be elaborated here. Each module in the above device for dynamically rendering the view page can be implemented in whole or in part by software, hardware and their combination. The above modules can be embedded in or independent of the processor in the computer device in the form of hardware, or stored in the memory of the computer device in the form of software, so that the processor can call and execute the operations corresponding to the above modules.

[0154] In one embodiment, a computer device is provided. The computer device can be a server, and its internal structure diagram can be as Figure 3As shown. The computer device includes a processor, a memory, and a network interface connected via a system bus. Among them, the processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a readable storage medium. The readable storage medium stores computer-readable instructions. The network interface of the computer device is used to communicate with an external terminal via a network connection. When the computer-readable instructions are executed by the processor, a method for dynamically rendering a view page is implemented. The readable storage medium provided in this embodiment includes a non-volatile readable storage medium and a volatile readable storage medium.

[0155] In one embodiment, a computer device is provided, including a memory, a processor, and computer-readable instructions stored in the memory and executable on the processor. When the processor executes the computer-readable instructions, the method for dynamically rendering a view page as described above is implemented.

[0156] In one embodiment, a readable storage medium for computer-readable instructions is provided. When the computer-readable instructions are executed by one or more processors, the one or more processors are caused to execute the method for dynamically rendering a view page as described above.

[0157] Those of ordinary skill in the art can understand that all or part of the processes in the methods of the above embodiments can be completed by instructing relevant hardware through computer-readable instructions. The computer-readable instructions can be stored in a non-volatile readable storage medium or a volatile readable storage medium. When the computer-readable instructions are executed, they can include the processes of the embodiments of the above methods. Among them, any reference to a memory, storage, database, or other medium used in the various embodiments provided in this application can include non-volatile and / or volatile memories. Non-volatile memory can include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory. Volatile memory can include random access memory (RAM) or an external cache memory. By way of illustration and not limitation, RAM is available in many forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDR SDRAM), enhanced SDRAM (ESDRAM), synchronous link (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM), etc.

[0158] Those skilled in the art can clearly understand that, for the convenience and conciseness of description, only the above division of each functional unit and module is used as an example. In actual applications, the above functions can be allocated to different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above.

[0159] The above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it; although the present invention has been described in detail with reference to the foregoing embodiments, those of ordinary skill in the art should understand that they can still modify the technical solutions described in the foregoing embodiments, or perform equivalent replacements for some of the technical features; and these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention, and should all be included in the protection scope of the present invention.

Claims

1. A method for dynamically rendering a view page, characterized in that, the method includes: When the imported picture is a PSD picture, parse the PSD picture, and map the parsed layer attributes to the document data model and the element data model respectively according to a preset allocation rule; Parse the document data model, and draw a background canvas on the view page according to the global attributes of the parsed PSD picture; Parse the element data model, and perform z-index positioning on the elements of the PSD picture according to the parsed element attributes to determine the stacking order, where the element attributes include key layout attributes and custom tags; Dynamically load the corresponding VUE components according to the custom tags; According to the key layout attributes and the stacking order, through the VUE framework mechanism, dynamically mount the VUE components to the background canvas to achieve dynamic rendering of the view page; The step of parsing the PSD picture and mapping the parsed layer attributes to the document data model and the element data model respectively according to a preset allocation rule includes: Parse the PSD picture through the core engine to obtain layer attributes, where the layer attributes include element type tags; According to the element type tags, divide the layer attributes into the element attributes and the global attributes; Allocate the global attributes to the document data model, and allocate the element attributes to the element data model; The step of performing z-index positioning on the elements of the PSD picture according to the parsed element attributes to determine the stacking order includes: According to the parsed element attributes, determine the positioning element and the coordinate information of the positioning element; According to the coordinate system of the view page, convert the coordinate information of the positioning element into the coordinate information corresponding to the coordinate system of the view page; According to the converted coordinate information of the positioning element, assign corresponding z-index values to the positioning element as index values; Determine the stacking order according to the size of the index values.

2. The method for dynamically rendering a view page according to claim 1, characterized in that, the step of dynamically loading the corresponding VUE components according to the custom tags includes: According to the custom tags, obtain the view format types of all elements of the PSD picture; Map the view format types of all elements of the PSD picture one by one to a preset VUE component library; Dynamically load the VUE components corresponding to all elements of the PSD picture in the VUE component library.

3. The method for dynamically rendering a view page according to claim 1, characterized in that, the step of dynamically mounting the VUE components to the background canvas through the VUE framework mechanism according to the key layout attributes and the stacking order includes: According to the key layout attributes and the stacking order, determine the mounting order and mounting position of the VUE components; According to the mounting order and mounting position, the VUE component is dynamically mounted to the background canvas through the VUE framework mechanism.

4. The method for dynamically rendering a view page according to any one of claims 1-3, wherein, before performing z-index positioning on the element attributes of the PSD picture, it includes: judging whether the element data model is empty or in an abnormal state; when the judgment result is yes, an exception message is output; when the judgment result is no, the step of performing z-index positioning on the element attributes of the parsed PSD picture is executed.

5. A device for dynamically rendering a view page, wherein, the device includes: An attribute assignment unit, configured to, when the imported picture is a PSD picture, parse the PSD picture and map the parsed layer attributes to the document data model and the element data model respectively according to a preset assignment rule; A background canvas drawing unit, configured to parse the document data model and draw a background canvas in the view page according to the global attributes of the parsed PSD picture; A layer positioning unit, configured to parse the element data model and perform z-index positioning on the elements of the PSD picture according to the parsed element attributes to determine the stacking order, and the element attributes include key layout attributes and custom tags; A VUE component acquisition unit, configured to dynamically load a corresponding VUE component according to the custom tag; A dynamic rendering unit, configured to dynamically mount the VUE component to the background canvas through the VUE framework mechanism according to the key layout attributes and the stacking order to implement dynamic rendering of the view page; The attribute assignment unit is further configured to: parse the PSD picture through a core engine to obtain layer attributes, and the layer attributes include element type tags; divide the layer attributes into the element attributes and the global attributes according to the element type tags; assign the global attributes to the document data model and assign the element attributes to the element data model; The layer positioning unit further includes: determine a positioning element and the coordinate information of the positioning element according to the parsed element attributes; convert the coordinate information of the positioning element into the coordinate information corresponding to the coordinate system of the view page according to the coordinate system of the view page; assign corresponding z-index values to the positioning element as index values according to the converted coordinate information of the positioning element; determine the stacking order according to the magnitude of the index value.

6. The device for dynamically rendering a view page according to claim 5, wherein, the VUE component acquisition unit is further configured to: obtain the view format types of all elements of the PSD picture according to the custom tag; map the view format types of all elements of the PSD picture one by one to a preset VUE component library; dynamically load the VUE components corresponding to all elements of the PSD picture in the VUE component library.

7. A computer device, comprising a memory, a processor, and computer-readable instructions stored in the memory and executable on the processor, wherein, when the processor executes the computer-readable instructions, the method for dynamically rendering a view page according to any one of claims 1-4 is implemented.

8. A readable storage medium for computer-readable instructions, wherein, when the computer-readable instructions are executed by one or more processors, the one or more processors are caused to execute the method for dynamically rendering a view page according to any one of claims 1-4.

Images