CN114816404A - 动态渲染视图页面的方法、装置、计算机设备及存储介质 - Google Patents
动态渲染视图页面的方法、装置、计算机设备及存储介质 Download PDFInfo
- Publication number
- CN114816404A CN114816404A CN202210462021.XA CN202210462021A CN114816404A CN 114816404 A CN114816404 A CN 114816404A CN 202210462021 A CN202210462021 A CN 202210462021A CN 114816404 A CN114816404 A CN 114816404A
- Authority
- CN
- China
- Prior art keywords
- picture
- psd
- data model
- attributes
- dynamically
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- 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
- G06F16/986—Document structures and storage, e.g. HTML extensions
Abstract
本发明提供了一种动态渲染视图页面的方法、装置、计算机设备及存储介质，其方法包括：当导入的图片为PSD图片时，对PSD图片进行解析，并将解析出的图层属性按照预设分配规则，分别映射至文档数据模型以及元素数据模型中；对文档数据模型进行解析，并根据解析出的PSD图片的全局属性，在视图页面中绘制出背景画布；对元素数据模型进行解析，并根据解析出的元素属性，对PSD图片的元素进行z‑index定位，以确定层叠顺序，元素属性包括关键布局属性以及自定义标签；根据自定义标签，动态加载对应的VUE组件；根据关键布局属性以及层叠顺序，通过VUE框架机制，将VUE组件动态挂载至背景画布中，以实现对视图页面的动态渲染。有效提高了研发效率和用户体验一致性问题。
Description
技术领域
本发明涉及页面开发技术领域，尤其涉及一种动态渲染视图页面的方法、装置、计算机设备及存储介质。
背景技术
H5是指第5代HTML，也指用H5语言制作的一切数字产品，HTML是超文本标记语言，超文本是指页面内可以包含图片，链接，甚至音乐，程序等非文字元素，而标记指的是这些超文本必须由包含属性的开头与结尾标志来标记。
目前，在进行H5页面开发时，通常需要设计师设计H5页面的设计稿，同时按照研发要求，剪切相应的图片以及图标，研发人员则需要按照设计师提供的设计稿，使用Vue、JavaScript、HTML和CSS等技术栈，定制化开发相应的页面逻辑、组件、样式代码。
但是，采用上述方式进行H5页面开发时，需要前端开发工程师从零开始定制化开发，导致需要对大量活动页面进行定制化研发，且设计稿还原度有限，导致研发效率低，且用户的体验无法达到一致性的问题。
发明内容
基于此，有必要针对上述技术问题，提供一种动态渲染视图页面的方法、装置、计算机设备及存储介质，以解决现有技术中存在研发效率低，且用户体验无法达到一致性的问题。
第一方面，提供了一种动态渲染视图页面的方法，包括：
当导入的图片为PSD图片时，对所述PSD图片进行解析，并将解析出的图层属性按照预设分配规则分别映射至文档数据模型以及元素数据模型中；
对所述文档数据模型进行解析，并根据解析出的PSD图片的全局属性，在视图页面中绘制出背景画布；
对所述元素数据模型进行解析，并根据解析出的元素属性，对所述PSD图片的元素进行z-index定位，以确定层叠顺序，所述元素属性包括关键布局属性以及自定义标签；
根据所述自定义标签，动态加载对应的VUE组件；
根据所述关键布局属性以及层叠顺序，通过VUE框架机制，将所述VUE组件动态挂载至所述背景画布中，以实现对所述视图页面的动态渲染。
在一实施例中，对所述PSD图片进行解析，并将解析后的图层属性按照预设分配规则分别映射至文档数据模型以及元素数据模型中，包括：
通过核心引擎对所述PSD图片进行解析，以获取图层属性，所述图层属性，包括所述元素类型标签；
根据所述元素类型标签，将所述图层属性划分为所述元素属性和全局属性；
将所述全局属性分配至所述文档数据模型中，将所述元素属性分配至所述元素数据模型中。
在一实施例中，所述根据解析出的元素属性，对所述PSD图片的各图层进行z-index定位，以确定所述各图层的层叠顺序，包括：
所述根据解析出的元素属性，对所述PSD图片的元素进行z-index定位，以确定层叠顺序，包括：
根据解析出的元素属性，确定定位元素以及所述定位元素的坐标信息；
根据视图页面的坐标系，将所述定位元素的坐标信息转换为视图页面的坐标系所对应的坐标信息；
根据所述定位元素转换后的坐标信息，为所述定位元素分别赋予对应的z-index值，作为索引值；
根据所述索引值的大小确定所述层叠顺序。
在一实施例中，所述根据自定义标签，动态加载对应的VUE组件，包括：
根据所述自定义标签，获取所述PSD图片所有元素的视图格式类型；
将所述PSD图片所有元素的视图格式类型一一映射到预设的VUE组件库中；
在所述VUE组件库中动态加载所述PSD图片所有元素对应的VUE组件。
在一实施例中，所述根据所述关键布局属性以及层叠顺序，通过VUE框架机制，将所述VUE组件动态挂载至所述背景画布中，包括：
根据所述关键布局属性以及所述层叠顺序，确定所述VUE组件的挂载顺序以及挂载位置；
根据所述挂载顺序以及挂载位置，通过VUE框架机制，将所述VUE组件动态挂载至所述背景画布中。
在一实施例中，所述对解析出的所述PSD图片的元素属性进行z-index定位之前，包括：
判断所述元素数据模型是否为空或者处于异常状态；
当判断结果为是，则输出异常信息；
当判断结果为否，则执行对解析出的所述PSD图片的元素属性进行z-index定位的步骤。
第二方面，提供了一种动态渲染视图页面的装置，包括：
属性分配单元，用于当导入的图片为PSD图片时，对所述PSD图片进行解析，并将解析出的图层属性按照预设分配规则分别映射至文档数据模型以及元素数据模型中；
背景画布绘制单元，用于对所述文档数据模型进行解析，并根据解析出的PSD图片的全局属性，在视图页面中绘制出背景画布；
图层定位单元，用于对所述元素数据模型进行解析，并根据解析出的元素属性，对所述PSD图片的各图层进行z-index定位，以确定所述元素属性的层叠顺序，所述元素属性包括关键布局属性以及自定义标签；
VUE组件获取单元，用于根据所述自定义标签，动态加载对应的VUE组件；
视图页面生成单元，用于根据所述关键布局属性以及层叠顺序，通过VUE框架机制，将所述VUE组件动态挂载至所述背景画布中，以实现对所述视图页面的动态渲染。
在一实施例中，所述VUE组件获取单元，还用于：
根据所述自定义标签，获取所述PSD图片所有元素的视图格式类型；
将所述PSD图片所有元素的视图格式类型一一映射到预设的VUE组件库中；
在所述VUE组件库中动态加载所述PSD图片所有元素对应的VUE组件。
第三方面，提供了一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机可读指令，所述处理器执行所述计算机可读指令时实现如上述所述的动态渲染视图页面的方法。
第四方面，提供了一种计算机可读指令的可读存储介质，所述计算机可读指令被一个或多个处理器执行时，使得所述一个或多个处理器执行如上述所述的动态渲染视图页面的方法。
上述动态渲染视图页面的方法、装置、计算机设备及存储介质，其方法实现包括：当导入的图片为PSD图片时，对所述PSD图片进行解析，并将解析出的图层属性按照预设分配规则分别映射至文档数据模型以及元素数据模型中；对所述文档数据模型进行解析，并根据解析出的PSD图片的全局属性，在视图页面中绘制出背景画布；对所述元素数据模型进行解析，并根据解析出的元素属性，对所述PSD图片的元素进行z-index定位，以确定层叠顺序，所述元素属性包括关键布局属性；配置自定义标签，并根据所述自定义标签动态加载对应的VUE组件；根据所述关键布局属性以及层叠顺序，通过VUE框架机制，将所述VUE组件动态挂载至所述背景画布中，以实现对所述视图页面的动态渲染。本申请中，通过将PSD图片的图层属性分别映射至文档数据模型以及元素数据模型中，计算出，且根据自定义标签将图层自动生成对应的VUE组件，并根据图层元件的位置、形态以及关系等，挂载到根据文档数据模型中的全局属性绘制背景画布中，然后进行渲染，可以有效解决大量活动页面定制化研发以及设计稿还原度的问题，提高了研发效率和用户体验。
附图说明
为了更清楚地说明本发明实施例的技术方案，下面将对本发明实施例的描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1是本发明一实施例中动态渲染视图页面的方法的一实现流程图；
图2是本发明一实施例中动态渲染视图页面的装置的一结构示意图；
图3是本发明一实施例中计算机设备的一示意图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
在一实施例中，如图1所示，提供一种动态渲染视图页面方法，包括如下步骤：
在步骤S110中，当导入的图片为PSD图片时，对所述PSD图片进行解析，并将解析出的图层属性按照预设分配规则，分别映射至文档数据模型以及元素数据模型中；
在本申请一实施例中，在导入图片时，可首先判断图片是否为PSD图片，当判断结果为是，则对PSD图片进行解析，该PSD图片为PSD文件。
在本申请一实施例中，可通过PSD库提供的核心引擎，将PSD图片解析成PSD图层数据模型的开源库，以获取图层属性。
其中，图层属性可包括图层坐标信息、宽度信息、高度信息、颜色、名称、图层标签等属性信息。
在本申请实施例中，通过对PSD图片进行解析，获取图层属性后，可进一步将图层属性按照预设分配规则分别映射至文档数据模型以及元素数据模型中，具体的，可根据该图层标签对图层属性进行分类，将属于元素属性的数据映射到元素数据模型中，将属于全局属性的数据映射到文档数据模型中。
在步骤S120中，对所述文档数据模型进行解析，并根据解析出的PSD图片的全局属性，在视图页面中绘制出背景画布；
在本申请实施例中，该文档数据模型包括整个图片的全局属性，是一个对象数据模型，示例性的，该全局属性可包括width(宽度)、height(高度)、background-color(背景颜色)等属性。
在本申请实施例中，在获取了PSD图片的全局属性之后，可以在HTML5中增加背景画布标签，通过该背景画布标签，可在视图页面中生成一个矩形的空白区域，通过该全局属性中的width(宽度)、height(高度)对该空白区域的高度以及宽度进行调整，然后可根据background-color(背景颜色)对空白区域的背景颜色进行配置，最终可绘制出背景画布。
在步骤S130中，对所述元素数据模型进行解析，并根据解析出的元素属性，对所述PSD图片的元素进行z-index定位，以确定层叠顺序，所述元素属性包括关键布局属性；
在本申请实施例中，该元素数据模型包括PSD图片的所有元素的属性集合，是一个数组数据模型，示例性的，该元素属性可包括元素的width(宽度)、height(高度)、定位(botton、right、top、left)、name(名称)、opacity(透明度)、imageSrc(地址来源)、type(标签)、visible(元素框可见)等属性。
在本申请实施例中，关键布局属性，可包括width(宽度)、height(高度)、定位(botton、right、top、left)等，表示元素大小和位置的属性。
在本申请实施例中，根据该元素属性，确定定位元素，即position属性值为relative或absolute或fixed的元素，然后可根据该定位元素的坐标位置信息，根据浏览器视图页面的坐标系对该定位元素的坐标位置信息进行转换，对转换后的定位元素配置z-index值，即为定位元素赋予不同的索引值，根据该索引值可以确定定位元素之间的层叠顺序，按照索引值从小到大的顺序层叠，即，索引值越大，则定位元素的高度则越高。
其中，z-index值可为正数，也可以为负数。
其中，该定位元素可为PSD图片的图层。
在步骤S140中，根据所述自定义标签，动态加载对应的VUE组件；
在本申请实施例中，在对PSD图片进行配置时，可以配置PSD图片的自定义标签，在自定义标签中，可以对该PSD图片的各元素的视图格式类型进行自定义，比如，为输入式的视图格式、重载式的视图格式、以图片方式进行显示的视图格式等。
在本申请一实施例中，将该自定义标签一一映射到预设的VUE组件库中的VUE组件，并通过VUE框架机制，将对应的VUE组件进行动态加载。
在本申请实施例中，该VUE组件包括视图页面开发所需的所有元素组件对应的VUE组件代码，以便提高设计稿的还原度，且可给用户带来一致性的用户体验。
在步骤S150中，根据所述关键布局属性以及层叠顺序，通过VUE框架机制，将所述VUE组件动态挂载至所述背景画布中，以实现对视图页面的动态渲染。
在本申请实施例中，根据该关键布局属性以及该层叠属性，确定该PSD图片的各个元素之间的位置、形态以及层叠关系，然后可通过该VUE框架，将VUE组件根据该位置、形态以及层叠关系动态挂载到背景画布的对应位置上，形成视图页面，然后利用Vue框架机制，在进行Dom解析时，视图页面进行动态渲染。
上述动态渲染视图页面的方法，包括：当导入的图片为PSD图片时，对所述PSD图片进行解析，并将解析出的图层属性按照预设分配规则分别映射至文档数据模型以及元素数据模型中；对所述文档数据模型进行解析，并根据解析出的PSD图片的全局属性，在视图页面中绘制出背景画布；对所述元素数据模型进行解析，并根据解析出的元素属性，对所述PSD图片的元素进行z-index定位，以确定层叠顺序，所述元素属性包括关键布局属性；配置自定义标签，并根据所述自定义标签动态加载对应的VUE组件；根据所述关键布局属性以及层叠顺序，通过VUE框架机制，将所述VUE组件动态挂载至所述背景画布中，以实现对所述视图页面的动态渲染。本申请中，通过将PSD图片的图层属性分别映射至文档数据模型以及元素数据模型中，计算出，且根据自定义标签将图层自动生成对应的VUE组件，并根据图层元件的位置、形态以及关系等，挂载到根据文档数据模型中的全局属性绘制背景画布中，然后进行渲染，可以有效解决大量活动页面定制化研发以及设计稿还原度的问题，提高了研发效率和用户体验。
在一实施例中，本申请提供了一种动态渲染视图页面的方法，包括如下流程：
在步骤S110中，当导入的图片为PSD图片时，对所述PSD图片进行解析，并将解析出的图层属性按照预设分配规则，分别映射至文档数据模型以及元素数据模型中；
在本申请一实施例中，在导入图片时，可首先判断图片是否为PSD图片，当判断结果为是，则对PSD图片进行解析，该PSD图片为PSD文件。
在本申请一实施例中，可通过PSD库提供的核心引擎，将PSD图片解析成PSD图层数据模型的开源库，以获取图层属性。
其中，图层属性，可包括图层坐标信息、宽度信息、高度信息、颜色、名称、图层标签等属性信息。
在本申请一实施例中，对所述PSD图片进行解析，并将解析后的图层属性按照预设分配规则分别映射至文档数据模型以及元素数据模型中，包括：
通过核心引擎对所述PSD图片进行解析，以获取图层属性，所述图层属性，包括所述元素类型标签；
根据所述元素类型标签，将所述图层属性划分为所述元素属性和全局属性；
将所述全局属性分配至所述文档数据模型中，将所述元素属性分配至所述元素数据模型中。
在本申请实施例中，元素属性可包括该元素属性可包括元素的width(宽度)、height(高度)、定位(botton、right、top、left)、name(名称)、opacity(透明度)、imageSrc(地址来源)、type(标签)、visible(元素框可见)等属性。
在本申请实施例中，该全局属性可包括width(宽度)、height(高度)、background-color(背景颜色)等属性。
在本申请实施例中，该元素类型标签可用于标识不同图层属性的属性类型。
在本申请实施例中，通过对PSD图片进行解析，获取图层属性后，可进一步将图层属性按照元素类型标签划分为全局属性和元素属性，然后将全局属性映射至文档数据模型，将元素属性映射至元素数据模型中。
在步骤S120中，对所述文档数据模型进行解析，并根据解析出的PSD图片的全局属性，在视图页面中绘制出背景画布；
在本申请实施例中，该文档数据模型包括整个图片的全局属性，是一个对象数据模型，示例性的，该全局属性可包括width(宽度)、height(高度)、background-color(背景颜色)等属性。
在本申请实施例中，在获取了PSD图片的全局属性之后，可以在HTML5中增加背景画布标签，通过该背景画布标签，可在网页视图中生成一个矩形的空白区域，通过该全局属性中的width(宽度)、height(高度)对该空白区域的高度以及宽度进行调整，然后可根据background-color(背景颜色)对空白区域的背景颜色进行配置，最终可绘制出背景画布。
在步骤S130中，对所述元素数据模型进行解析，并根据解析出的元素属性，对所述PSD图片的元素进行z-index定位，以确定层叠顺序，所述元素属性包括关键布局属性以及自定义标签；
在本申请实施例中，该元素数据模型包括PSD图片的所有元素的属性集合，是一个数组数据模型，示例性的，该元素属性可包括元素的width(宽度)、height(高度)、定位(botton、right、top、left)、name(名称)、opacity(透明度)、imageSrc(地址来源)、type(标签)、visible(元素框可见)等属性。
在本申请实施例中，关键布局属性可包括width(宽度)、height(高度)、定位(botton、right、top、left)等表示元素大小和位置的属性。
在本申请一实施例中，对解析出的所述PSD图片的元素属性进行z-index定位之前，包括：
判断所述元素数据模型是否为空或者处于异常状态；
当判断结果为是，则输出异常信息；
当判断结果为否，则执行对解析出的所述PSD图片的元素属性进行z-index定位的步骤。
具体的，可以根据元素数据模型中的元素属性是否为空，或者元素数据模型运行错误、解析失败等问题，确定元素数据模型处于异常状态，在元素数据模型处于异常状态或者为空时，则抛出异常，停止执行后续步骤，当元素数据模型处于正常状态时，则执行对对解析出的所述PSD图片的元素属性进行z-index定位的步骤。
在本申请一实施例中，所述根据解析出的元素属性，对所述PSD图片的元素进行z-index定位，以确定层叠顺序，包括：
根据解析出的元素属性，确定定位元素以及所述定位元素的坐标信息；
根据视图页面的坐标系，将所述定位元素的坐标信息转换为视图页面的坐标系所对应的坐标信息；
根据所述定位元素转换后的坐标信息，为所述定位元素分别赋予对应的z-index值，作为索引值；
根据所述索引值的大小确定所述层叠顺序。
在本申请实施例中，PSD图片的元素可分为定位元素和普通元素，定位元素是指position属性值为relative或absolute或fixed的元素，只有定位元素才可进行z-index定位。
在本申请实施例中，在获取元素属性之后，可以根据各个元素的position属性值，确定定位元素，然后在元素属性中确定，定位元素的坐标位置信息，由于PSD图层的坐标系与浏览器视图页面的坐标系不同，因此需要将定位元素的当前坐标位置信息，转换到浏览器视图页面的坐标系中，以获取该定位元素位于浏览器视图页面的坐标信息，然后根据该浏览器视图页面的坐标信息为定位元素赋予z-index值，作为索引值，例如，定位元素A的Z轴坐标为2，定位元素B的Z轴坐标为3，则该定位元素A的z-index值小于该定位元素B的z-index值。该层叠顺序则可根据该索引值的大小确定，层叠顺序按照索引值从小到大的顺序层叠，即，索引值越大，对应的元素越靠近面向用户的一侧。
其中，z-index值可为正数，也可以为负数。
其中，该定位元素可为PSD图片的图层。
在步骤S140中，根据所述自定义标签，动态加载对应的VUE组件；
在本申请实施例中，在动态加载对应的VUE组件之前，可进一步判断该单个元素的自定义标签是否正确，当判断结果为是，则执行动态加载对应的VUE组件的步骤，否则，抛出异常。
在本申请一实施例中，根据所述自定义标签，动态加载对应的VUE组件，包括：
根据所述自定义标签，获取所述PSD图片所有元素的视图格式类型；
将所述PSD图片所有元素的视图格式类型一一映射到预设的VUE组件库中；
在所述VUE组件库中动态加载所述PSD图片所有元素对应的VUE组件。
在本申请实施例中，在对PSD图片进行配置时，可以配置PSD图片的自定义标签，在自定义标签中，可以对该PSD图片的各元素的视图格式类型进行自定义，比如，为输入式的视图格式、重载式的视图格式、以图片方式进行显示的视图格式等。
在本申请一实施例中，将该自定义标签一一映射到预设的VUE组件库中，以便获取元素组件所对应的VUE组件代码，然后可通过VUE框架机制，将对应的VUE组件代码进行动态加载。
在本申请实施例中，该VUE组件可包括视图页面开发所需的所有元素组件对应的VUE组件代码，以便提高设计稿的还原度，且可给用户带来一致性的用户体验。
在步骤S150中，根据所述关键布局属性以及层叠顺序，通过VUE框架机制，将所述VUE组件动态挂载至所述背景画布中，以实现对视图页面的动态渲染。
在本申请实施例中，所述根据所述关键布局属性以及层叠顺序，通过VUE框架机制，将所述VUE组件动态挂载至所述背景画布中，包括：
根据所述关键布局属性以及所述层叠顺序，确定所述VUE组件的挂载顺序以及挂载位置；
根据所述挂载顺序以及挂载位置，通过VUE框架机制，将所述VUE组件动态挂载至所述背景画布中。
具体的，根据该关键布局属性以及该层叠属性，确定该PSD图片的各个元素之间的位置、形态以及层叠关系，从而可以确定各个VUE组件的挂载顺序以及挂载位置，然后可通过该VUE框架，可以将该VUE组件按照对应的挂载顺序和挂载位置，动态挂载到背景画布的对应位置上，利用Vue框架机制，在进行Dom解析时，对视图页面进行动态渲染。
本申请中，通过将PSD图片的图层属性分别映射至文档数据模型以及元素数据模型中，计算出，且根据自定义标签将图层自动生成对应的VUE组件，并根据图层元件的位置、形态以及关系等，挂载到根据文档数据模型中的全局属性绘制背景画布中，然后进行渲染，可以有效解决大量活动页面定制化研发以及设计稿还原度的问题，提高了研发效率和用户体验。
应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本发明实施例的实施过程构成任何限定。
在一实施例中，提供一种动态渲染视图页面的装置，该动态渲染视图页面的装置与上述实施例中动态渲染视图页面的方法一一对应。如图2所示，该动态渲染视图页面的装置包括属性分配单元10、背景画布绘制单元20、图层定位单元30、VUE组件获取单元40和视图页面生成单元50。各组成部分详细说明如下：
属性分配单元10，用于当导入的图片为PSD图片时，对所述PSD图片进行解析，并将解析出的图层属性按照预设分配规则分别映射至文档数据模型以及元素数据模型中；
背景画布绘制单元20，用于对所述文档数据模型进行解析，并根据解析出的PSD图片的全局属性，在视图页面中绘制出背景画布；
图层定位单元30，用于对所述元素数据模型进行解析，并根据解析出的元素属性，对所述PSD图片的元素进行z-index定位，以确定层叠顺序，所述元素属性包括关键布局属性以及自定义标签；
VUE组件获取单元40，用于根据所述自定义标签，动态加载对应的VUE组件；
动态渲染单元50，用于根据所述关键布局属性以及层叠顺序，通过VUE框架机制，将所述VUE组件动态挂载至所述背景画布中，以实现对所述视图页面的动态渲染。
在一实施例中，所述VUE组件获取单元40，还用于：
根据所述自定义标签，获取所述PSD图片所有元素的视图格式类型；
将所述PSD图片所有元素的视图格式类型一一映射到预设的VUE组件库中；
在所述VUE组件库中动态加载所述PSD图片所有元素对应的VUE组件。
在一实施例中，属性分配单元10，还用于：
通过核心引擎对所述PSD图片进行解析，以获取图层属性，所述图层属性，包括所述元素类型标签；
根据所述元素类型标签，将所述图层属性划分为所述元素属性和全局属性；
将所述全局属性分配至所述文档数据模型中，将所述元素属性分配至所述元素数据模型中。
在一实施例中，图层定位单元30，还用于：
根据解析出的元素属性，确定定位元素以及所述定位元素的坐标信息；
根据视图页面的坐标系，将所述定位元素的坐标信息转换为所述视图页面的坐标系所对应的坐标信息；
根据所述定位元素转换后的坐标信息，为所述定位元素分别赋予对应的z-index值，作为索引值；
根据所述索引值的大小确定所述层叠顺序。
在一实施例中，VUE组件获取单元40，还用于：
根据所述自定义标签，获取所述PSD图片所有元素的视图格式类型；
将所述PSD图片所有元素的视图格式类型一一映射到预设的VUE组件库中；
在所述VUE组件库中动态加载所述PSD图片所有元素对应的VUE组件。
在一实施例中，视图页面生成单元50，还用于：
根据所述关键布局属性以及所述层叠顺序，确定所述VUE组件的挂载顺序以及挂载位置；
根据所述挂载顺序以及挂载位置，通过VUE框架机制，将所述VUE组件动态挂载至所述背景画布中。
在一实施例中，该图层定位单元30，还用于：
判断所述元素数据模型是否为空或者处于异常状态；
当判断结果为是，则输出异常信息；
当判断结果为否，则执行对解析出的所述PSD图片的元素属性进行z-index定位的步骤。
本申请中，通过将PSD图片的图层属性分别映射至文档数据模型以及元素数据模型中，计算出，且根据自定义标签将图层自动生成对应的VUE组件，并根据图层元件的位置、形态以及关系等，挂载到根据文档数据模型中的全局属性绘制背景画布中，然后进行渲染，可以有效解决大量活动页面定制化研发以及设计稿还原度的问题，提高了研发效率和用户体验。
关于动态渲染视图页面的装置的具体限定可以参见上文中对于动态渲染视图页面的方法的限定，在此不再赘述。上述动态渲染视图页面的装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。
在一个实施例中，提供了一种计算机设备，该计算机设备可以是服务器，其内部结构图可以如图3所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括可读存储介质。该可读存储介质存储有计算机可读指令。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机可读指令被处理器执行时以实现一种动态渲染视图页面的方法。本实施例所提供的可读存储介质包括非易失性可读存储介质和易失性可读存储介质。
在一实施例中，提供了一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机可读指令，所述处理器执行所述计算机可读指令时实现如上述所述的动态渲染视图页面的方法。
在一实施例中，提供了一种计算机可读指令的可读存储介质，所述计算机可读指令被一个或多个处理器执行时，使得所述一个或多个处理器执行如上述所述的动态渲染视图页面的方法。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机可读指令来指令相关的硬件来完成，所述的计算机可读指令可存储于一非易失性可读取存储介质或易失性可读存储介质中，该计算机可读指令在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。
所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。
以上所述实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围，均应包含在本发明的保护范围之内。
Claims (10)
1.一种动态渲染视图页面的方法，其特征在于，所述方法，包括：
当导入的图片为PSD图片时，对所述PSD图片进行解析，并将解析出的图层属性按照预设分配规则，分别映射至文档数据模型以及元素数据模型中；
对所述文档数据模型进行解析，并根据解析出的PSD图片的全局属性，在视图页面中绘制出背景画布；
对所述元素数据模型进行解析，并根据解析出的元素属性，对所述PSD图片的元素进行z-index定位，以确定层叠顺序，所述元素属性，包括关键布局属性以及自定义标签；
根据所述自定义标签，动态加载对应的VUE组件；
根据所述关键布局属性以及层叠顺序，通过VUE框架机制，将所述VUE组件动态挂载至所述背景画布中，以实现对所述视图页面的动态渲染。
2.如权利要求1所述的动态渲染视图页面的方法，其特征在于，对所述PSD图片进行解析，并将解析后的图层属性按照预设分配规则，分别映射至文档数据模型以及元素数据模型中，包括：
通过核心引擎对所述PSD图片进行解析，以获取图层属性，所述图层属性，包括所述元素类型标签；
根据所述元素类型标签，将所述图层属性，划分为所述元素属性和全局属性；
将所述全局属性分配至所述文档数据模型中，将所述元素属性分配至所述元素数据模型中。
3.如权利要求1所述的动态渲染视图页面的方法，其特征在于，所述根据解析出的元素属性，对所述PSD图片的元素进行z-index定位，以确定层叠顺序，包括：
根据解析出的元素属性，确定定位元素，以及所述定位元素的坐标信息；
根据所述视图页面的坐标系，将所述定位元素的坐标信息转换为所述视图页面的坐标系所对应的坐标信息；
根据所述定位元素转换后的坐标信息，为所述定位元素分别赋予对应的z-index值，作为索引值；
根据所述索引值的大小确定所述层叠顺序。
4.如权利要求1所述的动态渲染视图页面的方法，其特征在于，所述根据所述自定义标签，动态加载对应的VUE组件，包括：
根据所述自定义标签，获取所述PSD图片所有元素的视图格式类型；
将所述PSD图片所有元素的视图格式类型一一映射到预设的VUE组件库中；
在所述VUE组件库中动态加载所述PSD图片所有元素对应的VUE组件。
5.如权利要求1所述的动态渲染视图页面的方法，其特征在于，所述根据所述关键布局属性以及层叠顺序，通过VUE框架机制，将所述VUE组件动态挂载至所述背景画布中，包括：
根据所述关键布局属性以及所述层叠顺序，确定所述VUE组件的挂载顺序以及挂载位置；
根据所述挂载顺序以及挂载位置，通过VUE框架机制，将所述VUE组件动态挂载至所述背景画布中。
6.如权利要求1-5任意一项所述的动态渲染视图页面的方法，其特征在于，所述对解析出的所述PSD图片的元素属性进行z-index定位之前，包括：
判断所述元素数据模型是否为空或者处于异常状态；
当判断结果为是，则输出异常信息；
当判断结果为否，则执行对解析出的所述PSD图片的元素属性进行z-index定位的步骤。
7.一种动态渲染视图页面的装置，其特征在于，所述装置，包括：
属性分配单元，用于当导入的图片为PSD图片时，对所述PSD图片进行解析，并将解析出的图层属性按照预设分配规则分别映射至文档数据模型以及元素数据模型中；
背景画布绘制单元，用于对所述文档数据模型进行解析，并根据解析出的PSD图片的全局属性，在视图页面中绘制出背景画布；
图层定位单元，用于对所述元素数据模型进行解析，并根据解析出的元素属性，对所述PSD图片的元素进行z-index定位，以确定层叠顺序，所述元素属性包括关键布局属性以及自定义标签；
VUE组件获取单元，用于根据所述自定义标签，动态加载对应的VUE组件；
动态渲染单元，用于根据所述关键布局属性以及层叠顺序，通过VUE框架机制，将所述VUE组件动态挂载至所述背景画布中，以实现对所述视图页面的动态渲染。
8.一种动态渲染视图页面的装置，其特征在于，所述VUE组件获取单元，还用于：
根据所述自定义标签，获取所述PSD图片所有元素的视图格式类型；
将所述PSD图片所有元素的视图格式类型一一映射到预设的VUE组件库中；
在所述VUE组件库中动态加载所述PSD图片所有元素对应的VUE组件。
9.一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机可读指令，其特征在于，所述处理器执行所述计算机可读指令时实现如权利要求1-6任意一项所述的动态渲染视图页面的方法。
10.一种计算机可读指令的可读存储介质，其特征在于，所述计算机可读指令被一个或多个处理器执行时，使得所述一个或多个处理器执行如权利要求1-6任意一项所述的动态渲染视图页面的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210462021.XA CN114816404A (zh) | 2022-04-28 | 2022-04-28 | 动态渲染视图页面的方法、装置、计算机设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210462021.XA CN114816404A (zh) | 2022-04-28 | 2022-04-28 | 动态渲染视图页面的方法、装置、计算机设备及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114816404A true CN114816404A (zh) | 2022-07-29 |
Family
ID=82508511
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210462021.XA Pending CN114816404A (zh) | 2022-04-28 | 2022-04-28 | 动态渲染视图页面的方法、装置、计算机设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114816404A (zh) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115268720A (zh) * | 2022-08-16 | 2022-11-01 | 北京尽微致广信息技术有限公司 | 一种页面渲染方法、装置、设备及可读存储介质 |
| CN115641400A (zh) * | 2022-11-04 | 2023-01-24 | 广州大事件网络科技有限公司 | 一种动态图片生成方法、系统、设备及存储介质 |
| CN116740235A (zh) * | 2023-08-14 | 2023-09-12 | 福昕鲲鹏(北京)信息科技有限公司 | 基于版式文档的文本注释渲染方法及装置 |
-
2022
- 2022-04-28 CN CN202210462021.XA patent/CN114816404A/zh active Pending
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115268720A (zh) * | 2022-08-16 | 2022-11-01 | 北京尽微致广信息技术有限公司 | 一种页面渲染方法、装置、设备及可读存储介质 |
| CN115641400A (zh) * | 2022-11-04 | 2023-01-24 | 广州大事件网络科技有限公司 | 一种动态图片生成方法、系统、设备及存储介质 |
| CN115641400B (zh) * | 2022-11-04 | 2023-11-17 | 广州大事件网络科技有限公司 | 一种动态图片生成方法、系统、设备及存储介质 |
| CN116740235A (zh) * | 2023-08-14 | 2023-09-12 | 福昕鲲鹏(北京)信息科技有限公司 | 基于版式文档的文本注释渲染方法及装置 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN114816404A (zh) | 动态渲染视图页面的方法、装置、计算机设备及存储介质 | |
| US20160342576A1 (en) | Filtered stylesheets | |
| CN108804159B (zh) | javascript模块加载方法及其预处理方法、装置和计算机设备 | |
| CN108388515B (zh) | 测试数据生成方法、装置、设备以及计算机可读存储介质 | |
| CN109840083B (zh) | 网页组件模板构建方法、装置、计算机设备和存储介质 | |
| CN106354483B (zh) | 一种数据处理方法、装置及电子设备 | |
| CN112306620B (zh) | 自定义表单控件的多语言加载方法及装置 | |
| CN115268908A (zh) | 自定义配置页面的方法、装置、设备和存储介质 | |
| CN111191079A (zh) | 一种文档内容获取方法、装置、设备及存储介质 | |
| CN112417899A (zh) | 文字翻译方法、装置、计算机设备和存储介质 | |
| US8862976B1 (en) | Methods and systems for diagnosing document formatting errors | |
| CN113283228A (zh) | 文档生成方法、装置、电子设备及存储介质 | |
| CN113296752A (zh) | 生成api文档的方法、系统、设备及存储介质 | |
| CN110727458A (zh) | 一种通过后台管理切换页面模板设置的方法和装置 | |
| CN111858595B (zh) | 一种电力工程验评记录表动态配置方法与系统 | |
| CN111435300A (zh) | web系统开发方法、装置、设备及存储介质 | |
| US7428697B2 (en) | Preserving content or attribute information during conversion from a structured document to a computer program | |
| CN112580301A (zh) | 一种表单校验方法、装置、设备和存储介质 | |
| CN111079392A (zh) | 网页表单自动填写方法、装置、存储介质及电子设备 | |
| CN117312713A (zh) | 一种信创环境基于浏览器自动化流程处理的方法和系统 | |
| CN115858983A (zh) | 生成css文件的方法和装置、电子设备和存储介质 | |
| CN114528217A (zh) | 用户界面视觉验证方法、装置、计算机设备及存储介质 | |
| CN115687095A (zh) | 页面测试方法、装置、设备及计算机可读存储介质 | |
| CN116484423A (zh) | 基于在线模板的隐私协议处理方法、装置、设备及介质 | |
| CN114721642A (zh) | 一种数据显示方法及装置、存储介质及电子设备 |
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 |