Mobile terminal split screen interaction method, device, storage medium and equipment

Abstract

The present disclosure discloses a mobile terminal split screen interaction method, device, storage medium and device. The method requires firstly to create a full-screen transparent webview of a mobile terminal as a carrier container, and to load an H5 page into the container. Then, the H5 page is used as a split screen page of a first preset split screen type style, and a full-screen mask and a pop-up window split screen page of a second preset split screen type style are loaded into the H5 page. Furthermore, in the H5 page, a communication interaction between the split screen page of the first preset split screen type style and the pop-up window split screen page of the second preset split screen type style is realized through communication between page components. Thus, a rendering container of a full-screen transparent webview is realized, and the H5 page is opened in it, and the split screen page of the preset split screen type style, the pop-up window split screen page of the full-screen mask and the interaction and communication between the two are realized in the H5 page, thereby improving the efficiency of split screen and enriching the interaction form and function between the split screen pages.

Description

[Technical field]

[0001] This application claims priority to a Chinese patent application bearing application number 202210062611.3, filed on January 19, 2022, and entitled "Display mode switching method, device, equipment, and storage medium," the entire contents of which are incorporated herein by reference.

[0002] The present disclosure relates to the field of computer technology, and in particular to a method, device, storage medium and equipment for split-screen interaction in a mobile terminal. [Background technology]

[0003] With the widespread use of mobile terminal devices such as smartphones and tablet computers, people's demands for mobile terminal devices are also increasing. When the screen of a mobile terminal device becomes large enough, a split screen function also appears.

[0004] Currently, many applications (Applications, simply referred to as APPs) installed on mobile terminals usually require split-screen interaction on mobile terminals, such as comments in video streams and gifts, goods, and tools for popularity in live broadcast rooms, as shown in the figure. These interactions between split-screen interfaces are generally divided into two forms. One is interaction within a split screen, and the other is interaction between a split-screen page and a full-screen mask. For example, as shown in FIG. 2, a central pop-up window interface with a full-screen mask open on a half-screen page, or as shown in FIG. 3, an x-split-screen (e.g., 3-split-screen) pop-up window interface with a global mask open on a half-screen page.

[0005] Currently, in order to realize rapid upgrade and update of APP, hybrid development mode is adopted, that is, fifth generation Internet Hypertext Expression Language (H5) pages are developed to realize split screen interaction of mobile terminals. For example, currently, when realizing the split screen of a mobile terminal as shown in FIG. 2, as shown in FIG. 4, a half-screen container is first rendered through a half-screen webview and an H5 page is opened in it. Then, the H5 page communicates with a client through JSBridge to call the function of opening a full-screen mask and the function of displaying a pop-up window page in the client. However, such a split screen interaction method depends on the capabilities of the client and includes the addition and upgrade of the APP's functions, so that the client version needs to be updated from time to time, and it lacks flexibility. At the same time, the display of the full-screen mask and the pop-up window page also depends on the communication between the H5 page and the client with JSBridge, so the efficiency of split screen is reduced, and the interaction form and function between the split screen interface are also limited. Summary of the Invention

[0006] The main objective of the embodiments of the present disclosure is to provide a mobile terminal split-screen interaction method, device, storage medium and equipment that can effectively improve the screen splitting efficiency of a mobile terminal and enrich the interaction style and functions between split-screen pages.

[0007] An embodiment of the present disclosure includes the steps of: creating a transparent full-screen webview interface of a mobile terminal as a carrier container, and loading a fifth generation Internet hypertext markup language (H5) page into the container; setting the H5 page as a split screen page of a first preset split screen type style; loading a pop-up window split screen page with full screen mask and a second preset split screen type style in the H5 page; In the H5 page, a split screen interaction method for a mobile terminal is provided, which includes a step of realizing a communication interaction between a split screen page of the first preset split screen type style and a pop-up window split screen page of the second preset split screen type style by communication between page components, in order to improve the screen split efficiency and interaction function of the mobile terminal.

[0008] According to a possible embodiment, the step of creating a transparent full-screen webview interface of a mobile terminal as the carrier container and loading a fifth generation Internet hypertext markup language (H5) page into the container includes: Steps to create a full screen webview as a carrier container, creating a request for an H5 page and loading an H5 page in said container in response to said request; The method includes setting the background of the webview to transparent and then adding it to the interface of the mobile device.

[0009] According to a possible embodiment, the step of setting the H5 page as a split screen page of a first preset split screen type style includes: setting the overall height of the H5 page to full screen height and setting the background of the page to transparent; Dividing the overall layout of the H5 page into two parts: a header and text content rendered line by line, setting the background of the header to transparent, setting the background of the content to a preset background color, and setting the height of the content to half the screen height.

[0010] According to a possible embodiment, the step of loading a pop-up window split screen page with a full screen mask and a second preset split screen type style in the H5 page includes: adding a full screen mask component in the H5 page and loading a full screen mask by the full screen mask component; Displaying a pop-up window split screen page of a second preset split screen type style on the full screen mask by a pop-up window display.

