[发明专利]骨架屏的渲染方法、装置、设备及存储介质在审
申请号: | 202010582591.3 | 申请日: | 2020-06-23 |
公开(公告)号: | CN111708962A | 公开(公告)日: | 2020-09-25 |
发明(设计)人: | 周丽霞;王超;钟志清 | 申请(专利权)人: | 中国平安财产保险股份有限公司 |
主分类号: | G06F16/957 | 分类号: | G06F16/957;G06F16/954;G06F16/955 |
代理公司: | 北京市京大律师事务所 11321 | 代理人: | 刘挽澜 |
地址: | 518048 广东省深圳市福田区益田路*** | 国省代码: | 广东;44 |
权利要求书: | 查看更多 | 说明书: | 查看更多 |
摘要: | |||
搜索关键词: | 骨架 渲染 方法 装置 设备 存储 介质 | ||
1.一种骨架屏的渲染方法,其特征在于,所述骨架屏的渲染方法包括:
获取目标终端的页面加载请求,其中,所述目标终端的页面加载请求为网络加载请求;
根据所述目标终端的页面加载请求在多个预置的骨架屏中确定初始骨架屏,并在目标项目入口中对所述初始骨架屏进行渲染,得到首屏骨架屏;
通过哈希路由对首屏骨架屏进行路由转场渲染,得到目标骨架屏;
将所述目标骨架屏传输至目标终端进行显示。
2.根据权利要求1所述的骨架屏的渲染方法,其特征在于,所述根据所述目标终端的页面加载请求在多个预置的骨架屏中确定初始骨架屏,并在目标项目入口中对所述初始骨架屏进行渲染,得到首屏骨架屏包括:
根据所述目标终端的页面加载请求在多个预置的骨架屏中确定初始骨架屏;
判断所述初始骨架屏是否与目标终端的页面相匹配;
若所述初始骨架屏与所述目标终端的页面相匹配,则在目标项目入口中通过预置的内联标签将所述初始骨架屏嵌入至所述目标项目入口对应的项目入口文件中进行渲染,得到首屏骨架屏。
3.根据权利要求2所述的骨架屏的渲染方法,其特征在于,所述判断所述初始骨架屏是否与目标终端的页面相匹配包括:
从所述初始骨架屏中读取初始骨架屏路由路径,并从目标终端的页面读取目标终端的页面路由路径;
判断所述目标终端的页面路由路径是否与所述初始骨架屏路由路径匹配;
若所述目标终端的页面路由路径与所述初始骨架屏路由路径匹配,则判定所述初始骨架屏与目标终端的页面相匹配。
4.根据权利要求2所述的骨架屏的渲染方法,其特征在于,所述若所述初始骨架屏与所述目标终端的页面相匹配,则在目标项目入口中通过预置的内联标签将所述初始骨架屏嵌入至所述目标项目入口对应的项目入口文件中进行渲染,得到首屏骨架屏包括:
若所述初始骨架屏与所述目标终端的页面相匹配,则在所述目标项目入口对应的项目入口文件中挂载预置的内联标签,得到初始项目内联标签;
将所述初始骨架屏路由路径写入所述初始项目内联标签中,得到第一目标项目内联标签;
对所述第一目标项目内联标签添加层叠样式表和显示尺寸,得到首屏骨架屏,其中,所述显示尺寸与所述目标终端的显示尺寸相同。
5.根据权利要求1所述的骨架屏的渲染方法,其特征在于,所述通过哈希路由对首屏骨架屏进行路由转场渲染,得到目标骨架屏包括:
通过预置的监听函数监听哈希路由的哈希值;
当通过所述监听函数监听到哈希值发生变化时,基于预置的导航钩子和所述哈希路由对所述首屏骨架屏进行渲染,得到目标骨架屏。
6.根据权利要求5所述的骨架屏的渲染方法,其特征在于,所述当通过所述监听函数监听到哈希值发生变化时,通过预置的导航钩子和所述哈希路由对所述首屏骨架屏进行渲染,得到目标骨架屏包括:
当通过所述预置的监听函数监听到哈希值发生变化时,通过预置的导航钩子进行页面导航,确定目标跳转页面;
从所述目标跳转页面中提取目标跳转路由路径,在所述项目入口文件中将所述目标跳转路由路径挂载到所述预置的内联标签中,得到第二目标项目内联标签;
对所述第二目标项目内联标签进行渲染,得到目标骨架屏。
7.根据权利要求1-6中任一项所述的骨架屏的渲染方法,其特征在于,在所述获取目标终端的页面加载请求之前,所述骨架屏的渲染方法还包括:
通过哈希路由设置骨架超文本标记语言和层叠样式表的样式,得到多个样式骨架屏,并将所述多个样式骨架屏的加载入口设置到项目入口中,得到目标项目入口;
将所述多个样式骨架屏设置到预置的文件中,并按照预置的页面路由路径标准,分别对所述多个样式骨架屏进行路径设置,得到多个路径骨架屏;
将包括所述多个路径骨架屏的文件进行打包,得到多个预置的骨架屏。
该专利技术资料仅供研究查看技术是否侵权等信息,商用须获得专利权人授权。该专利全部权利属于中国平安财产保险股份有限公司,未经中国平安财产保险股份有限公司许可,擅自商用是侵权行为。如果您想购买此专利、获得商业授权和技术合作,请联系【客服】
本文链接:http://www.vipzhuanli.com/pat/books/202010582591.3/1.html,转载请声明来源钻瓜专利网。