Web页面的消息发布方法及装置和电子设备
技术领域
本说明书实施例涉及互联网技术领域,尤其涉及一种Web页面的消息发布方法及装置和电子设备。
背景技术
Web页面通常可以是指通过浏览器打开的网页页面。现有Web页面仅支持发布纯文本的消息。这无疑限制了用户想要发布其它消息形式的需要,整体用户体验不够友好。
发明内容
本说明书实施例提供的一种Web页面的消息发布方法及装置和电子设备:
根据本说明书实施例的第一方面,提供一种Web页面的消息发布方法,所述方法应用在所述Web页面中的消息发布器中,所述消息发布器通过HTML5技术构建,所述消息发布器至少包括消息输入框和虚拟键盘;所述方法包括:
如果位于所述Web页面中第一预设区域的输入框被触发,在所述Web页面的第二预设区域唤起隐藏的虚拟键盘;其中,所述虚拟键盘中包含有表情图标;
如果所述虚拟键盘中目标表情图标被选中,在所述输入框中输入所述目标表情图标对应的表情标识;
如果所述输入框中输入的消息被发送并且所述消息中包含表情标识,将所述消息中的表情标识转换为对应的表情图标后,将所述转换后的消息显示在所述Web页面的评论区域。
可选的,所述在所述Web页面的第二预设区域唤起隐藏的虚拟键盘,具体包括:
在所述Web页面的第二预设区域以Fixed布局的方式唤起隐藏的虚拟键盘。
可选的,在所述Web页面的第二预设区域唤起隐藏的虚拟键盘之前,所述方法还包括:
将所述Web页面的boby高度设为100%,并记录所述Web页面中滚动条的位置为上一次滚动条的位置;
将所述Web页面的boby内部content层向上移动到上一次滚动条的位置
所述在所述Web页面的第二预设区域唤起隐藏的虚拟键盘,具体包括:
从所述Web页面底部显示隐藏的虚拟键盘。
可选的,所述方法还包括:
如果所述虚拟键盘中删除按钮被触发,并且检测到所述输入框中光标之前为表情标识,删除所述表情标识。
可选的,所述虚拟键盘通过map(key,value)管理所有表情图标;其中,所述表情标识为key,所述表情图标为value。
可选的,所述在所述输入框中输入所述目标表情图标对应的表情标识,具体包括:
根据被选中的value从map中获取对应的key;
在所述输入框中输入所获取的key。
可选的,所述将所述消息中的表情标识转换为对应的表情图标后,将所述转换后的消息显示在所述Web页面的评论区域,具体包括:
根据所述消息中的key从map中获取对应的value;
将所述消息中的key替换value后,显示在所述Web页面的评论区域。
可选的,所述key由特定第一符合和特定第二符号以及位于所述特定第一符合和特定第二符号之间的内容构成;
所述如果所述虚拟键盘中删除按钮被触发,并且检测到所述输入框中光标之前为表情标识,删除所述表情标识,具体包括:
如果所述虚拟键盘中删除按钮被触发,并且检测到所述输入框中光标之前为特定第二符号,判断在所述特定第二符号之前是否存在特定第一符号;
如果在所述特定第二符号之前是否存在特定第一符号,删除所述特定第一符号和特定第二符合,以及所述特定第一符号和特定第二符合之间的内容。
根据本说明书实施例的第二方面,提供一种Web页面的消息发布装置,所述装置应用在所述Web页面中的消息发布器中,所述消息发布器通过HTML5技术构建,所述消息发布器至少包括消息输入框和虚拟键盘;所述装置包括:
唤起单元,如果位于所述Web页面中第一预设区域的输入框被触发,在所述Web页面的第二预设区域唤起隐藏的虚拟键盘;其中,所述虚拟键盘中包含有表情图标;
输入单元,如果所述虚拟键盘中目标表情图标被选中,在所述输入框中输入所述目标表情图标对应的表情标识;
发布单元,如果所述输入框中输入的消息被发送并且所述消息中包含表情标识,将所述消息中的表情标识转换为对应的表情图标后,将所述转换后的消息显示在所述Web页面的评论区域。
根据本说明书实施例的第三方面,提供一种电子设备,包括:
处理器;
用于存储处理器可执行指令的存储器;
其中,所述处理器被配置为上述任一项Web页面的消息发布方法。
本说明书实施例,提供了一种Web页面的消息发布方案,通过HTML5技术重构了Web端的消息发布器,并为消息发布器的虚拟键盘提供了表情图标,以使用户可以发布包含表情图标的评论。
附图说明
图1是本说明书一实施例提供的Web页面的消息发布方法的流程图;
图2a是本说明书一实施例提供的Web页面中消息发布器组件的示意图;
图2b是基于图2a所示消息发布器发布的带有表情图标的评论示意图;
图3是本说明书一实施例提供的Fixed布局的页面结构的示意图;
图4是本说明书一实施例提供的Flex布局的页面结构的示意图;
图5是本说明书一实施例提供的消息发布器组件出现定位失效的示意图;
图6是本说明书一实施例提供的Web页面的消息发布装置的硬件结构图;
图7是本说明书一实施例提供的Web页面的消息发布装置的模块示意图。
具体实施方式
这里将详细地对示例性实施例进行说明,其示例表示在附图中。下面的描述涉及附图时,除非另有表示,不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本说明书相一致的所有实施方式。相反,它们仅是与如所附权利要求书中所详述的、本说明书的一些方面相一致的装置和方法的例子。
在本说明书使用的术语是仅仅出于描述特定实施例的目的,而非旨在限制本说明书。在本说明书和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式,除非上下文清楚地表示其他含义。还应当理解,本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。
应当理解,尽管在本说明书可能采用术语第一、第二、第三等来描述各种信息,但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如,在不脱离本说明书范围的情况下,第一信息也可以被称为第二信息,类似地,第二信息也可以被称为第一信息。取决于语境,如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。
通常互联网中***架构可以分为B/S和C/S这两种不同的架构方式。其中,所述B/S是指Browser/Server(浏览器/服务器);所述C/S是指Client/Server(客户机/服务器)。
通常情况下,B/S架构下,可以采用浏览器访问服务器以获取信息。例如打开需要浏览的网页;这样的网页通常可以称之为Web页面。
而,C/S架构下,可以是通过应用客户端(如APP)访问服务器以获取信息。
本说明书是针对,B/S架构下Web页面中消息发布方式进行的改进。从而提供了一种Web页面的消息发布方案,具体地通过HTML5技术重构了Web端的消息发布器,并为消息发布器的虚拟键盘提供了表情图标,以使用户可以发布包含表情图标的评论。
以下可以参考图1所示的例子介绍,该方法可以应用在所述Web页面中的消息发布器中,所述消息发布器通过HTML5技术构建,所述消息发布器的组件至少包括消息输入框和虚拟键盘,所述方法可以包括以下步骤:
步骤110:如果位于所述Web页面中第一预设区域的输入框被触发,在所述Web页面的第二预设区域唤起隐藏的虚拟键盘;其中,所述虚拟键盘中包含有表情图标;
步骤120:如果所述虚拟键盘中目标表情图标被选中,在所述输入框中输入所述目标表情图标对应的表情标识;
步骤130:如果所述输入框中输入的消息被发送并且所述消息中包含表情标识,将所述消息中的表情标识转换为对应的表情图标后,将所述转换后的消息显示在所述Web页面的评论区域。
用户可以通过浏览器打开某个资讯页面;然后,可以浏览该资讯页面中的详细内容。通常,页面的底部可以显示有供用户评论的输入框;当检测到用户点击输入框时,会触发唤起隐藏的键盘的操作。如图2a所示,Web页面中的消息发布器组件至少包括了输入框21和虚拟键盘22。所述虚拟键盘22中包含有若干表情图标的选项。
在一实施例中,所述在所述Web页面的第二预设区域唤起隐藏的虚拟键盘,具体可以包括:
在所述Web页面的第二预设区域以Fixed布局的方式唤起隐藏的虚拟键盘。
Fixed布局方式对于Web页面的结构要求较低,具有较高灵活性;如图3所示的Fixed布局的页面结构的示意图:
以Fixed布局方式展示的消息发布器组件(可以是指虚拟键盘)可以位于任意dom层级。
采用Fixed布局时,消息发布器组件可以固定在页面底部;并且body高度可以大于100%,无需额外对滚动实现做编写,可以直接使用原生滚动方式;降低了Web页面编写成本。
除了采用Fixed布局之外,也可以采用Flex(Flexible Box,弹性盒子)布局方式。
Flex布局对于Web页面的结构要求较高;如图4所示的Flex布局的页面结构的示意图:
以Flex布局方式展示的消息发布器组件不能放在任意dom成绩,需要和内容最外层同级,页面滚动需要在内容层执行而不是window层。
采用Flex布局时,body高度为100%,body内不能滚动;滚动方式需要在内容滚动区实现,无法采用原生滚动方式。
本说明书提供的消息发布器即可以通过Flex布局接入也可以通过Fixed布局接入。
在实际应用中,有些情况下可能会出现图5所示的定位失效的问题。具体地,在某些浏览器如safari上,在虚拟键盘被唤起后,消息发布器组件会出现定位失效的问题。
为了解决这一问题,在所述Web页面的第二预设区域唤起隐藏的虚拟键盘之前,所述方法还包括:
将所述Web页面的boby高度设为100%,并记录所述Web页面中滚动条的位置为上一次滚动条的位置;
将所述Web页面的boby内部content层向上移动到上一次滚动条的位置所述在所述Web页面的第二预设区域唤起隐藏的虚拟键盘,具体包括:
从所述Web页面底部显示隐藏的虚拟键盘。
通过上述步骤,可以保证虚拟键盘被唤起的瞬间,body的高度不能大于一屏。具体地,在输入框被触发以及获取光标焦点之前,把body高度设置为100%,同时记录当前body.scrollTop的位置,并将整个页面内容向上移动body.scrollTop的距离;然后,才可以调用输入框的focus方法,唤起虚拟键盘。
以下继续参考图2a,当用户选中了目标表情图标221后,在输入框21中并不是直接显示该表情,而是显示的该目标表情图标231对应的表情标识[伤心]。
这样实现的目的是:
由于输入框中的消息作为待发送的消息,如果直接以表情图标的形式传输,则相对于以表情标识的形式,数据量无疑增加很多;出于减少传输数据量、减少占用的带宽,可以以请求标识的方式传输。
一般的,Web页面的服务器中可以保存有表情图标与表情标识之间一一对应关系。也就是说,表情标识具备全局唯一性,如此可以保证服务器在接收到虚拟键盘中的表情图标后转换为对应的表情标识,也可以根据收到的表情标识还原出对应的表情图标。
在一实施例中,所述表情图标与表情标识之间一一对应关系可以是以key-value的形式存储的。
其中,表情标识可以作为key,表情图标可以作为value;如此可以生成一个map(key,value)来管理所有的表情图标。
如此,所述在所述输入框中输入所述目标表情图标对应的表情标识,具体包括:
根据被选中的value从map中获取对应的key;
在所述输入框中输入所获取的key。
相应地,所述将所述消息中的表情标识转换为对应的表情图标后,将所述转换后的消息显示在所述Web页面的评论区域,具体包括:
根据所述消息中的key从map中获取对应的value;
将所述消息中的key替换value后,显示在所述Web页面的评论区域。
在图2a基础上,可以进一步结合图2b理解,待用户点击发送图2a中输入框中消息后,Web页面的评论区域中可以显示该消息;如果该消息中存在表情标识,则服务器可以将表情标识转换为对应的表情图标后记录到评论中。如此,用户就可以浏览到自己发送的包含有表情图标的评论,如图2b所示,用户之前输入到输入框中的消息为“我好伤心[伤心]”;而评论区域内显示的却是虚线框231的内容:“我好伤心”以及伤心表情(图2a中目标表情图标221)。
在一实施例中,由于虚拟键盘可显示的内容有限,不同内容可以通过键盘切换功能进行转换。例如,用户可以点击图2a中的键盘切换按钮222,以将当前虚拟键盘展示的表情图标转换为字符(如***字符键盘)。
在一实施例中,所述方法还包括:
如果所述虚拟键盘中删除按钮被触发,并且检测到所述输入框中光标之前为表情标识,删除所述表情标识。
本说明书中,表情标识可以是以特定格式表示的,如图2a所示,表情标识由符号“[]”以及该符号内的文字构成。当检测到输入框内的光标之前的包含符号“]”时,判断之前是否还存在符号“[”,如果存在则整体删除“[]”以及之间的文字。
也就是说,所述key由特定第一符合和特定第二符号以及位于所述特定第一符合和特定第二符号之间的内容构成;
所述如果所述虚拟键盘中删除按钮被触发,并且检测到所述输入框中光标之前为表情标识,删除所述表情标识,具体包括:
如果所述虚拟键盘中删除按钮被触发,并且检测到所述输入框中光标之前为特定第二符号,判断在所述特定第二符号之前是否存在特定第一符号;
如果在所述特定第二符号之前是否存在特定第一符号,删除所述特定第一符号和特定第二符合,以及所述特定第一符号和特定第二符合之间的内容。
需要说明的是,通过“[]”表示图标标识仅为一个示例,在实际应用中可以是任意形式的展示方式,例如可以“&&”,或者“&]”这样前后不同的符号;本说明书并不对其进行限定。因此,上述特定第一符合和特定第二符合即可以是相同的符合,也可以是不同的符号。
综上所述,本说明书提供了一种Web页面的消息发布方案,通过HTML5技术重构了Web端的消息发布器,并为消息发布器的虚拟键盘提供了表情图标,以使用户可以发布包含表情图标的评论。
与前述Web页面的消息发布方法实施例相对应,本说明书还提供了Web页面的消息发布装置的实施例。所述装置实施例可以通过软件实现,也可以通过硬件或者软硬件结合的方式实现。以软件实现为例,作为一个逻辑意义上的装置,是通过其所在设备的处理器将非易失性存储器中对应的计算机业务程序指令读取到内存中运行形成的。从硬件层面而言,如图6所示,为本说明书Web页面的消息发布装置所在设备的一种硬件结构图,除了图6所示的处理器、网络接口、内存以及非易失性存储器之外,实施例中装置所在的设备通常根据Web页面的消息发布实际功能,还可以包括其他硬件,对此不再赘述。
请参见图7,为本说明书一实施例提供的Web页面的消息发布装置的模块图,所述装置对应了图1所示实施例,所述装置应用在所述Web页面中的消息发布器中,所述消息发布器通过HTML5技术构建,所述消息发布器至少包括消息输入框和虚拟键盘;所述装置包括:
唤起单元410,如果位于所述Web页面中第一预设区域的输入框被触发,在所述Web页面的第二预设区域唤起隐藏的虚拟键盘;其中,所述虚拟键盘中包含有表情图标;
输入单元420,如果所述虚拟键盘中目标表情图标被选中,在所述输入框中输入所述目标表情图标对应的表情标识;
发布单元430,如果所述输入框中输入的消息被发送并且所述消息中包含表情标识,将所述消息中的表情标识转换为对应的表情图标后,将所述转换后的消息显示在所述Web页面的评论区域。
可选的,所述唤起单元410中的在所述Web页面的第二预设区域唤起隐藏的虚拟键盘,具体包括:
在所述Web页面的第二预设区域以Fixed布局的方式唤起隐藏的虚拟键盘。
可选的,在所述所述唤起单元410中的在Web页面的第二预设区域唤起隐藏的虚拟键盘之前,还包括:
将所述Web页面的boby高度设为100%,并记录所述Web页面中滚动条的位置为上一次滚动条的位置;
将所述Web页面的boby内部content层向上移动到上一次滚动条的位置所述在所述Web页面的第二预设区域唤起隐藏的虚拟键盘,具体包括:
从所述Web页面底部显示隐藏的虚拟键盘。
可选的,所述装置还包括:
删除单元,如果所述虚拟键盘中删除按钮被触发,并且检测到所述输入框中光标之前为表情标识,删除所述表情标识。
可选的,所述虚拟键盘通过map(key,value)管理所有表情图标;其中,所述表情标识为key,所述表情图标为value。
可选的,所述输入单元420中在所述输入框中输入所述目标表情图标对应的表情标识,具体包括:
根据被选中的value从map中获取对应的key;
在所述输入框中输入所获取的key。
可选的,所述发布单元430中将所述消息中的表情标识转换为对应的表情图标后,将所述转换后的消息显示在所述Web页面的评论区域,具体包括:
根据所述消息中的key从map中获取对应的value;
将所述消息中的key替换value后,显示在所述Web页面的评论区域。
可选的,所述key由特定第一符合和特定第二符号以及位于所述特定第一符合和特定第二符号之间的内容构成;
所述删除单元,具体包括:
如果所述虚拟键盘中删除按钮被触发,并且检测到所述输入框中光标之前为特定第二符号,判断在所述特定第二符号之前是否存在特定第一符号;
如果在所述特定第二符号之前是否存在特定第一符号,删除所述特定第一符号和特定第二符合,以及所述特定第一符号和特定第二符合之间的内容。
上述实施例阐明的***、装置、模块或单元,具体可以由计算机芯片或实体实现,或者由具有某种功能的产品来实现。一种典型的实现设备为计算机,计算机的具体形式可以是个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件收发设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任意几种设备的组合。
上述装置中各个单元的功能和作用的实现过程具体详见上述方法中对应步骤的实现过程,在此不再赘述。
对于装置实施例而言,由于其基本对应于方法实施例,所以相关之处参见方法实施例的部分说明即可。以上所描述的装置实施例仅仅是示意性的,其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本说明书方案的目的。本领域普通技术人员在不付出创造性劳动的情况下,即可以理解并实施。
以上图7描述了Web页面的消息发布装置的内部功能模块和结构示意,其实质上的执行主体可以为一种电子设备,包括:
处理器;
用于存储处理器可执行指令的存储器;
其中,所述处理器被配置为:
如果位于所述Web页面中第一预设区域的输入框被触发,在所述Web页面的第二预设区域唤起隐藏的虚拟键盘;其中,所述虚拟键盘中包含有表情图标;
如果所述虚拟键盘中目标表情图标被选中,在所述输入框中输入所述目标表情图标对应的表情标识;
如果所述输入框中输入的消息被发送并且所述消息中包含表情标识,将所述消息中的表情标识转换为对应的表情图标后,将所述转换后的消息显示在所述Web页面的评论区域。
可选的,所述在所述Web页面的第二预设区域唤起隐藏的虚拟键盘,具体包括:
在所述Web页面的第二预设区域以Fixed布局的方式唤起隐藏的虚拟键盘。
可选的,在所述Web页面的第二预设区域唤起隐藏的虚拟键盘之前,还包括:
将所述Web页面的boby高度设为100%,并记录所述Web页面中滚动条的位置为上一次滚动条的位置;
将所述Web页面的boby内部content层向上移动到上一次滚动条的位置所述在所述Web页面的第二预设区域唤起隐藏的虚拟键盘,具体包括:
从所述Web页面底部显示隐藏的虚拟键盘。
可选的,还包括:
如果所述虚拟键盘中删除按钮被触发,并且检测到所述输入框中光标之前为表情标识,删除所述表情标识。
可选的,所述虚拟键盘通过map(key,value)管理所有表情图标;其中,所述表情标识为key,所述表情图标为value。
可选的,所述在所述输入框中输入所述目标表情图标对应的表情标识,具体包括:
根据被选中的value从map中获取对应的key;
在所述输入框中输入所获取的key。
可选的,所述将所述消息中的表情标识转换为对应的表情图标后,将所述转换后的消息显示在所述Web页面的评论区域,具体包括:
根据所述消息中的key从map中获取对应的value;
将所述消息中的key替换value后,显示在所述Web页面的评论区域。
可选的,所述key由特定第一符合和特定第二符号以及位于所述特定第一符合和特定第二符号之间的内容构成;
所述如果所述虚拟键盘中删除按钮被触发,并且检测到所述输入框中光标之前为表情标识,删除所述表情标识,具体包括:
如果所述虚拟键盘中删除按钮被触发,并且检测到所述输入框中光标之前为特定第二符号,判断在所述特定第二符号之前是否存在特定第一符号;
如果在所述特定第二符号之前是否存在特定第一符号,删除所述特定第一符号和特定第二符合,以及所述特定第一符号和特定第二符合之间的内容。
在上述电子设备的实施例中,应理解,该处理器可以是中央处理单元(英文:Central Processing Unit,简称:CPU),还可以是其他通用处理器、数字信号处理器(英文:Digital Signal Processor,简称:DSP)、专用集成电路(英文:Application SpecificIntegrated Circuit,简称:ASIC)等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等,而前述的存储器可以是只读存储器(英文:read-only memory,缩写:ROM)、随机存取存储器(英文:random access memory,简称:RAM)、快闪存储器、硬盘或者固态硬盘。结合本发明实施例所公开的方法的步骤可以直接体现为硬件处理器执行完成,或者用处理器中的硬件及软件模块组合执行完成。
本说明书中的各个实施例均采用递进的方式描述,各个实施例之间相同相似的部分互相参见即可,每个实施例重点说明的都是与其他实施例的不同之处。尤其,对于电子设备实施例而言,由于其基本相似于方法实施例,所以描述的比较简单,相关之处参见方法实施例的部分说明即可。
本领域技术人员在考虑说明书及实践这里公开的发明后,将容易想到本说明书的其它实施方案。本说明书旨在涵盖本说明书的任何变型、用途或者适应性变化,这些变型、用途或者适应性变化遵循本说明书的一般性原理并包括本说明书未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的,本说明书的真正范围和精神由下面的权利要求指出。
应当理解的是,本说明书并不局限于上面已经描述并在附图中示出的精确结构,并且可以在不脱离其范围进行各种修改和改变。本说明书的范围仅由所附的权利要求来限制。