CN115481343A - 目标组件的生成方法、装置、存储介质及电子装置 - Google Patents
目标组件的生成方法、装置、存储介质及电子装置 Download PDFInfo
- Publication number
- CN115481343A CN115481343A CN202211048964.4A CN202211048964A CN115481343A CN 115481343 A CN115481343 A CN 115481343A CN 202211048964 A CN202211048964 A CN 202211048964A CN 115481343 A CN115481343 A CN 115481343A
- Authority
- CN
- China
- Prior art keywords
- component
- target
- library
- style
- generating
- 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
- 238000000034 method Methods 0.000 title claims abstract description 62
- 230000006870 function Effects 0.000 claims description 18
- 238000004590 computer program Methods 0.000 claims description 9
- 230000008569 process Effects 0.000 description 18
- 239000002131 composite material Substances 0.000 description 11
- 239000003086 colorant Substances 0.000 description 7
- 238000010586 diagram Methods 0.000 description 7
- 238000004806 packaging method and process Methods 0.000 description 4
- 238000005516 engineering process Methods 0.000 description 3
- 230000006978 adaptation Effects 0.000 description 2
- 230000005540 biological transmission Effects 0.000 description 2
- 230000002349 favourable effect Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 238000005406 washing Methods 0.000 description 2
- XLYOFNOQVPJJNP-UHFFFAOYSA-N water Substances O XLYOFNOQVPJJNP-UHFFFAOYSA-N 0.000 description 2
- 238000004887 air purification Methods 0.000 description 1
- 235000019504 cigarettes Nutrition 0.000 description 1
- 150000001875 compounds Chemical class 0.000 description 1
- 230000008878 coupling Effects 0.000 description 1
- 238000010168 coupling process Methods 0.000 description 1
- 238000005859 coupling reaction Methods 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 230000008676 import Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000010408 sweeping Methods 0.000 description 1
Images
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)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- Stored Programmes (AREA)
Abstract
本申请公开了一种目标组件的生成方法、装置、存储介质及电子装置，涉及智慧家庭技术领域，该目标组件的生成方法包括：对用户终端的页面加载请求进行解析，得到所述页面加载请求中的主题标识符和目标组件的组件类型，其中，所述主题标识符用于表示所述用户终端请求加载的目标页面的主题；从组件库中选择出与所述目标组件的组件类型对应的库内组件；根据所述主题标识符对应的目标样式变量集合和所述库内组件生成所述目标组件，其中，所述目标样式变量集合中的目标样式变量用于确定所述目标组件的样式属性，采用上述技术方案，解决了如何确定出同一主题风格下的目标组件的问题。
Description
技术领域
本申请涉及智慧家庭技术领域，具体而言，涉及一种目标组件的生成方法、装置、存储介质及电子装置。
背景技术
目前，随着大前端概念的提出，应用软件开发领域飞速发展，为了满足快速开发迭代的行业需求，越来越多的应用软件采用混合开发(hybrid)模式，例如，对于业务逻辑不复杂的展示业务，转而使用H5进行开发。HTML(Hyper Text Markup Language，超文本标记语言)的通用性使得一次开发在Android、iOS、网页等多端部署成为可能，极大减轻了开发人员更新迭代的压力，这种混合应用开发方式可不需重新下载应用软件，直接更新应用软件，还可以依托绚丽丰富的动画带来更好的用户交互体验，越来越受到人们的青睐。
然而具体到相关领域中，这种方案存在如何保持各个H5页面风格一致，且快速开发，减少H5开发团队的开发量的问题。在开发过程中，不仅需要开发不同功能的业务逻辑的H5页面，还需要将不同功能的业务逻辑的H5页面整合至同一页面UI风格中，由于不同功能的页面一般是交由不同的团队来开发，经常会出现对于UI相同，功能相同的页面重复开发的情况导致重复性的开发任务增加，开发量变大，对于不同团队开发的H5页面，在整体上风格难以统一，对于用户而言有一种割裂感。
因此，相关技术中，存在如何确定出同一主题风格下的目标组件的问题。
针对相关技术中，如何确定出同一主题风格下的目标组件的问题，尚未提出有效的解决方案。
发明内容
本申请实施例提供了一种目标组件的生成方法、装置、存储介质及电子装置，以至少解决相关技术中，如何确定出同一主题风格下的目标组件的问题。
根据本申请实施例的一个实施例，提供了一种目标组件的生成方法，包括：对用户终端的页面加载请求进行解析，得到所述页面加载请求中的主题标识符和目标组件的组件类型，其中，所述主题标识符用于表示所述用户终端请求加载的目标页面的主题；从组件库中选择出与所述目标组件的组件类型对应的库内组件；根据所述主题标识符对应的目标样式变量集合和所述库内组件生成所述目标组件，其中，所述目标样式变量集合中的目标样式变量用于确定所述目标组件的样式属性。
在一个示例性实施例中，对用户终端的页面加载请求进行解析，得到所述页面加载请求中的主题标识符和目标组件的组件类型，包括：从所述用户终端的页面加载请求中获取所述用户终端的终端标识号和所述用户终端的主题标识符；确定所述终端标识号和所述主题标识符之间的第一对应关系；确定所述第一对应关系与预先设置的第二对应关系一致后，从所述页面加载请求中获取所述目标组件的组件类型。
在一个示例性实施例中，所述方法还包括：在所述目标组件的组件类型包括第一组件的情况下，确定所述组件库内的库内组件，包括：获取所述组件库对应的组件样式变量集合，其中，所述组件样式变量集合至少包括所述目标样式变量集合；从所述组件库中获取第一通用组件，根据所述组件样式变量集合中的第一样式变量和所述第一通用组件生成所述第一组件，其中，所述第一通用组件用于提供所述目标页面的单一展示功能；将所述第一组件确定为所述库内组件。
在一个示例性实施例中，所述方法还包括：在所述目标组件的组件类型包括第二组件的情况下，从所述组件库中获取第二通用组件；根据所述组件样式变量集合中的第二样式变量和所述第二通用组件生成所述第二组件，其中，所述第二通用组件用于提供所述目标页面的组合展示功能；将所述第二组件确定为所述库内组件。
在一个示例性实施例中，所述方法还包括：在所述目标组件的组件类型包括第三组件的情况下，对于多个所述第一组件中的每一第一组件，确定所述每一第一组件的组件功能所对应的展示优先级，得到多个所述展示优先级；对多个所述展示优先级进行比较，根据比较结果确定多个所述第一组件的组合顺序；根据所述组合顺序对所述多个所述第一组件进行组合，得到所述第三组件；将所述第三组件确定为所述库内组件。
在一个示例性实施例中，根据所述主题标识符对应的目标样式变量集合和所述库内组件生成所述目标组件，包括：获取用于生成所述库内组件的第四样式变量；确定所述目标样式变量的第一变量类型和所述第四样式变量的第二变量类型；在确定所述第一变量类型和所述第二变量类型一致的情况下，使用所述第一变量类型和所述库内组件生成第四组件，并将所述第四组件确定为所述目标组件。
在一个示例性实施例中，在根据所述主题标识符对应的目标样式变量集合和所述库内组件生成所述目标组件之后，所述方法还包括：确定所述目标组件对应的目标页面的页面展示信息；将所述页面展示信息发送给所述用户终端，以使所述用户终端根据所述页面展示信息展示所述目标页面。
根据本申请实施例的另一个实施例，还提供了一种目标组件的生成装置，包括：解析模块，用于对用户终端的页面加载请求进行解析，得到所述页面加载请求中的主题标识符和目标组件的组件类型，其中，所述主题标识符用于表示所述用户终端请求加载的目标页面的主题；选择模块，用于从组件库中选择出与所述目标组件的组件类型对应的库内组件；生成模块，用于根据所述主题标识符对应的目标样式变量集合和所述库内组件生成所述目标组件，其中，所述目标样式变量集合中的目标样式变量用于确定所述目标组件的样式属性。
根据本申请实施例的又一方面，还提供了一种计算机可读的存储介质，该计算机可读的存储介质中存储有计算机程序，其中，该计算机程序被设置为运行时执行上述目标组件的生成方法。
根据本申请实施例的又一方面，还提供了一种电子装置，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其中，上述处理器通过计算机程序执行上述的目标组件的生成方法。
在本申请实施例中，对用户终端的页面加载请求进行解析，得到所述页面加载请求中的主题标识符和目标组件的组件类型，其中，所述主题标识符用于表示所述用户终端请求加载的目标页面的主题；从组件库中选择出与所述目标组件的组件类型对应的库内组件；根据所述主题标识符对应的目标样式变量集合和所述库内组件生成所述目标组件，其中，所述目标样式变量集合中的目标样式变量用于确定所述目标组件的样式属性；采用上述技术方案，解决了如何确定出同一主题风格下的目标组件的问题，进而确定出同一目标页面下的目标组件。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。
为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1是本申请实施例的一种目标组件的生成方法的硬件环境示意图；
图2是根据本申请实施例的目标组件的生成方法的流程图；
图3是根据本申请实施例的目标组件的生成方法的流程示意图；
图4是根据本申请实施例的一种目标组件的生成装置的结构框图(一)；
图5是根据本申请实施例的一种目标组件的生成装置的结构框图(二)。
具体实施方式
为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分的实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。
需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
根据本申请实施例的一个方面，提供了一种目标组件的生成方法。该目标组件的生成方法广泛应用于智慧家庭(Smart Home)、智能家居、智能家用设备生态、智慧住宅(IntelligenceHouse)生态等全屋智能数字化控制应用场景。可选地，在本实施例中，上述目标组件的生成方法可以应用于如图1所示的由终端设备102和服务器104所构成的硬件环境中。如图1所示，服务器104通过网络与终端设备102进行连接，可用于为终端或终端上安装的客户端提供服务(如应用服务等)，可在服务器上或独立于服务器设置数据库，用于为服务器104提供数据存储服务，可在服务器上或独立于服务器配置云计算和/或边缘计算服务，用于为服务器104提供数据运算服务。
上述网络可以包括但不限于以下至少之一：有线网络，无线网络。上述有线网络可以包括但不限于以下至少之一：广域网，城域网，局域网，上述无线网络可以包括但不限于以下至少之一：WIFI(Wireless Fidelity，无线保真)，蓝牙。终端设备102可以并不限定于为PC、手机、平板电脑、智能空调、智能烟机、智能冰箱、智能烤箱、智能炉灶、智能洗衣机、智能热水器、智能洗涤设备、智能洗碗机、智能投影设备、智能电视、智能晾衣架、智能窗帘、智能影音、智能插座、智能音响、智能音箱、智能新风设备、智能厨卫设备、智能卫浴设备、智能扫地机器人、智能擦窗机器人、智能拖地机器人、智能空气净化设备、智能蒸箱、智能微波炉、智能厨宝、智能净化器、智能饮水机、智能门锁等。
在本实施例中提供了一种目标组件的生成方法，应用于上述计算机终端，图2是根据本申请实施例的目标组件的生成方法的流程图，该流程包括如下步骤：
步骤S202，对用户终端的页面加载请求进行解析，得到所述页面加载请求中的主题标识符和目标组件的组件类型，其中，所述主题标识符用于表示所述用户终端请求加载的目标页面的主题；
其中，上述用户终端包括可移动终端，例如，手机，蓝牙耳机，蓝牙手表等，或者非移动终端，例如冰箱，空调等，本申请对此不作限制。
需要说明的是，上述主题标识符例如可以表示为：“theme＝N”。其中，N为自然数。不同的N表示不同的主题风格。主题风格可以使用不同颜色设置，也可以使用不同元素设置，或者，还可以同时使用不同颜色和不同元素设置。
例如，在使用不同颜色设置主题风格的情况下，N＝1可以表示暗黑色系的主题风格，N＝2可以表示纯白色系的主题风格。在使用不同元素设置的情况下，N＝1可以表示透明元素的主题风格，N＝2可以表示几何元素的主题风格，在同时使用不同颜色和不同元素设置的情况下，N＝1可以表示暗黑色系，且具有透明元素的主题风格，N＝2可以表示纯白色系，且具有几何元素的主题风格。
步骤S204，从组件库中选择出与所述目标组件的组件类型对应的库内组件；
需要说明的是，上述目标组件可以理解为上述页面加载请求中所请求的用于在目标页面中使用的组件。其中，目标组件的组件类型可以包括：第一组件、第二组件、第三组件。
步骤S206，根据所述主题标识符对应的目标样式变量集合和所述库内组件生成所述目标组件，其中，所述目标样式变量集合中的目标样式变量用于确定所述目标组件的样式属性。
需要说明的是，上述目标样式变量集合可以包括全局样式变量和局部样式变量，但不限于此。
通过上述步骤，对用户终端的页面加载请求进行解析，得到所述页面加载请求中的主题标识符和目标组件的组件类型，其中，所述主题标识符用于表示所述用户终端请求加载的目标页面的主题；从组件库中选择出与所述目标组件的组件类型对应的库内组件；根据所述主题标识符对应的目标样式变量集合和所述库内组件生成所述目标组件，其中，所述目标样式变量集合中的目标样式变量用于确定所述目标组件的样式属性，解决了相关技术中，如何确定出同一主题风格下的目标组件的问题，进而确定出同一目标页面下的目标组件。
可选的，在一个示例性实施例中，为了更好的理解上述步骤S202中如何实现对用户终端的页面加载请求进行解析，得到所述页面加载请求中的主题标识符和目标组件的组件类型的过程，提出了以下步骤：从所述用户终端的页面加载请求中获取所述用户终端的终端标识号和所述用户终端的主题标识符；确定所述终端标识号和所述主题标识符之间的第一对应关系；确定所述第一对应关系与预先设置的第二对应关系一致后，从所述页面加载请求中获取所述目标组件的组件类型。
可选的，在一个实施例中，在确定所述第一对应关系与预先设置的第二对应关系不一致的情况下，说明页面加载请求中的主题标识符并不存在，可以新建页面加载请求中的主题标识符，并向用户终端重新推送新创建的主题标识符。其中，新建页面加载请求中的主题标识符的过程，可以理解为用户自定义新建主题标识符对应的主题的过程。
可选的，在其他实施例中，如果无法确定所述终端标识号和所述主题标识符之间的第一对应关系，则说明用户终端与主题标识符之间并未绑定，通过向用户终端发送绑定指令绑定终端标识号和所述主题标识符。或者，也可以理解是用户终端并不支持页面加载请求中的主题标识符对应的主题，此时，向用户终端发送提示信息，以提示用户对应的用户终端无法显示主题标识符对应的主题。
在一个示例性实施例中，还提出了确定组件库内的库内组件的技术方案，具体包括：方案1、在所述目标组件的组件类型包括第一组件的情况下，确定所述组件库内的库内组件，包括：获取所述组件库对应的组件样式变量集合，其中，所述组件样式变量集合至少包括所述目标样式变量集合；从所述组件库中获取第一通用组件，根据所述组件样式变量集合中的第一样式变量和所述第一通用组件生成所述第一组件，其中，所述第一通用组件用于提供所述目标页面的单一展示功能；将所述第一组件确定为所述库内组件。
需要说明的是，上述第一通用组件可以理解为H5各个页面通用的单一功能的组件，上述第一组件可以理解为单一组件，那么根据所述组件样式变量集合中的第一样式变量和所述第一通用组件生成所述第一组件的过程可以理解为，将各个页面通用的功能性单一的组件加上第一样式变量一起封装而成单一组件，单一组件例如按钮，弹窗等。
方案2、在所述目标组件的组件类型包括第二组件的情况下，从所述组件库中获取第二通用组件；根据所述组件样式变量集合中的第二样式变量和所述第二通用组件生成所述第二组件，其中，所述第二通用组件用于提供所述目标页面的组合展示功能；将所述第二组件确定为所述库内组件。
需要说明的是，上述第二通用组件可以理解为H5各个页面通用的非单一功能的组件，上述第二组件可以理解为复合组件，那么根据所述组件样式变量集合中的第二样式变量和所述第二通用组件生成所述第二组件的过程可以理解为，将各个页面通用的非单一功能的组件加上第二样式变量一起封装而成复合组件，复合组件例如选择框等。
方案3、在所述目标组件的组件类型包括第三组件的情况下，对于多个所述第一组件中的每一第一组件，确定所述每一第一组件的组件功能所对应的展示优先级，得到多个所述展示优先级；对多个所述展示优先级进行比较，根据比较结果确定多个所述第一组件的组合顺序；根据所述组合顺序对所述多个所述第一组件进行组合，得到所述第三组件；将所述第三组件确定为所述库内组件。
其中，上述第三组件可以理解为复合组件，复合组件可以由第一组件组合而成，例如商品卡片组件，省市区联动选择组件等。
需要说明的是，上述根据所述组合顺序对所述多个所述第一组件进行组合的过程表示展示多个组件的过程，可以设置最小的组合顺序的序号最先展示，例如，页面内的背景组件。或者可以设置最小的组合顺序的序号最后展示，本申请对此不作限制。
通过上述方案，通过直接封装一套UI组件，有利于APP整体上风格保持一致，且减少各团队的开发量。
在其他实施例中，还可以根据业务类型封装一整套贴合实际业务的UI组件，从而实现应用软件业务的快速扩展和风格统一的目的。例如某滴的Cube-UI，某东的NutUI。
在一个示例性实施例中，进一步的，还提出了一种实现上述步骤S206中根据所述主题标识符对应的目标样式变量集合和所述库内组件生成所述目标组件的过程，具体步骤包括：获取用于生成所述库内组件的第四样式变量；确定所述目标样式变量的第一变量类型和所述第四样式变量的第二变量类型；在确定所述第一变量类型和所述第二变量类型一致的情况下，使用所述第一变量类型和所述库内组件生成第四组件，并将所述第四组件确定为所述目标组件。
需要说明的是，上述变量类型可以包括颜色变量、尺寸变量和位置变量等。
在一个示例性实施例中，在根据所述主题标识符对应的目标样式变量集合和所述库内组件生成所述目标组件之后，还可以确定所述目标组件对应的目标页面的页面展示信息；将所述页面展示信息发送给所述用户终端，以使所述用户终端根据所述页面展示信息展示所述目标页面。
为了更好的理解上述目标组件的生成方法的过程，以下再结合可选实施例对上述目标组件的生成的实现方法流程进行说明，但不用于限定本申请实施例的技术方案。
在本实施例中提供了一种目标组件的生成方法，图3是根据本申请实施例的目标组件的生成方法的流程示意图，如图3所示，具体如下步骤：
在确定目标组件之前，可以通过App和组件库协商主题风格，对此可用数字1，2，3...作为主题标识符来代表不同的主题风格。
如图3所示，组件库里的组件分为：
(1)单一组件(即上述第一组件)：将H5各个页面通用的功能单一的组件抽离，加上一份样式属性由样式变量控制的样式文件，一起封装而成，例如按钮，弹窗等组件。
(2)复合组件(即上述第二组件或第三组件)：将H5各个页面通用的，功能相较而言复杂的组件抽离，加上一份样式属性由样式变量控制的样式文件，封装成复合组件。复合组件也可以由单一组件组合而成，例如商品卡片，省市区联动选择组件。
其中，组件库里会配置一个JSON文件，该JSON文件会根据主题标识符配置不同的样式变量集合(即上述目标样式变量集合)，集合里都是组件各种样式属性的变量，例如背景色，字体颜色等，不论是单一组件还是复合组件的样式属性，都由集合变量里的样式变量来控制。
步骤S1：在整体风格和主题已确立的前提下，在发送页面加载请求的时候，把主题标识符作为参数附着在H5的URL上传递给H5，例如：https://url？theme＝1。其中，主题标识符为“1”。可通过JS截取URL参数的方法来获取这个主题标识符。
步骤S2：通过NPM(Node Package Manager)安装组件。
其中，在步骤S2之前，需要先封装组件，得到组件库，将封装完成的组件库上传至npm，方便下载和使用。
步骤S4-步骤S4：根据主题标识符配置样式变量。
具体的：H5页面通过npm安装此组件库，引入页面所需组件。加载组件库时，会首先加载组件库里适配App主题风格的JSON文件。该JSON文件会通过H5获取到的App的主题标识符，来加载与主题标识符相对应的全局样式变量集合。组件里的样式都由全局样式变量集合里的样式变量来控制，这样加载了与主题标识符相对应的全局样式变量集合后，组件的主题风格就与App的主题风格相一致了。
通过上述步骤，通过封装一套统一APP风格和业务需求的UI组件，有利于提高APP整体上的统一性，提高用户的用户体验。
对于开发而言，提供给各个开发团队，一套应用广泛，切合业务逻辑的UI组件，也有利于减轻各个团队的开发量，提高代码的开发质量和开发速度，增强H5页面之间的耦合性。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到根据上述实施例的方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，或者网络设备等)执行本申请各个实施例的方法。
图4是根据本申请实施例的一种目标组件的生成装置的结构框图(一)；如图4所示，包括：
解析模块42，用于对用户终端的页面加载请求进行解析，得到所述页面加载请求中的主题标识符和目标组件的组件类型，其中，所述主题标识符用于表示所述用户终端请求加载的目标页面的主题；
需要说明的是，上述主题标识符例如可以表示为：“theme＝N”。其中，N为自然数。不同的N表示不同的主题风格。主题风格可以使用不同颜色设置，也可以使用不同元素设置，或者，还可以同时使用不同颜色和不同元素设置。
例如，在使用不同颜色设置主题风格的情况下，N＝1可以表示暗黑色系的主题风格，N＝2可以表示纯白色系的主题风格。在使用不同元素设置的情况下，N＝1可以表示透明元素的主题风格，N＝2可以表示几何元素的主题风格，在同时使用不同颜色和不同元素设置的情况下，N＝1可以表示暗黑色系，且具有透明元素的主题风格，N＝2可以表示纯白色系，且具有几何元素的主题风格。
选择模块44，用于从组件库中选择出与所述目标组件的组件类型对应的库内组件；
生成模块46，用于根据所述主题标识符对应的目标样式变量集合和所述库内组件生成所述目标组件，其中，所述目标样式变量集合中的目标样式变量用于确定所述目标组件的样式属性。
需要说明的是，上述目标样式变量集合可以包括全局样式变量和局部样式变量，但不限于此。
通过上述装置，对用户终端的页面加载请求进行解析，得到所述页面加载请求中的主题标识符和目标组件的组件类型，其中，所述主题标识符用于表示所述用户终端请求加载的目标页面的主题；从组件库中选择出与所述目标组件的组件类型对应的库内组件；根据所述主题标识符对应的目标样式变量集合和所述库内组件生成所述目标组件，其中，所述目标样式变量集合中的目标样式变量用于确定所述目标组件的样式属性，解决了相关技术中，如何确定出同一主题风格下的目标组件的问题，进而确定出同一目标页面下的目标组件。
在一个示例性实施例中，上述解析模块42还用于从所述用户终端的页面加载请求中获取所述用户终端的终端标识号和所述用户终端的主题标识符；确定所述终端标识号和所述主题标识符之间的第一对应关系；确定所述第一对应关系与预先设置的第二对应关系一致后，从所述页面加载请求中获取所述目标组件的组件类型。
可选的，在一个实施例中，在确定所述第一对应关系与预先设置的第二对应关系不一致的情况下，说明页面加载请求中的主题标识符并不存在，上述解析模块42还用于新建页面加载请求中的主题标识符，并向用户终端重新推送新创建的主题标识符。其中，新建页面加载请求中的主题标识符的过程，可以理解为用户自定义新建主题标识符对应的主题的过程。
可选的，在其他实施例中，如果无法确定所述终端标识号和所述主题标识符之间的第一对应关系，则说明用户终端与主题标识符之间并未绑定，上述解析模块42还用于向用户终端发送绑定指令绑定终端标识号和所述主题标识符。或者，也可以理解是用户终端并不支持页面加载请求中的主题标识符对应的主题，此时，上述解析模块42还用于向用户终端发送提示信息，以提示用户用户终端无法显示主题标识符对应的主题。
在一个示例性实施例中，上述选择模块44还用于获取所述组件库对应的组件样式变量集合，其中，所述组件样式变量集合至少包括所述目标样式变量集合；从所述组件库中获取第一通用组件，根据所述组件样式变量集合中的第一样式变量和所述第一通用组件生成所述第一组件，其中，所述第一通用组件用于提供所述目标页面的单一展示功能；将所述第一组件确定为所述库内组件。
需要说明的是，上述第一通用组件可以理解为H5各个页面通用的单一功能的组件，上述第一组件可以理解为单一组件，那么根据所述组件样式变量集合中的第一样式变量和所述第一通用组件生成所述第一组件的过程可以理解为，将各个页面通用的功能性单一的组件加上第一样式变量一起封装而成单一组件，单一组件例如按钮，弹窗等。
在一个示例性实施例中，上述选择模块44还用于在所述目标组件的组件类型包括第二组件的情况下，从所述组件库中获取第二通用组件；根据所述组件样式变量集合中的第二样式变量和所述第二通用组件生成所述第二组件，其中，所述第二通用组件用于提供所述目标页面的组合展示功能；将所述第二组件确定为所述库内组件。
需要说明的是，上述第二通用组件可以理解为H5各个页面通用的非单一功能的组件，上述第二组件可以理解为复合组件，那么根据所述组件样式变量集合中的第二样式变量和所述第二通用组件生成所述第二组件的过程可以理解为，将各个页面通用的非单一功能的组件加上第二样式变量一起封装而成复合组件，复合组件例如选择框等。
在一个示例性实施例中，上述选择模块44还用于在所述目标组件的组件类型包括第三组件的情况下，对于多个所述第一组件中的每一第一组件，确定所述每一第一组件的组件功能所对应的展示优先级，得到多个所述展示优先级；对多个所述展示优先级进行比较，根据比较结果确定多个所述第一组件的组合顺序；根据所述组合顺序对所述多个所述第一组件进行组合，得到所述第三组件；将所述第三组件确定为所述库内组件。
其中，上述第三组件可以理解为复合组件，复合组件可以由第一组件组合而成，例如商品卡片组件，省市区联动选择组件等。
需要说明的是，上述根据所述组合顺序对所述多个所述第一组件进行组合的过程表示展示多个组件的过程，可以设置最小的组合顺序的序号最先展示，例如，页面内的背景组件。或者可以设置最小的组合顺序的序号最后展示，本申请对此不作限制。
通过上述方案，通过直接封装一套UI组件，有利于APP整体上风格保持一致，且减少各团队的开发量。
在其他实施例中，还可以根据业务类型封装一整套贴合实际业务的UI组件，从而实现应用软件业务的快速扩展和风格统一的目的。例如某滴的Cube-UI，某东的NutUI。
在一个示例性实施例中，生成模块46还用于获取用于生成所述库内组件的第四样式变量；确定所述目标样式变量的第一变量类型和所述第四样式变量的第二变量类型；在确定所述第一变量类型和所述第二变量类型一致的情况下，使用所述第一变量类型和所述库内组件生成第四组件，并将所述第四组件确定为所述目标组件。
需要说明的是，上述变量类型可以包括颜色变量、尺寸变量和位置变量等。
图5是根据本申请实施例的一种目标组件的生成装置的结构框图(二)；如图5所示，目标组件的生成装置包括：解析模块42，选择模块44，生成模块46和发送模块52。
其中，上述发送模块52用于确定所述目标组件对应的目标页面的页面展示信息；将所述页面展示信息发送给所述用户终端，以使所述用户终端根据所述页面展示信息展示所述目标页面。
本申请的实施例还提供了一种存储介质，该存储介质包括存储的程序，其中，上述程序运行时执行上述任一项的方法。
可选地，在本实施例中，上述存储介质可以被设置为存储用于执行以下步骤的程序代码：
S1，对用户终端的页面加载请求进行解析，得到所述页面加载请求中的主题标识符和目标组件的组件类型，其中，所述主题标识符用于表示所述用户终端请求加载的目标页面的主题；
S2，从组件库中选择出与所述目标组件的组件类型对应的库内组件；
S3，根据所述主题标识符对应的目标样式变量集合和所述库内组件生成所述目标组件，其中，所述目标样式变量集合中的目标样式变量用于确定所述目标组件的样式属性。
本申请的实施例还提供了一种电子装置，包括存储器和处理器，该存储器中存储有计算机程序，该处理器被设置为运行计算机程序以执行上述任一项方法实施例中的步骤。
可选地，上述电子装置还可以包括传输设备以及输入输出设备，其中，该传输设备和上述处理器连接，该输入输出设备和上述处理器连接。
可选地，在本实施例中，上述处理器可以被设置为通过计算机程序执行以下步骤：
S1，对用户终端的页面加载请求进行解析，得到所述页面加载请求中的主题标识符和目标组件的组件类型，其中，所述主题标识符用于表示所述用户终端请求加载的目标页面的主题；
S2，从组件库中选择出与所述目标组件的组件类型对应的库内组件；
S3，根据所述主题标识符对应的目标样式变量集合和所述库内组件生成所述目标组件，其中，所述目标样式变量集合中的目标样式变量用于确定所述目标组件的样式属性。
可选地，在本实施例中，上述存储介质可以包括但不限于：U盘、只读存储器(Read-Only Memory，简称为ROM)、随机存取存储器(Random Access Memory，简称为RAM)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。
可选地，本实施例中的具体示例可以参考上述实施例及可选实施方式中所描述的示例，本实施例在此不再赘述。
显然，本领域的技术人员应该明白，上述的本申请的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，并且在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本申请不限制于任何特定的硬件和软件结合。
以上所述仅是本申请的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本申请的保护范围。
Claims (10)
1.一种目标组件的生成方法，其特征在于，包括：
对用户终端的页面加载请求进行解析，得到所述页面加载请求中的主题标识符和目标组件的组件类型，其中，所述主题标识符用于表示所述用户终端请求加载的目标页面的主题；
从组件库中选择出与所述目标组件的组件类型对应的库内组件；
根据所述主题标识符对应的目标样式变量集合和所述库内组件生成所述目标组件，其中，所述目标样式变量集合中的目标样式变量用于确定所述目标组件的样式属性。
2.根据权利要求1所述的目标组件的生成方法，其特征在于，对用户终端的页面加载请求进行解析，得到所述页面加载请求中的主题标识符和目标组件的组件类型，包括：
从所述用户终端的页面加载请求中获取所述用户终端的终端标识号和所述用户终端的主题标识符；
确定所述终端标识号和所述主题标识符之间的第一对应关系；
确定所述第一对应关系与预先设置的第二对应关系一致后，从所述页面加载请求中获取所述目标组件的组件类型。
3.根据权利要求1所述的目标组件的生成方法，其特征在于，所述方法还包括：
在所述目标组件的组件类型包括第一组件的情况下，确定所述组件库内的库内组件，包括：
获取所述组件库对应的组件样式变量集合，其中，所述组件样式变量集合至少包括所述目标样式变量集合；
从所述组件库中获取第一通用组件，根据所述组件样式变量集合中的第一样式变量和所述第一通用组件生成所述第一组件，其中，所述第一通用组件用于提供所述目标页面的单一展示功能；
将所述第一组件确定为所述库内组件。
4.根据权利要求3所述的目标组件的生成方法，其特征在于，所述方法还包括：
在所述目标组件的组件类型包括第二组件的情况下，从所述组件库中获取第二通用组件；
根据所述组件样式变量集合中的第二样式变量和所述第二通用组件生成所述第二组件，其中，所述第二通用组件用于提供所述目标页面的组合展示功能；
将所述第二组件确定为所述库内组件。
5.根据权利要求3所述的目标组件的生成方法，其特征在于，所述方法还包括：
在所述目标组件的组件类型包括第三组件的情况下，对于多个所述第一组件中的每一第一组件，确定所述每一第一组件的组件功能所对应的展示优先级，得到多个所述展示优先级；
对多个所述展示优先级进行比较，根据比较结果确定多个所述第一组件的组合顺序；
根据所述组合顺序对所述多个所述第一组件进行组合，得到所述第三组件；
将所述第三组件确定为所述库内组件。
6.根据权利要求1所述的目标组件的生成方法，其特征在于，根据所述主题标识符对应的目标样式变量集合和所述库内组件生成所述目标组件，包括：
获取用于生成所述库内组件的第四样式变量；
确定所述目标样式变量的第一变量类型和所述第四样式变量的第二变量类型；
在确定所述第一变量类型和所述第二变量类型一致的情况下，使用所述第一变量类型和所述库内组件生成第四组件，并将所述第四组件确定为所述目标组件。
7.根据权利要求1所述的目标组件的生成方法，其特征在于，在根据所述主题标识符对应的目标样式变量集合和所述库内组件生成所述目标组件之后，所述方法还包括：
确定所述目标组件对应的目标页面的页面展示信息；
将所述页面展示信息发送给所述用户终端，以使所述用户终端根据所述页面展示信息展示所述目标页面。
8.一种目标组件的生成装置，其特征在于，包括：
解析模块，用于对用户终端的页面加载请求进行解析，得到所述页面加载请求中的主题标识符和目标组件的组件类型，其中，所述主题标识符用于表示所述用户终端请求加载的目标页面的主题；
选择模块，用于从组件库中选择出与所述目标组件的组件类型对应的库内组件；
生成模块，用于根据所述主题标识符对应的目标样式变量集合和所述库内组件生成所述目标组件，其中，所述目标样式变量集合中的目标样式变量用于确定所述目标组件的样式属性。
9.一种计算机可读的存储介质，其特征在于，所述计算机可读的存储介质包括存储的程序，其中，所述程序运行时执行上述权利要求1至7任一项中所述的方法。
10.一种电子装置，包括存储器和处理器，其特征在于，所述存储器中存储有计算机程序，所述处理器被设置为通过所述计算机程序执行所述权利要求1至7任一项中所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211048964.4A CN115481343A (zh) | 2022-08-30 | 2022-08-30 | 目标组件的生成方法、装置、存储介质及电子装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211048964.4A CN115481343A (zh) | 2022-08-30 | 2022-08-30 | 目标组件的生成方法、装置、存储介质及电子装置 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115481343A true CN115481343A (zh) | 2022-12-16 |
Family
ID=84422675
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202211048964.4A Pending CN115481343A (zh) | 2022-08-30 | 2022-08-30 | 目标组件的生成方法、装置、存储介质及电子装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115481343A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116136759A (zh) * | 2023-04-03 | 2023-05-19 | 云粒智慧科技有限公司 | 可视化页面处理方法、装置、电子设备和存储介质 |
-
2022
- 2022-08-30 CN CN202211048964.4A patent/CN115481343A/zh active Pending
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116136759A (zh) * | 2023-04-03 | 2023-05-19 | 云粒智慧科技有限公司 | 可视化页面处理方法、装置、电子设备和存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN105354013B (zh) | 应用界面渲染方法及装置 | |
| US8839192B2 (en) | System and method for presentation of cross organizational applications | |
| CN106775836B (zh) | 界面显示方法及界面显示装置 | |
| CN111104635B (zh) | 一种表格网页的生成方法和装置 | |
| US20230308504A9 (en) | Method and system of application development for multiple device client platforms | |
| CN105335132B (zh) | 一种自定义应用程序功能的方法、装置以及系统 | |
| CN110297637B (zh) | 全平台客户端软件适用的资源文件热重载开发工具及方法 | |
| CN103425483A (zh) | 菜单的用户定制 | |
| CN111413876A (zh) | 一种配置app的控制页面的方法及云平台、终端设备 | |
| CN115481343A (zh) | 目标组件的生成方法、装置、存储介质及电子装置 | |
| CN115309516A (zh) | 一种应用生命周期的检测方法、装置及计算机设备 | |
| CN115687349A (zh) | 数据库表的生成方法及装置、存储介质及电子装置 | |
| CN112099782B (zh) | 一种游戏开发方法、装置、设备及存储介质 | |
| CN112558968B (zh) | 一种资源树视图的生成方法、装置、设备及存储介质 | |
| WO2024066825A1 (zh) | 页面项目开发方法、装置、设备、介质及产品 | |
| CN112068879A (zh) | 基于配置化的客户端应用程序开发框架构建方法及装置 | |
| CN110673879A (zh) | 组态软件的元件样式的一键调整方法及装置 | |
| CN115982493A (zh) | 页面跳转方法及装置、存储介质及电子装置 | |
| CN115576544A (zh) | 对象实例化的方法、装置、存储介质及电子装置 | |
| CN111124386B (zh) | 基于Unity的动画事件处理方法、装置、设备和存储介质 | |
| CN114025220A (zh) | 一种多版本iptv的控制系统及方法 | |
| CN115357299A (zh) | 详情页的生成方法和装置、存储介质及电子装置 | |
| CN111427645A (zh) | 一种基于h5的跨终端自适应显示的方法及装置 | |
| CN114124735B (zh) | 路由设计方法及电子设备 | |
| CN108804102B (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 |