CN108563668A - Hybrid页面跳转H5页面的方法、装置及终端设备 - Google Patents

Abstract

本发明涉及一种互联网前端应用开发领域，具体涉及一种Hybrid页面跳转H5页面的方法、装置及终端设备，该Hybrid页面跳转H5页面的方法及装置均应用于终端设备，该Hybrid页面跳转H5页面的方法包括执行Hybrid页面跳转H5页面的跳转函数，所述跳转函数包括多个预定参数，将多个预定参数添加至请求H5页面的链接中得到H5页面链接，进而将H5页面链接发送至服务终端，并响应服务终端的控制跳转至H5页面。在本方案中，在原始的请求H5页面的链接中添加了多个预定参数得到H5页面链接，进而根据该H5页面链接受服务终端的控制跳转至H5页面，实现了Hybrid页面和H5页面之间的交互。

Description

Hybrid页面跳转H5页面的方法、装置及终端设备

技术领域

本发明涉及互联网前端应用开发技术领域，具体而言，涉及一种Hybrid页面跳转H5页面的方法、装置及终端设备。

背景技术

Hybrid页面和H5页面分别为Hybrid技术和H5技术实现的具有一定网页效果的页面，其中，在Hybrid页面与Hybrid页面之间可以通过url进行跳转，H5页面与H5页面之间也可以通过url进行跳转。由于H5页面与服务器之间的交互有特定的规则，即需要通过特定的接口进行页面跳转，Hybrid页面也有特定的规则进行跳转，导致Hybrid页面和H5页面之间不能相互跳转，但是为了更加迎合目前的开发需求，兼容原生的Hybrid页面和能够实现更加炫酷网页效果的H5网页是大势所趋，因此，提供一种Hybrid页面能够跳转H5页面的方法，使得Hybrid页面和H5页面能够进行交互是十分必要的。

发明内容

本发明的目的在于提供一种Hybrid页面跳转H5页面的方法，以实现Hybrid页面和H5页面的交互。

本发明的另一目的在于提供一种Hybrid页面跳转H5页面的装置，以实现Hybrid页面和H5页面的交互。

本发明的另一目的在于提供一种终端设备，以实现Hybrid页面和H5页面的交互。

为了实现上述目的，本发明实施例采用的技术方案如下：

第一方面，本发明实施例提供了一种Hybrid页面跳转H5页面的方法，应用于终端设备，所述终端设备与服务终端通信，所述方法包括：执行Hybrid页面跳转至H5页面的跳转函数，所述跳转函数包括多个预定参数；将所述多个预定参数添加至请求H5页面的链接中得到H5页面链接；将所述H5页面链接发送至所述服务终端，并响应所述服务终端的控制跳转至H5页面。

第二方面，本发明实施例还提供了一种Hybrid页面跳转至H5页面的装置，应用于终端设备，所述终端设备与服务终端通信，所述装置包括：执行模块，用于执行Hybrid页面跳转至H5页面的跳转函数，所述跳转函数包括多个预定参数；添加模块，用于将所述多个预定参数添加到请求H5页面的链接中得到H5页面链接；发送模块，用于将所述H5页面链接发送至所述服务终端，并响应所述服务终端的控制跳转至H5页面。

第三方面，本发明实施例还提供了一种终端设备，所述终端设备与服务终端连接，所述终端设备包括存储器、处理器，所述存储器用于存储计算机程序代码，所述处理器用于执行所述存储器中存储的计算机程序代码以实现前述的Hybrid页面跳转至H5页面的方法。

本发明实施例提供的一种Hybrid页面跳转H5页面的方法、装置及终端设备，该Hybrid页面跳转H5页面的方法及装置均应用于终端设备，该Hybrid页面跳转H5页面的方法包括执行Hybrid页面跳转H5页面的跳转函数，所述跳转函数包括多个预定参数，将多个预定参数添加至请求H5页面的链接中得到H5页面链接，进而将H5页面链接发送至服务终端，并响应服务终端的控制跳转至H5页面。在本方案中，在原始的请求H5页面的链接中添加了多个预定参数得到H5页面链接，进而根据该H5页面链接受服务终端的控制跳转至H5页面，实现了Hybrid页面和H5页面之间的交互。

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

