一种用户界面的渲染方法及装置与流程

1.本技术涉及计算机技术领域，特别是涉及一种用户界面的渲染方法及装置。


背景技术：

2.用户界面是介于用户与硬件而设计彼此之间交互沟通相关软件，使得用户能够方便有效率地去操作硬件以达成双向之交互。现有技术中的用户界面的渲染方法存在前端开发基于npm(node package manager，node包管理器)、模块打包器webpack、web(world wide web，万维网)开发框架react或vue、es6(ecmascript 6)语法进行，入手门槛高、开发难度大、受前端技术更新影响大的技术问题。随着人们对用户界面的渲染方法的便捷要求越来越高，现有的用户界面的渲染方法及装置已经无法满足用户需求。


技术实现要素：

3.本技术实施例的目的在于提供一种用户界面的渲染方法及装置，解决了现有技术中存在前端用户界面开发复杂的技术问题。具体技术方案如下：
4.在本技术实施的第一方面，首先提供了一种用户界面的渲染方法，所述方法包括：基于js(javascript)对象简谱配置一个或多个根节点的数据域；其中，数据域用于表征用户界面的功能集合，数据域包括一个或多个数组，数据包括一个或多个对象；从一个或多个根节点的数据域中确定与目标变量对应的目标根节点，其中，目标根节点的目标数据域中的对象与目标变量对应；在目标根节点的路径信息与组件池中的组件检测信息匹配成功的情况下，基于与组件检测信息对应的组件对目标根节点进行渲染得到用户界面中的功能组件。
5.在本技术实施的第二方面，还提供了一种用户界面的渲染装置，所述装置包括：配置模块，用于基于js对象简谱配置一个或多个根节点的数据域；其中，数据域用于表征用户界面的功能集合，数据域包括一个或多个数组，数据包括一个或多个对象；确定模块，用于从一个或多个根节点的数据域中确定与目标变量对应的目标根节点，其中，目标根节点的目标数据域中的对象与目标变量对应；渲染模块，用于在目标根节点的路径信息与组件池中的组件检测信息匹配成功的情况下，基于与组件检测信息对应的组件对目标根节点进行渲染得到用户界面中的功能组件。
6.在本技术实施的第三方面，还提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有指令，当其在计算机上运行时，使得计算机执行上述任一所述的用户界面的渲染方法。
7.在本技术实施的第四方面，还提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述任一所述的用户界面的渲染方法。
8.本技术实施例提供的用户界面的渲染方法及装置，通过基于js对象简谱配置一个或多个根节点的数据域；其中，数据域用于表征用户界面的功能集合，数据域包括一个或多个数组，数据包括一个或多个对象；从一个或多个根节点的数据域中确定与目标变量对应
的目标根节点，其中，目标根节点的目标数据域中的对象与目标变量对应；在目标根节点的路径信息与组件池中的组件检测信息匹配成功的情况下，基于与组件检测信息对应的组件对目标根节点进行渲染得到用户界面中的功能组件；也就是说，通过json(javascript object notation,js对象简谱)对象结构化数据编码其配置通用化，相同的配置逻辑可以实现通用的功能，从而解决了现有技术中前端用户界面开发复杂的技术问题。
附图说明
9.为了更清楚地说明本技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍。
10.图1为本技术实施例中用户界面的渲染方法流程图之一；
11.图2为本技术实施例中用户界面的渲染方法流程图之二；
12.图3为本技术实施例中用户界面的渲染方法一示范例的用户界面图；
13.图4为本技术实施例中用户界面的渲染装置结构示意图之一；
14.图5为本技术实施例中用户界面的渲染装置结构示意图之二；
15.图6为本技术实施例中电子设备的结构示意图。
具体实施方式
16.为使本技术实施例的目的、技术方案和优点更加清楚，下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述地实施例是本技术的一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本技术保护的范围。
17.在后续的描述中，使用用于表示元件的诸如“模块”、“单元”的后缀仅为了有利于本技术的说明，其本身并没有特定的意义。因此，“模块”与“部件”可以混合地使用。
18.下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行描述。本技术实施例提供了一种用户界面的渲染方法，如图1所示，该方法包括以下步骤：
19.步骤102:基于js对象简谱配置一个或多个根节点的数据域；其中，数据域用于表征用户界面的功能集合，数据域包括一个或多个数组，数据包括一个或多个对象；
20.其中，需要说明的是，每一个对象具有对应的属性值，根据根节点属性值的不同可以渲染出不同的页面内容；在一示范例中，对象“name(名称)”的属性值为“默认”；在另一示范例中，对象“value(值)”的属性值为“22”。
21.步骤104:从一个或多个根节点的数据域中确定与目标变量对应的目标根节点，其中，目标根节点的目标数据域中的对象与目标变量对应；
22.其中，需要说明的是，根据目标变量确定目标根节点，即根据对象确定目标根节点；在一示范例中，根据对象“name”确定目标根节点。
23.步骤106:在目标根节点的路径信息与组件池中的组件检测信息匹配成功的情况下，基于与组件检测信息对应的组件对目标根节点进行渲染得到用户界面中的功能组件。
24.通过本技术实施例的上述步骤102至步骤106，基于js对象简谱配置一个或多个根节点的数据域；其中，数据域用于表征用户界面的功能集合，数据域包括一个或多个数组，数据包括一个或多个对象；从一个或多个根节点的数据域中确定与目标变量对应的目标根
节点，其中，目标根节点的目标数据域中的对象与目标变量对应；在目标根节点的路径信息与组件池中的组件检测信息匹配成功的情况下，基于与组件检测信息对应的组件对目标根节点进行渲染得到用户界面中的功能组件；也就是说，在本技术实施例中，通过json对象结构化数据编码其配置通用化，相同的配置逻辑可以实现通用的功能，从而解决了现有技术中前端用户界面开发复杂的技术问题。
25.在本技术实施例的可选实施方式中，本技术步骤104中涉及到的从一个或多个根节点的数据域中确定与目标变量对应的目标根节点，如图2所示，包括：
26.步骤202：确定当前数据域是否存在与目标变量对应的对象；
27.步骤204：在当前数据域存在与目标变量对应的对象的情况下，基于数据映射的方式获取与目标变量对应的对象；
28.步骤206：在当前数据域不存在与目标变量对应的对象的情况下，向当前数据域的根节点的数据域中查找与目标变量对应的对象。
29.其中,需要说明的是，在一示范例中，根据与目标变量对应的对象“name”确定目标根节点，在当前数据域存在“name”的情况下，通过数据映射的方式将“name”对应的属性值进行反馈；在当前数据域不存在“name”的情况下，在根节点的其它数据域中查找对象“name”。可见，根据与目标变量对应的对象即可确定目标根节点，确定方式简单且效率高。
30.在本技术实施例的可选实施方式中，本技术步骤106中涉及到的基于与组件检测信息对应的组件对目标根节点进行渲染得到用户界面中的功能组件，包括：
31.在与组件检测信息对应的组件为容器组件的情况下，基于根节点的数据域的属性中render函数进行渲染；其中，render函数用于匹配根节点的子节点的路径信息与对应的组件。
32.其中，需要说明的是，在一示范例中，与组件检测信息对应的组件为容器组件page组件(分页组件)，从属性(props)中获取的html(hyper text markup language，超文本标记语言)网页的主体部分(body)是一个子节点，由于节点类型不固定，根据使用者定义决定，因此需要由属性线下发的render函数完成渲染，{render('body',body)}；属性是可以在组件上注册的自定义属性attribute；在一个特定值传递给一个prop attribute(属性)的情况下，该特定值成为组件实例的property(属性)；在需要向博文组件传递一个标题的情况下，可以用一个属性选项将标题加入该组件可接受的属性列表中。可见，在与组件检测信息对应的组件为容器组件的情况下，本技术实施例所提供的用户界面的渲染方法的实现方式简单且效率较高，前端开发难度低。
33.在本技术实施例的可选实施方式中，本技术步骤102中涉及到的基于js对象简谱配置一个或多个根节点的数据域，包括：
34.在web端客户端基于js对象简谱配置一个或多个根节点的数据域。
35.其中，需要说明的是，web端客户端是指web浏览器，包括：微软公司的ie(internet explorer)、谋智公司的火狐浏览器、苹果公司的safari、谷歌公司的chrome及欧朋软件公司的欧朋浏览器；浏览器的主要组件包括用户界面(user interface)、浏览器引擎(browser engine)、渲染引擎(rendering engine)、网络(networking)、ui后端(ui backend)、js解释器(javascript)、数据存储(data persistence)。
36.可见，本技术实施例所提供的用户界面的渲染方法可以基于多种web浏览器进行，
获取方便、效率较高。
37.在本技术实施例的可选实施方式中，本技术步骤106之后，进一步可以包括：将目标根节点中未匹配的属性作为其他组件的props，其中，props子组件访问父组件数据的接口。
38.其中，需要说明的是，父组件通过属性props向下传递数据给子组件；props是子组件访问父组件数据的唯一接口。
39.在本技术实施例所提供的用户界面的渲染方法的一个示范例中，用户界面经过渲染后，如下图3所示，可以对空调进行开关、模式选择、风速风向设置、定时。
40.通过本技术实施例，插件可以通过运用json结构化配置，从json文件里获取需要的值，由数据域组合形成数据链，把控制逻辑渲染到ui页面上实现快速开发，通过菜单式的功能选择实现快捷化开发；配置通用化，相同的配置逻辑可以实现通用的功能；形成统一的ui(user interface，用户界面)展示风格，保证项目风格的独特性，具有高辨识度。
41.本技术实施例提供了一种用户界面的渲染装置，如图4所示，该装置包括：
42.配置模块42：用于基于js对象简谱配置一个或多个根节点的数据域；其中，数据域用于表征用户界面的功能集合，数据域包括一个或多个数组，数据包括一个或多个对象；
43.确定模块44：用于从一个或多个根节点的数据域中确定与目标变量对应的目标根节点，其中，目标根节点的目标数据域中的对象与目标变量对应；
44.渲染模块46：用于在目标根节点的路径信息与组件池中的组件检测信息匹配成功的情况下，基于与组件检测信息对应的组件对目标根节点进行渲染得到用户界面中的功能组件。
45.通过本技术实施例提供的用户界面的渲染装置，配置模块，用于基于js对象简谱配置一个或多个根节点的数据域；其中，数据域用于表征用户界面的功能集合，数据域包括一个或多个数组，数据包括一个或多个对象；确定模块，用于从一个或多个根节点的数据域中确定与目标变量对应的目标根节点，其中，目标根节点的目标数据域中的对象与目标变量对应；渲染模块，用于在目标根节点的路径信息与组件池中的组件检测信息匹配成功的情况下，基于与组件检测信息对应的组件对目标根节点进行渲染得到用户界面中的功能组件；也就是说，在本技术实施例中，通过json对象结构化数据编码其配置通用化，相同的配置逻辑可以实现通用的功能，从而解决了现有技术中前端用户界面开发复杂的技术问题。
46.在本技术实施例的可选实施方式中，本技术实施例提供的确定模块44，如图5所示，包括：
47.确定单元52，用于确定当前数据域是否存在与目标变量对应的对象；
48.获取单元54，用于在当前数据域存在与目标变量对应的对象的情况下，基于数据映射的方式获取与目标变量对应的对象；
49.查找单元56，用于在当前数据域不存在与目标变量对应的对象的情况下，向当前数据域的根节点的数据域中查找与目标变量对应的对象。
50.在本技术实施例的可选实施方式中，本技术实施例提供的渲染模块46，包括：
51.渲染单元，用于在与组件检测信息对应的组件为容器组件的情况下，基于根节点的数据域的属性中render函数进行渲染；其中，render函数用于匹配根节点的子节点的路径信息与对应的组件。
52.在本技术实施例的可选实施方式中，本技术实施例提供的配置模块42，包括：在web端客户端基于js对象简谱配置一个或多个根节点的数据域。
53.在本技术实施例的可选实施方式中，本技术实施例提供的用户界面的渲染装置，包括：处理模块，用于将目标根节点中未匹配的属性作为其他组件的props，其中，props子组件访问父组件数据的接口。
54.本技术实施例还提供了一种电子设备，如图6所示，包括处理器601、通信接口602、存储器603和通信总线604，其中，处理器601，通信接口602，存储器603通过通信总线604完成相互间的通信，
55.存储器603，用于存放计算机程序；
56.处理器601，用于执行存储器603上所存放的程序时，实现图1中的方法步骤，其所起到的作用与图1中的方法步骤一样，在此不再赘述。。
57.上述终端提到的通信总线可以是外设部件互连标准(peripheral component interconnect，简称pci)总线或扩展工业标准结构(extended industry standard architecture，简称eisa)总线等。该通信总线可以分为地址总线、数据总线、控制总线等。为便于表示，图6中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。
58.通信接口用于上述终端与其他设备之间的通信。
59.存储器可以包括随机存取存储器(random access memory，简称ram)，也可以包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器。可选的，存储器还可以是至少一个位于远离前述处理器的存储装置。
60.上述的处理器可以是通用处理器，包括中央处理器(central processing unit，简称cpu)、网络处理器(network processor，简称np)等；还可以是数字信号处理器(digital signal processing，简称dsp)、专用集成电路(application specific integrated circuit，简称asic)、现场可编程门阵列(field－programmable gate array，简称fpga)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。
61.在本技术提供的又一实施例中，还提供了一种计算机可读存储介质，该计算机可读存储介质中存储有指令，当其在计算机上运行时，使得计算机执行上述实施例中任一所述的用户界面的渲染方法。
62.在本技术提供的又一实施例中，还提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述实施例中任一所述的用户界面的渲染方法。
63.在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时，全部或部分地产生按照本技术实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(dsl))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以
是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，dvd)、或者半导体介质(例如固态硬盘solid state disk(ssd))等。
64.需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
65.本说明书中的各个实施例均采用相关的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
66.以上所述仅为本技术的较佳实施例而已，并非用于限定本技术的保护范围。凡在本技术的精神和原则之内所作的任何修改、等同替换、改进等，均包含在本技术的保护范围内。