[0011] According to a possible embodiment, in the H5 page, in order to improve the screen splitting efficiency and interaction function of the mobile terminal, a step of realizing a communication interaction between the split screen page of the first preset split screen type style and the pop-up window split screen page of the second preset split screen type style by communication between page components is: The step of realizing communication and interaction between the split screen page of the first preset split screen type style and the pop-up window split screen page of the second preset split screen type style through communication between parent-child components in the H5 page, so as to improve the screen split efficiency and interaction function of the mobile terminal.

[0012] According to a possible embodiment, in the H5 page, in order to improve the screen splitting efficiency and interaction function of the mobile terminal, a step of realizing a communication interaction between the split screen page of the first preset split screen type style and the pop-up window split screen page of the second preset split screen type style through communication between parent and child components is: opening the full-screen mask by using a button component in response to a user clicking a split-screen page button of the first preset split-screen type style in the H5 page; utilizing a copy component to present the copy content input by the user in a pop-up window split screen page of the second preset split screen type style of the full screen mask; In order to improve the screen split efficiency and interaction function of the mobile terminal, the step of using a full-screen mask component to control the presentation and non-presentation of the full-screen mask, and transmitting copy content input by a user in the pop-up window split-screen page of the second preset split-screen type style to a parent component via a callback function, and substituting it into a corresponding variable of the parent component, thereby realizing communication interaction between the split-screen page of the first preset split-screen type style and the pop-up window split-screen page of the second preset split-screen type style.

[0013] According to a possible embodiment, the split screen page of the first preset split screen type style is a half-screen style split screen page, and the pop-up window split screen page of the second preset split screen type style is a full-screen center display pop-up window split screen interface or a three-split screen style pop-up window split screen page.

[0014] An embodiment of the present disclosure includes a first loading means for creating a transparent full-screen webview interface of a mobile terminal as a carrier container and loading a fifth generation Internet hypertext markup language (H5) page into the container; A setting means for setting the H5 page as a split screen page of a first preset split screen type style; A second loading means for loading a pop-up window split screen page with a full screen mask and a second preset split screen type style in the H5 page; The present invention further provides a split screen interactive device for a mobile terminal, the split screen interactive device including: an interactive means for realizing communication and interaction between the split screen page of the first preset split screen type style and the pop-up window split screen page of the second preset split screen type style through communication between page components within the H5 page, in order to improve the screen split efficiency and interactive function of the mobile terminal.

[0015] According to a possible embodiment, the first loading means comprises: A creation subunit for creating a full screen webview as a carrier container, a first load subunit for generating an H5 page request and for loading an H5 page in the container in response to said request; and an additional sub-unit for adding the webview to the interface of a mobile terminal after setting the background of the webview to transparent.

[0016] According to a possible embodiment, the setting means comprises: a first setting subunit for setting the overall height of the H5 page to the height of the full screen and setting the background of the page to transparent; and a second setting subunit for dividing the overall layout of the H5 page into two parts: a header and a text content rendered line by line, setting a background of the header to transparent, setting a background of the content to a preset background color, and setting a height of the content to half a screen height.

[0017] According to a possible embodiment, the second loading means comprises: A second loading sub-unit for adding a full screen mask component in the H5 page and loading a full screen mask according to the full screen mask component; and a display subunit for displaying a pop-up window split screen page of a second preset split screen type style on the full screen mask by pop-up window display.

[0018] According to a possible embodiment, the dialogue means in particular comprises: In the H5 page, in order to improve the screen splitting efficiency and interactive function of the mobile terminal, communication between parent-child components is used to realize communication interaction between the split screen page of the first preset split screen type style and the pop-up window split screen page of the second preset split screen type style.

[0019] According to a possible embodiment, the interaction means comprises: an opening subunit for opening the full-screen mask by using a button component in response to a user clicking a split-screen page button of the first preset split-screen type style in the H5 page; a presentation subunit for presenting a copy content input by a user in a pop-up window split screen page of the second preset split screen type style of the full screen mask by using a copy component; In order to improve the screen split efficiency and interaction function of the mobile terminal, the mobile terminal further includes an interaction subunit for using a full-screen mask component to control the presentation and non-presentation of the full-screen mask, and for transmitting copy content input by a user in the pop-up window split-screen page of the second preset split-screen type style to a parent component via a callback function, and substituting it into a corresponding variable of the parent component, thereby realizing communication interaction between the split-screen page of the first preset split-screen type style and the pop-up window split-screen page of the second preset split-screen type style.

[0020] According to a possible embodiment, the split screen page of the first preset split screen type style is a half-screen style split screen page, and the pop-up window split screen page of the second preset split screen type style is a full-screen center display pop-up window split screen interface or a three-split screen style pop-up window split screen page.

