CN109766137A - 在混合型应用程序中加载直播页面的方法和装置 - Google Patents

Abstract

本公开提供了一种在混合型应用程序中加载直播页面的方法和装置，涉及计算机技术领域。该方法包括：在混合型应用程序APP中构建直播类，该直播类用于在混合型APP的web模块与直播模块之间通信；web模块通过该直播类向直播模块发送直播选择通知消息；以及直播模块根据该直播选择通知消息将原生直播页面加载到混合型APP的根窗口上。本公开实现了在混合型APP中加载原生直播页面的目的。

Description

在混合型应用程序中加载直播页面的方法和装置

技术领域

本公开涉及计算机技术领域，特别涉及一种在混合型应用程序中加载直播页面的方法和装置。

背景技术

当今移动互联网时代，随着直播技术发展的日趋迅猛，出现了与许多直播相关的APP(应用程序)。但是由于直播需要良好的视频通信、发言与主播互动、查看主播以及一些商品信息等功能，因此对用户的交互体验要求特别高，所有直播APP的相关直播页面都是原生页面。此外，混合型APP也占据不小的用户市场比例。混合型APP是内嵌一个轻量级的浏览器，一部分原生的功能改为Html 5来开发，这部分功能不仅能够在不升级的情况下动态更新，而且可以在Android(安卓)或iOS上同时运行，让用户的体验更好，而且还可以节省开发的资源。但是目前还没有实现在混合型APP的web页面上加入原生直播功能的产品。

发明内容

本公开实施例解决的一个技术问题是：提供一种方法，以实现在混合型应用程序中加载直播页面的目的。

根据本公开实施例的一个方面，提供了一种在混合型应用程序中加载直播页面的方法，包括：在混合型应用程序APP中构建直播类，所述直播类用于在所述混合型APP的万维网web模块与直播模块之间通信；所述web模块通过所述直播类向所述直播模块发送直播选择通知消息；以及所述直播模块根据所述直播选择通知消息将原生直播页面加载到所述混合型APP的根窗口上。

可选地，所述方法还包括：响应于点击商品列表选项的操作，所述直播模块通过所述直播类向所述web模块发送页面跳转通知消息，所述页面跳转通知消息包含商品列表页面信息；所述web模块根据所述页面跳转通知消息中的商品列表页面信息将所述web页面跳转为商品列表页面；以及所述直播模块将所述原生直播页面缩小尺寸，并将缩小尺寸后的原生直播页面覆盖在所述商品列表页面上。

可选地，所述方法还包括：响应于点击缩小直播画面选项的操作，所述直播模块将所述原生直播页面缩小尺寸并将缩小尺寸后的原生直播页面覆盖在所述web页面上。

可选地，所述方法还包括：响应于双击所述原生直播页面的操作或者响应于点击所述原生直播页面的放大标记的操作，所述直播模块将所述缩小尺寸后的原生直播页面放大到原来的尺寸；或者，响应于按住鼠标拖动所述原生直播页面的操作，所述直播模块根据所述鼠标的移动位置来移动所述原生直播页面的位置。

可选地，所述直播类包含所述web页面的网络视图对象。

根据本公开实施例的另一个方面，提供了一种在混合型应用程序中加载直播页面的装置，包括：构建模块，用于在混合型应用程序APP中构建直播类，所述直播类用于在所述混合型APP的万维网web模块与直播模块之间通信；所述web模块，用于通过所述直播类向所述直播模块发送直播选择通知消息；以及所述直播模块，用于根据所述直播选择通知消息将原生直播页面加载到所述混合型APP的根窗口上。

可选地，所述直播模块还用于响应于点击商品列表选项的操作，通过所述直播类向所述web模块发送页面跳转通知消息，所述页面跳转通知消息包含商品列表页面信息；以及将所述原生直播页面缩小尺寸，并将缩小尺寸后的原生直播页面覆盖在商品列表页面上；所述web模块还用于根据所述页面跳转通知消息中的商品列表页面信息将所述web页面跳转为商品列表页面。

可选地，所述直播模块还用于响应于点击缩小直播画面选项的操作，将所述原生直播页面缩小尺寸并将缩小尺寸后的原生直播页面覆盖在所述web页面上。

