一种移动端的分屏交互方法、装置、存储介质及设备与流程

1.本技术涉及计算机技术领域，尤其涉及一种移动端的分屏交互方法、装置、存储介质及设备。


背景技术：

2.随着智能手机、平板电脑等移动端设备的普及，人们对移动端设备的要求也越来越高，当移动端设备的屏幕足够大时，针对其的分屏功能也应运而生。
3.目前，在移动端安装的很多应用软件(application，简称app)中，通常会存在大量需要移动端进行分屏交互的场景，比如图1所示的视频流中的评论以及直播间中的送礼、商品、上热门工具等场景。这些分屏界面之间的交互形式一般会分为两种：一种是在分屏内部交互；另一种是分屏页面与全屏蒙层之间的交互，如图2所示的在半屏页面打开全屏蒙层的居中弹窗界面、或如图3所示的在半屏页面打开全局蒙层x分屏(如三分屏)弹窗界面。
4.当前为了实现app的快速迭代和更新，通常会采用hybrid开发模式，即开发第5代互联网超文本标记语言(hypertext expression language，简称h5)页面，来实现移动端的分屏交互，比如，目前在实现如图2所示的移动端分屏时，采用的方式是：如图4所示，首先通过半屏webview渲染半屏容器，并在其内部打开h5页面；然后h5页面通过jsbridge与客户端通信，调用客户端打开全屏蒙层和显示弹窗页面的功能。但这种分屏交互方式依赖于端能力，涉及到app的功能新增和迭代，需要及时更新客户端版本，不够灵活。同时，对于全屏蒙层和弹窗页面的显示也均依赖于h5页面与客户端的jsbridge通信，导致分屏效率较低，且分屏界面之间的交互形式和功能也均受限。


技术实现要素：

