一种基于web实现的小程序页面自定义样式动态化方法与流程

1.本发明涉及json样式配置技术领域，尤其涉及一种基于web实现的小程序页面自定义样式动态化方法。


背景技术：

2.现有的小程序页面自定义样式主要是以json配置来描述页面组件的样式信息，比如描述页面中图片组件的样式，如宽度、高度、边距等具体样式数据，则需要在json中的某些相关字段里预先定义好，然后在web端以表单的形式来提供相关人员进行编辑和保存，最后在具体的网页或小程序等端上获取保存后的json配置并读取其中相关的样式字段数据进行处理然后做实际的渲染展示，以此来达到动态或自定义显示的目的。
3.但上述方式最大缺点不够灵活，修改起来比较麻烦，很难快速满足真正意义上的自定义组件样式的需要，如果要支持更多的样式配置，还需要各方修改代码以及联合调试后才能实现，每次需要新增样式配置都需要如此，显然这样效率比较低，灵活性较差，具体来说存在如下缺点：
4.1)传统的json配置方案，需要提前对样式配置进行预定义，如有新的样式配置还需要再进行开发和对接，效率较低；
5.2)传统的json配置方案，只输出一份统一的配置，还需要网页或小程序等端在运行时进行二次处理后才可使用，降低了性能，容易出错且较为麻烦。


技术实现要素：

6.本发明要解决的技术问题是克服现有技术存在的缺陷，本发明提出了一种能够灵活配置json配置的基于web实现的小程序页面自定义样式动态化方法。
7.为解决上述技术问题，本发明采用的技术方案是：一种基于web实现的小程序页面自定义样式动态化方法，包括如下步骤：
8.s1、将页面中各部分拆分成独立可复用的组件，通过定义统一的json数据格式来描述拆分后的组件，以实现组件规格化；
9.s2、将json配置数据以表单形式展示，具体步骤为，
10.将通用的样式在表单中单独列出以统一配置，
11.将已配置的通用样式转换成css样式代码并插入用javascript实现的css样式编辑器；
12.s3、依据执行端环境差异将css样式编辑器中的样式提取转换，输出适合执行端的样式数据，同时将输出的样式数据更新到ison配置属性上。
13.进一步地，所述步骤s2中，通用样式在表单中列出的具体步骤为，
14.由服务端采集对应的json配置数据，并依据数据验证规则对采集到的数据进行验证，其中所述验证规则由服务端原始记录数据加密处理生成；
15.数据验证规则与json配置数据交互校验后，服务端对校验后的数据进行封装签
名，并以表单形式列出。
16.进一步地，所述数据验证规则包括授权信息、第一授权许可以及授权许可信息。
17.进一步地，所述步骤s3中，依据执行端环境差异具体包括，
18.对配置后的表单形式数据的多个节点进行识别，生成多个对应css样式的埋点数据；以现有css样式定义多个埋点数据阈值；
19.将配置后数据内的埋点数据与埋点数据阈值比较，得到对应每一css样式的差异环境。
20.进一步地，所述步骤s1中拆分后的组件包括图片组件、文本组件与视频组件。
21.进一步地，所述步骤s3中执行端包括网页与小程序。
22.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如上述所述的于web实现的小程序页面自定义样式动态化方法的步骤。
23.一种非暂态计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时用于实现上述所述的于web实现的小程序页面自定义样式动态化方法的步骤。
24.与现有技术相比，本发明的有益效果包括：
25.1、无需二次对接处理，大大降低了工作量以及后期维护成本。
26.2、通过基于样式(css)编辑器中的全量样式提前对不同的端进行针对性的样式转换处理，输出不同端可直接使用的样式数据，在提升了不同端的运行时性能的同时也降低了不同端的开发工作量，提升了效率。
附图说明
27.参照附图来说明本发明的公开内容。应当了解，附图仅仅用于说明目的，而并非意在对本发明的保护范围构成限制。在附图中，相同的附图标记用于指代相同的部件。其中：
28.图1示意性显示了根据本发明一个实施方式提出的方案实际实施流程图；
29.图2示意性显示了根据本发明一个实施方式提出的整体方案流程图；
30.图3示意性显示了根据本发明一个实施方式提出的执行端后续样式使用流程图。
具体实施方式
31.容易理解，根据本发明的技术方案，在不变更本发明实质精神下，本领域的一般技术人员可以提出可相互替换的多种结构方式以及实现方式。因此，以下具体实施方式以及附图仅是对本发明的技术方案的示例性说明，而不应当视为本发明的全部或者视为对本发明技术方案的限定或限制。
32.根据本发明的一实施方式结合图1-图3示出。
33.本专利方案没有采用传统json配置描述定义样式的方案，而是采用json配置和样式(css)代码编辑相结合的方式来完成对页面组件的显示样式进行描述和定义，并且根据不同端的差异自动转换成对应端可直接使用的样式的方案。
34.下面，按如下三个方面在技术实现方法上进行具体的优化处理。
35.首先需要把页面中各部分进行拆分，拆分成一个个单独的可复用的组件，如：用于显示图片的图片组件，用于显示文字的文本组件，用于播放视频的视频组件等等，然后需要
对不同组件进行规格化，即定义统一的json数据格式来描述组件，如组件的名称，标识，id，属性，样式等，这样方便网页或小程序等其它端按照统一的数据格式来进行使用，也防止出现混乱和过多的冗余字段导致维护成本增加。
36.其次需要把抽象的json配置数据以表单的形式展现出来，方便相关人员进行编辑配置，此时针对样式的编辑配置需要进行特别处理：一方面是将通用的样式在表单中单独列出方便进行统一配置，另一方面是将已配置的通用样式转换成样式(css)代码并插入用javascript实现的样式(css)编辑器中，此时除了可以继续使用通用配置以外，还可以使用样式(css)编辑器直接进行新增样式或修改之前的样式。
37.最后需要根据网页或小程序等端自身执行环境的差异把编辑器中的样式提取出来进行适当的转换并输出适合网页和小程序等不同端可直接使用的样式数据，然后把最终的样式数据更新到json配置的特定属性上，这样就可以实现高效灵活的自定义页的样式了。
38.综上所述，本方案在使用上分为2个环节：
39.1.如图2所示，首先需要定义组件的初始化通用样式，然后在使用该组件时读取组件的通用样式并插入到样式(css)编辑器中，根据需要直接在样式(css)编辑器中编辑需要的样式或在通用样式表单中修改样式，无需为新增样式再进行额外的开发对接，操作完成后保存即可，节省开发时间提升使用效率，也能更灵活更快速的满足需要。
40.2.如图3所示，由于保存时会将编辑的样式自动转换为对应网页或小程序端可直接使用的样式，所以网页或小程序端无需进行特别处理可直接使用，各端获取配置后匹配对应的组件然后读取相应的样式字段直接使用即可，简单快捷。
41.在本发明所提供的实施例中，应该理解到，所揭露的终端设备和方法，可以通过其它的方式实现。例如，以上所描述的终端设备实施例仅仅是示意性的，例如，所述模块或单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通讯连接可以是通过一些接口，装置或单元的间接耦合或通讯连接，可以是电性，机械或其它的形式。
42.另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
43.所述集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明实现上述实施例方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、u盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(rom，read-only memory)、随机存取存储器(ram，random access memory)、电载波信号、电信信号以及软件分发介质等。需要说明的是，所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增
减，例如在某些司法管辖区，根据立法和专利实践，计算机可读介质不包括电载波信号和电信信号。
44.本发明的技术范围不仅仅局限于上述说明中的内容，本领域技术人员可以在不脱离本发明技术思想的前提下，对上述实施例进行多种变形和修改，而这些变形和修改均应当属于本发明的保护范围内。

