[发明专利]页面主题定制方法、装置、电子设备及存储介质

说明书

本发明涉及页面开发领域，揭露一种页面主题定制方法，包括：根据页面主题的定制需求，构建所述页面主题的主题变量，根据所述主题变量，生成所述页面主题的主题变量文件；利用预设的预编译器配置所述主题变量文件中主题变量的基础样式，并根据所述基础样式，生成所述主题变量文件的主题样式文件；接收业务源文件，从所述主题样式文件中匹配所述业务源文件的业务主题样式，根据所述业务主题样式，生成所述业务源文件的运行样式文件；将所述运行样式文件加载至预设的运行浏览器中，得到所述业务源文件的页面主题样式。此外，本发明还涉及区块链技术，所述主题样式文件可存储区块链中。本发明可以提高页面主题定制的灵活性。

技术领域

本发明涉及页面开发领域，尤其涉及一种页面主题定制方法、装置、电子设备及计算机可读存储介质。

背景技术

组件库是通用的，但是单一的视觉不再满足用户体验需求，为提高用户体验，提供应用体验口碑，同时提高开发者效率，开发者们希望组件库是可定制化，能够提供换肤功能以及多种类组件中的样式定制功能，允许根据用户或业务需求将应用切换不同主题风格的皮肤，也允许对指定组件进行样式改造。

现网有很多成熟的组件库，均具有定制主题的功能，比如element-ui、antd、iview、ionic等，但是都存在性能或不灵活运用等问题，如重写class类名替换，有多套主题时就需要实现多套样式变量文件，存在难以维护，代码冗余，从而导致页面主题的定制不够灵活，改进版的Modify Vars主题组件虽然能够支持在编译或运行时灵活使用，但在编译时由于需要先导入源文件后再复写一套样式替换，加大编译后的css文件体积，在运行时只能变更link到的less文件中的变量，而less文件的变量只在当前文件有效，其他页面不能复用less变量，从而也会导致页面主题的定制不够灵活。

发明内容

本发明提供一种页面主题定制方法、装置、电子设备及计算机可读存储介质，其主要目的在于提高页面主题定制的灵活性。

为实现上述目的，本发明提供的一种页面主题定制方法，包括：

根据页面主题的定制需求，构建所述页面主题的主题变量，根据所述主题变量，生成所述页面主题的主题变量文件；

利用预设的预编译器配置所述主题变量文件中主题变量的基础样式，并根据所述基础样式，生成所述主题变量文件的主题样式文件；

接收业务源文件，从所述主题样式文件中匹配所述业务源文件的业务主题样式，根据所述业务主题样式，生成所述业务源文件的运行样式文件；

将所述运行样式文件加载至预设的运行浏览器中，得到所述业务源文件的页面主题样式。

可选地，所述根据所述页面主题的定制需求，构建所述页面主题的主题变量，包括：

根据所述定制需求，识别所述页面主题的主题类型，根据所述主题类型，对所述页面主题进行主题编码，得到所述页面主题的主题变量。

可选地，所述根据所述主题变量，生成所述页面主题的主题变量文件，包括：

获取所述主题变量的编译环境，在所述编译环境中定义所述主题变量中每个变量的变量形式，根据所述变量形式，生成所述页面主题的主题变量文件。

可选地，所述利用预设的预编译器配置所述主题变量文件中主题变量的基础样式，得到主题样式文件，包括：

利用所述预设的预编译器声明所述题变量文件中主题变量的主题序列，并设置所述主题变量文件中主题变量的结构样式；

将所述结构样式转换为编码变量，将所述编码变量加载至所述主题序列中，得到所述主题变量文件中主题变量的基础样式。

可选地，所述从所述主题样式文件中加载所述业务源文件的业务主题样式，包括：