技术特征：
1.一种用户界面的渲染方法，其特征在于，包括：基于js对象简谱配置一个或多个根节点的数据域；其中，所述数据域用于表征所述用户界面的功能集合，所述数据域包括一个或多个数组，所述数据包括一个或多个对象；从所述一个或多个根节点的数据域中确定与目标变量对应的目标根节点，其中，所述目标根节点的目标数据域中的对象与所述目标变量对应；在所述目标根节点的路径信息与组件池中的组件检测信息匹配成功的情况下，基于与所述组件检测信息对应的组件对所述目标根节点进行渲染得到所述用户界面中的功能组件。2.根据权利要求1所述的方法，其特征在于，所述从所述一个或多个根节点的数据域中确定与目标变量对应的根节点，包括：确定当前数据域是否存在与所述目标变量对应的对象；在所述当前数据域存在与所述目标变量对应的对象的情况下，基于数据映射的方式获取与所述目标变量对应的对象；在所述当前数据域不存在与所述目标变量对应的对象的情况下，向所述当前数据域的根节点的数据域中查找与所述目标变量对应的对象。3.根据权利要求1所述的方法，其特征在于，基于与所述组件检测信息对应的组件对所述目标根节点进行渲染得到所述用户界面中的功能组件包括：在与所述组件检测信息对应的组件为容器组件的情况下，基于所述根节点的数据域的属性中render函数进行渲染；其中，所述render函数用于匹配所述根节点的子节点的路径信息与对应的组件。4.根据权利要求1所述的方法，其特征在于，所述基于js对象简谱配置一个或多个根节点的数据域包括：在web端客户端基于js对象简谱配置一个或多个根节点的数据域。5.根据权利要求1所述的方法，其特征在于，在基于与所述组件检测信息对应的组件对所述目标根节点进行渲染得到所述用户界面中的功能组件之后，所述方法还包括：将所述目标根节点中未匹配的属性作为其他组件的props，其中，所述props子组件访问父组件数据的接口。6.一种用户界面的渲染装置，其特征在于，包括：配置模块，用于基于js对象简谱配置一个或多个根节点的数据域；其中，所述数据域用于表征所述用户界面的功能集合，所述数据域包括一个或多个数组，所述数据包括一个或多个对象；确定模块，用于从所述一个或多个根节点的数据域中确定与目标变量对应的目标根节点，其中，所述目标根节点的目标数据域中的对象与所述目标变量对应；渲染模块，用于在所述目标根节点的路径信息与组件池中的组件检测信息匹配成功的情况下，基于与所述组件检测信息对应的组件对所述目标根节点进行渲染得到所述用户界面中的功能组件。7.根据权利要求6所述的装置，其特征在于，所述确定模块包括：确定单元，用于确定当前数据域是否存在与所述目标变量对应的对象；获取单元，用于在所述当前数据域存在与所述目标变量对应的对象的情况下，基于数
据映射的方式获取与所述目标变量对应的对象；查找单元，用于在所述当前数据域不存在与所述目标变量对应的对象的情况下，向所述当前数据域的根节点的数据域中查找与所述目标变量对应的对象。8.根据权利要求6所述的装置，其特征在于，所述渲染模块包括：渲染单元，用于在与所述组件检测信息对应的组件为容器组件的情况下，基于所述根节点的数据域的属性中render函数进行渲染；其中，所述render函数用于匹配所述根节点的子节点的路径信息与对应的组件。9.一种电子设备，其特征在于，包括处理器、通信接口、存储器和通信总线，其中，处理器，通信接口，存储器通过通信总线完成相互间的通信；存储器，用于存放计算机程序；处理器，用于执行存储器上所存放的程序时，实现权利要求1-5任一所述的方法步骤。10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-5中任一所述的方法。

技术总结
本申请提供了一种用户界面的渲染方法及装置，其中，该方法包括：基于JS对象简谱配置一个或多个根节点的数据域；从一个或多个根节点的数据域中确定与目标变量对应的目标根节点，其中，目标根节点的目标数据域中的对象与目标变量对应；在目标根节点的路径信息与组件池中的组件检测信息匹配成功的情况下，基于与组件检测信息对应的组件对目标根节点进行渲染得到用户界面中的功能组件。通过本申请，解决了现有技术中前端用户界面开发复杂的技术问题。现有技术中前端用户界面开发复杂的技术问题。现有技术中前端用户界面开发复杂的技术问题。


技术研发人员：王灿良 张军 黄子勋 宋德超 张昌文
受保护的技术使用者：珠海联云科技有限公司
技术研发日：2021.12.03
技术公布日：2022/3/8