[0021] An embodiment of the present disclosure includes a processor, a memory, and a system bus, the processor and the memory are connected via the system bus; The memory is for storing one or more programs, the one or more programs including instructions which, when executed by the processor, cause the processor to perform any one of the embodiments of the split screen interaction method, further providing a split screen interaction device for a mobile terminal.

[0022] An embodiment of the present disclosure is a computer-readable storage medium having instructions stored thereon, comprising: There is further provided a computer readable storage medium which, when the instructions are executed in a terminal device, causes any one of the embodiments of the split screen interaction method to be performed.

[0023] The split-screen interaction method, apparatus, storage medium and device provided by the embodiments of the present disclosure first create a transparent full-screen webview interface of a mobile terminal as a carrier container, load an H5 page into the container, and load the H5 page as a split-screen page of a first preset split-screen type style into the H5 page, and then realize a communication interaction between the split-screen page of the first preset split-screen type style and the pop-up window split-screen page of the second preset split-screen type style through communication between page components in the H5 page, so as to improve the screen split efficiency and interaction function of the mobile terminal. It can be seen that in the embodiment of the present disclosure, a full-screen container with full-screen transparent webview rendering is first realized, and an H5 page is opened in the container, and then a split-screen page with a preset split-screen type style and a pop-up window split-screen page with a full-screen mask are realized in the H5 page, and the interaction and communication between these two split-screen pages is carried out in the H5 page, so as to effectively improve the screen split efficiency of the mobile terminal and enrich the interaction style and function between the split-screen pages. [Brief description of the drawings]

[0024] In order to more clearly describe the embodiments of the present disclosure or the technical solutions of the prior art, the following briefly introduces the accompanying drawings necessary for describing the embodiments or the prior art. The accompanying drawings in the following description are some embodiments of the present disclosure, and it is obvious to those skilled in the art that they can obtain other accompanying drawings based on these accompanying drawings without requiring creative ingenuity.

[0025] [Figure 1] FIG. 1 is a diagram illustrating an example of a conventional mobile terminal split screen display according to an embodiment of the present disclosure. [Diagram 2] FIG. 2 is a second diagram illustrating a conventional mobile terminal split screen display according to an embodiment of the present disclosure. [Diagram 3]FIG. 3 is a third diagram illustrating a conventional mobile terminal split screen display according to an embodiment of the present disclosure. [Figure 4] FIG. 2 is an exemplary diagram of a conventional mobile terminal split screen interaction method according to an embodiment of the present disclosure; [Diagram 5] FIG. 2 is a schematic diagram of a flow of a split-screen interaction method for a mobile terminal according to an embodiment of the present disclosure. [Figure 6] FIG. 1 is an example diagram of a split-screen interaction method for a mobile terminal according to an embodiment of the present disclosure. [Figure 7] FIG. 2 is a second diagram illustrating a split-screen interaction method for a mobile terminal according to an embodiment of the present disclosure. [Figure 8] FIG. 1 is a schematic diagram of a configuration of a split-screen interactive device of a mobile terminal according to an embodiment of the present disclosure. DETAILED DESCRIPTION OF THE PREFERRED EMBODIMENTS

[0026] Recently, with the popularization of various mobile terminal devices, when the screen of the mobile terminal device is large enough, the corresponding split screen function scene also appears, such as the two-split screen scene for comments in the video stream as shown in Figure 1, the opening of a central pop-up window interface of a full-screen mask in a half-screen page as shown in Figure 2, and the opening of a three-split screen pop-up window interface of a global mask in a half-screen page as shown in Figure 3.

[0027] At present, in consideration of the need for rapid upgrade and update, hybrid development mode is often adopted, that is, H5 page is developed to realize the split screen interaction of mobile terminals. For example, currently, when realizing the mobile terminal split screen interaction as shown in FIG. 2, as shown in FIG. 4, firstly, through the half-screen webview, a half-screen container is rendered as a carrier, and an H5 page is opened inside it, and then the H5 page communicates with the client through JSBridge to call the function of opening a full screen mask and the function of centering and displaying a pop-up window page in the client. However, such a split screen interaction method depends on the client's capabilities and involves the addition and upgrade of APP functions, so the client version needs to be updated from time to time, which is inflexible. At the same time, the display of the full screen mask and the pop-up window page both depend on the communication between the H5 page and the client with JSBridge, which reduces the efficiency of split screen, and the communication between the H5 page and the client belongs to the communication between two kinds of technical means, which only realizes a relatively direct single communication form (such as sending and receiving data), so the interaction form and function with the split screen interface are also limited.

[0028] In order to solve the above-mentioned problems, the present disclosure provides a mobile terminal split screen interaction method, device, storage medium and equipment, which first creates a transparent full-screen webview interface of a mobile terminal as a carrier container, loads an H5 page into the container, and sets the H5 page as a split screen page of a first preset split screen type style, loads a full-screen mask and a pop-up window split screen page of a second preset split screen type style into the H5 page, and then realizes communication interaction between the split screen page of the first preset split screen type style and the pop-up window split screen page of the second preset split screen type style through communication between page components within the H5 page, in order to improve the screen split efficiency and interaction function of the mobile terminal. It can be seen that in the embodiment of the present disclosure, a full-screen container with full-screen transparent webview rendering is first realized, and an H5 page is opened in the container, and then a split-screen page with a preset split-screen type style and a pop-up window split-screen page with a full-screen mask are realized in the H5 page, and the interaction and communication between these two split-screen pages is carried out in the H5 page, so as to effectively improve the screen split efficiency of the mobile terminal and enrich the interaction style and function between the split-screen pages.

