搜索结果页的展示方法、装置、电子设备及存储介质制造方法及图纸

技术编号:25690324 阅读:21 留言:0更新日期:2020-09-18 21:02
本申请公开了搜索结果页的展示方法、装置、电子设备及存储介质,涉及页面展示技术领域。具体实现方案为:向服务端发送搜索请求;接收请求响应信息,请求响应信息包括:与搜索关键词对应的待显示的搜索结果内容,以及与搜索结果内容匹配的素材信息;根据素材信息,对存储的通栏进行渲染,得到渲染后的通栏;对渲染后的通栏和待显示的搜索结果内容进行拼接,生成待展示的搜索结果页并进行展示。该方法通过向服务端发送搜索请求,并根据服务端返回的请求响应信息中的素材信息对通栏进行渲染并展示。由此,实现了沉浸式通栏效果,可提高用户在搜索结果页上的停留时长,同时提高了搜索结果页的显示效率。

【技术实现步骤摘要】
搜索结果页的展示方法、装置、电子设备及存储介质
本申请涉及互联网
,具体涉及页面展示
,尤其涉及搜索结果页的展示方法、装置、电子设备及存储介质。
技术介绍
目前的搜索结果页中,头部通栏一般由客户端代码(即NA)实现,而搜索结果内容主要为超文本5.0(html5,简称H5)承载,即NA+H5结合的模式。在NA+H5模式下,由于NA与H5是独立的,因此,在相关技术中,针对该模式下的头部通栏主要采用的是默认样式,例如白色样式,难以采用沉浸式通栏解决方案,难以营造“代入感”,降低了用户在搜索结果页上的停留时长,降低了搜索结果页的显示效率。
技术实现思路
提供了一种搜索结果页的展示方法、装置、电子设备及存储介质。根据第一方面,提供了一种搜索结果页的展示方法,通过向服务端发送搜索请求,并根据服务端返回的请求响应信息中的素材信息对通栏进行渲染并展示。由此,实现了沉浸式通栏效果,可提高用户在搜索结果页上的停留时长,同时提高了搜索结果页的显示效率。本申请第二方面提出了一种搜索结果页的展示装置。本申请第三方面提出了一种电子设备。本申请第四方面提出了一种存储有计算机指令的非瞬时计算机可读存储介质。本申请第一方面实施例提出了一种搜索结果页的展示方法,包括:向服务端发送搜索请求,所述搜索请求包括:搜索关键词;接收请求响应信息,所述请求响应信息包括:与所述搜索关键词对应的待显示的搜索结果内容,以及与所述搜索结果内容匹配的素材信息;根据所述素材信息,对所述通栏进行渲染,得到渲染后的通栏;对所述渲染后的通栏和所述待显示的搜索结果内容进行拼接,生成待展示的搜索结果页并进行展示。本申请实施例的搜索结果页的展示方法,通过向服务端发送搜索请求,所述搜索请求包括:搜索关键词;接收请求响应信息,所述请求响应信息包括:与所述搜索关键词对应的待显示的搜索结果内容,以及与所述搜索结果内容匹配的素材信息;根据所述素材信息,对存储的通栏进行渲染,得到渲染后的通栏;对所述渲染后的通栏和所述待显示的搜索结果内容进行拼接,生成待展示的搜索结果页并进行展示。该方法通过向服务端发送搜索请求,并根据服务端返回的请求响应信息中的素材信息对通栏进行渲染并展示。由此,实现了沉浸式通栏效果,可提高用户在搜索结果页上的停留时长,同时提高了搜索结果页的显示效率。本申请第二方面实施例提出了一种搜索结果页的展示装置,包括:发送模块,用于向服务端发送搜索请求,所述搜索请求包括:搜索关键词;接收模块,用于接收请求响应信息,所述请求响应信息包括:与所述搜索关键词对应的待显示的搜索结果内容,以及与所述搜索结果内容匹配的素材信息;渲染模块,用于根据所述素材信息,对存储的通栏进行渲染,得到渲染后的通栏;展示模块,用于对所述渲染后的通栏和所述待显示的搜索结果内容进行拼接,生成待展示的搜索结果页并进行展示。本申请第三方面实施例提出了一种电子设备,包括:至少一个处理器;以及与所述至少一个处理器通信连接的存储器;其中,所述存储器存储有可被所述至少一个处理器执行的指令,所述指令被所述至少一个处理器执行,以使所述至少一个处理器能够执行如上所述的搜索结果页的展示方法。本申请第四方面实施例提出了一种存储有计算机指令的非瞬时计算机可读存储介质,所述计算机指令用于使所述计算机执行如上所述的搜索结果页的展示方法。应当理解,本部分所描述的内容并非旨在标识本公开的实施例的关键或重要特征,也不用于限制本公开的范围。本公开的其它特征将通过以下的说明书而变得容易理解。附图说明附图用于更好地理解本方案,不构成对本申请的限定。其中:图1是根据本申请第一实施例的示意图;图2是通栏和搜索结果内容结构示意图;图3是搜索结果页加载示意图;图4是是根据本申请第二实施例的示意图;图5是根据本申请第三实施例的示意图;图6是根据本申请第四实施例的示意图;图7是搜索结果页上滑示意图;图8是搜索结果页下拉示意图;图9是切换后的页面回退滑动示意图;图10是搜索结果页前进滑动示意图;图11是根据本申请第五实施例的示意图;图12是用来实现本申请实施例的搜索结果页的展示方法的电子设备的框图。具体实施方式以下结合附图对本申请的示范性实施例做出说明,其中包括本申请实施例的各种细节以助于理解,应当将它们认为仅仅是示范性的。因此,本领域普通技术人员应当认识到,可以对这里描述的实施例做出各种改变和修改,而不会背离本申请的范围和精神。同样,为了清楚和简明,以下的描述中省略了对公知功能和结构的描述。下面参考附图描述本申请实施例的搜索结果页的展示方法、装置、电子设备及存储介质。图1是根据本申请第一实施例的示意图。其中,需要说明的是,本实施例提供的搜索结果页的展示方法的执行主体为搜索结果页的展示装置,搜索结果页的展示装置具体可以为硬件设备,或者硬件设备中的软件等。其中,硬件设备比如客户端等,在本申请实施例中,搜索结果页的展示方法的执行主体以客户端为例进行说明。如图1所示,搜索结果页的展示方法具体实现过程如下:步骤101,向服务端发送搜索请求,搜索请求包括:搜索关键词。在本申请实施例中,客户端可通过前端向服务端发送搜索请求。作为一种示例,用户可在客户端的搜索主页面上的输入栏中输入搜索关键词,客户端根据搜索关键词向前端发送搜索请求,以获取待显示的搜索结果内容,比如,如图2所示,搜索结果内容部分的待显示的搜索结果内容可采用H5进行展示。接着,前端向服务端发送搜索请求,服务端向前端返回请求响应信息。其中,需要说明的是,搜索请求可包括但不限于搜索关键词、客户端的通栏相关信息。客户端可在本地预先存储通栏相关信息,前端可在H5请求中的header结构元素中添加客户端的通栏相关信息,比如,图2中的通栏部分的相关信息,如,客户端屏幕宽度以及客户端通栏高度信息等。步骤102,接收请求响应信息,请求响应信息包括:与搜索关键词对应的待显示的搜索结果内容,以及与搜索结果内容匹配的素材信息。接着,客户端可通过前端接收到服务端返回的请求响应信息,作为一种示例,前端可预先设置协议标签(比如,iframe标签),将服务端返回的请求响应信息存储在协议标签中,客户端通过协议标签可获取到服务端返回的请求响应信息。其中,需要说明的是,请求响应信息可包括但不限于与搜索关键词对应的待显示的搜索结果内容,与搜索结果内容匹配的素材信息等。其中,为了使通栏与搜索结果内容更好地实现融合和统一,与搜索结果内容匹配的素材信息可包括但不限于样式类型以及对应的样式参数信息,其中,样式类型为以下类型中的任意一种:纯色样式、渐变样式和图片样式等。纯色样式的参数信息可包括但不限于颜色信息;渐变样式对应的样式参数信息可包括但不限于搜索结果渐变高度、渐变方向、起始渐变颜色和终止渐变颜色等;其中,渐变方向可包括但不限于横向渐变、竖向渐变、斜向渐变等。图片样式对应的样式参数本文档来自技高网...