5.本技术实施例的主要目的在于提供一种移动端的分屏交互方法、装置、存储介质及设备，能够有效提高移动端的分屏效率，并丰富分屏页面之间的交互形式和功能。
6.本技术实施例提供了一种移动端的分屏交互方法，包括：
7.创建移动端的全屏透明网络视图webview界面，作为载体容器，并在所述容器内加载第5代互联网超文本标记语言h5页面；
8.将所述h5页面设置为第一预设分屏类型样式的分屏页面；
9.在所述h5页面内部，加载全屏蒙层和第二预设分屏类型样式的弹窗分屏页面；
10.在所述h5页面内部，通过页面组件间的通信方式，实现所述第一预设分屏类型样式的分屏页面与所述第二预设分屏类型样式的弹窗分屏页面之间的通信交互，以提高所述移动端的分屏效率和交互功能。
11.一种可能的实现方式中，创建移动端的全屏透明网络视图webview界面，作为载体容器，并在所述容器内加载第5代互联网超文本标记语言h5页面，包括：
12.创建全屏webview，作为载体容器；
13.创建h5页面请求，并响应于所述请求，在所述容器中加载h5页面；
14.将所述webview的背景设置为透明后，将其添加到移动端的界面上。
15.一种可能的实现方式中，将所述h5页面设置为第一预设分屏类型样式的分屏页面，包括：
16.将所述h5页面的整体高度设置为全屏，并将页面背景设置为透明；
17.将所述h5页面的整体布局划分为头部header和按行渲染文本content两部分，并将所述header的背景设置为透明，将所述content的背景设置为预设背景颜色，以及将所述content的高度设置为半屏高度。
18.一种可能的实现方式中，在所述h5页面内部，加载全屏蒙层和第二预设分屏类型样式的弹窗分屏页面，包括：
19.在所述h5页面内部，添加全屏蒙层组件，并通过所述全屏蒙层组件，加载全屏蒙层；
20.通过弹窗显示的方式，在所述全屏蒙层上显示第二预设分屏类型样式的弹窗分屏页面。
21.一种可能的实现方式中，在所述h5页面内部，通过页面组件间的通信方式，实现所述第一预设分屏类型样式的分屏页面与所述第二预设分屏类型样式的弹窗分屏页面之间的通信交互，以提高所述移动端的分屏效率和交互功能，包括：
22.在所述h5页面内部，通过父子组件间的通信方式，实现所述第一预设分屏类型样式的分屏页面与所述第二预设分屏类型样式的弹窗分屏页面之间的通信交互，以提高所述移动端的分屏效率和交互功能。
23.一种可能的实现方式中，在所述h5页面内部，通过父子组件间的通信方式，实现所述第一预设分屏类型样式的分屏页面与所述第二预设分屏类型样式的弹窗分屏页面之间的通信交互，以提高所述移动端的分屏效率和交互功能，包括：
24.在所述h5页面内部，响应于用户对所述第一预设分屏类型样式的分屏页面按钮的点击操作，利用按钮组件，打开所述全屏蒙层；
25.利用文案组件，展示所述全屏蒙层的所述第二预设分屏类型样式的弹窗分屏页面中用户输入的文案内容；
26.利用全屏蒙层组件，控制所述全屏蒙层的展示和隐藏；并通过回调函数将所述第二预设分屏类型样式的弹窗分屏页面中用户输入的文案内容传递到父组件中，并赋值给父组件中的对应变量，实现所述第一预设分屏类型样式的分屏页面与所述第二预设分屏类型样式的弹窗分屏页面之间的通信交互，以提高所述移动端的分屏效率和交互功能。
27.一种可能的实现方式中，所述第一预设分屏类型样式的分屏页面为半屏样式的分屏页面；所述第二预设分屏类型样式的弹窗分屏页面为全屏居中显示的弹窗分屏界面或者三分屏样式的弹窗分屏页面。
28.本技术实施例还提供了一种移动端的分屏交互装置，所述装置包括：
29.第一加载单元，用于创建移动端的全屏透明网络视图webview界面，作为载体容器，并在所述容器内加载第5代互联网超文本标记语言h5页面；
30.设置单元，用于将所述h5页面设置为第一预设分屏类型样式的分屏页面；
31.第二加载单元，用于在所述h5页面内部，加载全屏蒙层和第二预设分屏类型样式的弹窗分屏页面；
32.交互单元，用于在所述h5页面内部，通过页面组件间的通信方式，实现所述第一预设分屏类型样式的分屏页面与所述第二预设分屏类型样式的弹窗分屏页面之间的通信交互，以提高所述移动端的分屏效率和交互功能。
33.一种可能的实现方式中，所述第一加载单元包括：
34.创建子单元，用于创建全屏webview，作为载体容器；
35.第一加载子单元，用于创建h5页面请求，并响应于所述请求，在所述容器中加载h5页面；
36.添加子单元，用于将所述webview的背景设置为透明后，将其添加到移动端的界面上。
37.一种可能的实现方式中，所述设置单元包括：
38.第一设置子单元，用于将所述h5页面的整体高度设置为全屏，并将页面背景设置为透明；
39.第二设置子单元，用于将所述h5页面的整体布局划分为头部header和按行渲染文本content两部分，并将所述header的背景设置为透明，将所述content的背景设置为预设背景颜色，以及将所述content的高度设置为半屏高度。
40.一种可能的实现方式中，所述第二加载单元包括：
41.第二加载子单元，用于在所述h5页面内部，添加全屏蒙层组件，并通过所述全屏蒙层组件，加载全屏蒙层；
42.显示子单元，用于通过弹窗显示的方式，在所述全屏蒙层上显示第二预设分屏类型样式的弹窗分屏页面。
43.一种可能的实现方式中，所述交互单元具体用于：
44.在所述h5页面内部，通过父子组件间的通信方式，实现所述第一预设分屏类型样式的分屏页面与所述第二预设分屏类型样式的弹窗分屏页面之间的通信交互，以提高所述移动端的分屏效率和交互功能。
45.一种可能的实现方式中，所述交互单元包括：
46.打开子单元，用于在所述h5页面内部，响应于用户对所述第一预设分屏类型样式的分屏页面按钮的点击操作，利用按钮组件，打开所述全屏蒙层；
47.展示子单元，用于利用文案组件，展示所述全屏蒙层的所述第二预设分屏类型样式的弹窗分屏页面中用户输入的文案内容；
48.交互子单元，用于利用全屏蒙层组件，控制所述全屏蒙层的展示和隐藏；并通过回调函数将所述第二预设分屏类型样式的弹窗分屏页面中用户输入的文案内容传递到父组件中，并赋值给父组件中的对应变量，实现所述第一预设分屏类型样式的分屏页面与所述第二预设分屏类型样式的弹窗分屏页面之间的通信交互，以提高所述移动端的分屏效率和交互功能。
49.一种可能的实现方式中，所述第一预设分屏类型样式的分屏页面为半屏样式的分屏页面；所述第二预设分屏类型样式的弹窗分屏页面为全屏居中显示的弹窗分屏界面或者三分屏样式的弹窗分屏页面。
50.本技术实施例还提供了一种移动端的分屏交互设备，包括：处理器、存储器、系统总线；
51.所述处理器以及所述存储器通过所述系统总线相连；
52.所述存储器用于存储一个或多个程序，所述一个或多个程序包括指令，所述指令当被所述处理器执行时使所述处理器执行上述移动端的分屏交互方法中的任意一种实现方式。
53.本技术实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有指令，当所述指令在终端设备上运行时，使得所述终端设备执行上述移动端的分屏交互方法中的任意一种实现方式。
54.本技术实施例提供的移动端的分屏交互方法、装置、存储介质及设备，首先创建移动端的全屏透明网络视图webview界面，作为载体容器，并在容器内加载h5页面；然后将h5页面设置为第一预设分屏类型样式的分屏页面，接着，在h5页面内部，加载全屏蒙层和第二预设分屏类型样式的弹窗分屏页面，进而可以在h5页面内部，通过页面组件间的通信方式，实现第一预设分屏类型样式的分屏页面与第二预设分屏类型样式的弹窗分屏页面之间的通信交互，以提高移动端的分屏效率和交互功能。可见，由于本技术实施例中先实现全屏透明webview渲染全屏容器，并在容器内部打开h5页面，然后在h5页面中实现预设分屏类型样式的分屏页面和全屏蒙层的弹窗分屏页面，且这两部分分屏页面之间的交互和通信均在h5页面内部进行，从而能够有效提高移动端的分屏效率，并丰富分屏页面之间的交互形式和功能。
附图说明
55.为了更清楚地说明本技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
56.图1为本技术实施例提供的现有移动端分屏显示的示例图之一；
57.图2为本技术实施例提供的现有移动端分屏显示的示例图之二；
58.图3为本技术实施例提供的现有移动端分屏显示的示例图之三；
59.图4为本技术实施例提供的现有移动端的分屏交互方法的示例图；
60.图5为本技术实施例提供的一种移动端的分屏交互方法的流程示意图；
61.图6为本技术实施例提供的移动端的分屏交互方法的示例图之一；
62.图7为本技术实施例提供的移动端的分屏交互方法的示例图之二；
63.图8为本技术实施例提供的一种移动端的分屏交互装置的组成示意图。
具体实施方式
64.近年来，随着各种移动端设备的日益普及，当移动端设备的屏幕足够大时，针对其的分屏功能场景也应运而生。比如，如图1所示的视频流中的评论的二分屏场景，或者如图2所示的在半屏页面打开全屏蒙层的居中弹窗界面、再或者如图3所示的在半屏页面打开全局蒙层的三分屏弹窗界面等。
65.目前，考虑到快速迭代和更新的需求，通常会采用hybrid开发模式，即开发h5页面，来实现移动端的分屏交互，比如，目前在实现如图2所示的移动端分屏交互时，采用的方
式是：如图4所示，首先通过半屏webview渲染半屏容器作为载体，在其内部打开h5页面；然后h5页面通过jsbridge与客户端通信，调用客户端打开全屏蒙层和居中显示弹窗页面的功能。但这种分屏交互方式依赖于端能力，涉及到app的功能新增和迭代，需要及时更新客户端版本，不够灵活。同时，对于全屏蒙层和弹窗页面的显示也均依赖于h5页面与客户端的jsbridge通信，导致分屏效率较低，且由于h5页面与客户端之间的通信属于两种技术种类的通信，仅能实现比较直接的单一通信形式(如数据传入、传出等)，导致分屏界面之间的交互形式和功能也均受限。
66.为解决上述缺陷，本技术提供了一种移动端的分屏交互方法、装置、存储介质及设备，首先创建移动端的全屏透明网络视图webview界面，作为载体容器，并在容器内加载h5页面；然后将h5页面设置为第一预设分屏类型样式的分屏页面，接着，在h5页面内部，加载全屏蒙层和第二预设分屏类型样式的弹窗分屏页面，进而可以在h5页面内部，通过页面组件间的通信方式，实现第一预设分屏类型样式的分屏页面与第二预设分屏类型样式的弹窗分屏页面之间的通信交互，以提高移动端的分屏效率和交互功能。可见，由于本技术实施例中先实现全屏透明webview渲染全屏容器，并在容器内部打开h5页面，然后在h5页面中实现预设分屏类型样式的分屏页面和全屏蒙层的弹窗分屏页面，且这两部分分屏页面之间的交互和通信均在h5页面内部进行，从而能够有效提高移动端的分屏效率，并丰富分屏页面之间的交互形式和功能。
67.为使本技术实施例的目的、技术方案和优点更加清楚，下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
68.第一实施例
69.参见图5，为本实施例提供的一种移动端的分屏交互方法的流程示意图，该方法包括以下步骤：
70.s501：创建移动端的全屏透明网络视图webview界面，作为载体容器，并在容器内加载第5代互联网超文本标记语言h5页面。
71.在本实施例中，为了避免高移动端的分屏效率，并丰富分屏页面之间的交互形式和功能，首先需要创建移动端的全屏透明网络视图webview界面，作为载体容器，并在容器内加载h5页面，用以执行后续步骤s502。
72.具体来讲，一种可选的实现方式是，本步骤s501的执行过程可以包括下述步骤a1-a3：
73.步骤a1：创建全屏webview，作为载体容器。
74.在本实现方式中，为了保证能够在h5页面内部实现移动端的分屏以及分屏界面之间的通信交互，首先需要实现全屏webview渲染全屏容器，作为载体，用以执行后续步骤a2。
75.步骤a2：创建h5页面请求，并响应于该请求，在容器中加载h5页面。
76.在本实现方式中，通过步骤a1创建全屏webview，作为载体容器后，为了保证能够在h5页面内部实现移动端的分屏以及分屏界面之间的通信交互，进一步的，可以创建h5页面请求，并响应于该请求，在webview容器中加载h5页面，并响应于该请求，在容器中加载h5页面。
77.步骤a3：将webview的背景设置为透明后，将其添加到移动端的界面上。
78.在本实现方式中，通过步骤a1创建全屏webview，作为载体容器后，为了保证能够在h5页面内部实现移动端的分屏以及分屏界面之间的通信交互，还需要将全屏webview的背景设置为透明，以不遮盖加载的h5页面的显示内容，进一步的，在将webview的背景设置为透明并成功加载了h5页面后，可以将该加载了h5页面的全屏透明webview添加到移动端的界面上，用以执行后续步骤s502。
79.举例说明：以ios系统为例，创建移动端的全屏透明webview作为载体容器，并在其中加载h5页面的实现代码如下所示：
[0080][0081][0082]
其中，本技术不限定步骤2、3的执行顺序，只需保证步骤2在步骤4之前执行即可，即上述代码的执行顺序可以为步骤1、2、3、4、5；或步骤1、3、2、4、5；或步骤1、2、4、3、5这三种中的一种。
[0083]
s502：将h5页面设置为第一预设分屏类型样式的分屏页面。
[0084]
在本实施例中，通过步骤s501实现全屏透明webview，并在容器内加载了h5页面后，进一步可以将h5页面设置为第一预设分屏类型样式的分屏页面，用以执行后续步骤s503。
[0085]
其中，第一预设分屏类型样式的分屏页面可根据实际情况进行设定，本技术实施例对此不进行限定，比如，可以将第一预设分屏类型样式的分屏页面设定为半屏样式的分屏页面，即，可以将h5页面设置为半屏样式的分屏页面。
[0086]
具体来讲，一种可选的实现方式是，在实现了全屏透明webview，并在其中内加载
了h5页面后，首先可以将h5页面的整体高度设置为全屏，并将页面背景设置为透明；然后再将h5页面的整体布局划分为头部(header)和按行渲染文本(content)两部分，其中，content可以是如图6或图7所示的“直播上热门”页面，并将header的背景设置为透明，将content的背景设置为预设背景颜色(如图6或图7所示的“直播上热门”页面的白色)，以及将content的高度设置为半屏高度，以实现h5页面的半屏样式，如图6或图7所示。
[0087]
s503：在h5页面内部，加载全屏蒙层和第二预设分屏类型样式的弹窗分屏页面。
[0088]
在本实施例中，通过步骤s502将h5页面设置为第一预设分屏类型样式的分屏页面后，比如将h5页面设置为半屏样式的分屏页面后，进一步可以在h5页面内部，加载全屏蒙层和第二预设分屏类型样式的弹窗分屏页面，用以通过执行后续步骤s504，实现两个分屏页面之间的快速通信交互。
[0089]
其中，第二预设分屏类型样式的弹窗分屏页面可根据实际情况进行设定，本技术实施例对此不进行限定，比如，可以将第二预设分屏类型样式的分屏页面设定为全屏居中显示的弹窗分屏界面或者三分屏样式的分屏页面，即，可以在全屏蒙层上全屏居中显示的弹窗分屏界面或者显示三分屏样式的弹窗分屏页面，分别如图6和图7所示。
[0090]
具体来讲，一种可选的实现方式是，将h5页面设置为第一预设分屏类型样式的分屏页面后，比如将h5页面设置为半屏样式的分屏页面后，首先可以在h5页面内部，添加全屏蒙层组件，并通过全屏蒙层组件，加载全屏蒙层，具体实现过程与现有方式一致，在此不再赘述；然后通过弹窗显示的方式，在全屏蒙层上显示第二预设分屏类型样式的弹窗分屏页面(如图6居中显示的“自定义金币数额”弹窗分屏页面或如图7所示的三分屏样式的“收银台”弹窗分屏页面)，以实现在h5页面内部的分屏显示。
[0091]
s504：在h5页面内部，通过页面组件间的通信方式，实现第一预设分屏类型样式的分屏页面与第二预设分屏类型样式的弹窗分屏页面之间的通信交互，以提高移动端的分屏效率和交互功能。
[0092]
在本实施例中，通过步骤s502将h5页面设置为第一预设分屏类型样式的分屏页面，以及通过步骤s503在h5页面内部加载了全屏蒙层和第二预设分屏类型样式的弹窗分屏页面后，进一步可以在h5页面内部，通过页面组件间的通信方式，实现第一预设分屏类型样式的分屏页面与第二预设分屏类型样式的弹窗分屏页面之间的通信交互，比如，可以实现图6中“直播上热门”页面与全屏蒙层上居中显示的“自定义金币数额”弹窗分屏页面之间的通信交互，或者，可以实现图7中“直播上热门”页面与全屏蒙层上显示的三分屏样式的“收银台”弹窗分屏页面之间的通信交互，从而通过这种页面组件间的通信方式，极大的丰富了分屏页面之间交互方式和功能，也有效提高了移动端的分屏效率。
[0093]
其中，页面组件间的通信方式包括但不限于父子组件间通信、兄弟组件间通信、跨组件间通信。父子组件间通信可以是父组件通过props方式向子组件传递数据，子组件通过回调函数方式向父组件传递数据的通信方式。兄弟组件间通信可以是通过父组件进行连接通信；跨组件间通信可以是通过context或者第三方库做全局状态管理的通信方式。
[0094]
具体来讲，一种可选的实现方式是，本步骤s504的实现过程可以包括：在h5页面内部，通过父子组件间的通信方式，实现第一预设分屏类型样式的分屏页面与第二预设分屏类型样式的弹窗分屏页面之间的通信交互，以提高移动端的分屏效率和交互功能。接下来，本技术将以点击分屏页面某按钮，打开全屏蒙层，接收用户在全屏蒙层上的弹窗分屏页面
输入的任意文案，并将该文案对应回显在页面上这一过程为例，对分屏页面的通信交互过程进行详细说明，具体实现过程包括下述步骤b1-b3：
[0095]
步骤b1：在h5页面内部，响应于用户对第一预设分屏类型样式的分屏页面按钮的点击操作，利用按钮组件，打开全屏蒙层。
[0096]
在本实现方式中，在h5页面内部，通过父子组件间的通信方式，实现第一预设分屏类型样式的分屏页面与第二预设分屏类型样式的弹窗分屏页面之间的通信交互时，采用的父组件container，包含3个子组件，分别为按钮组件button、文案组件text、全屏蒙层组件dialog，以及两个变量，分别为dialogvisible、inputtext。具体的，在h5页面内部，当第一预设分屏类型样式的分屏页面按钮被用户点击时，响应于该点击操作，利用按钮组件button通过回调函数(如下述代码举例中的onclick函数)触发回调事件，将dialogvisible变量设置为true，以打开全屏蒙层，并在其上显示第二预设分屏类型样式的弹窗分屏页面，用以执行后续步骤b2。
[0097]
举例说明：如图6所示，在h5页面内部，当用户在“直播上热门”的半屏页面上点击“自定义”金币按钮时，响应于该点击操作，可以利用按钮组件button，通过回调函数(如下述代码举例中的onclick函数)触发回调事件，打开全屏蒙层，并在全屏蒙层上居中显示“自定义金币数额”弹窗分屏页面。
[0098]
步骤b2：利用文案组件，展示全屏蒙层的第二预设分屏类型样式的弹窗分屏页面中用户输入的文案内容。
[0099]
在本实现方式中，通过步骤b1在h5页面内部打开全屏蒙层，并在其上显示了第二预设分屏类型样式的弹窗分屏页面后，进一步的，当用户在第二预设分屏类型样式的分屏页面上输入了文案内容后，可以利用文案组件text通过props方式接收父组件传递的一个变量“inputtext”的取值，比如，文案组件text可以通过“text”这样一个props的字段，来接收父组件传递给其的一个变量“inputtext”的取值，且该取值即为上述用户在第二预设分屏类型样式的分屏页面上输入了文案内容，用以执行后续步骤b3。
[0100]
步骤b3：利用全屏蒙层组件，控制全屏蒙层的展示和隐藏；并通过回调函数将第二预设分屏类型样式的弹窗分屏页面中用户输入的文案内容传递到父组件中，并赋值给父组件中的对应变量，实现第一预设分屏类型样式的分屏页面与第二预设分屏类型样式的弹窗分屏页面之间的通信交互，以提高移动端的分屏效率和交互功能。
[0101]
在本实现方式中，通过步骤b1在h5页面内部打开全屏蒙层，并在其上显示了第二预设分屏类型样式的弹窗分屏页面后，进一步的，当用户在第二预设分屏类型样式的分屏页面上输入了文案内容并点击输入完成的按钮后，可以利用全屏蒙层组件dialog通过props方式接收父组件传递的一个变量“dialogvisible”的取值，比如，全屏蒙层组件dialog可以通过“visible”这样一个props的字段，来接收父组件传递给其的一个变量“dialogvisible”的取值，且该取值即为上述用户在第二预设分屏类型样式的分屏页面上点击输入完成的按钮，以控制全屏蒙层的隐藏，同时通过回调函数(如下述代码举例中的oninput函数)触发回调事件，将用户在第二预设分屏类型样式的分屏页面上输入的文案内容传递到父组件中，并赋值给父组件中的对应变量“inputtext”，以便父组件将该变量“inputtext”的取值传递给文案组件text进行显示，从而通过这种父子组件间通信的方式，实现了第一预设分屏类型样式的分屏页面与第二预设分屏类型样式的弹窗分屏页面之间
的通信交互，并提高了移动端的分屏效率和交互功能。
[0102]
举例说明：如图6所示，在h5页面内部，当用户在全屏蒙层上居中显示的“自定义金币数额”弹窗分屏页面上“请输入金额”的位置输入“20”并点击“确定”按钮时，可以利用全屏蒙层组件dialog，通过“visible”这样一个props的字段，来接收父组件传递给其的一个变量“dialogvisible”的取值“false”，以隐藏全屏蒙层。同时通过回调函数(如下述代码举例中的oninput函数)触发回调事件，将用户在全屏蒙层上居中显示的“自定义金币数额”弹窗分屏页面上“请输入金额”的位置输入的“20”传递到父组件中，并赋值给父组件中的对应变量“inputtext”，以便父组件将该变量“inputtext”的取值“20”传递给文案组件text进行显示，即，显示在图6中“直播上热门”的半屏页面的左下角的金币数额显示位置，从而通过这种父子组件间通信的方式，实现了图6中“直播上热门”页面与全屏蒙层上居中显示的“自定义金币数额”弹窗分屏页面之间的通信交互。
[0103]
进一步的，如图7所示，在h5页面内部，当用户在“直播上热门”的半屏页面右下角点击“支付”按钮时，响应于该点击操作，可以利用按钮组件button，通过回调函数(如onclick函数)触发回调事件，打开如图7所示的全屏蒙层，并在全屏蒙层上显示出三分屏样式的“收银台”弹窗分屏页面。进而再用户选择了支付方式并点击了“确认付款”按钮完成付款后，完成图7中“直播上热门”页面与全屏蒙层上三分屏显示的“收银台”弹窗分屏页面之间的通信交互。
[0104]
举例说明：以编程语言javascript(简称js)为例，在h5页面内部，通过父子组件间的通信方式，实现第一预设分屏类型样式的分屏页面与第二预设分屏类型样式的弹窗分屏页面之间的通信交互的实现代码如下所示：
[0105][0106][0107]
综上，本实施例提供的一种移动端的分屏交互方法，首先创建移动端的全屏透明网络视图webview界面，作为载体容器，并在容器内加载h5页面；然后将h5页面设置为第一预设分屏类型样式的分屏页面，接着，在h5页面内部，加载全屏蒙层和第二预设分屏类型样式的弹窗分屏页面，进而可以在h5页面内部，通过页面组件间的通信方式，实现第一预设分屏类型样式的分屏页面与第二预设分屏类型样式的弹窗分屏页面之间的通信交互，以提高移动端的分屏效率和交互功能。可见，由于本技术实施例中先实现全屏透明webview渲染全屏容器，并在容器内部打开h5页面，然后在h5页面中实现预设分屏类型样式的分屏页面和全屏蒙层的弹窗分屏页面，且这两部分分屏页面之间的交互和通信均在h5页面内部进行，从而能够有效提高移动端的分屏效率，并丰富分屏页面之间的交互形式和功能。
[0108]
第二实施例
[0109]
本实施例将对一种移动端的分屏交互装置进行介绍，相关内容请参见上述方法实施例。
[0110]
参见图8，为本实施例提供的一种移动端的分屏交互装置的组成示意图，该装置800包括：
[0111]
第一加载单元801，用于创建移动端的全屏透明网络视图webview界面，作为载体容器，并在所述容器内加载第5代互联网超文本标记语言h5页面；
[0112]
设置单元802，用于将所述h5页面设置为第一预设分屏类型样式的分屏页面；
[0113]
第二加载单元803，用于在所述h5页面内部，加载全屏蒙层和第二预设分屏类型样
式的弹窗分屏页面；
[0114]
交互单元804，用于在所述h5页面内部，通过页面组件间的通信方式，实现所述第一预设分屏类型样式的分屏页面与所述第二预设分屏类型样式的弹窗分屏页面之间的通信交互，以提高所述移动端的分屏效率和交互功能。
[0115]
在本实施例的一种实现方式中，所述第一加载单元801包括：
[0116]
创建子单元，用于创建全屏webview，作为载体容器；
[0117]
第一加载子单元，用于创建h5页面请求，并响应于所述请求，在所述容器中加载h5页面；
[0118]
添加子单元，用于将所述webview的背景设置为透明后，将其添加到移动端的界面上。
[0119]
在本实施例的一种实现方式中，所述设置单元802包括：
[0120]
第一设置子单元，用于将所述h5页面的整体高度设置为全屏，并将页面背景设置为透明；
[0121]
第二设置子单元，用于将所述h5页面的整体布局划分为头部header和按行渲染文本content两部分，并将所述header的背景设置为透明，将所述content的背景设置为预设背景颜色，以及将所述content的高度设置为半屏高度。
[0122]
在本实施例的一种实现方式中，所述第二加载单元803包括：
[0123]
第二加载子单元，用于在所述h5页面内部，添加全屏蒙层组件，并通过所述全屏蒙层组件，加载全屏蒙层；
[0124]
显示子单元，用于通过弹窗显示的方式，在所述全屏蒙层上显示第二预设分屏类型样式的弹窗分屏页面。
[0125]
在本实施例的一种实现方式中，所述交互单元804具体用于：
[0126]
在所述h5页面内部，通过父子组件间的通信方式，实现所述第一预设分屏类型样式的分屏页面与所述第二预设分屏类型样式的弹窗分屏页面之间的通信交互，以提高所述移动端的分屏效率和交互功能。
[0127]
在本实施例的一种实现方式中，所述交互单元804包括：
[0128]
打开子单元，用于在所述h5页面内部，响应于用户对所述第一预设分屏类型样式的分屏页面按钮的点击操作，利用按钮组件，打开所述全屏蒙层；
[0129]
展示子单元，用于利用文案组件，展示所述全屏蒙层的所述第二预设分屏类型样式的弹窗分屏页面中用户输入的文案内容；
[0130]
交互子单元，用于利用全屏蒙层组件，控制所述全屏蒙层的展示和隐藏；并通过回调函数将所述第二预设分屏类型样式的弹窗分屏页面中用户输入的文案内容传递到父组件中，并赋值给父组件中的对应变量，实现所述第一预设分屏类型样式的分屏页面与所述第二预设分屏类型样式的弹窗分屏页面之间的通信交互，以提高所述移动端的分屏效率和交互功能。
[0131]
在本实施例的一种实现方式中，所述第一预设分屏类型样式的分屏页面为半屏样式的分屏页面；所述第二预设分屏类型样式的弹窗分屏页面为全屏居中显示的弹窗分屏界面或者三分屏样式的弹窗分屏页面。
[0132]
进一步地，本技术实施例还提供了一种移动端的分屏交互设备，包括：处理器、存
储器、系统总线；
[0133]
所述处理器以及所述存储器通过所述系统总线相连；
[0134]
所述存储器用于存储一个或多个程序，所述一个或多个程序包括指令，所述指令当被所述处理器执行时使所述处理器执行上述移动端的分屏交互方法的任一种实现方法。
[0135]
进一步地，本技术实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有指令，当所述指令在终端设备上运行时，使得所述终端设备执行上述移动端的分屏交互方法的任一种实现方法。
[0136]
通过以上的实施方式的描述可知，本领域的技术人员可以清楚地了解到上述实施例方法中的全部或部分步骤可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本技术的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如rom/ram、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者诸如媒体网关等网络通信设备，等等)执行本技术各个实施例或者实施例的某些部分所述的方法。
[0137]
需要说明的是，本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。
[0138]
还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
[0139]
对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本技术。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本技术的精神或范围的情况下，在其它实施例中实现。因此，本技术将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