[0029] In order to make the objectives, technical solutions and advantages of the embodiments of the present disclosure clearer, the following will clearly and completely describe the technical solutions of the embodiments of the present disclosure with reference to the accompanying drawings of the embodiments of the present disclosure. It is clear that the described embodiments are not all of the present disclosure but are a part of it. Based on the embodiments of the present disclosure, all other embodiments that a person skilled in the art can obtain without creative ingenuity are all within the scope of protection of the present disclosure.

[0030] First embodiment 5 is a schematic diagram of a flow of a split-screen interaction method for a mobile terminal according to the present embodiment. The method includes the following steps:

[0031] S501: Create a transparent full-screen webview interface for a mobile terminal as a carrier container, and load a fifth generation Internet hypertext markup language H5 page into the container.

[0032] In this embodiment, in order to improve the screen splitting efficiency of the mobile terminal and enrich the interaction style and functions between the split-screen pages, it is necessary to first create a transparent full-screen webview interface of the mobile terminal as a carrier container, and then load the H5 page into the container to perform the subsequent step S502.

[0033] Specifically, as an example of an embodiment, the execution process of step S501 may include the following steps A1 to A3.

[0034] Step A1: Create a fullscreen webview as the carrier container.

[0035] In this embodiment, in order to realize the communication interaction between the split screen of the mobile terminal and the split screen interface in the H5 page, first, a full-screen container is realized as a carrier to render the full-screen webview and perform the subsequent step A2.

[0036] Step A2: Create an H5 page request and, in response to the request, load the H5 page into a container.

[0037] In this embodiment, after creating a full-screen webview as a carrier container through step A1, a communication interaction between the split screen of the mobile terminal and the split screen interface can be realized within the H5 page, and an H5 page request can be further created, and in response to the request, the H5 page can be loaded into the webview container, and in response to the request, the H5 page can be loaded into the container.

[0038] Step A3: Make the background of the webview transparent and then add it to the mobile device interface.

[0039] In this embodiment, after creating a full-screen webview as a carrier container by step A1, in order to realize the communication interaction between the split screen of the mobile terminal and the split screen interface in the H5 page, it is also necessary to make the background of the full-screen webview transparent so as not to cover the display content of the loaded H5 page. Furthermore, after making the background of the webview transparent and successfully loading the H5 page, the full-screen transparent webview with the loaded H5 page is added to the interface of the mobile terminal to execute the following step S502.

[0040] For example, let's take the iOS system as an example, create a full-screen transparent webview for mobile devices as a carrier container, and load the implementation code for the H5 page as follows:

number

[0041] Here, the present disclosure is not limited to the execution order of steps 2 and 3, as long as step 2 is executed before step 4. That is, the execution order of the above code may be one of three kinds: steps 1, 2, 3, 4, 5; or steps 1, 3, 2, 4, 5; or steps 1, 2, 4, 3, 5.

[0042] S502: Set the H5 page to the split screen page of the first preset split screen type style.

[0043] In this embodiment, a full-screen transparent webview is realized by step S501, and after the H5 page is loaded into the container, the H5 page can be set as a split screen page setting of the first preset split screen type style to perform the subsequent step S503.

[0044] Here, the split screen page of the first preset split screen type style can be set according to the actual situation, but the embodiment of the present disclosure is not limited thereto. For example, the split screen page of the first preset split screen type style can be set as a split screen page setting of a half screen style, that is, the H5 page can be set as a split screen page setting of a half screen style.

[0045] Specifically, as an example of an embodiment, a full-screen transparent webview is realized, and after loading an H5 page therein, the overall height of the H5 page is first set to the full-screen height, and the background of the page is set to transparent, and then the overall layout of the H5 page can be divided into two parts: a header and text (content) rendered line by line. Here, the content can be the page of "Popular Live" shown in FIG. 6 or FIG. 7, and as shown in FIG. 6 or FIG. 7, the background of the header is set to transparent, the background of the content is set to a preset background color (the white color of the page of "Popular Live" shown in FIG. 6 or FIG. 7), and the height of the content is set to the height of half the screen, thereby realizing the half-screen style of the H5 page.

[0046] S503: Load a pop-up window split screen page with full screen mask and second preset split screen type style into page H5.

[0047] In this embodiment, after step S502 sets the H5 page as a split screen page of the first preset split screen type style, for example, sets the H5 page as a split screen page of a half-screen style, and then executes the subsequent step S504 to load a full-screen mask and a pop-up window split screen page of the second preset split screen type style into the H5 page, so as to realize quick communication interaction between the two split screen pages.