【技术保护点】
1.一种搜索结果页的展示方法,包括:/n向服务端发送搜索请求,所述搜索请求包括:搜索关键词;/n接收请求响应信息,所述请求响应信息包括:与所述搜索关键词对应的待显示的搜索结果内容,以及与所述搜索结果内容匹配的素材信息;/n根据所述素材信息,对存储的通栏进行渲染,得到渲染后的通栏;/n对所述渲染后的通栏和所述待显示的搜索结果内容进行拼接,生成待展示的搜索结果页并进行展示。/n

【技术特征摘要】
1.一种搜索结果页的展示方法,包括:
向服务端发送搜索请求,所述搜索请求包括:搜索关键词;
接收请求响应信息,所述请求响应信息包括:与所述搜索关键词对应的待显示的搜索结果内容,以及与所述搜索结果内容匹配的素材信息;
根据所述素材信息,对存储的通栏进行渲染,得到渲染后的通栏;
对所述渲染后的通栏和所述待显示的搜索结果内容进行拼接,生成待展示的搜索结果页并进行展示。


2.根据权利要求1所述的方法,其中,所述素材信息包括:样式类型以及对应的样式参数信息,其中,样式类型为以下类型中的任意一种:纯色样式、渐变样式和图片样式。


3.根据权利要求2所述的方法,其中,所述纯色样式对应的样式参数信息包括:颜色信息;
所述根据所述素材信息,对存储的通栏进行渲染,得到渲染后的通栏,包括:
在所述素材信息中的样式类型为纯色样式时,根据所述素材信息中的颜色信息,确定所述通栏中各个像素的背景颜色;
根据所述通栏中各个像素的背景颜色对所述通栏进行渲染,得到渲染后的通栏。