技术特征：
1.一种基于web实现的小程序页面自定义样式动态化方法，其特征在于，包括如下步骤：s1、将页面中各部分拆分成独立可复用的组件，通过定义统一的json数据格式来描述拆分后的组件，以实现组件规格化；s2、将json配置数据以表单形式展示，具体步骤为，将通用的样式在表单中单独列出以统一配置，将已配置的通用样式转换成css样式代码并插入用javascript实现的css样式编辑器；s3、依据执行端环境差异将css样式编辑器中的样式提取转换，输出适合执行端的样式数据，同时将输出的样式数据更新到ison配置属性上。2.根据权利要求1所述的一种基于web实现的小程序页面自定义样式动态化方法，其特征在于：所述步骤s2中，通用样式在表单中列出的具体步骤为，由服务端采集对应的json配置数据，并依据数据验证规则对采集到的数据进行验证，其中所述验证规则由服务端原始记录数据加密处理生成；数据验证规则与json配置数据交互校验后，服务端对校验后的数据进行封装签名，并以表单形式列出。3.根据权利要求2所述的一种基于web实现的小程序页面自定义样式动态化方法，其特征在于：所述数据验证规则包括授权信息、第一授权许可以及授权许可信息。4.根据权利要求1所述的一种基于web实现的小程序页面自定义样式动态化方法，所述步骤s3中，依据执行端环境差异具体包括，对配置后的表单形式数据的多个节点进行识别，生成多个对应css样式的埋点数据；以现有css样式定义多个埋点数据阈值；将配置后数据内的埋点数据与埋点数据阈值比较，得到对应每一css样式的差异环境。5.根据权利要求1所述的一种基于web实现的小程序页面自定义样式动态化方法，其特征在于：所述步骤s1中拆分后的组件包括图片组件、文本组件与视频组件。6.根据权利要求1所述的一种基于web实现的小程序页面自定义样式动态化方法，其特征在于：所述步骤s3中执行端包括网页与小程序。7.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于:所述处理器执行所述程序时实现如权利要求1至6任一项所述的于web实现的小程序页面自定义样式动态化方法的步骤。8.一种非暂态计算机可读存储介质，其上存储有计算机程序，其特征在于：所述计算机程序被处理器执行时用于实现上述权利要求1至6任一项所述的于web实现的小程序页面自定义样式动态化方法的步骤。

技术总结
本发明提出了一种基于web实现的小程序页面自定义样式动态化方法，解决了传统的json配置方案效率低，灵活性较差等问题，其主要步骤包括:S1、将页面中各部分拆分成独立可复用的组件，通过定义统一的json数据格式来描述拆分后的组件，以实现组件规格化；S2、将json配置数据以表单形式展示，具体步骤为，将通用的样式在表单中单独列出以统一配置，将已配置的通用样式转换成css样式代码并插入用javascript实现的css样式编辑器；S3、依据执行端环境差异将css样式编辑器中的样式提取转换，输出适合执行端的样式数据，同时将输出的样式数据更新到ison配置属性上。ison配置属性上。ison配置属性上。


技术研发人员：王友运
受保护的技术使用者：企迈科技有限公司
技术研发日：2023.06.29
技术公布日：2023/9/23