[0048] Here, the pop-up window split screen page of the second preset split screen type style can be set according to actual circumstances, but the embodiment of the present disclosure is not limited thereto. For example, the split screen page of the second preset split screen type style can be a pop-up window split screen interface displayed in the center of the full screen or a split screen page of a three-split screen style, that is, a pop-up window split screen interface displayed in the center of the full screen in a full screen mask, or a pop-up window split screen page displaying a three-split screen style, as shown in Figures 6 and 7, respectively.

[0049] Specifically, as an example of an embodiment, after the H5 page is set as a split screen page of the first preset split screen type style, for example, after the H5 page is set as a split screen page of a half-screen style, first, add a full screen mask component in the H5 page, and load the full screen mask by the full screen mask component. The specific realization process is consistent with the conventional method, so the overlapping description will not be repeated here. Then, in order to realize the split screen display in the H5 page, a pop-up window split screen page of the second preset split screen type style (the pop-up window split screen page of the "customized gold coin amount" displayed in the center of FIG. 6, or the pop-up window split screen page of the "cashier" of the three-split screen style shown in FIG. 7) is displayed in the full screen mask by a pop-up window display.

[0050] S504: In the H5 page, in order to improve the screen splitting efficiency and interactive function of the mobile terminal, a communication interaction between a split screen page of a first preset split screen type style and a pop-up window split screen page of a second preset split screen type style is realized through communication between page components.

[0051] In this embodiment, step S502 sets the H5 page as a split screen page of the first preset split screen type style, and step S503 loads the full screen mask and the pop-up window split screen page of the second preset split screen type style into the H5 page. In addition, in the H5 page, a communication interaction between the split screen page of the first preset split screen type style and the pop-up window split screen page of the second preset split screen type style can be realized through communication between page components. For example, a communication interaction between the page "Go to popular live" in FIG. 6 and the pop-up window split screen page of "Customized gold amount" displayed in the center of the full screen mask can be realized, or a communication interaction between the page "Go to popular live" in FIG. 7 and the pop-up window split screen page of "Cashier" in the three-split screen style displayed in the full screen mask can be realized. Such a communication method between page components greatly enriches the interaction method and function between the split screen pages, and also effectively improves the screen split efficiency of the mobile terminal.

[0052] Here, communication methods between page components include, but are not limited to, communication between parent and child components, communication between sibling components, and communication between cross components. Communication between parent and child components may be a communication method in which a parent component transmits data to a child component using props, and transmits data to the parent component via a child component callback function. Communication between sibling components can be connected and communicated through a parent component. Communication between cross components can be performed by managing a global state using a context or a third-party library.

[0053] Specifically, as an example of an embodiment, the realization process of step S504 includes: realizing a communication interaction between a split screen page of a first preset split screen type style and a pop-up window split screen page of a second preset split screen type style in the H5 page through communication between parent-child components, so as to improve the screen split efficiency and interaction function of the mobile terminal. Then, the present disclosure takes as an example a process of clicking a specific button in the split screen page, opening a full screen mask, receiving any text entered by a user in the pop-up window split screen page in the full screen mask, and displaying the text back on the page accordingly to describe in detail the communication interaction process of the split screen page. The specific realization process includes the following steps B1 to B3.

[0054] Step B1: In the H5 page, in response to a user's clicking operation on the split screen page button of the first preset split screen type style, use a button component to open a full screen mask.

[0055] In this embodiment, when the communication dialogue between the split screen page of the first preset split screen type style and the pop-up window split screen page of the second preset split screen type style is realized by the communication between the parent and child components in the H5 page, the adopted parent component Container includes three child components, namely, the button component Button, the copy component Text, and the full screen mask component Dialog, and two variables, namely, dialogVisible and inputText. Specifically, when the split screen page button of the first preset split screen type style is clicked by the user in the H5 page, in response to the click operation, the button component is used to trigger a callback event through the Button callback function (for example, the onClick function in the following code example), and the dialogVisible variable is set to true, thereby opening the full screen mask and displaying the pop-up window split screen page of the second preset split screen type style thereon to execute the subsequent step B2.

[0056] For example, as shown in FIG. 6, when a user clicks the “Customize” gold coin button on the “Go to Popular Live” half-screen page in the H5 page, in response to the click operation, the button component Button is used to trigger a callback event through a callback function (for example, the onClick function in the following code example), to open a full-screen mask, and center a “Customize Gold Coin Amount” pop-up window split-screen page on the full-screen mask.

[0057] Step B2: Using a copy component, present the copy content input by the user in a pop-up window split-screen page of a second preset split-screen type style with a full-screen mask.

[0058] In this embodiment, after step B1 opens a full screen mask in page H5 and displays a pop-up window split screen page of the second preset split screen type style thereon, and further, after the user inputs copy content in the split screen page of the second preset split screen type style, the copy component Text receives the value of one variable "inputText" transmitted from the parent component in props. For example, to perform the subsequent step B3, the copy component Text receives the value of one variable "inputText" transmitted from the parent component through a field of props called "text", and the value is the copy content input by the user in the split screen page of the second preset split screen type style.