4.根据权利要求3所述的方法,其中,在所述素材信息中的样式类型为纯色样式时,所述素材信息中的颜色信息,根据所述搜索结果内容中占比最大的颜色信息确定。


5.根据权利要求2所述的方法,其中,所述搜索请求还包括:客户端的通栏相关信息;
在所述素材信息中的样式类型为渐变样式或图片样式时,所述待显示的搜索结果内容为结合所述素材信息和所述通栏相关信息对所述搜索关键词对应的搜索结果内容进行渲染后得到的内容;
所述结合所述素材信息对存储的通栏进行渲染,得到渲染后的通栏,包括:
在所述素材信息中的样式类型为渐变样式或图片样式时,结合所述素材信息和所述通栏相关信息对所述通栏进行渲染,得到渲染后的通栏。


6.根据权利要求5所述的方法,其中,所述通栏相关信息包括:所述客户端的屏幕宽度和通栏高度;
所述渐变样式对应的样式参数信息包括:搜索结果内容渐变高度、渐变方向、起始渐变颜色和终止渐变颜色;
在所述素材信息中的样式类型为渐变样式时,所述结合所述素材信息和所述通栏相关信息对所述通栏进行渲染,得到渲染后的通栏,包括:
结合所述客户端的屏幕宽度、所述通栏高度、所述搜索结果内容渐变高度、所述渐变方向、所述起始渐变颜色和所述终止渐变颜色,确定所述通栏中各个像素的背景颜色;
根据所述通栏中各个像素的背景颜色对所述通栏进行渲染,得到渲染后的通栏。


7.根据权利要求5所述的方法,其中,所述通栏相关信息包括:所述客户端的屏幕宽度和通栏高度;
所述图片样式对应的样式参数信息包括:图片标识;
在所述素材信息中的样式类型为图片样式时,所述结合所述素材信息和所述通栏相关信息对所述通栏进行渲染,得到渲染后的通栏,包括:
结合所述客户端的屏幕宽度、所述通栏高度、所述图片标识对应的图片,确定所述通栏中各个像素的背景颜色;
根据所述通栏中各个像素的背景颜色对所述通栏进行渲染,得到渲染后的通栏。


