CN106909288B - 应用程序的刷新方法、装置及电子设备 - Google Patents

Abstract

本发明实施例提供一种应用程序的刷新方法、装置及电子设备，设计计算机应用技术领域。通过在用户在电子设备上进行滑动操作，使Webview滑动，通过Native端将Webview的移动距离通过js桥传输至网页端，当此移动距离达到预设距离，且用户与电子设备的屏幕接触的部位离开屏幕时，触发网页端的刷新命令，使网页端进行刷新，并且网页端刷新后将其刷新的结果反馈至Native端，使Native端在电子设备的屏幕上呈现表征不同刷新结果的图像。Native端利用js桥与网页进行交互而实现的下拉刷新方案，刷新内容通过网页获取，获取的信息更加及时，交互方式更加灵活，开发成本交底，利于大范围推广。

Description

应用程序的刷新方法、装置及电子设备

技术领域

本发明涉及计算机应用技术领域，具体而言，涉及一种应用程序的刷新方法、装置及电子设备。

背景技术

随着移动互联网的不断发展，Native应用(又称本地应用，纯粹使用android控件来开发UI界面)的劣势开始不断显露，诸如开发成本高等。现在很多Native应用中都带有下拉刷新功能，当用户进行页面的下拉刷新时，对新内容进行更新和展示。例如：微博、微信、掌阅等都带有下拉刷新功能，但是，现在微博等的下拉刷新都是基于Native控件之间的交互，页面刷新的交互方式不灵活。

发明内容

有鉴于此，本发明实施例的目的在于提供一种应用程序的刷新方法、装置及电子设备，以改善上述问题。

本发明实施例提供的一种应用程序的刷新方法，应用于电子设备，所述方法包括：Native端响应用户对数据集展示组件的第一操作时，将所述数据集展示组件的移动距离通过js桥发送至网页端；若所述移动距离达到预设距离时，所述网页端响应用户对所述数据集展示组件的第二操作，所述网页端刷新HTML5页面；所述网页端将HTML5页面的刷新结果通过所述js桥发送至所述Native端；所述Native端在所述电子设备上显示所述HTML5页面的刷新结果。

本发明实施例还提供的一种应用程序的刷新装置，应用于电子设备，所述装置包括Native端和网页端，所述Native端包括：距离传输模块，用于响应用户对数据集展示组件的第一操作时，将所述数据集展示组件的移动距离通过js桥发送至网页端；所述网页端包括：刷新模块，用于若所述移动距离达到预设距离时，所述网页端响应用户对所述数据集展示组件的第二操作，刷新HTML5页面；结果传输模块，用于将所述HTML5页面的刷新结果通过所述js桥发送至所述Native端；所述Native端还包括显示模块，用于在所述电子设备上显示所述HTML5页面的刷新结果。

本发明实施例还提供的一种电子设备，所述电子设备包括：存储器；处理器；及应用程序的刷新装置，所述应用程序的刷新装置安装于所述存储器中并包括一个或多个由所述处理器执行的软件功能模块，所述应用程序的刷新装置包括Native端和网页端，所述Native端包括：距离传输模块，用于响应用户对数据集展示组件的第一操作时，将所述数据集展示组件的移动距离通过js桥发送至网页端；所述网页端包括：刷新模块，用于若所述移动距离达到预设距离时，所述网页端响应用户对所述数据集展示组件的第二操作，刷新HTML5页面；结果传输模块，用于将所述HTML5页面的刷新结果通过所述js桥发送至所述Native端；所述Native端还包括显示模块，用于在该电子设备上显示所述HTML5页面的刷新结果。

与现有技术相比，本发明的应用程序的刷新方法、装置应用于电子设备，通过在用户在电子设备上进行滑动操作，使Webview滑动，通过Native端将Webview的移动距离通过js桥传输至网页端，当此移动距离达到预设距离，且用户与电子设备的屏幕接触的部位离开屏幕时，触发网页端的刷新命令，使网页端进行刷新，并且网页端刷新后将其刷新的结果反馈至Native端，使Native端在电子设备的屏幕上呈现表征不同刷新结果的图像。Native端利用js桥与网页进行交互而实现的下拉刷新方案，刷新内容可以通过网页获取，获取的信息更加及时，交互方式更加灵活，开发成本交底，利于大范围推广。