[0059] Step B3: Using the full-screen mask component to control the presentation and non-presentation of the full-screen mask, in order to improve the screen splitting efficiency and interaction function of the mobile terminal, the copy content input by the user in the pop-up window split-screen page of the second preset split-screen type style is transmitted to the parent component via a callback function, and assigned to a corresponding variable of the parent component, thereby realizing communication interaction between the split-screen page of the first preset split-screen type style and the pop-up window split-screen page of the second preset split-screen type style.

[0060] In this embodiment, after opening the full screen mask in the H5 page by step B1 and displaying the popup window split screen page of the second preset split screen type style on it, the user further inputs the copy content in the split screen page of the second preset split screen type style and clicks the input completion button, and then uses the full screen mask component Dialog to receive the value of one variable "dialogVisible" transmitted from the parent component in props. For example, the full screen mask component Dialog can receive the value of one variable "dialogVisible" transmitted from the parent component through the props field "visible". For this value, in order to control the hiding of the full screen mask, the user clicks the input completion button in the split screen page of the second preset split screen type style, and at the same time, triggers a callback event through a callback function (for example, the onInput function in the following code example), transmits the copy content input by the user in the split screen page of the second preset split screen type style to the parent component, and assigns it to the corresponding variable "inputText" of the component, so that the parent component transmits the value of the variable "inputText" to the copy component Text for display. Such communication between parent and child components realizes communication and interaction between a split screen page of a first preset split screen type style and a pop-up window split screen page of a second preset split screen type style, thereby improving the screen division efficiency and interaction function of the mobile terminal.

[0061] For example, as shown in FIG. 6, in the H5 page, when the user inputs "20" in the "Please enter the amount" position of the "Customized gold coin amount" popup window split screen page displayed in the center of the full screen mask and clicks the "Confirm" button, the full screen mask component Dialog is used to receive the value "false" of one variable "dialogVisible" transmitted from the parent component through the props field "visible" in order to hide the full screen mask. At the same time, the parent component triggers a callback event through a callback function (for example, the onInput function in the following code example) in order to transmit the value "20" of the variable "inputText" to the copy component Text for display, and transmits the "20" input by the user in the "Please enter the amount" position of the "Customized gold coin amount" popup window split screen page displayed in the center of the full screen mask to the parent component and assigns it to the corresponding variable "inputText" of the parent component. In other words, by displaying the gold coin amount at the lower left corner of the half-screen page of “Go to Popular Live” in Figure 6, such communication between parent-child components realizes the communication dialogue between the “Go to Popular Live” page in Figure 6 and the “Customize Gold Coin Amount” pop-up window split-screen page displayed in the center of the full-screen mask.

[0062] Furthermore, as shown in FIG. 7, when a user clicks the “Payment” button in the lower right corner of the half-screen page of “Popular Live” in the H5 page, in response to the click operation, the button component Button is used to trigger a callback event via a callback function (e.g., onClick function), to open a full-screen mask as shown in FIG. 7, and display a “Cashier” pop-up window split-screen page in a three-split-screen style on the full-screen mask.

[0063] Furthermore, after the user selects a payment method and clicks the “Confirm Payment” button to complete the payment, the communication dialogue between the “Go to Popular Live” page in FIG. 7 and the “Cashier” pop-up window split screen page with a three-split screen display on a full-screen mask is completed.

[0064] For example, taking the programming language JavaScript (JS for short) as an example, the implementation code for realizing communication interaction between a split-screen page of the first preset split-screen type style and a pop-up window split-screen page of the second preset split-screen type style through communication between parent and child components in an H5 page is shown as follows:

number

[0065] To sum up, the mobile terminal split screen interaction method according to the present embodiment firstly needs to create a transparent full-screen webview interface of the mobile terminal as a carrier container, and load the H5 page into the container. Then, the H5 page is a split screen page of a first preset split screen type style, and then a full-screen mask and a pop-up window split screen page of a second preset split screen type style are loaded into the H5 page, so that in the H5 page, the communication interaction between the split screen page of the first preset split screen type style and the pop-up window split screen page of the second preset split screen type style can be realized through the communication between the page components, so as to improve the screen split efficiency and interaction function of the mobile terminal. As can be seen, in the embodiment of the present disclosure, firstly, a full-screen transparent webview rendering full-screen container is realized, and after opening the H5 page in the container, the split screen page of the preset split screen type style and the pop-up window split screen page of the full-screen mask are realized in the H5 page, and the interaction and communication between these two split screen pages are carried out in the H5 page, so as to effectively improve the screen split efficiency of the mobile terminal, and enrich the interaction form and function between the split screen pages.

[0066] Second embodiment This embodiment introduces a split-screen interactive device for mobile terminals. Related content can be found in the above method embodiment.

