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 from 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 split-screen interaction method, device, storage medium and equipment for 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 (apps) installed on mobile devices typically require split-screen interaction on mobile devices, such as comments on video streams and gifts, merchandise, and popularity tools in live broadcast rooms, as shown in the figure. These split-screen interface interactions generally fall into two categories: interactions within the split screen and interactions between a split-screen page and a full-screen mask. For example, as shown in Figure 2, there is a central pop-up window interface with a full-screen mask open on a half-screen page, or an x-split-screen (e.g., a three-split-screen) pop-up window interface with a global mask open on a half-screen page, as shown in Figure 3.

[0005] Currently, to enable rapid upgrades and updates of apps, developers often adopt a hybrid development mode, developing fifth-generation Internet Hypertext Expression Language (H5) pages to achieve split-screen interaction on mobile devices. For example, when implementing the split-screen experience shown in Figure 2 on a mobile device, a half-screen container is first rendered through a half-screen webview, and an H5 page is opened within it, as shown in Figure 4. The H5 page then communicates with the client via JSBridge to invoke the client's functions for opening a full-screen mask and displaying a pop-up window page. However, this split-screen interaction method relies on the client's capabilities and involves adding and upgrading app features, requiring the client version to be updated periodically, resulting in a lack of flexibility. At the same time, displaying the full-screen mask and pop-up window page relies on JSBridge communication between the H5 page and the client, reducing the efficiency of split-screen interaction and limiting the interaction and functionality between the split-screen interface. 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 split 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 a 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 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.