8.根据权利要求1所述的方法,其中,所述对所述渲染后的通栏和所述待显示的搜索结果内容进行拼接,生成待展示的搜索结果页并进行展示之后,还包括:
获取对所述搜索结果页的上滑请求,所述上滑请求包括:上滑滑动距离;
在所述上滑滑动距离大于等于第一距离阈值时,按照所述上滑滑动距离对所述搜索结果页中的搜索结果内容执行上滑操作,并展示从所述渲染后的通栏至所述存储的通栏的切换动画。


9.根据权利要求8所述的方法,其中,所述展示从渲染后的通栏至所述存储的通栏的切换动画之后,还包括:
获取对所述搜索结果页的下滑指令,所述下滑指令包括:下滑滑动距离;
在所述下滑滑动距离大于等于第二距离阈值时,按照所述下滑滑动距离对所述搜索结果页中的搜索结果内容执行下滑操作,并展示从所述存储的通栏至渲染后的通栏的切换动画。


10.根据权利要求1所述的方法,其中,所述对所述渲染后的通栏和所述待显示的搜索结果内容进行拼接,生成待展示的搜索结果页并进行展示之后,还包括:
获取对所述搜索结果页的下拉指令,所述下拉指令包括:下拉距离;
按照所述下拉距离对所述搜索结果页中的搜索结果内容执行下拉操作,并确定下拉搜索结果内容后产生的空白区域;
确定待填充的颜色信息;
按照所述待填充的颜色信息对所述空白区域进行填充处理。


11.根据权利要求10所述的方法,其中,所述按照所述待填充的颜色信息对所述空白区域进行填充处理之后,还包括:
在获取到对所述搜索结果页的停止下拉指令时,展示所述搜索结果页。


12.根据权利要求10所述的方法,其中,在所述素材信息中的样式类型为纯色样式时,所述待填充的颜色信息根据所述搜索结果内容的颜色信息确定;
在所述素材信息中的样式类型为图片样式时,所述待填充的颜色信息根据所述素材信息中图片标识对应的图片确定;
在所述素材信息中的样式类型为渐变样式时,所述待填充的颜色信息根据所述素材信息中的起始渐变颜色和终止渐变颜色确定。


13.根据权利要求1所述的方法,其中,所述对所述渲染后的通栏和所述待显示的搜索结果内容进行拼接,生成待展示的搜索结果页并进行展示之后,还包括:
根据页面切换请求,展示切换后页面;
获取对所述切换后页面的回退请求,所述回退请求包括:回退滑动距离;
根据所述回退滑动距离、所述切换后页面以及所述搜索结果页,生成当前待展示的第一页面,所述待展示的第一页面包括所述搜索结果页的第一区域;
根据所述回退滑动距离对所述第一区域中通栏的颜色信息进行调整。


14.根据权利要求13所述的方法,其中,所述根据所述回退滑动距离对所述第一区域中通栏的颜色信息进行调整之后,还包括:
获取对所述切换后页面的停止回退指令;
在获取到停止回退指令时的回退滑动距离大于等于第三距离阈值时,展示所述搜索结果页;
在获取到停止回退指令时的回退滑动距离小于第三距离阈值时,展示所述切换后页面。


15.根据权利要求14所述的方法,其中,在获取到停止回退请求时的回退滑动距离大于等于第三距离阈值时,展示所述搜索结果页之后,还包括:
获取对所述搜索结果页的前进请求,所述前进请求包括:前进滑动距离;
根据所述前进滑动距离、所述切换后页面以及所述搜索结果页,生成当前待展示的第二页面,所述待展示的第二页面包括所述搜索结果页的第二区域;
根据所述前进滑动距离对所述第二区域中通栏的颜色信息进行调整。


16.根据权利要求15所述的方法,其中,所述根据所述前进滑动距离对所述第二区域中通栏的颜色信息进行调整之后,还包括:
获取对所述搜索结果页的停止前进指令;
在获取到所述停止前进指令时的前进滑动距离大于等于第四距离阈值时,展示所述切换后页面;
在获取到所述停止前进指令时的前进滑动距离小于第四距离阈值时,展示所述搜索结果页。

<...

【专利技术属性】
技术研发人员:刘俊启庄颖徐梓茹陈雪姣胡杰徐修楼李环宇谷铁峰侯世杰刘悦路蕾
申请(专利权)人:北京百度网讯科技有限公司
类型:发明
国别省市:北京;11

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

1