技术特征：
1.一种移动端的分屏交互方法，其特征在于，所述方法包括：创建移动端的全屏透明网络视图webview界面，作为载体容器，并在所述容器内加载第5代互联网超文本标记语言h5页面；将所述h5页面设置为第一预设分屏类型样式的分屏页面；在所述h5页面内部，加载全屏蒙层和第二预设分屏类型样式的弹窗分屏页面；在所述h5页面内部，通过页面组件间的通信方式，实现所述第一预设分屏类型样式的分屏页面与所述第二预设分屏类型样式的弹窗分屏页面之间的通信交互，以提高所述移动端的分屏效率和交互功能。2.根据权利要求1所述的方法，其特征在于，所述创建移动端的全屏透明网络视图webview界面，作为载体容器，并在所述容器内加载第5代互联网超文本标记语言h5页面，包括：创建全屏webview，作为载体容器；创建h5页面请求，并响应于所述请求，在所述容器中加载h5页面；将所述webview的背景设置为透明后，将其添加到移动端的界面上。3.根据权利要求1所述的方法，其特征在于，所述将所述h5页面设置为第一预设分屏类型样式的分屏页面，包括：将所述h5页面的整体高度设置为全屏，并将页面背景设置为透明；将所述h5页面的整体布局划分为头部header和按行渲染文本content两部分，并将所述header的背景设置为透明，将所述content的背景设置为预设背景颜色，以及将所述content的高度设置为半屏高度。4.根据权利要求1所述的方法，其特征在于，所述在所述h5页面内部，加载全屏蒙层和第二预设分屏类型样式的弹窗分屏页面，包括：在所述h5页面内部，添加全屏蒙层组件，并通过所述全屏蒙层组件，加载全屏蒙层；通过弹窗显示的方式，在所述全屏蒙层上显示第二预设分屏类型样式的弹窗分屏页面。5.根据权利要求1所述的方法，其特征在于，所述在所述h5页面内部，通过页面组件间的通信方式，实现所述第一预设分屏类型样式的分屏页面与所述第二预设分屏类型样式的弹窗分屏页面之间的通信交互，以提高所述移动端的分屏效率和交互功能，包括：在所述h5页面内部，通过父子组件间的通信方式，实现所述第一预设分屏类型样式的分屏页面与所述第二预设分屏类型样式的弹窗分屏页面之间的通信交互，以提高所述移动端的分屏效率和交互功能。6.根据权利要求5所述的方法，其特征在于，所述在所述h5页面内部，通过父子组件间的通信方式，实现所述第一预设分屏类型样式的分屏页面与所述第二预设分屏类型样式的弹窗分屏页面之间的通信交互，以提高所述移动端的分屏效率和交互功能，包括：在所述h5页面内部，响应于用户对所述第一预设分屏类型样式的分屏页面按钮的点击操作，利用按钮组件，打开所述全屏蒙层；利用文案组件，展示所述全屏蒙层的所述第二预设分屏类型样式的弹窗分屏页面中用户输入的文案内容；利用全屏蒙层组件，控制所述全屏蒙层的展示和隐藏；并通过回调函数将所述第二预
设分屏类型样式的弹窗分屏页面中用户输入的文案内容传递到父组件中，并赋值给父组件中的对应变量，实现所述第一预设分屏类型样式的分屏页面与所述第二预设分屏类型样式的弹窗分屏页面之间的通信交互，以提高所述移动端的分屏效率和交互功能。7.根据权利要求1-6任一项所述的方法，其特征在于，所述第一预设分屏类型样式的分屏页面为半屏样式的分屏页面；所述第二预设分屏类型样式的弹窗分屏页面为全屏居中显示的弹窗分屏界面或者三分屏样式的弹窗分屏页面。8.一种移动端的分屏交互装置，其特征在于，所述装置包括：第一加载单元，用于创建移动端的全屏透明网络视图webview界面，作为载体容器，并在所述容器内加载第5代互联网超文本标记语言h5页面；设置单元，用于将所述h5页面设置为第一预设分屏类型样式的分屏页面；第二加载单元，用于在所述h5页面内部，加载全屏蒙层和第二预设分屏类型样式的弹窗分屏页面；交互单元，用于在所述h5页面内部，通过页面组件间的通信方式，实现所述第一预设分屏类型样式的分屏页面与所述第二预设分屏类型样式的弹窗分屏页面之间的通信交互，以提高所述移动端的分屏效率和交互功能。9.一种移动端的分屏交互设备，其特征在于，包括：处理器、存储器、系统总线；所述处理器以及所述存储器通过所述系统总线相连；所述存储器用于存储一个或多个程序，所述一个或多个程序包括指令，所述指令当被所述处理器执行时使所述处理器执行权利要求1-7任一项所述的方法。10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有指令，当所述指令在终端设备上运行时，使得所述终端设备执行权利要求1-7任一项所述的方法。

技术总结
本申请公开了一种移动端的分屏交互方法、装置、存储介质及设备，该方法包括：首先创建移动端的全屏透明webview作为载体容器，并在容器内加载H5页面；然后将H5页面设置为第一预设分屏类型样式的分屏页面，接着在H5页面内部，加载全屏蒙层和第二预设分屏类型样式的弹窗分屏页面，进而在H5页面内部，通过页面组件间的通信方式，实现第一预设分屏类型样式的分屏页面与第二预设分屏类型样式的弹窗分屏页面之间的通信交互。这样，先实现全屏透明webview渲染容器，并在其中打开H5页面，然后在H5页面中实现预设分屏类型样式的分屏页面和全屏蒙层的弹窗分屏页面以及二者之间的交互和通信，从而提高了分屏效率，并丰富了分屏页面之间的交互形式和功能。交互形式和功能。交互形式和功能。


技术研发人员：胡皎
受保护的技术使用者：北京字节跳动网络技术有限公司
技术研发日：2022.01.19
技术公布日：2023/8/1