可选地，所述直播模块还用于响应于双击所述原生直播页面的操作或者响应于点击所述原生直播页面的放大标记的操作，将所述缩小尺寸后的原生直播页面放大到原来的尺寸；或者，所述直播模块还用于响应于按住鼠标拖动所述原生直播页面的操作，根据所述鼠标的移动位置来移动所述原生直播页面的位置。

可选地，所述直播类包含所述web页面的网络视图对象。

根据本公开实施例的另一个方面，提供了一种在混合型应用程序中加载直播页面的装置，包括：存储器；以及耦接至所述存储器的处理器，所述处理器被配置为基于存储在所述存储器的指令执行如前所述的方法。

根据本公开实施例的另一个方面，提供了一种计算机可读存储介质，其上存储有计算机程序指令，该指令被处理器执行时实现如前所述的方法的步骤。

在本公开的上述实施例中，通过构建直播类，从而可以实现在混合型APP的web模块与直播模块之间通信；web模块通过直播类向直播模块发送直播选择通知消息，直播模块根据该直播选择通知消息将原生直播页面加载到混合型APP的根窗口上，从而实现了在混合型应用程序中加载原生直播页面的目的。

通过以下参照附图对本公开的示例性实施例的详细描述，本公开的其它特征及其优点将会变得清楚。

附图说明

构成说明书的一部分的附图描述了本公开的实施例，并且连同说明书一起用于解释本公开的原理。

参照附图，根据下面的详细描述，可以更加清楚地理解本公开，其中：

图1是示出根据本公开一些实施例的在混合型应用程序中加载直播页面的方法的流程图。

图2是示出根据本公开另一些实施例的在混合型应用程序中加载直播页面的方法的流程图。

图3是示出根据本公开一些实施例的在混合型应用程序中加载直播页面的装置的结构图。

图4是示出根据本公开另一些实施例的在混合型应用程序中加载直播页面的装置的结构图。

图5是示出根据本公开另一些实施例的在混合型应用程序中加载直播页面的装置的结构图。

具体实施方式

现在将参照附图来详细描述本公开的各种示例性实施例。应注意到：除非另外具体说明，否则在这些实施例中阐述的部件和步骤的相对布置、数字表达式和数值不限制本公开的范围。

同时，应当明白，为了便于描述，附图中所示出的各个部分的尺寸并不是按照实际的比例关系绘制的。

以下对至少一个示例性实施例的描述实际上仅仅是说明性的，决不作为对本公开及其应用或使用的任何限制。

对于相关领域普通技术人员已知的技术、方法和设备可能不作详细讨论，但在适当情况下，所述技术、方法和设备应当被视为说明书的一部分。

在这里示出和讨论的所有示例中，任何具体值应被解释为仅仅是示例性的，而不是作为限制。因此，示例性实施例的其它示例可以具有不同的值。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步讨论。

图1是示出根据本公开一些实施例的在混合型应用程序中加载直播页面的方法的流程图。

在步骤S102，在混合型APP中构建直播类，该直播类用于在混合型APP的web模块与直播模块之间通信。例如，该直播类可以包含web页面的网络视图(WebView)对象。

在混合型App中显示web页面，需要WebView对象来加载和展示web页面。WebView对象能够监听web页面操作。因此直播类包含WebView对象，能够使得直播类监听到用户在web页面上的操作，然后直播类通知原生直播界面展示相对应的原生功能。而直播模块可以通过直播类的WebView对象向web模块传递信息。例如直播模块可以通过string ByEvaluating JavaScript From String(通过从字符串中评估Java脚本的字符串)这个系统方法给直播类的WebView对象中加载的web页面传递信息。因此，在构建直播类之后，混合型APP的web模块与直播模块之间可以通过直播类通信，也即web页面和原生直播页面可以通过直播类进行双向的通信。

在一些实施例中，直播类可以是基于iOS原生开发的NSObject类。例如在NSObject基础上添加了一些直播相关的自定义方法，比如：@interface ZhiBoPlugin:NSObject{}等。

在步骤S104，web模块通过直播类向直播模块发送直播选择通知消息。

在步骤S106，直播模块根据直播选择通知消息将原生直播页面加载到混合型APP的根窗口上。