附图说明

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

图1示出了本发明实施例提供的一种终端设备的结构示意图。

图2示出了本发明实施例提供的一种Hybrid页面跳转H5页面的方法的流程示意图。

图3示出了本发明实施例提供的另一种Hybrid页面跳转H5页面的方法的流程示意图。

图4示出了本发明实施例通过的一种Hybrid页面跳转至H5页面的装置的功能模块示意图。

图示：100-终端设备；110-Hybrid页面跳转H5页面的装置；120-存储器；130-存储控制器；140-处理器；150-外设接口；160-输入输出单元；170-音频单元；180-显示单元；190-通信单元；111-执行模块；112-添加模块；113-发送模块；114-创建模块；115-设置模块。

具体实施方式

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

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

该Hybrid页面为由Hybrid技术进行设计的网页页面，该Hybrid技术，即混合开发，意味着半原生半web，该原生即为原生容器(Android系统或IOS系统)提供底层功能API，该半web为业务逻辑由H5页面完成，最终原生容器加载H5页面完成整个app，该H5页面为由Html5网页技术编写的页面。随着H5技术的兴起，此种开发方式因能极大地提高开发效率，进而逐步流行，因此，提供一种Hybrid页面和H5页面之间能相互交互的方法是十分必要的。

该Hybrid页面跳转H5页面的方法应用于终端设备，具体为终端设备上安装有相应的app，该app的网页页面由Hybrid技术进行开发，即是说该app的页面既包括了Hybrid页面，也包括了H5页面，则该终端设备需通过该Hybrid页面跳转H5页面的方法实现Hybrid页面与H5页面的交互。该终端设备可以是，但不限于，手机、平板电脑等智能电子设备。

请参照图1，是本发明实施例提供的一种终端设备100的结构示意图，该终端设备100包括Hybrid页面跳转H5页面的装置110、存储器120、存储控制器130、处理器140、外设接口150、输入输出单元160、音频单元170、显示单元180以及通信单元190。

所述存储器120、存储控制器130、处理器140、外设接口150、输入输出单元160、音频单元170、显示单元180、通信单元190各元件相互之间直接或间接地电性连接，以实现数据的传输或交互。例如，这些元件相互之间可通过一条或多条通讯总线或信号线实现电性连接。所述Hybrid页面跳转H5页面的装置110包括至少一个可以软件或固件(firmware)的形式存储于所述存储器120中或固化在所述终端设备100的操作系统(operating system，OS)中的软件功能模块。所述处理器140用于执行存储器120中存储的可执行模块，例如所述Hybrid页面跳转H5页面的装置110包括的软件功能模块或计算机程序。

其中，存储器120可以是，但不限于，随机存取存储器(Random Access Memory，RAM)，只读存储器(Read Only Memory，ROM)，可编程只读存储器(Programmable Read-OnlyMemory，PROM)，可擦除只读存储器(Erasable Programmable Read-Only Memory，EPROM)，电可擦除只读存储器(Electric Erasable Programmable Read-Only Memory，EEPROM)等。其中，存储器120用于存储程序，所述处理器140在接收到执行指令后，执行所述程序，后述本发明实施例任一实施例揭示的流过程定义的终端设备100所执行的方法可以应用于处理器140中，或者由处理器140实现。

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

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

输入输出单元160用于提供给用户输入数据实现用户与所述数据采集端100的交互。所述输入输出单元160可以是，但不限于，鼠标和键盘等。

音频单元170向用户提供音频接口，其可包括一个或多个麦克风、一个或者多个扬声器以及音频电路。