为使本发明的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1为本发明较佳实施例提供的电子设备的方框示意图。

图2为本发明较佳实施例提供的应用程序的刷新装置的功能模块示意图。

图3a和图3b均为本发明较佳实施例提供的显示单元显示的应用程序的刷新装置内的页面。

图4为本发明较佳实施例提供的应用程序的刷新方法的流程图。

图标：10-电子设备；101-存储器；102-存储控制器；103-处理器；104-外设接口；105-显示单元；200-应用程序的刷新装置；300-网页端；301-刷新模块；302-结果传输模块；400-Native端；401-距离传输模块；402-显示模块；403-js桥。

具体实施方式

下面将结合本发明实施例中附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。同时，在本发明的描述中，术语“第一”、“第二”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

请参考图1，本发明实施例提供的应用程序的刷新装置200可应用于电子设备10中。所述电子设备10可以是，但不限于智能手机、个人电脑(personal computer，PC)、平板电脑、个人数字助理(personal digital assistant，PDA)、移动上网设备(mobileInternet device，MID)等。所述电子设备10的操作系统可以是，但不限于，安卓(Android)系统、IOS(iPhone operating system)系统、Windows phone系统、Windows系统等。

于本发明实施例中，所述应用程序的刷新装置200可以是安装于电子设备10中的应用程序(Application，APP)，如书旗小说客户端、牵牛客户端、淘宝客户端等。所述电子设备10还包括存储器101、存储控制器102、处理器103、外设接口104以及显示单元105。

所述存储器101、存储控制器102、处理器103、外设接口104以及显示单元105，各元件相互之间直接或间接地电性连接，以实现数据的传输或交互。例如，这些元件相互之间可通过一条或多条通讯总线或信号线实现电性连接。所述应用程序的刷新装置200包括至少一个可以软件或固件(firmware)的形式存储于所述存储器101中或固化在所述电子设备10的操作系统(operating system，OS)中的软件功能模块。所述处理器103用于执行存储器101中存储的可执行模块，例如，所述应用程序的刷新装置200包括的软件功能模块或计算机程序。