例如，在混合型APP的web页面上通过main.onListClick(即web系统自带List表单的点击事件)方法选择直播房间，直播模块在接收到直播选择通知消息(例如navigator.ZhiBo.openZhiBoVC通知消息)后将直播页面加到混合型APP的根窗口上。例如，iOS原生代码UIWindow*keyWindow＝[[UIApplication sharedApplication]keyWindow]可以获取到APP的当前展示页面的窗口，通过系统方法addSubview可以把直播的原生直播界面加载到根窗口上。在直播页面上进行发言点赞互动、查看聊天记录等可以基于原生直播页面上的操作，所以交互很流畅，这也保障了原生直播的重要功能。

在上述实施例的方法中，通过构建直播类，该直播类用于在混合型APP的web模块与直播模块之间通信；web模块通过直播类向直播模块发送直播选择通知消息，直播模块根据该直播选择通知消息将原生直播页面加载到混合型APP的根窗口上，从而实现了在混合型应用程序中加载原生直播页面的目的。

图2是示出根据本公开另一些实施例的在混合型应用程序中加载直播页面的方法的流程图。如图2所示，在步骤S102至S106的基础上，该方法还可以包括以下步骤：

在步骤S208，响应于点击商品列表选项的操作，直播模块通过直播类向web模块发送页面跳转通知消息，该页面跳转通知消息包含商品列表页面信息。

在步骤S210，web模块根据页面跳转通知消息中的商品列表页面信息将web页面跳转为商品列表页面。

在步骤S212，直播模块将原生直播页面缩小尺寸，并将缩小尺寸后的原生直播页面覆盖在商品列表页面上。

在上述实施例中，直播模块通过直播类向web模块发送页面跳转通知消息，web模块根据页面跳转通知消息中的商品列表页面信息将web页面跳转为商品列表页面；直播模块将原生直播页面缩小尺寸，并将缩小尺寸后的原生直播页面覆盖在商品列表页面上，从而实现了从原生直播页面切换到web页面的商品列表页面，而且仍然能够观看到缩小尺寸的直播视频画面的目的。

例如，用户点击商品列表选项，直播模块通过新构建的直播类向混合型APP的web模块发送页面跳转通知消息(例如该页面跳转通知消息可以是successCallback(成功获取用户位置信息后的回调函数)消息)，使得混合型APP的web模块根据函数function(successCallback,errorCallback,dict){}中dict(字典类型)将web页面跳转到指定的页面(即商品列表页面)，并且原生直播界面随即缩小尺寸并覆盖在混合型APP的当前web页面(即商品列表页面)上。这样既保障了混合型APP的web页面准确的切换，又可以流畅的观看原生直播。

这里，函数function(successCallback,errorCallback,dict){}是web页面的一个js(JavaScript)方法，是一种监听原生页面调用系统string By EvaluatingJavaScript From String方法，可以向web页面传递一些信息，比如：调用成功、调用失败以及其他信息。

在本公开的一些实施例中，所述方法还可以包括：响应于点击缩小直播画面选项的操作，直播模块将原生直播页面缩小尺寸并将缩小尺寸后的原生直播页面覆盖在web页面上。在该实施例中，用户用鼠标点击缩小直播画面选项后，原生直播页面将缩小尺寸，并且在缩小尺寸后覆盖在web页面上。这实现了既可以查看web页面，又可以观看直播视频画面的目的。

在本公开的一些实施例中，所述方法还可以包括：响应于双击原生直播页面的操作或者响应于点击原生直播页面的放大标记的操作，直播模块将缩小尺寸后的原生直播页面放大到原来的尺寸。这里，原来的尺寸是指原生直播页面在缩小尺寸之前的尺寸。在该实施例中，用户用鼠标双击原生直播页面或者点击原生直播页面的放大标记，缩小尺寸的原生直播页面就将恢复到原来的尺寸，实现了使得原本缩小的画面回到最初的原生直播页面的目的，这使得用户体验非常流畅。

在本公开的一些实施例中，所述方法还可以包括：响应于按住鼠标拖动原生直播页面的操作，直播模块根据鼠标的移动位置来移动原生直播页面的位置。在该实施例中，用户将鼠标移动到原生直播页面上，按住鼠标并拖动鼠标移动，直播模块根据鼠标的移动位置来移动原生直播页面的位置，从而实现了调整原生直播页面位置的目的，提升了用户体验。

图3是示出根据本公开一些实施例的在混合型应用程序中加载直播页面的装置的结构图。如图3所示，该装置可以包括：构建模块302、web模块304和直播模块306。