显示单元180在数据采集端100与用户之间提供一个交互界面(例如用户操作界面)或用于显示图像数据给用户参考。在本实施例中，所述显示单元180可以是液晶显示器或触控显示器。若为触控显示器，其可为支持单点和多点触控操作的电容式触控屏或电阻式触控屏等。支持单点和多点触控操作是指触控显示器能感应到来自该触控显示器上一个或多个位置处同时产生的触控操作，并将该感应到的触控操作交由处理器140进行计算和处理。

所述通信单元190用于通过所述网络与服务终端之间建立连接，从而实现所述终端设备100与服务终端之间的通信连接，并用于通过所述网络收发数据。

请参照图2，是本发明实施例提供的一种Hybrid页面跳转H5页面的方法的流程示意图，该方法包括：

步骤S110，执行Hybrid页面跳转至H5页面的跳转函数，所述跳转函数包括多个预定参数。

该跳转函数为jsBridge.gotoNative(‘douyu://welcome’,{id:xx,token:true,ext:{}})，该跳转函数中包括多个预定参数，如id，token，ext和‘douyu://welcome’。其中，id为需跳转的H5页面标识符，相当于H5页面的页码，该token为对用户登录信息进行加密，该ext为扩展参数，该扩展参数用于对需跳转的H5页面进行初始化，该扩展参数为json字符串，其根据具体的业务逻辑确定，如该扩展参数可以为页面标题、页面初始化数据或者业务逻辑等，该douyu://welcome为终端设备100跳转H5页面的方式。因此，为了实现跳转至H5页面，需执行跳转函数，且该跳转函数中包括了多个预定参数，该预定参数包括需跳转的H5页面标识符、扩展参数、对用户登录信息进行加密以及跳转方式等。

步骤S120，将所述多个预定参数添加至请求H5页面的链接中得到H5页面链接。

具体为，新建一个类型为NSMutableDictionary的paramDic变量，设置paramDic中的client_sys字段值为ios，aid字段值为ios，容易理解的，由于原生容器包含Android系统和IOS系统，则该client_sys字段和aid字段的值也可以为Android。设置paramDic中的id字段的值为需跳转的H5页面标识符，即跳转函数中的id，同时将扩展参数ext中的数据添加至paramDic变量中，此外，还需将当前的时间戳添加到paramDic变量中。进而将paramDic变量中的多个参数以key＝>value的方式展开，以得到字符串形式的数据，进而将所有参数添加至终端设备100请求H5页面的链接中得到H5页面链接。

步骤S130，将所述H5页面链接发送至所述服务终端，并响应所述服务终端的控制跳转至H5页面。

具体为，通过视图控制器webviewController将H5页面链接发送至与终端设备100连接的服务终端的接口welcometo中，需要说明的是，该welcometo接口为服务终端与终端设备100约定的接口，终端设备100只有通过将H5页面链接发送至该接口，服务终端才能接收及反馈数据，容易理解的，该接口可以根据用户需要进行约定或设置。该服务终端在接收到终端设备100发送的H5页面链接并对其包含的多个参数进行解析后将控制终端设备100由Hybrid页面跳转至H5页面。

请参照图3，是本发明实施例提供的另一种Hybrid页面跳转H5页面的方法的流程示意图，该方法包括：

步骤S210，执行Hybrid页面跳转至H5页面的跳转函数，所述跳转函数包括多个预定参数。

该跳转函数为jsBridge.gotoNative(‘douyu://welcome’,{id:xx,token:true,ext:{}})，该跳转函数中包括多个预定参数，如id，token，ext和‘douyu://welcome’。其中，id为需跳转的H5页面标识符，相当于H5页面的页码，该token为对用户登录信息进行加密，该ext为扩展参数，该扩展参数用于对需跳转的H5页面进行初始化，该扩展参数为json字符串，其根据具体的业务逻辑确定，如该扩展参数可以为页面标题、页面初始化数据或者业务逻辑等，该douyu://welcome为终端设备100跳转H5页面的方式。因此，为了实现跳转至H5页面，需执行跳转函数，且该跳转函数中包括了多个预定参数，该预定参数包括需跳转的H5页面标识符、扩展参数、对用户登录信息进行加密以及跳转方式等。

步骤S220，根据所述H5页面标识符在预设的映射表中查询对应的H5页面名称，以便于程序开发人员维护。

在执行跳转函数时，可能碰到Android系统所在的客户端和IOS系统所在的客户端相同的H5页面标识符对应的页面名称不一致的情形，如Android系统所在的客户端H5页面标识符1对应的页面为A，IOS系统所在的客户端H5页面标识符1对应的页面为B，为了便于程序员维护且了解每一个H5页面标识符对应的页面名称，则建立预设的映射表。该预设的映射表包括多个H5页面标识符以及每个H5页面标识符对应的页面名称。进而，程序员可根据H5页面标识符在预设的映射表中查询对应的H5页面名称，以减少出错。

步骤S230，将所述多个预定参数添加至请求H5页面的链接中得到H5页面链接。

具体为，新建一个类型为NSMutableDictionary的paramDic变量，设置paramDic中的client_sys字段值为ios，aid字段值为ios，容易理解的，由于原生容器包含Android系统和IOS系统，则该client_sys字段和aid字段的值也可以为Android。设置paramDic中的id字段的值为需跳转的H5页面标识符，即跳转函数中的id，同时将扩展参数ext中的数据添加至paramDic变量中，此外，还需将当前的时间戳添加到paramDic变量中。进而将paramDic变量中的多个参数以key＝>value的方式展开，以得到字符串形式的数据，进而将所有参数添加至终端设备100请求H5页面的链接中得到H5页面链接。

步骤S240，将所述H5页面链接发送至所述服务终端，并响应所述服务终端的控制跳转至H5页面。

具体为，通过视图控制器webviewController将H5页面链接发送至与终端设备100连接的服务终端的接口welcometo中，需要说明的是，该welcometo接口为服务终端与终端设备100约定的接口，终端设备100只有通过将H5页面链接发送至该接口，服务终端才能接收及反馈数据，容易理解的，该接口可以根据用户需要进行约定或设置。该服务终端在接收到终端设备100发送的H5页面链接并对其包含的多个参数进行解析后将控制终端设备100由Hybrid页面跳转至H5页面。

步骤S250，创建网络视图，所述网络视图用于显示H5页面。

具体为，终端设备100由Hybrid页面跳转至H5页面时，该H5页面需要载体承载，以显示出H5页面，则需创建网络视图webview，该网络视图webview即用于显示H5页面。

步骤S260，将所述网络视图设置于所述终端设备的页面堆栈中最前面。

为了方便用户及时查看新打开的页面，需将创建的网络视图webview设置于页面堆栈的最前面。需要说明的是，该页面堆栈相当于页面队列，其中包含了多个网络视图，为了方便用户查看，故将创建的网络视图放置于页面堆栈的最前端。

请参照图4，是本发明实施例提供的一种Hybrid页面跳转H5页面的装置110的功能模块示意图，该装置包括执行模块111、添加模块112、发送模块113、创建模块114以及设置模块115。

执行模块111，用于执行Hybrid页面跳转至H5页面的跳转函数，所述跳转函数包括多个预定参数。

在本发明实施例中，步骤S110和步骤S210可以由执行模块111执行。

添加模块112，用于将所述多个预定参数添加到请求H5页面的链接中得到H5页面链接。

在本发明实施例中，步骤S120和步骤S230可以由添加模块112执行。

发送模块113，用于将所述H5页面链接发送至所述服务终端，并响应所述服务终端的控制跳转至H5页面。

在本发明实施例中，步骤S130和步骤S240可以由发送模块113执行。

创建模块114，用于创建网络视图，所述网络视图用于显示H5页面。

在本发明实施例中，步骤S250可以由创建模块114执行。

设置模块115，用于将所述网络视图设置于所述终端设备的页面堆栈中最前面。

在本发明实施例中，步骤S260可以由设置模块115执行。

由于在Hybrid页面跳转H5页面的方法部分已经详细描述，在此不再赘述。

综上所述，本发明实施例提供的一种Hybrid页面跳转H5页面的方法、装置及终端设备，该Hybrid页面跳转H5页面的方法及装置均应用于终端设备，该Hybrid页面跳转H5页面的方法包括执行Hybrid页面跳转H5页面的跳转函数，所述跳转函数包括多个预定参数，将多个预定参数添加至请求H5页面的链接中得到H5页面链接，进而将H5页面链接发送至服务终端，并响应服务终端的控制跳转至H5页面。在本方案中，在原始的请求H5页面的链接中添加了多个预定参数得到H5页面链接，进而根据该H5页面链接受服务终端的控制跳转至H5页面，实现了Hybrid页面和H5页面之间的交互。

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

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

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

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

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

Claims (10)

1.一种Hybrid页面跳转H5页面的方法，应用于终端设备，所述终端设备与服务终端通信，其特征在于，所述方法包括：

执行Hybrid页面跳转至H5页面的跳转函数，所述跳转函数包括多个预定参数；

将所述多个预定参数添加至请求H5页面的链接中得到H5页面链接；

将所述H5页面链接发送至所述服务终端，并响应所述服务终端的控制跳转至H5页面。

2.如权利要求1所述的方法，其特征在于，所述多个预定参数包括需跳转的H5页面标识符、扩展参数，

所述将所述多个预定参数添加至请求H5页面的链接中得到H5页面链接的步骤包括：

将需跳转的H5页面标识符以及扩展参数添加至请求H5页面的链接中得到H5页面链接。

3.如权利要求1所述的方法，其特征在于，所述将所述H5页面链接发送至所述服务终端，并响应所述服务终端的控制跳转至H5页面的步骤包括：

调用网络视图控制器将所述H5页面链接发送至所述服务终端中与所述终端设备约定的接口，并响应所述服务终端的控制跳转至H5页面。

4.如权利要求1所述的方法，其特征在于，所述方法还包括：

创建网络视图，所述网络视图用于显示H5页面；

将所述网络视图设置于所述终端设备的页面堆栈中最前面。

5.如权利要求1所述的方法，其特征在于，所述多个预定参数包括需跳转的H5页面标识符，所述方法还包括：

根据所述H5页面标识符在预设的映射表中查询对应的H5页面名称，以便于程序开发人员维护。

6.一种Hybrid页面跳转至H5页面的装置，应用于终端设备，所述终端设备与服务终端通信，其特征在于，所述装置包括：

执行模块，用于执行Hybrid页面跳转至H5页面的跳转函数，所述跳转函数包括多个预定参数；

添加模块，用于将所述多个预定参数添加到请求H5页面的链接中得到H5页面链接；

发送模块，用于将所述H5页面链接发送至所述服务终端，并响应所述服务终端的控制跳转至H5页面。

7.如权利要求6所述的装置，其特征在于，所述多个预定参数包括需跳转的H5页面标识符、扩展参数，

所述添加模块还用于将需跳转的H5页面标识符以及扩展参数添加至请求H5页面的链接中得到H5页面链接。

8.如权利要求6所述的装置，其特征在于，所述发送模块还用于：

调用网络视图控制器将所述H5页面链接发送至所述服务终端中与所述终端设备约定的接口，并响应所述服务终端的控制跳转至H5页面。

9.如权利要求6所述的装置，其特征在于，所述装置还包括：

创建模块，用于创建网络视图，所述网络视图用于显示H5页面；

设置模块，用于将所述网络视图设置于所述终端设备的页面堆栈中最前面。

10.一种终端设备，其特征在于，所述终端设备与服务终端连接，所述终端设备包括存储器、处理器，所述存储器用于存储计算机程序代码，所述处理器用于执行所述存储器中存储的计算机程序代码以实现如权利要求1-5任一一项所述的Hybrid页面跳转至H5页面的方法。