[0067] FIG. 8 is a schematic diagram of the configuration of a split-screen interactive device for a mobile terminal according to this embodiment. The device 800 includes: A first loading means 801 for creating a transparent full-screen webview interface of a mobile terminal as a carrier container and loading a fifth generation Internet hypertext markup language H5 page into the container; A setting means 802 for setting the H5 page as a split screen page of a first preset split screen type style; A second loading means 803 for loading a pop-up window split screen page with full screen mask and a second preset split screen type style in the H5 page; and an interaction means 804 for realizing communication interaction between the split screen page of the first preset split screen type style and the pop-up window split screen page of the second preset split screen type style through communication between page components within the H5 page, in order to improve the screen split efficiency and interaction function of the mobile terminal.

[0068] In this embodiment, the first loading means 801 is A creation subunit that creates a full screen webview as a carrier container, a first load subunit for generating an H5 page request and for loading an H5 page in the container in response to said request; and an additional sub-unit for adding the webview to the interface of a mobile terminal after setting the background of the webview to transparent.

[0069] In this embodiment, the setting means 802 is a first setting subunit for setting the overall height of the H5 page to the height of the full screen and setting the background of the page to transparent; and a second setting subunit for dividing the overall layout of the H5 page into two parts: a header and a text content rendered line by line, setting a background of the header to transparent, setting a background of the content to a preset background color, and setting a height of the content to half a screen height.

[0070] In this embodiment, the second loading means 803 is a second loading sub-unit for adding a full screen mask component in the H5 page and loading a full screen mask according to the full screen mask component; and a display subunit for displaying a pop-up window split screen page of a second preset split screen type style on the full screen mask by a pop-up window display.

[0071] In this embodiment, the dialogue means 804 specifically includes: In the H5 page, in order to improve the screen splitting efficiency and interactive function of the mobile terminal, communication between parent-child components is used to realize communication interaction between the split screen page of the first preset split screen type style and the pop-up window split screen page of the second preset split screen type style.

[0072] In this embodiment, the dialogue means 804 is an opening subunit for opening the full-screen mask by using a button component in response to a user clicking a split-screen page button of the first preset split-screen type style in the H5 page; a presentation subunit for presenting a copy content input by a user in a pop-up window split screen page of the second preset split screen type style of the full screen mask by using a copy component; In order to improve the screen split efficiency and interaction function of the mobile terminal, the mobile terminal further includes an interaction subunit for using a full-screen mask component to control the presentation and non-presentation of the full-screen mask, and for transmitting copy content input by a user in the pop-up window split-screen page of the second preset split-screen type style to a parent component via a callback function, and substituting it into a corresponding variable of the parent component, thereby realizing communication interaction between the split-screen page of the first preset split-screen type style and the pop-up window split-screen page of the second preset split-screen type style.

[0073] In this embodiment, the split screen page of the first preset split screen type style is a half-screen style split screen page, and the pop-up window split screen page of the second preset split screen type style is a full-screen center display pop-up window split screen interface or a three-split screen style pop-up window split screen page.

[0074] Further, an embodiment of the present disclosure includes a processor, a memory, and a system bus, the processor and the memory are connected via the system bus; The memory is used to store one or more programs, which, when executed by the processor, contain instructions that cause the processor to perform any of the above-mentioned methods for implementing the split screen interaction of the mobile terminal, further providing a split screen interaction device for a mobile terminal.

[0075] Furthermore, an embodiment of the present disclosure further provides a computer-readable storage medium in which instructions are stored, and when the instructions are executed in a terminal device, the terminal device is caused to execute a method for realizing any of the above-mentioned split-screen interaction methods for a mobile terminal.

[0076] From the description of the above embodiments, those skilled in the art can clearly understand that all or part of the steps in the above embodiment methods can be realized by software and a required general-purpose hardware platform. Based on this understanding, the technical proposal of the present disclosure can be substantially implemented or the part that contributes to the prior art can be implemented in the form of a software product. The computer software product may be stored in a storage medium such as a ROM / RAM, a magnetic disk, an optical disk, etc., and includes some instructions that cause a computer device (such as a personal computer, a server, or a network communication device such as a media gateway) to execute the method described in each embodiment or a certain part of the embodiment of the present disclosure.

[0077] In addition, each embodiment in this specification is described gradually. Each embodiment is described focusing on the difference between other embodiments, and the same or similar parts between each embodiment may be referred to each other. Since the device disclosed in the embodiment corresponds to the method disclosed in the embodiment, the description is relatively simple, and the relevant parts may be referred to the description of the method part.

[0078] In this specification, relational terms such as, for example, first and second are used only to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply that such an actual relationship or sequence exists between these entities or operations. Furthermore, the terms "comprise", "include", and other variations thereof are intended to cover a non-exclusive inclusive meaning, and a process, method, article, or device that includes a set of elements includes not only those elements, but also other elements not expressly listed, or elements inherent to such process, method, article, or device. In the absence of further limitations, an element defined by the term "include" does not exclude the presence of another identical element in the process, method, article, or device that includes the element.