处理器103可能是一种集成电路芯片，具有信号的处理能力。上述的处理器103可以是通用处理器，包括中央处理器(Central Processing Unit，简称CPU)、网络处理器(Network Processor，简称NP)等；还可以是数字信号处理器(DSP)、专用集成电路(ASIC)、现成可编程门阵列(FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本发明实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器103也可以是任何常规的处理器等。

所述外设接口104将各种输入/输出装置耦合至处理器103以及存储器101。在一些实施例中，外设接口104，处理器103以及存储控制器102可以在单个芯片中实现。在其他一些实例中，他们可以分别由独立的芯片实现。

显示单元105在所述电子设备10与用户之间提供一个交互界面(例如用户操作界面)或用于显示图像数据给用户参考。在本实施例中，所述显示单元105可以是液晶显示器或触控显示器。若为触控显示器，其可为支持单点和多点触控操作的电容式触控屏或电阻式触控屏等。支持单点和多点触控操作是指触控显示器能感应到来自该触控显示器上一个或多个位置处同时产生的触控操作，并将该感应到的触控操作交由处理器进行计算和处理。优选地，该显示单元105可用于接收用户的下拉动作、用户手指与显示单元105分离的动作及显示应用程序的刷新装置200更新的信息、应用程序的刷新装置200的本地图片等。

第一实施例

请参考图2，是本发明第一实施例提供的应用程序的刷新装置200的结构框图，所述应用程序的刷新装置200包括Native端400和网页端300。所述Native端400包括距离传输模块401、显示模块402以及js桥403，所述网页端300包括数据集展示组件、刷新模块301、HTML5页面以及结果传输模块302。

当用户在电子设备10上打开应用程序的刷新装置200后，在显示单元105上进行滑动操作时，Native端400控制所述数据集展示组件跟随用户手指的滑动而移动，本实施例中，所述数据集展示组件为Webview，Webview可以使HTML5页面内嵌入应用程序的刷新装置200内。当然，在其他具体实施方式中，所述数据集展示组件还可以为其他，例如文本控件、图片控件、Button控件、scrollview等。

优选的，所述Webview在用户在显示单元105上进行下滑操作时向下移动，即用户可进行对Webview的下拉操作，可以理解为第一操作。如图3a，示出了用户未滑动电子设备10的显示单元105时，所述应用程序的刷新装置200内的页面情况。

在Webview移动时，网页端300通过调用js桥403将被下拉的状态告知所述Native端400，以使距离传输模块401开始工作。距离传输模块401用于响应用户对数据集展示组件的第一操作时，通过js桥403将Webview的移动距离发送至网页端300。其中，所述js桥403为连接Java和JavaScript的桥梁，js桥403提供了安全、方便的方式从JavaScript调用Java代码和从Java中调用JavaScript代码。

所述刷新模块301，用于当所述移动距离达到预设距离时，所述网页端300响应用户对所述数据集展示组件的第二操作，刷新HTML5页面。所述第二操作为用户下拉Webview移动至预设距离后或移动的距离大于预设距离后，用户与电子设备10的接触部位离开显示单元105。在用户完成第二操作时，刷新模块301可以请求网络端口，使HTML5页面刷新。

当HTML5页面刷新成功后，可将刷新成功后的HTML5页面直接在电子设备10的显示单元105上显示，以供用户阅览。

在用户进行第一操作时，所述Native端400将所述Webview的移动距离发送至网页端300的同时，显示模块402在所述电子设备10上显示第一图像，所述显示模块402可以控制对所述第一图像进行缩放，跟随所述Webview的移动距离的增大而增大，所述移动距离达到预设距离时，所述第一图像不再增大。当然，在其他具体实施方式中，还可以用多张不同大小的图片进行替换。

所述结果传输模块302，用于将所述HTML5页面的刷新结果通过所述js桥403发送至所述Native端400。所述HTML5页面的刷新结果包括所述HTML5页面刷新成功，当所述HTML5页面刷新成功时，刷新成功后的HTML5页面直接在电子设备10的显示单元105上显示，同时所述显示模块402在所述电子设备10上显示第二图像。所述HTML5页面的刷新结果还包括所述HTML5页面刷新失败，当所述HTML5页面刷新失败时，如请求网络端口失败时，电子设备10的显示单元105上可以显示未刷新前的HTML5页面，所述显示模块402还在所述电子设备10上显示第三图像。如图3b示出了用户下拉Webview后，所述显示模块402将调取第一图像或第二图像或第三图像在所述显示单元105上显示。其中，所述第一图像、第二图像以及第三图像均为所述电子设备10的本地图像，可预先存储于所述存储器101内。

需要提到的是，在用户进行第一操作时，Webview的移动距离在达到预设距离之前时，所述网页端300还进行初始化工作和渲染。例如，网页端300在HTML5页面刷新前进行加载，初始化一些其他控件，如应用程序的刷新装置200最顶部的TitleBar控件。

第二实施例

请参考图4，示出了本发明第二实施例提供的应用程序的刷新方法的流程示意图。需要说明的是，本发明所述的应用程序的刷新方法并不以图4以及以下所述的具体顺序为限制。应当理解，在其它实施例中，本发明所述的应用程序的刷新方法其中部分步骤的顺序可以根据实际需要相互交换，或者其中的部分步骤也可以省略或删除。本实施例的应用程序的刷新方法应用于第一实施例的应用程序的刷新装置200。下面将对图4所示的具体流程进行详细阐述。请参阅图4，所述应用程序的刷新方法包括：

步骤S101，Native端400将所述数据集展示组件的移动距离通过js桥403发送至网页端300。

当用户下拉所述数据集展示组件时，网页端300通过调用js桥403将被下拉的状态告知所述Native端400，Native端400开始检测所述数据集展示组件的移动距离，再通过js桥403将数据集展示组件的移动距离发送至网页端300。

本实施例中，所述步骤S101可以由距离传输模块401执行。所述数据集展示组件为Webview。

步骤S102，若所述移动距离达到预设距离时，所述网页端300刷新HTML5页面。具体的，在用户下拉Webview达到预设距离后，且用户的手指离开电子设备10的显示单元105后，网页端300刷新HTML5页面。

若HTML5页面刷新成功，则刷新后的HTML5页面替换刷新前的HTML5页面，若HTML5页面刷新失败，则保留刷新前的HTML5页面。

本实施例中，所述步骤S102可以由刷新模块301执行。

步骤S103，将HTML5页面的刷新结果通过所述js桥403发送至所述Native端400。在网页端300刷新HTML5页面后，网页端300还会反馈给Native端400是否刷新成功的信息，使Native端400清楚地展现给用户HTML5页面的刷新结果。

本实施例中，所述步骤S103可以由结果传输模块302执行。

步骤S104，Native端400在所述电子设备10上显示HTML5页面的刷新结果。

当Native端400接收到结果传输模块302发送的HTML5页面的刷新结果后，Native端400将HTML5页面的刷新结果通过图像的形式在电子设备10上进行显示。当所述HTML5页面刷新成功时，在电子设备10上显示第二图像；当所述HTML5页面刷新失败时，在所述电子设备10上显示第三图像。需要提到的是，在用户下拉Webview使Webview的移动距离由0到预设距离直至用户与电子设备10的接触部位分离之前，Native端400在所述电子设备10上显示第一图像，所述Native端400可以控制对第一图像进行缩放，使第一图像跟随所述Webview的移动距离的增大而增大，当移动距离达到预设距离时，所述第一图像不再增大。

本实施例中，所述步骤S104可以由显示模块402执行。

本发明实施例的应用程序的刷新方法尤其适用于安装在手机中的书旗小说客户端。

综上所述，本发明提供的应用程序的刷新方法及装置，通过在用户在手机上进行滑动操作，使Webview滑动，通过Native端将Webview的移动距离通过js桥传输至网页端，当此移动距离达到预设距离，且用户与手机屏幕接触的部位离开屏幕时，触发网页端的刷新命令，使网页端进行刷新，并且网页端刷新后将其刷新的结果反馈至Native端，使Native端在手机屏幕上呈现表征不同刷新结果的图像。Native端利用js桥与网页进行交互而实现的下拉刷新方案，刷新内容可以通过网页获取，获取的信息更加及时，交互方式更加灵活，开发成本交底，利于大范围推广。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本发明的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

另外，在本发明各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。

所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应所述以权利要求的保护范围为准。

Claims (17)

1.一种应用程序的刷新方法，应用于电子设备，其特征在于，所述方法包括：

所述电子设备的网页端通过js桥向所述电子设备的Native端发送所述网页端的数据集展示组件的移动状态以触发所述Native端工作，Native端响应用户对数据集展示组件的第一操作时，将所述数据集展示组件的移动距离通过js桥发送至网页端；

若所述移动距离达到预设距离时，所述网页端响应用户对所述数据集展示组件的第二操作，所述网页端刷新HTML5页面；

所述网页端将HTML5页面的刷新结果通过所述js桥发送至所述Native端；

所述Native端在所述电子设备上显示所述HTML5页面的刷新结果。

2.根据权利要求1所述的应用程序的刷新方法，其特征在于，在所述移动距离达到预设距离之前，所述Native端在所述电子设备上显示第一图像。

3.根据权利要求2所述的应用程序的刷新方法，其特征在于，控制所述第一图像的比例跟随所述移动距离的增大而增大。

4.根据权利要求1所述的应用程序的刷新方法，其特征在于，所述HTML5页面的刷新结果包括所述HTML5页面刷新成功，所述Native端在所述电子设备显示所述HTML5页面的刷新结果包括：当所述HTML5页面刷新成功时，所述Native端在所述电子设备上显示第二图像。

5.根据权利要求1所述的应用程序的刷新方法，其特征在于，所述HTML5页面的刷新结果包括所述HTML5页面刷新失败，所述Native端在所述电子设备上显示所述HTML5页面的刷新结果包括：当所述HTML5页面刷新失败时，所述Native端在所述电子设备上显示第三图像。

6.根据权利要求1所述的应用程序的刷新方法，其特征在于，所述数据集展示组件为Webview，所述方法包括：响应用户与所述电子设备的显示单元上的滑动操作，控制所述Webview进行移动。

7.根据权利要求6所述的应用程序的刷新方法，其特征在于，所述方法包括：所述Native端实时将所述Webview的移动距离发送至所述网页端，所述网页端在所述Webview的移动距离达到所述预设距离之前还进行初始化工作。

8.根据权利要求1所述的应用程序的刷新方法，其特征在于，在所述网页端刷新HTML5页面之后还包括：所述电子设备显示刷新后的所述HTML5页面。

9.一种应用程序的刷新装置，应用于电子设备，其特征在于，所述装置包括Native端和网页端，所述Native端包括：

距离传输模块，用于根据所述网页端通过js桥发送的所述网页端的数据集展示组件的移动状态触发工作，响应用户对数据集展示组件的第一操作时，将所述数据集展示组件的移动距离通过js桥发送至网页端；

所述网页端包括：

刷新模块，用于若所述移动距离达到预设距离时，所述网页端响应用户对所述数据集展示组件的第二操作，刷新HTML5页面；

结果传输模块，用于将所述HTML5页面的刷新结果通过所述js桥发送至所述Native端；

所述Native端还包括显示模块，用于在所述电子设备上显示所述HTML5页面的刷新结果。

10.根据权利要求9所述的应用程序的刷新装置，其特征在于，在所述移动距离达到预设距离之前，所述显示模块在所述电子设备上显示第一图像。

11.根据权利要求10所述的应用程序的刷新装置，其特征在于，所述显示模块控制所述第一图像的比例跟随所述移动距离的增大而增大。

12.根据权利要求9所述的应用程序的刷新装置，其特征在于，所述HTML5页面的刷新结果包括所述HTML5页面刷新成功，所述显示模块还用于：当所述HTML5页面刷新成功时，在所述电子设备上显示第二图像。

13.根据权利要求9所述的应用程序的刷新装置，其特征在于，所述HTML5页面的刷新结果包括所述HTML5页面刷新失败，所述显示模块还用于：当所述HTML5页面刷新失败时，在所述电子设备上显示第三图像。

14.根据权利要求9所述的应用程序的刷新装置，其特征在于，所述数据集展示组件为Webview，所述Native端还用于响应用户与所述电子设备的显示单元上的滑动操作，控制所述Webview进行移动。

15.根据权利要求14所述的应用程序的刷新装置，其特征在于，还包括：所述Native端实时将所述Webview的移动距离发送至所述网页端，所述网页端在所述Webview的移动距离达到所述预设距离之前还进行初始化工作。

16.根据权利要求9所述的应用程序的刷新装置，其特征在于，在所述网页端刷新HTML5页面之后还包括：所述电子设备显示刷新后的所述HTML5页面。

17.一种电子设备，其特征在于，所述电子设备包括：

存储器；

处理器；及

应用程序的刷新装置，所述应用程序的刷新装置安装于所述存储器中并包括一个或多个由所述处理器执行的软件功能模块，所述应用程序的刷新装置包括Native端和网页端，所述Native端包括：

距离传输模块，用于根据所述网页端通过js桥发送的所述网页端的数据集展示组件的移动状态触发工作，响应用户对数据集展示组件的第一操作时，将所述数据集展示组件的移动距离通过js桥发送至网页端；

所述网页端包括：

刷新模块，用于若所述移动距离达到预设距离时，所述网页端响应用户对所述数据集展示组件的第二操作，刷新HTML5页面；

结果传输模块，用于将所述HTML5页面的刷新结果通过所述js桥发送至所述Native端；

所述Native端还包括显示模块，用于在该电子设备上显示所述HTML5页面的刷新结果。

Images