本发明涉及计算机技术领域，尤其涉及一种界面图标配置方法、装置、计算机设备及存储介质。
背景技术：
为了便于用户操作，当前浏览器的应用界面或各种app的应用界面均配置有图标，用户点击任一图标即可实现相应的操作。当前应用界面上配置的图标通常是采用直接导入png图片或者gif图片的方式配置，这种方式配置出来的应用界面上的图标只能匹配同一尺寸的界面，无法实现自动匹配。即在不同尺寸的应用界面上需分别导入大小相匹配的png图片或者gif图片，无法实现兼容，从而增加额外的图片请求，影响应用界面的配置效率。而且，该应用界面在适配不同终端时，需要将应用界面修改成对应的尺寸，此时需对应用界面上的图标进行相应的修改，从而影响系统性能，并且增加修改维护成本。
技术实现要素：
本发明实施例提供一种界面图标配置方法、装置、计算机设备及存储介质，以解决当前应用界面上创建图标时，直接导入图片会增加额外图片请求而影响系统性能的问题。
第一方面，本发明实施例提供一种界面图标配置方法，包括：
显示待配置界面，所述待配置界面包括至少一个待配置区域；
获取图标配置请求，所述图标配置请求包括图标id和区域id；
基于所述图标id，运行采用css3的box-shadow属性配置的与所述图标id相对应的图标创建代码，基于所述图标创建代码获取目标图标；
基于所述区域id，在待配置界面上获取与所述区域id对应的目标区域；
在所述目标区域上显示所述目标图标。
第二方面，本发明实施例提供一种界面图标配置装置，包括：
配置界面显示模块，用于显示待配置界面，所述待配置界面包括至少一个待配置区域；
配置请求获取模块，用于获取图标配置请求，所述图标配置请求包括图标id和区域id；
目标图标获取模块，用于基于所述图标id，运行采用css3的box-shadow属性配置的与所述图标id相对应的图标创建代码，基于所述图标创建代码获取目标图标；
目标区域获取模块，用于基于所述区域id，在待配置界面上获取与所述区域id对应的目标区域；
目标图标显示模块，用于在所述目标区域上显示所述目标图标。
第三方面，本发明实施例提供一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现所述界面图标配置方法的步骤。
第四方面，本发明实施例提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现所述界面图标配置方法的步骤。
本实施例提供的界面图标配置方法、装置、计算机设备及存储介质中，根据获取到的图标配置请求中的区域id与图标id，运行采用css3的box-shadow属性配置的与图标id相对应的图标创建代码，以获取得到目标图标，可根据图标id采用代码方式获取对应的目标图标，有利于减少界面图标的开发配置成本，提高目标图标的配置效率。同时根据区域id，在待配置界面上获取与区域id对应的目标区域，并在目标区域上显示该目标图标，以完成界面图标的配置。该界面图标配置方法、装置、计算机设备及存储介质中，通过纯css3代码实现了界面图标的配置，加快图标配置效率，并提高系统响应时间，而且，由于css3可应用在不同系统，使得采用css3的box-shadow属性配置的目标图标可应用在不同系统上，兼容性强。
附图说明
为了更清楚地说明本发明实施例的技术方案，下面将对本发明实施例的描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1是本发明实施例1中提供的界面图标配置方法的一流程图。
图2是图1中步骤s30的一具体示意图。
图3是图1中步骤s50的一具体示意图。
图4是图3中步骤s52的一具体示意图。
图5是本发明实施例1中提供的界面图标配置方法的另一流程图。
图6是本发明实施例2中提供的界面图标配置装置的一示意图。
图7是本发明实施例4中计算机设备的一示意图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
实施例1
图1示出本实施例中界面图标配置方法的一流程图。该界面图标配置方法应用在计算机设备上，用于实现对计算机设备的网页界面或者对安装在计算机设备上的app的界面进行界面图标配置，旨在方便用户进行操作，提升用户体验感。其中，该计算机设备是可与用户进行人机交互的设备，包括但不限于电脑、智能手机和平板等设备。如图1所示，该界面图标配置方法包括如下步骤：
s10：显示待配置界面，待配置界面包括至少一个待配置区域。
待配置界面是指需要进行图标配置的界面。待配置区域是指待配置界面需要显示图标或者界面内容的区域。例如，可在720px×1280px的待配置界面中可配置大小参数为300px×400px的待配置区域。本实施例中，通过显示待配置界面，该待配置界面中的每一待配置区域上均可配置填充相应的图标或界面内容，在将所有待配置区域填充完成后形成的界面，即为相应的网页或app最终要显示在计算机设备上的界面。
s20：获取图标配置请求，图标配置请求包括图标id和区域id。
图标配置请求是用于在待配置界面中特定的待配置区域上配置特定的图标的配置请求。其中，特定的待配置区域由图标配置请求中的区域id确定。而特定的图标由图标配置请求中的图标id确定。
其中，图标id是用于识别图标的标识，每一图标id对应一图标。该图标可以是一些规则图标，也可以是不规则图标。其中，规则图标可以是对一些图标元素(如三角形、正方形和图形)按预设的元素组合规则进行组合形成的图标。不规则图标是指不能采用元素组合规则对图标元素进行组合形成的图标。
其中，区域id是用于识别待配置界面上的不同待配置区域的标识，每个区域id对应一待配置区域，以便于通过区域id快速查找到待配置界面上对应的待配置区域。本实施例中，可通过设置待配置区域中一个端点或中心点的坐标来确定待配置区域的位置，如将该待配置区域的左上角一个端点的坐标作为其位置参数，从而在待配置界面上界定出一待配置区域，并使每一待配置区域对应一区域id。
具体地，服务器可以获取到客户端发送的图标配置请求，图标配置请求是使用该客户端的开发人员基于实际开发需求，确定所需要显示界面的图标后，通过客户端向服务器发送的图标配置请求，该图标配置请求中携带图标id和区域id，以便基于该图标配置请求，在区域id对应的待配置区域上显示图标id对应的图标。
s30：基于图标id，运行采用css3的box-shadow属性配置的与图标id相对应的图标创建代码，基于图标创建代码获取目标图标。
其中，目标图标是指采用css3技术获取到的与图标id相对应的图标。
css3是css技术的升级版本，css即层叠样式表(cascadingstylesheet)，在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制，同时也加入了一些新的标签功能，使网页视觉呈现方面更良好，主要是视觉的渲染。在css中，只要对相应的代码进行修改，就可以改变同一页面的相应部分，或者修改数量不同的页面的外观和/或格式。与css相比，css3不仅有利于开发与维护，而且能提高页面所在网站的性能，增加网站的可访问性和可用性，使网站能适配更多的设备，甚至还可以优化网站seo，提高网站的搜索排名结果。采用css3配置的图标创建代码，可在ios系统和android系统上应用，兼容性强。
box-shadow属性是指向框内添加一个或多个阴影，具有叠加性，其效果的本质实际上是对图片本身的复制，并基于复制形成新的图片。例如实现一个五角星的规则图标，我们可以通过引入一张图片，例如五角星的一个角，用box-shadow属性复制出五个角，拼接成五角星；或者五角星的一个角可以用纯css3实现，然后用box-shadow属性复制出五个角，进而拼接成五角星。
本实施例中，预先采用css3的box-shadow属性配置出若干图标创建代码，该图标创建代码存储在数据库中，每一图标创建代码与图标id相对应。在获取到图标配置请求之后，可根据该图标配置请求中的图标id调用对应的图标创建代码，并运行该图标创建代码，即可获取需要显示的目标图标。
s40：基于区域id，在待配置界面上获取与区域id对应的目标区域。
其中，目标区域是需要显示目标图标的区域。在待配置界面上配置有至少一个待配置区域，给每一待配置区域设定唯一区域id，通过图标配置请求中的区域id确认图标要显示的待配置区域。例如，在一“58”app界面上，以app左上角为原点，大小参数为300px×400px的待配置区域对应的区域id为a01，若图标配置请求中携带的区域id为a01，则a01对应的待配置区域即为目标区域。
s50：在目标区域上显示目标图标。
将目标图标显示在待配置界面的目标区域上，该目标区域是待配置区域中的一个。可以理解地，计算机设备上显示的待配置界面配置有至少一个待配置区域，可采用步骤s20-s40分别给每一待配置区域配置相应的目标图标，以完成界面配置过程。进一步地，每一目标图标配置有用于实现该目标图标所要实现的功能的代码链接，以使配置完成的界面应用在计算机设备上时，用户可通过点击该目标图标即可跳转到对应的代码链接，以使进入用户想要浏览的页面，方便用户操作，提升了用户体验感受。
本实施例提供的界面图标配置方法中，根据获取到的图标配置请求中的区域id与图标id，运行采用css3的box-shadow属性配置的与图标id相对应的图标创建代码，以获取得到目标图标，可根据图标id采用代码方式获取对应的目标图标，有利于减少界面图标的开发配置成本，提高目标图标的配置效率。同时根据区域id，在待配置界面上获取与区域id对应的目标区域，并在目标区域上显示该目标图标，以完成界面图标的配置。该界面图标配置方法中，通过纯css3代码实现了界面图标的配置，提高了图标配置效率，并加快了系统响应时间，而且，由于css3可应用在不同系统，使得采用css3的box-shadow属性配置的目标图标可应用在不同系统(如ios系统或android系统)上，兼容性强，避免直接导入图片而导致的在配置图标过程中存在的兼容性问题。
在一具体实施方式中，如图2所示，步骤s30中，基于图标创建代码获取目标图标，具体包括如下步骤：
s31：基于图标创建代码获取至少一种图标元素。
具体地，图标创建代码是预先采用css3的box-shadow属性配置出的用于创建图标的代码，该图标创建代码与图标id相关联，每一图标代建代码用于创建与图标id相对应的图标。具体地，步骤s31中，通过图标创建代码获取图标id对应的目标图标所包含的至少一种图标元素。
其中，图标元素为预设的组成图标的最小单元。
s32：采用图标创建代码中预先设置的图标元素组合规则对至少一种图标元素进行组合，获取目标图标。
其中，图标元素组合规则是指将至少一种图标元素按照他们之间的摆放角度、位置分布及连接关系来进行排列组合的规则。
例如，在一具体实施方式中，获取到的图标元素有两种，分别是矩形和圆形，预先设置的图标元素组合规则为：在半径为5的圆上，均匀分布8个长度为4、宽度为1的矩形，其中，矩形的任意一边的宽与圆的圆周相连，基于上述规则，生成了一个形状为
本实施例中，通过获取与图标id对应的至少一种图标元素，并采用图标创建代码中预先设置的图标元素组合规则对这些图标元素进行组合，得到目标图标，使得目标图标可以通过将获取的图标元素进行组合的方式生成，无需导入png图片或者gif图片等图标，以减少额外的图片请求，从而缩短了目标图标的获取时间，提高了服务器的响应速度，提升了用户体验。具体地，通过运行采用css3的box-shadow属性配置的与图标id相对应的图标创建代码，采用内置的图标元素组合规则对至少一个图标元素进行组合形成的目标图标，可应用在ios系统或android系统，兼容性强。
在一具体实施方式中，如图3所示，步骤s50，即在目标区域上显示目标图标，具体包括如下步骤：
s51：获取目标区域的区域参数。
区域参数是指任一目标区域在待配置界面的位置参数和大小参数，区域参数依据实际要显示待配置区域而定，以确定图标要显示的待配置区域的位置和大小。如可在720px×1280px的待配置界面中可配置大小参数为300px×400px的待配置区域，可将待配置区域中一个端点或中心点的坐标作为其位置参数，以确定待配置区域的位置。例如，可将该待配置区域的左上角一个端点的坐标作为其位置参数，从而在待配置界面上界定出一待配置区域。设该待配置区域拥有一个唯一的区域id为qy10，该待配置区域在待配置界面的位置坐标为(20,20)，则区域id为qy10的待配置区域的区域参数中位置参数为坐标(20,20)，大小参数为300px×400px。
s52：采用区域参数对目标图标进行适配调整，获取适配后的目标图标。
适配调整是指对目标图标的位置和尺寸进行修改和调整，以适应待配置界面尺寸发生变化带来图标显示错乱或者显示不全的情况。如果不做适配调整，在界面初始化完毕后，目标图标会遮挡待配置界面上其他待配置区域上显示的内容或者在待配置界面上对应的待配置区域上显示的目标图标会出现空白部分，影响界面效果。
区域参数是指目标区域对应的位置参数和大小参数。步骤s30中基于图标创建代码获取的目标图标具有对应的位置参数和大小参数这两个图标参数。步骤s52中，通过获取目标区域的大小参数与目标图标的大小参数，计算两者的适配比例，并基于该适配比例进行相应的放大或缩小处理，以获取适配后的目标图标。具体地，通过对区域参数和图标参数进行计算，可以得到适配前后的图标比例，图标是通过图标创建代码进行创建，因而在给定了区域参数后，只需通过css3中内置的代码调整函数调整图标参数中的大小参数的属性值即可实现对目标图标的自动适配。
s53：在待配置界面的目标区域上显示适配后的目标图标。
将适配后的目标图标显示在待配置界面的目标区域上，以使适配后的目标图标的图标参数与目标区域的区域参数相匹配，避免因目标图标显示过大或过小的情况，保证界面效果。本实施例中，将区域参数的位置参数通过参数传递方式传送给目标图标的位置参数，即通过css3中内置的代码调整函数调整图标参数中的位置参数的属性值即可实现将适配后的目标图标显示在目标区域上。
本实施例中，通过获取目标区域的区域参数和图标参数，并将区域参数和图标参数通过代码对目标图标进行适配调整，获取适配后的目标图标，在整个过程中，仅需根据已经生成的目标图标，按照相应尺寸进行适配即可得到适配后的目标图标，无需再次发送获取不同尺寸的图标请求，减少发送请求次数，也无需接收额外的图标文件，缩短了响应时间，提升了用户体验。
在一具体实施方式中，如图4所示，步骤s52中，采用区域参数对目标图标进行适配调整，获取适配后的目标图标，具体包括如下步骤：
s521：获取与图标id相对应的参数调整函数，参数调整函数包括与目标图标相对应的形式参数。
参数调整函数是指用于对与图标id相对应的目标图标进行调整的函数。形式参数是用来接收在调用参数调整函数时传入的参数。
例如，参数调整函数可表示为：rule(intsize,intposition(x,y))，其中，rule为参数调整函数的函数名，size和position(x,y)为该参数调整函数的形式参数。
s522：将区域参数作为实际参数传递参数调整函数，参数调整函数基于实际参数进行适配调整，获取适配后的目标图标。
在一具体实施方式中，将待配置界面的区域id对应的区域参数作为实际参数传递给参数调整函数中的形式参数，以将该区域参数传递到参数调整函数中，参数调整函数基于该区域参数与预先存储的图标参数，计算两者的比例作为适配比例，并根据适配比例对图标id对应的目标图标进行适配调整，得到适配后的目标图标。
具体地，区域参数包括目标区域对应的大小参数为长度l1×宽度w1，图标参数包括目标图标对应大小参数分别为长度l2×宽度w2,对区域参数和图标参数中的长度和宽度计算比例，分别为：
a＝l1/l2
b＝w1/w2
其中a为区域参数与图标参数的长度比例，b为区域参数与图标参数的宽度比例，取a、b中最小数值者作为适配比例k。
进一步地，将图标参数的长度l2和宽度w2乘以适配比例k，得到适配后的目标图标的大小参数分别为：长度l2×k、宽度w2×k，基于图标创建代码生成该大小参数的适配后的目标图标。
例如，待配置界面的区域id对应的区域参数的大小参数为300px×400px，而图标id对应的目标图标的大小参数为150px×100px，通过计算得到a的值为2，b的值为4。可以理解地，适配比例k取值为a的值，进一步地，计算出适配后的目标图标的大小参数为：300px×200px，使用图标创建代码将目标图标转化成大小参数为300px×200px的图标，即得到适配后的目标图标。
本实施例中，通过获取与图标id相对应的参数调整函数后，将待配置界面的区域id对应的区域参数作为实际参数传递给参数调整函数中的形式参数，以将该区域参数传递到参数调整函数中，基于参数调整函数进行适配调整，获取适配后的目标图标，整个过程不需要引入与适配后的目标图标相同的图标，减少额外的图片请求，加快了图标的加载速度，提高了适配效率。
在一具体实施方式中，如图5所示，在步骤s50之后，即在目标区域上显示目标图标的步骤之后，该界面图标配置方法还包括：
s61：获取效果配置请求，效果配置请求包括目标图标id和效果id。
效果配置请求是用于在待配置界面中给特定的目标图标配置特定效果的配置请求。其中，特定的目标图标由效果配置请求中的目标图标id确定，而特定效果由效果配置请求中的效果id确定。
其中，效果id是用于识别目标图标在待配置界面上显示动态效果的标识。特定效果是指目标图标在待配置界面上显示的动态效果，包括但不限于加载效果、无限旋转、正向播放和反向播放等效果，能够给用户带来美感并且具有直观性。例如，“加载效果”能够直观地反映正在加载的页面的加载进程。
s62：基于效果id，获取采用css3的animation属性配置的与效果id相对应的效果处理代码。
animation属性用于在css3中用于将动画与div元素进行绑定，具体来说，animation属性在不需要触发任何事件的情况下可以随着时间变化来改变元素css3的属性值，从而达到一种动画的效果。这样就可以直接在一个元素中调用animation的动画属性,基于这一点，css3的animation属性就需要明确的动画属性值，采用css3中的animation属性进行设置并调用事先基于@keyframes规则定义的目标图标各阶段的状态，通过animation属性使@keyframes规则定义的目标图标各阶段的状态动态的流畅显示。
本实施例中，获取到效果id后，明确了目标图标显示的动态效果，然后获取采用css3的animation属性配置的与效果id相对应的效果处理代码，并运行该效果处理代码后，在待配置界面上显示特定效果。只需依据效果id改变css3的animation属性值，就能够实现特定效果，提高了目标图标的渲染能力。
具体地，预先采用css3的animation属性配置出若干效果处理代码，该效果处理代码存储在数据库中，每一效果处理代码与效果id相对应。在获取到效果配置请求之后，可根据该效果配置请求中的效果id调用对应的效果处理代码，并运行该效果处理代码，即可获取目标图标需要显示的特定效果。
s63：采用效果处理代码对与目标图标id相对应的目标图标进行处理，在目标区域上显示目标图标的特定效果。
获取效果处理代码后，通过对目标图标id相对应的目标图标进行处理，以使待配置界面上的目标图标调用效果处理代码，从而在目标图标所在区域上显示与效果处理代码对应的特定效果，以实现在待配置界面的目标区域上显示具有特定效果的目标图标。
在本实施例中，通过获取效果配置请求中的目标图标id和效果id后，基于上述animation属性生成与效果id对应的效果处理代码，并且效果处理代码对与目标图标id相对应的目标图标进行处理，在与区域id对应的待配置界面上显示目标图标的特定效果，整个实现过程没有额外图片请求，降低了维护和开发成本，缩短了响应时间。
应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本发明实施例的实施过程构成任何限定。
实施例2
图6示出与实施例1中界面图标配置方法一一对应的界面图标配置装置的原理框图。如图6所示，该界面图标配置装置包括配置界面显示模块10、配置请求获取模块20、目标图标获取模块30、目标区域获取模块40和目标图标显示模块50。其中，配置界面显示模块10、配置请求获取模块20、目标图标获取模块30、目标区域获取模块40和目标图标显示模块50的实现功能与实施例1中界面图标配置方法对应的步骤一一对应，为避免赘述，本实施例不一一详述。
配置界面显示模块10，用于显示待配置界面，待配置界面包括至少一个待配置区域。
配置请求获取模块20，用于获取图标配置请求，图标配置请求包括图标id和区域id。
目标图标获取模块30，用于基于图标id，运行采用css3的box-shadow属性配置的与图标id相对应的图标创建代码，基于图标创建代码获取目标图标。
目标区域获取模块40，用于基于区域id，在待配置界面上获取与区域id对应的目标区域。
目标图标显示模块50，用于在目标区域上显示目标图标。
优选地，目标图标获取模块30，具体包括图标元素获取单元31和目标图标获取单元32。
图标元素获取单元31，用于基于图标创建代码获取至少一种图标元素；
目标图标获取单元32，用于采用图标创建代码中预先设置的元素组合规则对至少一种图标元素进行组合，获取目标图标。
优选地，目标图标显示模块50，具体包括区域参数获取单元51、目标图标适配单元52和目标图标显示单元53。
区域参数获取单元51，用于获取目标区域的区域参数。
目标图标适配单元52，用于采用区域参数对目标图标进行适配调整，获取适配后的目标图标。
目标图标显示单元53，用于在待配置界面的目标区域上显示适配后的目标图标。
具体地，目标图标适配单元52具体包括调整函数获取子单元521和目标图标获取子单元522。
调整函数获取子单元521，用于获取与图标id相对应的参数调整函数，参数调整函数包括与目标图标相对应的形式参数。
目标图标获取子单元522，用于将区域参数作为实际参数传递参数调整函数，参数调整函数基于实际参数进行适配调整，获取适配后的目标图标。优选地，该界面图标配置装置具体还包括效果配置请求获取单元61、处理代码获取单元62和特定效果显示单元63。
效果配置请求获取单元61，用于获取效果配置请求，效果配置请求包括目标图标id和效果id。
处理代码获取单元62，用于基于效果id，获取采用css3的animation属性配置的与效果id相对应的效果处理代码。
特定效果显示单元63，用于采用效果处理代码对与目标图标id相对应的目标图标进行处理，在目标区域上显示目标图标的特定效果。
实施例3
本实施例提供一计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器执行时实现实施例1中界面图标配置方法，为避免重复，这里不再赘述。或者，该计算机程序被处理器执行时实现实施例2中界面图标配置装置中各模块/单元的功能，为避免重复，这里不再赘述。
可以理解地，所述计算机可读存储介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、u盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(rom，read-onlymemory)、随机存取存储器(ram，randomaccessmemory)、电载波信号和电信信号等。
实施例4
图7是本实施例中计算机设备的示意图。如图7所示，计算机设备70包括处理器71、存储器72以及存储在存储器72中并可在处理器71上运行的计算机程序73。处理器71执行计算机程序73时实现实施例1中界面图标配置方法的各个步骤例如图1所示的步骤s10、s20、s30、s40和s50。或者，处理器71执行计算机程序73时实现上述实施例2中界面图标配置装置的各模块/单元的功能，例如图6所示配置界面显示模块10、配置请求获取模块20、目标图标获取模块30、目标区域获取模块40和目标图标显示模块50的功能。为避免重复，在此不一一赘述。
所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。
以上所述实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围，均应包含在本发明的保护范围之内。