[0079] The above description of the disclosed embodiments enables those skilled in the art to realize or use the present disclosure. Many modifications of these embodiments will be obvious to those skilled in the art. The general principles defined in this specification can be implemented in other embodiments without departing from the spirit or scope of the present disclosure. Thus, the present disclosure is not intended to be limited by these embodiments shown in this specification, but is to be accorded the widest scope consistent with the principles and novel features disclosed in this specification.

Claims

1. creating a transparent full-screen webview interface of the mobile terminal as a carrier container, and loading a fifth generation Internet hypertext markup language H5 page into the container; setting the H5 page as a split-screen page of a first preset split-screen type style; loading a pop-up window split screen page with full screen mask and a second preset split screen type style into the H5 page; A split screen interaction method for a mobile terminal, comprising: in the H5 page, realizing communication interaction between the split screen page of the first preset split screen type style and the pop-up window split screen page of the second preset split screen type style by communication between page components, so as to improve the screen split efficiency and interaction function of the mobile terminal.

2. Creating a transparent full-screen webview interface of the mobile terminal as the carrier container and loading a fifth generation Internet hypertext markup language H5 page into the container; creating a full screen webview as a carrier container; creating an H5 page request and loading an H5 page in said container in response to said request; 2. The method of claim 1, further comprising the step of: setting the background of the webview to transparent, and then adding a full screen webview with transparent background that loads the H5 page to a mobile device interface.

3. The step of setting the H5 page as a split screen page of a first preset split screen type style includes: setting the overall height of the H5 page to full screen height and setting the background of the page to transparent; 2. The method of claim 1, comprising the steps of: dividing the overall layout of the H5 page into two parts: a header and text content rendered line by line; setting a background of the header to transparent; setting a background of the content to a preset background color; and setting a height of the content to half a screen height.

4. loading a pop-up window split screen page with a full screen mask and a second preset split screen type style into the H5 page; adding a full screen mask component in the H5 page and loading a full screen mask by the full screen mask component; 2. The method of claim 1, further comprising the step of: displaying a pop-up window split screen page of a second preset split screen type style in the full screen mask by a pop-up window display.

5. In the H5 page, realizing a communication interaction between the split-screen page of the first preset split-screen type style and the pop-up window split-screen page of the second preset split-screen type style through communication between page components, in order to improve the screen split efficiency and interaction function of the mobile terminal, 2. The method of claim 1, including: in the H5 page, realizing communication interaction between the split screen page of the first preset split screen type style and the pop-up window split screen page of the second preset split screen type style through communication between parent-child components, so as to improve the screen split efficiency and interaction function of the mobile terminal.

6. In the H5 page, realizing a communication interaction between the split-screen page of the first preset split-screen type style and the pop-up window split-screen page of the second preset split-screen type style through communication between parent-child components, in order to improve the screen division efficiency and interaction function of the mobile terminal, In response to a user's operation of clicking a split screen page button of the first preset split screen type style in the H5 page, using a button component to open the full screen mask; utilizing a copy component to present the copy content input by the user in a pop-up window split screen page of the second preset split screen type style of the full screen mask; 6. The method of claim 5, further comprising: using a full-screen mask component to control the presentation and non-presentation of the full-screen mask, and transmitting copy content input by a user in the pop-up window split-screen page of the second preset split-screen type style to a parent component via a callback function and substituting it into a corresponding variable of the parent component, thereby realizing communication and interaction between the split-screen page of the first preset split-screen type style and the pop-up window split-screen page of the second preset split-screen type style, in order to improve the screen split efficiency and interaction function of the mobile terminal.

7. 7. The method of claim 1, wherein the first preset split screen type style split screen page is a half-screen style split screen page, and the second preset split screen type style pop-up window split screen page is a full-screen centered pop-up window split screen interface or a three-screen style pop-up window split screen page.

8. A first loading means for creating a transparent full-screen webview interface of the mobile terminal as a carrier container and loading a fifth generation Internet hypertext markup language H5 page into the container; A setting means for setting the H5 page as a split screen page of a first preset split screen type style; A second loading means for loading a pop-up window split screen page with a full screen mask and a second preset split screen type style in the H5 page; and an interaction means for realizing communication interaction between the split screen page of the first preset split screen type style and the pop-up window split screen page of the second preset split screen type style through communication between page components within the H5 page, so as to improve the screen split efficiency and interaction function of the mobile terminal.

9. A processor, a memory, and a system bus, the processor and the memory are connected via the system bus; A split screen interactive device for a mobile terminal, wherein the memory is for storing one or more programs, the one or more programs containing instructions which, when executed by the processor, cause the processor to perform the method of any one of claims 1 to 6.

10. A computer readable storage medium having instructions stored thereon, A computer readable storage medium, the instructions being executed in a terminal device, causing the terminal device to perform the method of any one of claims 1 to 6.

Images