[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 fullscreen webview as a carrier container, creating an H5 page request and loading an H5 page in the container in response to said request; and 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 height of the screen.

[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 into the H5 page includes: adding a fullscreen mask component in the H5 page and loading a fullscreen mask by the fullscreen mask component; and 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, the step of 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 to improve the screen division efficiency and interaction function of the mobile terminal includes: and realizing, within the H5 page, 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.

[0012] According to a possible embodiment, in the H5 page, the step of 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 and child components to improve the screen division efficiency and interaction function of the mobile terminal includes: 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; In order to improve the screen splitting efficiency and interaction function of the mobile terminal, the step includes 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 centered 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; 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 into the H5 page; The present invention further provides a split screen interactive device for a mobile terminal, which includes: 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 division 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 fullscreen 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 setting the background of the webview to transparent and then adding it to the interface of the mobile terminal.

[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 entire 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 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 height of the screen.

[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, said interaction means in particular comprise: In the H5 page, communication between parent and 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, in order to improve the screen split efficiency and interaction function of the mobile terminal.

[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 the copy content input by the user in the 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 splitting efficiency and interaction function of the mobile terminal, an interaction subunit is provided 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 centered 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 that, 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, There is further provided a computer-readable storage medium that, 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, device, storage medium, and equipment for a mobile terminal 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, use the H5 page as a split-screen page of a first preset split-screen type style, and load a full-screen mask and a pop-up window split-screen page of a second preset split-screen type style into the H5 page. Then, within the H5 page, 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, in order to improve the screen split efficiency and interaction function of the mobile terminal. As can be seen, in the embodiment of the present disclosure, a full-screen transparent webview rendering full-screen container is first realized, and an H5 page is opened in the container. After that, 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, thereby effectively improving the screen split efficiency of the mobile terminal and enriching the interaction style and functions between the split-screen pages. [Brief explanation 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 other accompanying drawings can be obtained based on these accompanying drawings without requiring creative ingenuity.

[0025] [Figure 1] FIG. 1 is a first example diagram of a conventional mobile terminal split screen display according to an embodiment of the present disclosure. [Figure 2] FIG. 2 is a second example diagram of a conventional mobile terminal split screen display according to an embodiment of the present disclosure. [Figure 3]FIG. 3 is a third example diagram of a conventional mobile terminal split screen display according to an embodiment of the present disclosure. [Figure 4] FIG. 1 is an exemplary diagram of a conventional split-screen interaction method for a mobile terminal according to an embodiment of the present disclosure. [Figure 5] 1 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 a first 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] 1 is a schematic diagram illustrating a configuration of a split-screen interactive device of a mobile terminal according to an embodiment of the present disclosure. DETAILED DESCRIPTION OF THE INVENTION

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

[0027] Currently, given the need for rapid upgrades and updates, hybrid development is often used, i.e., H5 pages are developed to realize split-screen interactions on mobile devices. For example, when implementing split-screen interactions on mobile devices as shown in Figure 2, as shown in Figure 4, a half-screen webview is first used to render a half-screen container as the carrier, and an H5 page is then opened within it. The H5 page then communicates with the client via JSBridge to invoke the client's functions of opening a full-screen mask and centering a pop-up window page. However, this split-screen interaction method relies on the client's capabilities and involves adding and upgrading app features, requiring the client version to be updated from time to time, resulting in a lack of flexibility. At the same time, the display of the full-screen mask and the pop-up window page both rely on JSBridge communication between the H5 page and the client, reducing the efficiency of split-screen interaction. Furthermore, the communication between the H5 page and the client is a communication between two technical means, realizing only a relatively direct form of communication (e.g., data transmission and reception), which limits the interaction formats and functions with the split-screen interface.

[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, 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. As can be seen, in the embodiment of the present disclosure, a full-screen transparent webview rendering full-screen container is first realized, and an H5 page is opened in the container. After that, 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, thereby effectively improving the screen split efficiency of the mobile terminal and enriching the interaction style and functions 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 only a part of the present disclosure, and not all of it. Based on the embodiments of the present disclosure, those skilled in the art can obtain other embodiments without creative ingenuity, and all of these embodiments will fall within the scope of protection of the present disclosure.

[0030] First embodiment 5 is a flow diagram of a mobile terminal split screen interaction method according to this embodiment, which 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 within 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 load the H5 page into the container in response to the request.

[0037] In this embodiment, after creating a full-screen webview as a carrier container in step A1, the 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 step A1 is performed to create a full-screen webview as a carrier container, in order to realize the interaction between the split screen of the mobile device and the split screen interface within the H5 page, it is also necessary to make the background of the full-screen webview transparent so as not to obscure the display content of the loaded H5 page. After the background of the webview is made transparent and the H5 page is successfully loaded, the full-screen transparent webview with the loaded H5 page is added to the interface of the mobile device to execute the subsequent step S502.

[0040] For example, let's take the iOS system as an example. Create a full-screen transparent webview for the mobile device as the carrier container, and load the H5 page implementation code 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. In other words, the execution order of the above code may be one of three types: steps 1, 2, 3, 4, 5; steps 1, 3, 2, 4, 5; or steps 1, 2, 4, 3, 5.

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

[0043] In this embodiment, step S501 realizes a full-screen transparent webview, and after loading the H5 page into the container, the H5 page can be set as a split-screen page in 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 actual circumstances, 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 implemented, and an H5 page is loaded into it. 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. The overall layout of the H5 page can then be divided into two parts: a header and line-by-line rendered text (content). Here, the content can be the "Visit Popular Live" page shown in Figure 6 or Figure 7. As shown in Figure 6 or Figure 7, the header background is set to transparent, the content background is set to a preset background color (the white of the "Visit Popular Live" page shown in Figure 6 or Figure 7), and the content height is set to half-screen height, thereby achieving a half-screen style H5 page.

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

[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 to realize quick communication and 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 embodiments of the present disclosure are 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 in a three-split-screen style, i.e., 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 displayed in a three-split-screen style, as shown in Figures 6 and 7, respectively.

[0049] Specifically, in one 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 the half-screen style, a full-screen mask component is first added to the H5 page, and the full-screen mask is loaded by the full-screen mask component. The specific implementation process is consistent with the conventional method, so the overlapping description will not be repeated here. Then, to realize the split-screen display within the H5 page, a pop-up window split-screen page of the second preset split-screen type style (the "Customized Gold Coin Amount" pop-up window split-screen page displayed in the center of FIG. 6 or the "Cashier" pop-up window split-screen page in 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 division efficiency and interaction function of the mobile terminal, communication between page components is realized 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.

[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. Furthermore, within the H5 page, communication between page components can be implemented to enable communication 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. For example, communication can be implemented between the "Visit Popular Live Shows" page of FIG. 6 and the "Custom Gold Coin Amount" pop-up window split-screen page displayed in the center of the full-screen mask, or between the "Visit Popular Live Shows" page of FIG. 7 and the "Cashier" pop-up window split-screen page displayed in the full-screen mask in a three-split-screen style. This communication between page components greatly enriches the interaction and functionality between split-screen pages and effectively improves the screen splitting efficiency of mobile devices.

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

[0053] Specifically, as an example of an embodiment, the implementation process of step S504 includes implementing 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 through communication between parent-child components within the H5 page, in order to improve the screen split efficiency and interaction capabilities of the mobile terminal. Next, this disclosure will explain in detail the communication interaction process of the split-screen page by taking as an example the process of clicking a specific button on the split-screen page to open a full-screen mask, receiving any text entered by the user in the pop-up window split-screen page in the full-screen mask, and displaying the text back on the page accordingly. The specific implementation process includes the following steps B1 to B3:

[0054] Step B1: In the H5 page, in response to a user's click 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 H5 page realizes communication 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 through communication between parent and child components, the adopted parent component Container includes three child components, namely, a button component Button, a copy component Text, and a 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 a user in the H5 page, the button component triggers a callback event through the Button callback function (e.g., the onClick function in the following code example) in response to the click operation, and sets the dialogVisible variable to true to open the full-screen mask and display the pop-up window split-screen page of the second preset split-screen type style on it, for executing 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 will trigger a callback event through a callback function (for example, the onClick function in the following code example), 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 with a second preset split-screen type style of 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 on it, and after the user inputs copy content on the split-screen page of the second preset split-screen type style, the copy component Text receives the value of a variable "inputText" transmitted from the parent component through props. For example, to perform the subsequent step B3, the copy component Text receives the value of a variable "inputText" transmitted from the parent component through the "text" field of props, and the value is the copy content input by the user on the split-screen page of the second preset split-screen type style.

[0059] Step B3: Use the full-screen mask component to control the presentation and non-presentation of the full-screen mask, and improve the screen splitting efficiency and interaction function of the mobile terminal. Through the callback function, the copied 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 and assigned to the corresponding variable of the parent component, thereby realizing 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.

[0060] In this embodiment, after step B1 opens the full-screen mask within page H5 and displays a pop-up window split-screen page of the second preset split-screen type style on it, the user inputs copy content on the split-screen page of the second preset split-screen type style and clicks the "Done" button. Then, the full-screen mask component Dialog receives the value of a variable "dialogVisible" transmitted from the parent component through props. For example, the full-screen mask component Dialog can receive the value of a variable "dialogVisible" transmitted from the parent component through the "visible" props field. To control the hiding of the full-screen mask, the user clicks the "Done" button on the split-screen page of the second preset split-screen type style. At the same time, a callback event is triggered via a callback function (e.g., the onInput function in the following code example). The copy content input by the user on the split-screen page of the second preset split-screen type style is transmitted to the parent component and assigned to the corresponding variable "inputText" of the component. The parent component then transmits the value of the variable "inputText" to the copy component Text for display. Such communication between the parent and child components realizes 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, thereby improving the screen division efficiency and interaction function of the mobile terminal.

[0061] For example, as shown in Figure 6, on the H5 page, when a user enters "20" in the "Please enter the amount" field of the "Customize Gold Amount" split-screen popup window centered on the full-screen mask and clicks the "Confirm" button, the full-screen mask component Dialog receives the value "false" of a variable "dialogVisible" transmitted from the parent component through the "visible" props field to hide the full-screen mask. At the same time, the parent component triggers a callback event via a callback function (e.g., the onInput function in the code example below) to transmit the value "20" of the variable "inputText" to the copy component Text for display. The value "20" entered by the user in the "Please enter the amount" field of the "Customize Gold Amount" split-screen popup window centered on the full-screen mask is transmitted to the parent component and assigned to the corresponding variable "inputText" of the parent component. In other words, by displaying the gold coin amount at the bottom left corner of the half-screen page of "Go to Popular Live" in Figure 6, this communication between the parent and 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 "Pay" button in the lower right corner of the half-screen page of "Go to Popular Live" 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 (e.g., the onClick function), and the full-screen mask as shown in FIG. 7 is opened, and a "Cashier" pop-up window split-screen page in a three-split-screen style is displayed 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 Figure 7 and the "Cashier" pop-up window split screen page displayed in three split screens on a full screen mask is completed.

[0064] For example, taking the programming language JavaScript (abbreviated as JS) as an example, the implementation code 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 parent and child components in the H5 page is shown as follows:

number

[0065] To summarize, the split-screen interaction method for a mobile device according to this embodiment involves first creating a transparent full-screen webview interface for the mobile device as a carrier container and loading 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. 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. Within the H5 page, communication 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, thereby improving the screen splitting efficiency and interaction capabilities of the mobile device. As can be seen, in this embodiment of the present disclosure, a full-screen transparent webview rendering full-screen container is first realized, and the H5 page is then opened within the container. After that, a split-screen page of a preset split-screen type style and a pop-up window split-screen page with a full-screen mask are realized within the H5 page. The interaction and communication between these two split-screen pages within the H5 page effectively improves the screen splitting efficiency of the mobile device and enriches the interaction style and functionality 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] 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 the mobile terminal as a carrier container, and loading a fifth generation Internet hypertext markup language (H5) page into the container; 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 a full screen mask and a second preset split screen type style in the H5 page; In the H5 page, an interaction means 804 is provided 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, in order to improve the screen division efficiency and interaction function of the mobile terminal.

[0068] In this embodiment, the first loading means 801 is A creation subunit that creates a fullscreen 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 setting the background of the webview to transparent and then adding it to the interface of the mobile terminal.

[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 entire 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 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 height of the screen.

[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 pop-up window display.

[0071] In this embodiment, the interaction means 804 specifically includes: In the H5 page, communication between parent and 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, in order to improve the screen split efficiency and interaction function of the mobile terminal.

[0072] In this embodiment, the interaction 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 the copy content input by the user in the 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 splitting efficiency and interaction function of the mobile terminal, an interaction subunit is provided 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 may include 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, and the one or more programs include instructions that, when executed by the processor, cause the processor to perform a method for realizing any of the above-mentioned split screen interaction methods for a mobile terminal, thereby 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 that stores instructions and, when the instructions are executed in a terminal device, causes the terminal device to perform a method for realizing any of the split-screen interaction methods for the mobile terminal described above.

[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 a 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, or an optical disk, and includes several 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 this specification, each embodiment is described step by step. Each embodiment is described focusing on the differences from other embodiments, and the same or similar parts between the embodiments may be referred to. Since the apparatus disclosed in the embodiments corresponds to the method disclosed in the embodiments, the description is relatively simple, and the relevant parts may be referred to the description of the method.

[0078] It should be noted that, in this specification, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another and do not necessarily require or imply that such an actual relationship or order exists between those entities or operations. Furthermore, the terms "comprise," "include," and other variations thereof are intended to cover a non-exclusive inclusion meaning, such that a process, method, article, or device comprising a set of elements includes not only those elements but also other elements not expressly listed or elements inherent in such process, method, article, or device. Unless further qualified, an element defined by the term "comprise" does not exclude the presence of other identical elements 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 apparent to those skilled in the art. The general principles defined herein 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 the embodiments shown herein, but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. creating a transparent full-screen webview interface for 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 a 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: within 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 page components, so as to improve the screen division efficiency and interaction function of the mobile terminal.

2. Creating a transparent full-screen webview interface for a mobile terminal as the carrier container and loading a fifth generation Internet hypertext markup language (H5) page into the container includes: 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 a transparent background that loads the H5 page to the interface of a mobile device.

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 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 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 fullscreen mask component in the H5 page and loading a fullscreen mask by the fullscreen 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 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, so as to improve the screen division efficiency and interaction function of the mobile terminal, includes:

2. The method of claim 1, including: realizing, within the H5 page, 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 division efficiency and interaction function of the mobile terminal.

6. 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 and child components, so as to improve the screen division efficiency and interaction function of the mobile terminal, includes: 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 division 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-split-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; 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 into 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 division 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 mobile terminal split screen interactive device, wherein the memory is for storing one or more programs, the one or more programs containing instructions that, 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 storing instructions, A computer readable storage medium, the instructions of which, when executed in a terminal device, cause the terminal device to perform the method of any one of claims 1 to 6.

Images