该构建模块302可以用于在混合型APP中构建直播类，该直播类用于在混合型APP的web模块304与直播模块306之间通信。例如，该直播类可以包含web页面的网络视图对象。

该web模块304可以用于通过直播类向直播模块发送直播选择通知消息。

该直播模块306可以用于根据该直播选择通知消息将原生直播页面加载到混合型APP的根窗口上。

在上述实施例的装置中，构建模块构建用于在混合型APP的web模块与直播模块之间通信的直播类；web模块通过直播类向直播模块发送直播选择通知消息，直播模块根据该直播选择通知消息将原生直播页面加载到混合型APP的根窗口上，从而实现了在混合型应用程序中加载原生直播页面的目的。

在一些实施例中，该直播模块306还可以用于响应于点击商品列表选项的操作，通过直播类向web模块304发送页面跳转通知消息，该页面跳转通知消息包含商品列表页面信息；以及将原生直播页面缩小尺寸，并将缩小尺寸后的原生直播页面覆盖在商品列表页面上。该web模块304还可以用于根据页面跳转通知消息中的商品列表页面信息将web页面跳转为商品列表页面。

在一些实施例中，直播模块306还可以用于响应于点击缩小直播画面选项的操作，将原生直播页面缩小尺寸并将缩小尺寸后的原生直播页面覆盖在web页面上。

在一些实施例中，直播模块306还可以用于响应于双击原生直播页面的操作或者响应于点击原生直播页面的放大标记的操作，将缩小尺寸后的原生直播页面放大到原来的尺寸。

在一些实施例中，直播模块306还可以用于响应于按住鼠标拖动原生直播页面的操作，根据鼠标的移动位置来移动原生直播页面的位置。

在本公开实施例的方法和装置中，实现了将原生直播页面加到混合型APP的web页面上，让混合型APP的web页面和原生直播页面进行良好的通信以及页面间的来回切换，这使得混合型APP应用也能具有原生直播的能力。

图4是示出根据本公开另一些实施例的在混合型应用程序中加载直播页面的装置的结构图。该装置包括存储器410和处理器420。其中：

存储器410可以是磁盘、闪存或其它任何非易失性存储介质。存储器用于存储图1和/或图2所对应实施例中的指令。

处理器420耦接至存储器410，可以作为一个或多个集成电路来实施，例如微处理器或微控制器。该处理器420用于执行存储器中存储的指令，通过构建用于在混合型APP的web模块与直播模块之间通信的直播类，web模块通过直播类向直播模块发送直播选择通知消息，直播模块根据该直播选择通知消息将原生直播页面加载到混合型APP的根窗口上，从而实现了在混合型应用程序中加载原生直播页面的目的。

在一个实施例中，还可以如图5所示，该装置500包括存储器510和处理器520。处理器520通过BUS总线530耦合至存储器510。该装置500还可以通过存储接口540连接至外部存储装置550以便调用外部数据，还可以通过网络接口560连接至网络或者另外一台计算机系统(未标出)，此处不再进行详细介绍。

在该实施例中，通过存储器存储数据指令，再通过处理器处理上述指令，通过构建用于在混合型APP的web模块与直播模块之间通信的直播类，web模块通过直播类向直播模块发送直播选择通知消息，直播模块根据该直播选择通知消息将原生直播页面加载到混合型APP的根窗口上，从而实现了在混合型应用程序中加载原生直播页面的目的。

在另一个实施例中，本公开还提供了一种计算机可读存储介质，其上存储有计算机程序指令，该指令被处理器执行时实现图1和/或图2所对应实施例中的方法的步骤。本领域内的技术人员应明白，本公开的实施例可提供为方法、装置、或计算机程序产品。因此，本公开可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本公开可采用在一个或多个其中包含有计算机可用程序代码的计算机可用非瞬时性存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本公开是参照根据本公开实施例的方法、设备(系统)和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

至此，已经详细描述了本公开。为了避免遮蔽本公开的构思，没有描述本领域所公知的一些细节。本领域技术人员根据上面的描述，完全可以明白如何实施这里公开的技术方案。

