界面图标配置方法、装置、计算机设备及存储介质制造方法及图纸

本发明专利技术公开了一种界面图标配置方法、装置、计算机设备及存储介质，该方法包括：显示待配置界面，所述待配置界面包括至少一个待配置区域；获取图标配置请求，所述图标配置请求包括图标ID和区域ID；基于所述图标ID，运行采用CSS3的box‑shadow属性配置的与所述图标ID相对应的图标创建代码，基于所述图标创建代码获取目标图标；基于所述区域ID，在待配置界面上获取与所述区域ID对应的目标区域；在所述目标区域上显示所述目标图标。该界面图标配置方法通过纯CSS3代码实现了界面图标的配置，加快了系统响应时间，同时避免了客户端兼容问题。

【技术实现步骤摘要】
界面图标配置方法、装置、计算机设备及存储介质
本专利技术涉及计算机
，尤其涉及一种界面图标配置方法、装置、计算机设备及存储介质。
技术介绍
为了便于用户操作，当前浏览器的应用界面或各种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)，在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制，同时也加入了一些新的标签功能，使网页视觉呈现方面更本文档来自技高网...

【技术保护点】
1.一种界面图标配置方法，其特征在于，包括：显示待配置界面，所述待配置界面包括至少一个待配置区域；获取图标配置请求，所述图标配置请求包括图标ID和区域ID；基于所述图标ID，运行采用CSS3的box‑shadow属性配置的与所述图标ID相对应的图标创建代码，基于所述图标创建代码获取目标图标；基于所述区域ID，在待配置界面上获取与所述区域ID对应的目标区域；在所述目标区域上显示所述目标图标。

【技术特征摘要】
1.一种界面图标配置方法，其特征在于，包括：显示待配置界面，所述待配置界面包括至少一个待配置区域；获取图标配置请求，所述图标配置请求包括图标ID和区域ID；基于所述图标ID，运行采用CSS3的box-shadow属性配置的与所述图标ID相对应的图标创建代码，基于所述图标创建代码获取目标图标；基于所述区域ID，在待配置界面上获取与所述区域ID对应的目标区域；在所述目标区域上显示所述目标图标。2.如权利要求1所述的界面图标配置方法，其特征在于，所述基于所述图标创建代码获取目标图标包括：基于所述图标创建代码获取至少一种图标元素；采用所述图标创建代码中预先设置的元素组合规则对至少一种所述图标元素进行组合，获取所述目标图标。3.如权利要求1所述的界面图标配置方法，所述在所述目标区域上显示所述目标图标包括：获取所述目标区域的区域参数；采用所述区域参数对所述目标图标进行适配调整，获取适配后的目标图标；在所述待配置界面的目标区域上显示所述适配后的目标图标。4.如权利要求3所述的界面图标配置方法，其特征在于，所述采用所述区域参数对所述目标图标进行适配调整，获取适配后的目标图标，包括：获取与所述图标ID相对应的参数调整函数，所述参数调整函数包括与所述目标图标相对应的形式参数；将所述区域参数作为实际参数传递所述参数调整函数，所述参数调整函数基于所述实际参数进行适配调整，获取适配后的目标图标。5.如权利要求1所述的界面图标配置方法，其特征在于，在所述目标区域上显示所述目标图标的步骤之后，所述界面图标配置方法还包括：获取效果配置请求，所述效果配置请求包括目标图标ID和效果ID；基于所述效果ID，获取采用CSS3的animation属性配置的与所述效果ID相对应的效果处理代码；采用所述效果处理代码对与所述...

【专利技术属性】
技术研发人员：陈志城，
申请(专利权)人：平安普惠企业管理有限公司，
类型：发明
国别省市：广东,44