网页显示方法、装置、计算机设备及存储介质制造方法及图纸

技术编号:21548026 阅读:32 留言:0更新日期:2019-07-06 21:31
本发明专利技术公开了一种网页显示方法、装置、计算机设备及存储介质,属于移动应用领域。所述方法包括:获取待显示的网页的第一骨架屏数据,基于网页视图对网页进行加载;在网页视图的上层,创建原生视图;基于第一骨架屏数据,渲染原生视图,得到骨架屏视图,骨架屏视图用于显示网页的框架;当网页的加载进度满足预设条件时,移除骨架屏视图,以显示基于网页视图的网页。本发明专利技术通过在网页视图上层创建一个原生视图,使得获取的第一骨架屏数据能够直接在原生视图上进行渲染,得到骨架屏视图,使得骨架屏视图的渲染不再依赖于网页视图的初始化以及网页数据的加载,提前了骨架屏视图出现的时机,避免了用户长时间看到白屏,改善了视觉效果。

Web Display Method, Device, Computer Equipment and Storage Media

【技术实现步骤摘要】
网页显示方法、装置、计算机设备及存储介质
本专利技术涉及移动应用领域,特别涉及一种网页显示方法、装置、计算机设备及存储介质。
技术介绍
混合模式移动应用是指介于网页应用和本地应用这两者之间的应用,兼具本地应用的良好用户交互体验的优势和网页应用的跨平台开发的优势。对于用户而言,访问混合模式移动应用的感觉像是在访问本地应用,但实际上是通过混合模式移动应用中封装的浏览器内核访问网络应用。目前,在混合模式移动应用中进行网页显示时,会首先启动网页视图,进行网页视图初始化,在网页视图初始化之后会得到一个网页视图的基本框架,例如,该基本框架包括网页标题。基于该基本框架,获取相应的网页数据,其中,网页数据中包括该网页的骨架屏数据,在获取到该网页的骨架屏数据后,会基于该骨架屏数据对网页视图进行渲染,得到网页的骨架屏视图,此时,用户可以看到该网页的视图框架,例如,可以看到包含网页标题的位置、大小和形状的一个图片。在获取到全部的网页数据之后,根据该全部的网页数据,对网页的骨架屏视图进行继续渲染,得到该网页的完整界面,此时,用户可以看到该网页的全部内容。在上述网页显示过程中,在骨架屏视图渲染完成之前,需要完本文档来自技高网...

【技术保护点】
1.一种网页显示方法,其特征在于,所述方法包括:获取待显示的网页的第一骨架屏数据,基于网页视图对所述网页进行加载;在所述网页视图的上层,创建原生视图;基于所述第一骨架屏数据,渲染所述原生视图,得到骨架屏视图,所述骨架屏视图用于显示所述网页的框架;当所述网页的加载进度满足预设条件时,移除所述骨架屏视图,以显示基于所述网页视图的网页。

【技术特征摘要】
1.一种网页显示方法,其特征在于,所述方法包括:获取待显示的网页的第一骨架屏数据,基于网页视图对所述网页进行加载;在所述网页视图的上层,创建原生视图;基于所述第一骨架屏数据,渲染所述原生视图,得到骨架屏视图,所述骨架屏视图用于显示所述网页的框架;当所述网页的加载进度满足预设条件时,移除所述骨架屏视图,以显示基于所述网页视图的网页。2.根据权利要求1所述的方法,其特征在于,所述获取待显示的网页的第一骨架屏数据包括:当计算机设备存储有所述第一骨架屏数据时,从所述计算机设备的存储空间中获取所述第一骨架屏数据;当所述计算机设备未存储所述第一骨架屏数据时,从服务器中获取所述第一骨架屏数据。3.根据权利要求1所述的方法,其特征在于,所述获取待显示的网页的第一骨架屏数据包括:获取计算机设备的登录状态,基于所述登录状态,获取对应的第一骨架屏数据,不同的登录状态对应不同的第一骨架屏数据;或者,获取所述网页的页面标识,基于所述页面标识,获取对应的第一骨架屏数据,不同的页面标识对应不同的第一骨架屏数据。4.根据权利要求1所述的方法,其特征在于,所述基于所述第一骨架屏数据,渲染所述原生视图,得到骨架屏视图,包括:如果已下载的网页数据中包括第二骨架屏数据,则基于所述第一骨架屏数据和所述第二骨架屏数据,渲染所述原生视图,得到骨架屏视图。5.根据权利要求4所述的方法,其特征在于,所述如果已下载的网页数据中包括第二骨架屏数据,则基于所述第一骨架屏数据和所述第二骨架屏数据,渲染所述原生视图,得到骨架屏视图,包括下述任一个步骤:如果所述已下载的网页数据中包括所述第二骨架屏数据,且基于所述第一骨架屏数据的渲染未完成,则根据所述原生视图基于所述第一骨架屏数据的渲染进度,确定所述第二骨架屏数据中的目标数据,基于所述目标数据,对所述原生视图继续进行渲染,得到所述骨架屏视图,所述目标数据为与所述骨架屏视图未被渲染的部分对应的数据;如果所述已下载的网页数据中包括所述...

【专利技术属性】
技术研发人员:陈禹霖
申请(专利权)人:北京三快在线科技有限公司
类型:发明
国别省市:北京,11

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1