可能以许多方式来实现本公开的方法和装置。例如，可通过软件、硬件、固件或者软件、硬件、固件的任何组合来实现本公开的方法和装置。用于所述方法的步骤的上述顺序仅是为了进行说明，本公开的方法的步骤不限于以上具体描述的顺序，除非以其它方式特别说明。此外，在一些实施例中，还可将本公开实施为记录在记录介质中的程序，这些程序包括用于实现根据本公开的方法的机器可读指令。因而，本公开还覆盖存储用于执行根据本公开的方法的程序的记录介质。

虽然已经通过示例对本公开的一些特定实施例进行了详细说明，但是本领域的技术人员应该理解，以上示例仅是为了进行说明，而不是为了限制本公开的范围。本领域的技术人员应该理解，可在不脱离本公开的范围和精神的情况下，对以上实施例进行修改。本公开的范围由所附权利要求来限定。

Claims (12)

1.一种在混合型应用程序中加载直播页面的方法，包括：

在混合型应用程序APP中构建直播类，所述直播类用于在所述混合型APP的万维网web模块与直播模块之间通信；

所述web模块通过所述直播类向所述直播模块发送直播选择通知消息；以及

所述直播模块根据所述直播选择通知消息将原生直播页面加载到所述混合型APP的根窗口上。

2.根据权利要求1所述的方法，还包括：

响应于点击商品列表选项的操作，所述直播模块通过所述直播类向所述web模块发送页面跳转通知消息，所述页面跳转通知消息包含商品列表页面信息；

所述web模块根据所述页面跳转通知消息中的商品列表页面信息将所述web页面跳转为商品列表页面；以及

所述直播模块将所述原生直播页面缩小尺寸，并将缩小尺寸后的原生直播页面覆盖在所述商品列表页面上。

3.根据权利要求1所述的方法，还包括：

响应于点击缩小直播画面选项的操作，所述直播模块将所述原生直播页面缩小尺寸并将缩小尺寸后的原生直播页面覆盖在所述web页面上。

4.根据权利要求2或3所述的方法，还包括：

响应于双击所述原生直播页面的操作或者响应于点击所述原生直播页面的放大标记的操作，所述直播模块将所述缩小尺寸后的原生直播页面放大到原来的尺寸；或者，

响应于按住鼠标拖动所述原生直播页面的操作，所述直播模块根据所述鼠标的移动位置来移动所述原生直播页面的位置。

5.根据权利要求1所述的方法，其中，

所述直播类包含所述web页面的网络视图对象。

6.一种在混合型应用程序中加载直播页面的装置，包括：

构建模块，用于在混合型应用程序APP中构建直播类，所述直播类用于在所述混合型APP的万维网web模块与直播模块之间通信；

所述web模块，用于通过所述直播类向所述直播模块发送直播选择通知消息；以及

所述直播模块，用于根据所述直播选择通知消息将原生直播页面加载到所述混合型APP的根窗口上。

7.根据权利要求6所述的装置，其中，

所述直播模块还用于响应于点击商品列表选项的操作，通过所述直播类向所述web模块发送页面跳转通知消息，所述页面跳转通知消息包含商品列表页面信息；以及将所述原生直播页面缩小尺寸，并将缩小尺寸后的原生直播页面覆盖在商品列表页面上；

所述web模块还用于根据所述页面跳转通知消息中的商品列表页面信息将所述web页面跳转为商品列表页面。

8.根据权利要求6所述的装置，其中，

所述直播模块还用于响应于点击缩小直播画面选项的操作，将所述原生直播页面缩小尺寸并将缩小尺寸后的原生直播页面覆盖在所述web页面上。

9.根据权利要求7或8所述的装置，其中，

所述直播模块还用于响应于双击所述原生直播页面的操作或者响应于点击所述原生直播页面的放大标记的操作，将所述缩小尺寸后的原生直播页面放大到原来的尺寸；或者，

所述直播模块还用于响应于按住鼠标拖动所述原生直播页面的操作，根据所述鼠标的移动位置来移动所述原生直播页面的位置。

10.根据权利要求6所述的装置，其中，

所述直播类包含所述web页面的网络视图对象。

11.一种在混合型应用程序中加载直播页面的装置，包括：

存储器；以及

耦接至所述存储器的处理器，所述处理器被配置为基于存储在所述存储器的指令执行如权利要求1至5任意一项所述的方法。

12.一种计算机可读存储介质，其上存储有计算机程序指令，该指令被处理器执行时实现如权利要求1至5任意一项所述的方法的步骤。