CN109857503B - 页面交互效果自适应方法、装置与电子设备 - Google Patents

页面交互效果自适应方法、装置与电子设备 Download PDF

Info

Publication number
CN109857503B
CN109857503B CN201910071612.2A CN201910071612A CN109857503B CN 109857503 B CN109857503 B CN 109857503B CN 201910071612 A CN201910071612 A CN 201910071612A CN 109857503 B CN109857503 B CN 109857503B
Authority
CN
China
Prior art keywords
page
effect
mobile terminal
code
terminal
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201910071612.2A
Other languages
English (en)
Other versions
CN109857503A (zh
Inventor
倪连柱
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing ByteDance Network Technology Co Ltd
Original Assignee
Beijing ByteDance Network Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing ByteDance Network Technology Co Ltd filed Critical Beijing ByteDance Network Technology Co Ltd
Priority to CN201910071612.2A priority Critical patent/CN109857503B/zh
Publication of CN109857503A publication Critical patent/CN109857503A/zh
Application granted granted Critical
Publication of CN109857503B publication Critical patent/CN109857503B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Landscapes

  • User Interface Of Digital Computer (AREA)

Abstract

本公开公开了一种页面交互效果自适应方法、装置、电子设备和计算机可读存储介质。其中该方法包括:判断加载所述页面的终端的类型;当所述终端的类型为移动终端时,根据预先设定的处理规则对所述页面中的预定交互效果进行处理,使之适应于所述移动终端,并在所述移动终端中加载处理后的页面;否则,直接在所述终端中加载所述页面。本公开实施例通过采取页面交互效果自适应的方案,解决了现有技术中针对移动终端,额外需要一套页面交互效果实现代码,编码复杂繁琐的技术问题。通过一套实现代码,使得页面的交互效果自动适配移动终端。

Description

页面交互效果自适应方法、装置与电子设备
技术领域
本公开涉及计算机交互领域,尤其涉及一种页面交互效果自适应方法、装置、电子设备及计算机可读存储介质。
背景技术
当前电子设备技术日新月异,产品类型丰富多样,既有传统的台式计算机、笔记本、服务器等电子设备,也有后期发展起来的触摸式手机、平板电脑、PAD等电子设备。在这些电子设备中,传统的个人台式计算机、笔记本一般被称作PC终端,而触摸式手机、平板电脑、PAD被称作移动终端。
现有技术中,在各种电子设备上都可以运行浏览器等应用来加载网页页面,为用户提供各种功能服务。在PC终端(包括服务器)的各种页面上,当通过鼠标与页面上的元素进行交互时,页面上会呈现各种交互效果。例如,当鼠标停放在某些页面元素上时,页面元素会发生一些变化,包括页面元素的样式、属性等发生变化,其中典型的是鼠标悬停,即当鼠标悬停在按钮或者链接等页面元素上时,按钮或者链接的颜色、大小等发生变化。如图1,2所示,图1示出页面元素包括三张图片;图2示出当鼠标悬停在图1的三张图片的中间图片上时,所示中间图片的尺寸变大,并显示出针对该中间图片的功能操作条。
然而,在移动终端,特别是触摸式移动终端,在浏览器加载页面时,因为没有鼠标,只有当手指按在页面元素上一段时间,才会呈现PC终端上的鼠标悬停的效果。这就说明,在现有技术中,如果想要在移动终端上实现鼠标悬停等交互效果,需要单独针对移动终端编写样式和处理逻辑,造成同一个交互效果需要编写两套,甚至多套样式和处理逻辑以适用于各种PC终端或移动终端,编码复杂、繁琐。因此,需要一种页面交互效果自动适配PC终端和移动终端,以简化、编码的繁琐。
发明内容
第一方面,本公开实施例提供一种页面交互效果自适应的方法,包括:判断加载所述页面的终端的类型;
当所述终端的类型为移动终端时,根据预先设定的处理规则对所述页面中的预定交互效果进行处理,使之适应于所述移动终端,并在所述移动终端中加载处理后的页面;
否则,直接在所述终端中加载所述页面。
进一步,所述判断加载所述页面的终端的类型,包括:获取所述页面的用户代理;通过所述用户代理判断所述终端的类型。
进一步,所述当所述终端的类型为移动终端时,根据预先设定的处理规则对所述页面中的预定效果进行处理,并在所述移动终端中加载处理后的页面,包括:当所述终端的类型为移动终端时,根据预先设置的处理规则对所述页面的页面编码中对应于所述预定效果的效果编码进行转换处理,生成带有处理后的效果编码的页面;在所述移动终端中加载所述带有处理后的效果编码的页面。
进一步,所述根据预先设置的处理规则对所述页面的页面编码中对应于所述预定效果的效果编码进行转换处理,包括:根据预先设置的样式规则和处理逻辑对所述页面的页面编码中对应于所述预定效果的效果编码进行转换处理。
进一步,所述根据预先设置的样式规则和处理逻辑对所述页面的页面编码中对应于所述预定效果的效果编码进行转换处理,包括:获取页面编码;搜索所述页面编码中带有第一标记的页面编码;根据所述预先设定的样式规则,对所述页面编码中的带有第一标记的编码进行样式转换,得到第一效果编码;监听页面上的第一触发事件;响应于监听到所述第一触发事件且所述第一触发事件与所述第一效果编码相关,将第一效果编码转换成第二效果编码。
进一步,所述根据所述预先设定的样式规则,对效果编码中的带有第一标记的编码进行样式转换,包括:将所述第一标记替换为第二标记,并将所述带有第一标记的编码转换为带有第二标记的编码。
进一步,所述响应于监听到所述第一触发事件且所述第一触发事件与所述第一效果编码相关,将第一效果编码转换成第二效果编码,包括:响应于监听到所述第一触发事件且所述第一触发事件与所述第一效果编码相关,在所述第一效果编码中增加与所述触发事件相关的触发编码,得到第二效果编码。
进一步,所述第一效果编码与所述页面上的元素相关联。
进一步,所述第一触发事件包括:针对与所述第一效果编码相关联的元素的触摸事件。
进一步,所述方法还包括:响应于监听到第二触发事件,将与所述第二触发事件相关的第二效果编码转换为第一效果编码,并在所述移动终端中加载所述带有第一效果编码的页面。
第二方面,本公开实施例提供一种页面交互效果自适应的装置,包括:判断模块,用于判断加载所述页面的终端的类型;
运行模块,用于当所述终端的类型为移动终端时,根据预先设定的处理规则对所述页面中的预定交互效果进行处理,使之适应于所述移动终端,并在所述移动终端中加载处理后的页面;
否则,直接在所述终端中加载所述页面。
进一步,所述判断加载所述页面的终端的类型,包括:获取所述页面的用户代理;通过所述用户代理判断所述终端的类型。
进一步,所述当所述终端的类型为移动终端时,根据预先设定的处理规则对所述页面中的预定效果进行处理,并在所述移动终端中加载处理后的页面,包括:当所述终端的类型为移动终端时,根据预先设置的处理规则对所述页面的页面编码中对应于所述预定效果的效果编码进行转换处理,生成带有处理后的效果编码的页面;在所述移动终端中加载所述带有处理后的效果编码的页面。
进一步,所述根据预先设置的处理规则对所述页面的页面编码中对应于所述预定效果的效果编码进行转换处理,包括:根据预先设置的样式规则和处理逻辑对所述页面的页面编码中对应于所述预定效果的效果编码进行转换处理。
进一步,所述根据预先设置的样式规则和处理逻辑对所述页面的页面编码中对应于所述预定效果的效果编码进行转换处理,包括:获取页面编码;搜索所述页面编码中带有第一标记的页面编码;根据所述预先设定的样式规则,对所述页面编码中的带有第一标记的编码进行样式转换,得到第一效果编码;监听页面上的第一触发事件;响应于监听到所述第一触发事件且所述第一触发事件与所述第一效果编码相关,将第一效果编码转换成第二效果编码。
进一步,所述根据所述预先设定的样式规则,对效果编码中的带有第一标记的编码进行样式转换,包括:将所述第一标记替换为第二标记,并将所述带有第一标记的编码转换为带有第二标记的编码。
进一步,所述响应于监听到所述第一触发事件且所述第一触发事件与所述第一效果编码相关,将第一效果编码转换成第二效果编码,包括:响应于监听到所述第一触发事件且所述第一触发事件与所述第一效果编码相关,在所述第一效果编码中增加与所述触发事件相关的触发编码,得到第二效果编码。
进一步,所述第一效果编码与所述页面上的元素相关联。
进一步,所述第一触发事件包括:针对与所述第一效果编码相关联的元素的触摸事件。
进一步,所述运行模块还用于响应于监听到第二触发事件,将与所述第二触发事件相关的第二效果编码转换为第一效果编码,并在所述移动终端中加载所述带有第一效果编码的页面。
第三方面,本公开实施例提供一种电子设备,包括:至少一个处理器;以及,与所述至少一个处理器通信连接的存储器;其中,所述存储器存储有能被所述至少一个处理器执行的指令,所述指令被所述至少一个处理器执行,以使所述至少一个处理器能够执行前述第一方面中的任一所述页面交互效果自适应的方法。
第四方面,本公开实施例提供一种非暂态计算机可读存储介质,其特征在于,该非暂态计算机可读存储介质存储计算机指令,该计算机指令用于使计算机执行前述第一方面中的任一所述页面交互效果自适应的方法。
本公开公开了一种页面交互效果自适应方法、装置、电子设备和计算机可读存储介质。其中该方法包括:判断加载所述页面的终端的类型;当所述终端的类型为移动终端时,根据预先设定的处理规则对所述页面中的预定交互效果进行处理,使之适应于所述移动终端,并在所述移动终端中加载处理后的页面;否则,直接在所述终端中加载所述页面。本公开实施例通过采取页面交互效果自适应的方案,解决了现有技术中针对移动终端,额外需要一套页面交互效果实现代码,编码复杂繁琐的技术问题。通过一套实现代码,使得页面的交互效果自动适配移动终端。
上述说明仅是本公开技术方案的概述,为了能更清楚了解本公开的技术手段,而可依照说明书的内容予以实施,并且为让本公开的上述和其他目的、特征和优点能够更明显易懂,以下特举较佳实施例,并配合附图,详细说明如下。
附图说明
为了更清楚地说明本公开实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍,显而易见地,下面描述中的附图是本公开的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1:现有技术中PC终端上的页面交互效果图;
图2:现有技术中PC终端的操作界面上鼠标悬停效果图;
图3:本公开页面交互效果自适应方法的实施例流程图;
图4:本公开页面交互效果自适应装置的结构图;
图5:本公开页面交互效果自适应的电子设备的结构图。
具体实施方式
以下通过特定的具体实例说明本公开的实施方式,本领域技术人员可由本说明书所揭露的内容轻易地了解本公开的其他优点与功效。显然,所描述的实施例仅仅是本公开一部分实施例,而不是全部的实施例。本公开还可以通过另外不同的具体实施方式加以实施或应用,本说明书中的各项细节也可以基于不同观点与应用,在没有背离本公开的精神下进行各种修饰或改变。需说明的是,在不冲突的情况下,以下实施例及实施例中的特征可以相互组合。基于本公开中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本公开保护的范围。
需要说明的是,下文描述在所附权利要求书的范围内的实施例的各种方面。应显而易见,本文中所描述的方面可体现于广泛多种形式中,且本文中所描述的任何特定结构及/或功能仅为说明性的。基于本公开,所属领域的技术人员应了解,本文中所描述的一个方面可与任何其它方面独立地实施,且可以各种方式组合这些方面中的两者或两者以上。举例来说,可使用本文中所阐述的任何数目个方面来实施设备及/或实践方法。另外,可使用除了本文中所阐述的方面中的一或多者之外的其它结构及/或功能性实施此设备及/或实践此方法。
还需要说明的是,以下实施例中所提供的图示仅以示意方式说明本公开的基本构想,图式中仅显示与本公开中有关的组件而非按照实际实施时的组件数目、形状及尺寸绘制,其实际实施时各组件的型态、数量及比例可为一种随意的改变,且其组件布局型态也可能更为复杂。
另外,在以下描述中,提供具体细节是为了便于透彻理解实例。然而,所属领域的技术人员将理解,可在没有这些特定细节的情况下实践所述方面。
图3为本公开实施例提供的页面交互效果自适应的方法实施例一的流程图,本实施例提供的该页面交互效果自适应的方法可以由一页面交互效果自适应的装置来执行,该页面交互效果自适应的装置可以实现为软件,或者实现为软件和硬件的组合,该页面交互效果自适应的装置可以集成设置在图像处理***中的某设备中,比如服务器或者终端设备中。
如图3所示,该方法包括如下步骤:
步骤S301,判断加载所述页面的终端的类型;
步骤S302,当所述终端的类型为移动终端时,根据预先设定的处理规则对所述页面中的预定交互效果进行处理,使之适应于所述移动终端,并在所述移动终端中加载处理后的页面;
步骤S303,否则,直接在所述终端中加载所述页面。
无论在PC终端、服务器,还是在移动终端,大量应用采用网页页面作为与用户的交互界面,运行时需要加载页面。在本实施例中以PC终端和移动终端上广泛应用的各种浏览器为例,运行时需要加载各种页面。
页面在浏览器中加载成功后,当鼠标或者触摸源(包括手指、触摸笔、触摸杆等)与页面中各种元素交互时,判断运行浏览器的终端类型,当终端类型为移动终端时,运行处理针对移动终端而设置的页面样式规则和处理逻辑;否则,运行处理针对非移动终端而设置的页面样式规则和处理逻辑。
在一个实施例中,页面中的各种交互效果通过CSS语言编码实现。以CSS语言编码来具体实现上述页面交互效果自适应方法步骤。其中,通过CSS语言的:hover过程和touch事件过程来实现根据预先设置的处理规则对页面编码中对应于预定效果的效果编码进行转换处理,生成带有处理后的效果编码的页面。
过程:hover,用于将在非移动终端(例如PC终端)上的实现各种交互效果所定义的样式规则转换为针对移动终端的样式规则,包括:
获取页面中所有的样式规则;
以变量touchClassName来设置移动端交互事件特有的样式规则名称,其中touchClassName可以取任意随机字符串;
设置数组hoverSelectorList,用于保存上述特有的样式规则相关的css选择器;
由于在页面中,包含标签:hover的样式规则用于规定页面中各种元素所具有的具体交互效果。因此,在上述获取的所有样式规则中,对于每一个包含标签:hover的样式规则,提起该样式规则之前的css选择器,并存入上述数组hoverSelectorList中,如果数组hoverSelectorList中已经存在所述css选择器,则忽略该css选择器,避免数组hoverSelectorList中存在重复的css选择器;
将当前包含标签:hover的样式规则中的标签:hover替换为上述变量touchClassName,并生成一条新的规则;
删除当前包含标签:hover的样式规则,并在当前位置***上述生成的新规则。
通过以上过程完成用于实现针对移动终端的交互效果的效果样式的替换。
在交互效果的样式规则被替换的基础上,需要动态监听交互事件的发生,以在移动终端上实现相同的交互效果。在本实施例中,通过CSS语言的touch事件过程来实现上述相同交互效果的处理逻辑,包括:设置touchElements为数组,用来保存满足条件的页面元素;在document(页面)节点增加touchstart事件(即开始事件)监听,和touchend事件(即结束事件)监听。
其中,监听到touchstart事件(即开始事件)的处理逻辑包括:
如果当前事件目标元素及其祖先元素匹配上述数组hoverSelectorList中的css选择器时,给匹配的元素增加对应上述touchClassName的类编码class;将匹配元素放入上述数组touchElements中保存;
否则,不做任何处理。
其中,监听到touchend事件(即结束事件),其处理逻辑包括:
如果上述数组touchElements的长度大于0,则遍历数组touchElements中的元素,从每一个元素对应的实现类class中去掉touchClassName;将数组touchElements长度设置为0,以清空数组中的元素;
否则,不做任何处理。
通过上述:hover过程和touch事件过程进而实现根据预先设置的处理规则对页面编码中对应于预定效果的效果编码的转换处理,生成带有处理后的效果编码的页面。在移动终端的页面上监听到交互事件时,就能够呈现与PC终端上的页面相同的交互效果。
在一个实施例中,与页面元素的交互包括单击、双击、左键、右键、滚轮、悬停、按键、长按、短按等现有技术中所有的交互方式,本公开不做具体限定。通过本实施例,在移动终端加载的页面上,当监听到与非移动终端相同或相应的交互事件时,能够呈现相同的交互效果。通过这一套页面编码就实现了移动终端与非移动终端(例如PC终端)上的页面相同的交互效果。
在一个实施例中,针对现有页面中已经包含在非移动终端上实现各种鼠标、键盘交互效果的情况时,可以通过修改页面编码来实现上述交互效果自动适配移动终端,例如,将现有页面编码对应的部分改写为上述实施例的页面编码。当判断运行浏览器的终端类型为移动终端时,则浏览器加载的页面运行处理针对移动终端而设置的样式规则和处理逻辑,否则,不做任何处理,也就是运行处理页面中原有的样式规则和处理逻辑。进而也通过这一套页面编码就实现了移动终端与非移动终端(例如PC终端)上的页面相同的交互效果。
在一个实施例中,浏览器加载的页面中的交互效果通过其他语言编码实现相应的逻辑,即:同样判断运行浏览器的终端类型,当为移动终端时,页面运行处理针对移动终端而设置的样式规则和处理逻辑,否则,页面运行处理针对非移动终端而设置的样式规则和处理逻辑。进而实现交互效果自动适配移动终端。
在一个实施例中,除了浏览器,其他既可以运行于PC终端、服务器,又可以运行于移动终端的其他应用,同样需要加载页面为用户提供可操作的界面时,例如网页游戏操作界面,为了实现交互效果自动适配移动终端,同样能够通过上述方法来实现。
如图4所示,其示出了适于用来实现本公开实施例方法的装置400的结构示意图,装置400包括:
判断模块401,用于判断加载所述页面的终端的类型;
运行模块402,用于当所述终端的类型为移动终端时,根据预先设定的处理规则对所述页面中的预定交互效果进行处理,使之适应于所述移动终端,并在所述移动终端中加载处理后的页面;
否则,直接在所述终端中加载所述页面。
这下边要把从权补全,权要里边只写一个独权,但是这里要补全。(发明内容部分同样处理)
下面参考图5,其示出了适于用来实现本公开实施例的电子设备500的结构示意图。本公开实施例中的电子设备可以包括但不限于诸如移动电话、笔记本电脑、数字广播接收器、PDA(个人数字助理)、PAD(平板电脑)、PMP(便携式多媒体播放器)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字TV、台式计算机等等的非移动终端。图5示出的电子设备仅仅是一个示例,不应对本公开实施例的功能和使用范围带来任何限制。
如图5所示,电子设备500可以包括处理装置(例如中央处理器、图形处理器等)501,其可以根据存储在只读存储器(ROM)502中的程序或者从存储装置508加载到随机访问存储器(RAM)503中的程序而执行各种适当的动作和处理。在RAM 503中,还存储有电子设备500操作所需的各种程序和数据。处理装置501、ROM 502以及RAM 503通过总线504彼此相连。输入/输出(I/O)接口505也连接至总线504。
通常,以下装置可以连接至I/O接口505:包括例如触摸屏、触摸板、键盘、鼠标、图像传感器、麦克风、加速度计、陀螺仪等的输入装置506;包括例如液晶显示器(LCD)、扬声器、振动器等的输出装置507;包括例如磁带、硬盘等的存储装置508;以及通信装置509。通信装置509可以允许电子设备500与其他设备进行无线或有线通信以交换数据。虽然图5示出了具有各种装置的电子设备500,但是应理解的是,并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。
特别地,根据本公开的实施例,上文图3流程图描述的过程可以被实现为计算机软件程序。例如,本公开的实施例包括一种计算机程序产品,其包括承载在计算机可读介质上的计算机程序,该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中,该计算机程序可以通过通信装置509从网络上被下载和安装,或者从存储装置508被安装,或者从ROM 502被安装。在该计算机程序被处理装置501执行时,执行本公开实施例的方法中限定的上述功能。
需要说明的是,本公开上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的***、装置或器件,或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于:具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中,计算机可读存储介质可以是任何包含或存储程序的有形介质,该程序可以被指令执行***、装置或者器件使用或者与其结合使用。而在本公开中,计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号,其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式,包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质,该计算机可读信号介质可以发送、传播或者传输用于由指令执行***、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输,包括但不限于:电线、光缆、RF(射频)等等,或者上述的任意合适的组合。
上述计算机可读介质可以是上述电子设备中所包含的;也可以是单独存在,而未装配入该电子设备中。
上述计算机可读介质承载有一个或者多个程序,当上述一个或者多个程序被该电子设备执行时,使得该电子设备:判断加载所述页面的终端的类型;当所述终端的类型为移动终端时,根据预先设定的处理规则对所述页面中的预定交互效果进行处理,使之适应于所述移动终端,并在所述移动终端中加载处理后的页面;否则,直接在所述终端中加载所述页面。
可以以一种或多种程序设计语言或其组合来编写用于执行本公开的操作的计算机程序代码,上述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++,还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中,远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机,或者,可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
附图中的流程图和框图,图示了按照本公开各种实施例的***、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上,流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分,该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意,在有些作为替换的实现中,方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如,两个接连地表示的方框实际上可以基本并行地执行,它们有时也可以按相反的顺序执行,这依所涉及的功能而定。也要注意的是,框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合,可以用执行规定的功能或操作的专用的基于硬件的***来实现,或者可以用专用硬件与计算机指令的组合来实现。
描述于本公开实施例中所涉及到的单元可以通过软件的方式实现,也可以通过硬件的方式来实现。其中,单元的名称在某种情况下并不构成对该单元本身的限定。
以上描述仅为本公开的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解,本公开中所涉及的公开范围,并不限于上述技术特征的特定组合而成的技术方案,同时也应涵盖在不脱离上述公开构思的情况下,由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本公开中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。

Claims (12)

1.一种页面交互效果自适应方法,其特征在于,包括:
判断加载所述页面的终端的类型,包括:获取所述页面的用户代理,通过所述用户代理判断所述终端的类型;
当所述终端的类型为移动终端时,根据预先设定的处理规则对所述页面中的预定交互效果进行处理,使之适应于所述移动终端,并在所述移动终端中加载处理后的页面,包括:
将针对非移动终端上的实现各种交互效果所定义的样式规则转换为针对移动终端的样式规则,包括:获取页面中所有针对非移动终端的样式规则;以变量touchClassName来设置移动端交互事件特有的样式规则名称;将当前包含标签:hover的样式规则中的标签:hover替换为变量touchClassName,并生成一条新的针对移动终端的样式规则;删除当前包含标签:hover的针对非移动终端的样式规则,并在当前位置***上述生成的新的针对移动终端的样式规则;
否则,直接在所述终端中加载所述页面。
2.如权利要求1所述的自适应方法,其特征在于,所述当所述终端的类型为移动终端时,根据预先设定的处理规则对所述页面中的预定效果进行处理,并在所述移动终端中加载处理后的页面,包括:
当所述终端的类型为移动终端时,根据预先设置的处理规则对所述页面的页面编码中对应于所述预定效果的效果编码进行转换处理,生成带有处理后的效果编码的页面;
在所述移动终端中加载所述带有处理后的效果编码的页面。
3.如权利要求2所述的自适应方法,其特征在于,所述根据预先设置的处理规则对所述页面的页面编码中对应于所述预定效果的效果编码进行转换处理,包括:
根据预先设置的样式规则和处理逻辑对所述页面的页面编码中对应于所述预定效果的效果编码进行转换处理。
4.如权利要求3所述的自适应方法,其特征在于,所述根据预先设置的样式规则和处理逻辑对所述页面的页面编码中对应于所述预定效果的效果编码进行转换处理,包括:
获取页面编码;
搜索所述页面编码中带有第一标记的页面编码;
根据所述预先设定的样式规则,对所述页面编码中的带有第一标记的编码进行样式转换,得到第一效果编码;
监听页面上的第一触发事件;
响应于监听到所述第一触发事件且所述第一触发事件与所述第一效果编码相关,将第一效果编码转换成第二效果编码。
5.如权利要求4所述的自适应方法,其特征在于,所述根据所述预先设定的样式规则,对效果编码中的带有第一标记的编码进行样式转换,包括:
将所述第一标记替换为第二标记,并将所述带有第一标记的编码转换为带有第二标记的编码。
6.如权利要求4所述的自适应方法,其特征在于,所述响应于监听到所述第一触发事件且所述第一触发事件与所述第一效果编码相关,将第一效果编码转换成第二效果编码,包括:
响应于监听到所述第一触发事件且所述第一触发事件与所述第一效果编码相关,在所述第一效果编码中增加与所述触发事件相关的触发编码,得到第二效果编码。
7.如权利要求4所述的自适应方法,其特征在于,所述第一效果编码与所述页面上的元素相关联。
8.如权利要求4所述的自适应方法,其特征在于,所述第一触发事件包括:
针对与所述第一效果编码相关联的元素的触摸事件。
9.如权利要求4所述的自适应方法,其特征在于,所述方法还包括:
响应于监听到第二触发事件,将与所述第二触发事件相关的第二效果编码转换为第一效果编码,并在所述移动终端中加载带有第一效果编码的页面。
10.一种页面交互效果自适应的装置,其特征在于,包括:
判断模块,用于判断加载所述页面的终端的类型,包括:获取所述页面的用户代理,通过所述用户代理判断所述终端的类型;
运行模块,用于当所述终端的类型为移动终端时,根据预先设定的处理规则对所述页面中的预定交互效果进行处理,使之适应于所述移动终端,并在所述移动终端中加载处理后的页面,包括:
将针对非移动终端上的实现各种交互效果所定义的样式规则转换为针对移动终端的样式规则,包括:获取页面中所有针对非移动终端的样式规则;以变量touchClassName来设置移动端交互事件特有的样式规则名称;将当前包含标签:hover的样式规则中的标签:hover替换为变量touchClassName,并生成一条新的针对移动终端的样式规则;删除当前包含标签:hover的针对非移动终端的样式规则,并在当前位置***上述生成的新的针对移动终端的样式规则;
否则,直接在所述终端中加载所述页面。
11.一种电子设备,包括:存储器,用于存储非暂时性计算机可读指令;以及处理器,用于运行所述计算机可读指令,使得所述处理器执行时实现根据权利要求1-9中任意一项所述的页面交互效果自适应方法。
12.一种计算机可读存储介质,用于存储非暂时性计算机可读指令,当所述非暂时性计算机可读指令由计算机执行时,使得所述计算机执行权利要求1-9中任意一项所述的页面交互效果自适应方法。
CN201910071612.2A 2019-01-25 2019-01-25 页面交互效果自适应方法、装置与电子设备 Active CN109857503B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910071612.2A CN109857503B (zh) 2019-01-25 2019-01-25 页面交互效果自适应方法、装置与电子设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910071612.2A CN109857503B (zh) 2019-01-25 2019-01-25 页面交互效果自适应方法、装置与电子设备

Publications (2)

Publication Number Publication Date
CN109857503A CN109857503A (zh) 2019-06-07
CN109857503B true CN109857503B (zh) 2023-04-07

Family

ID=66896071

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910071612.2A Active CN109857503B (zh) 2019-01-25 2019-01-25 页面交互效果自适应方法、装置与电子设备

Country Status (1)

Country Link
CN (1) CN109857503B (zh)

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110457620A (zh) * 2019-08-15 2019-11-15 深圳乐信软件技术有限公司 一种页面访问的方法、装置、设备及存储介质
CN114035867A (zh) * 2021-09-29 2022-02-11 深圳市世强元件网络有限公司 扩展交互行为的方法及计算机可读介质

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104285202A (zh) * 2012-03-14 2015-01-14 诺基亚公司 触屏悬停输入处理
CN105094589A (zh) * 2014-05-23 2015-11-25 ***通信集团公司 一种移动终端悬停按钮的显示控制方法、装置及移动终端
CN105938404A (zh) * 2015-03-06 2016-09-14 意法半导体股份有限公司 用于触摸屏幕感应的方法和设备、对应的装置和计算机程序产品
CN106201161A (zh) * 2014-09-23 2016-12-07 北京三星通信技术研究有限公司 电子设备的显示方法及***
CN107463584A (zh) * 2016-06-06 2017-12-12 腾讯科技(深圳)有限公司 一种交互页面的编辑处理方法及终端

Family Cites Families (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20080154573A1 (en) * 2006-10-02 2008-06-26 Microsoft Corporation Simulating new input devices using old input devices
KR20140030379A (ko) * 2012-08-27 2014-03-12 삼성전자주식회사 단말의 표시 제어 방법 및 그 단말
CN103297539A (zh) * 2013-06-21 2013-09-11 北京恒远创智信息技术有限公司 使用公共屏幕提高多人交互效果的方法和***
US10732719B2 (en) * 2016-03-03 2020-08-04 Lenovo (Singapore) Pte. Ltd. Performing actions responsive to hovering over an input surface
DK201670720A1 (en) * 2016-09-06 2018-03-26 Apple Inc Devices, Methods, and Graphical User Interfaces for Generating Tactile Outputs
CN106791115A (zh) * 2016-12-26 2017-05-31 努比亚技术有限公司 一种移动终端信息复制方法及移动终端
CN106951172A (zh) * 2017-03-17 2017-07-14 上海传英信息技术有限公司 应用于移动终端的网页内容的显示方法及装置
CN107357560A (zh) * 2017-04-28 2017-11-17 阿里巴巴集团控股有限公司 交互处理方法及装置
CN108989365B (zh) * 2017-05-31 2022-02-25 腾讯科技(深圳)有限公司 一种信息处理方法、服务器、终端设备及存储介质
CN108415745B (zh) * 2018-02-09 2021-03-19 福建星网锐捷通讯股份有限公司 一种移动终端上ui控件操控智能设备的方法

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104285202A (zh) * 2012-03-14 2015-01-14 诺基亚公司 触屏悬停输入处理
CN105094589A (zh) * 2014-05-23 2015-11-25 ***通信集团公司 一种移动终端悬停按钮的显示控制方法、装置及移动终端
CN106201161A (zh) * 2014-09-23 2016-12-07 北京三星通信技术研究有限公司 电子设备的显示方法及***
CN105938404A (zh) * 2015-03-06 2016-09-14 意法半导体股份有限公司 用于触摸屏幕感应的方法和设备、对应的装置和计算机程序产品
CN107463584A (zh) * 2016-06-06 2017-12-12 腾讯科技(深圳)有限公司 一种交互页面的编辑处理方法及终端

Also Published As

Publication number Publication date
CN109857503A (zh) 2019-06-07

Similar Documents

Publication Publication Date Title
CN109597617B (zh) 基于模板快速生成业务页面的方法和装置
CN111580879A (zh) 小程序的运行方法、装置、电子设备及计算机存储介质
CN109857506B (zh) 引导信息的实现方法、装置、电子设备和存储介质
CN111367516B (zh) 应用界面生成方法、装置及电子设备
CN111290737B (zh) 用于应用程序开发的方法、装置及电子设备
CN110070592B (zh) 特效包的生成方法、装置和硬件装置
CN111198999A (zh) 一种网页端的图片加载方法、装置、介质和电子设备
CN109857503B (zh) 页面交互效果自适应方法、装置与电子设备
CN113254136A (zh) 信息推荐弹窗展示方法、装置、设备和计算机可读介质
CN105359104A (zh) 状态信息的同步点
CN107168738A (zh) 一种应用工具的管理方法、装置、设备和存储介质
CN110442419B (zh) Android应用的界面布局方法及装置
CN110083407B (zh) 小程序中步骤条的实现方法、装置、电子设备及存储介质
CN110147283B (zh) 一种显示内容切换显示方法、装置、设备及介质
CN110069186B (zh) 显示应用的操作界面的方法和设备
CN111177634A (zh) 支持多语言的文案内容加载方法、装置、设备、及介质
CN109976857B (zh) 终端界面的显示控制方法、装置、存储介质及电子设备
CN111290861A (zh) 消息处理方法、装置及电子设备
CN110717126A (zh) 页面浏览方法、装置、电子设备及计算机可读存储介质
CN111666068B (zh) 一种平台开发框架、构建方法、设备及介质
CN114327453A (zh) 页面显示方法、装置、设备及存储介质
CN113296771A (zh) 页面显示方法、装置、设备和计算机可读介质
CN112148417A (zh) 页面调整方法、装置、电子设备和计算机可读介质
CN111190599A (zh) 利用Dialog实现安卓自定义软键盘的方法、装置及电子设备
CN111324835A (zh) 渲染用户界面组件的方法、装置、电子设备、及存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant