CA3054877A1 - Method, apparatus and computer device for implementing pop-up window in hybrid interface application - Google Patents
Method, apparatus and computer device for implementing pop-up window in hybrid interface application Download PDFInfo
- Publication number
- CA3054877A1 CA3054877A1 CA3054877A CA3054877A CA3054877A1 CA 3054877 A1 CA3054877 A1 CA 3054877A1 CA 3054877 A CA3054877 A CA 3054877A CA 3054877 A CA3054877 A CA 3054877A CA 3054877 A1 CA3054877 A1 CA 3054877A1
- Authority
- CA
- Canada
- Prior art keywords
- pop
- native
- webview
- loading part
- current view
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 64
- 230000006870 function Effects 0.000 claims description 17
- 238000012545 processing Methods 0.000 claims description 14
- 238000004590 computer program Methods 0.000 claims description 4
- 238000005516 engineering process Methods 0.000 description 12
- 238000011161 development Methods 0.000 description 8
- 238000010586 diagram Methods 0.000 description 4
- 238000012423 maintenance Methods 0.000 description 4
- 238000013475 authorization Methods 0.000 description 3
- 230000003993 interaction Effects 0.000 description 2
- 230000002452 interceptive effect Effects 0.000 description 2
- 238000007726 management method Methods 0.000 description 2
- 230000008569 process Effects 0.000 description 2
- 238000012546 transfer Methods 0.000 description 2
- 230000006978 adaptation Effects 0.000 description 1
- 230000006399 behavior Effects 0.000 description 1
- 230000000903 blocking effect Effects 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000007796 conventional method Methods 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 230000001419 dependent effect Effects 0.000 description 1
- 238000007667 floating Methods 0.000 description 1
- 238000009434 installation Methods 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The present disclosure concerns the methods, apparatuses, electronic equipment, and computer-readable media used to implement pop-up windows in hybrid apps. These methods include the following: The native loading part acquires pop-up configuration parameters transmitted from the web loading part according to the pop-up command loaded in the web loading part. The native loading part creates a pop-up webpage based on the pop-up configuration parameter. It then displays the pop-up WebView on the current view of the hybrid app, overlaying the native content of the current view. The pop-up methods, apparatuses, electronic equipment, and computer-readable media involved in the present disclosure can solve the problem where the mask overlays the navigation bar and the main items cannot be separated online, increasing the flexibility of pop-up windows.
Description
METHOD, APPARATUS AND COMPUTER DEVICE FOR IMPLEMENTING POP-UP
WINDOW IN HYBRID INTERFACE APPLICATION
Technical Field [0001] The present disclosure relates to Internet technologies, and particularly relates to the methods, apparatuses, and computer devices for implementing pop-up windows in hybrid apps.
WINDOW IN HYBRID INTERFACE APPLICATION
Technical Field [0001] The present disclosure relates to Internet technologies, and particularly relates to the methods, apparatuses, and computer devices for implementing pop-up windows in hybrid apps.
[0002] Background
[0003] Pop-ups refer to windows that pop up automatically when users open webpages, software, or mobile apps. They are usually triggered by certain logic and overlay the floating layer on the screen page. Prompt boxes and controls are two common types of pop-up windows.
Currently, in the business development process, it is often necessary to display pop-ups in hybrid interfaces, and WebView-based pop-ups are usually implemented through the two methods below. The first method uses webpage technology to directly pop up a div box and draws the pop-up content in the box to display it to users. The second method uses webpage technology to pop up an inline frame (iframe), control the size and location of the frame, and open the specified webpage address in the iframe to display the pop-up.
Currently, in the business development process, it is often necessary to display pop-ups in hybrid interfaces, and WebView-based pop-ups are usually implemented through the two methods below. The first method uses webpage technology to directly pop up a div box and draws the pop-up content in the box to display it to users. The second method uses webpage technology to pop up an inline frame (iframe), control the size and location of the frame, and open the specified webpage address in the iframe to display the pop-up.
[0004] Therefore, there is a need for new methods, apparatuses, and computing devices to implement pop-ups in hybrid apps.
[0005] The above information about supporting technologies is only meant to provide background for the present disclosure. Therefore, it may not include information on existing technology that is already known by average technicians in this field.
[0006] Summary
[0007] In view of this, it is an object of the present disclosure to provide a type of method, apparatus, and computing device for implementing a pop-up window in a hybrid app, thereby overcoming one or more problems due to the limitations and disadvantages of the related technologies, at least to some extent.
[0008] Other features and advantages of the present disclosure will be apparent from the following detailed descriptions or learned by putting the present disclosure into practice.
[0009] According to one aspect of the embodiments of the present disclosure, a type of method is provided for implementing a pop-up window in a hybrid app when the hybrid app includes a native loading part and a web loading part. This method comprises the following: The native loading part acquires pop-up configuration parameters transmitted from the web loading part according to the pop-up command loaded in the web loading part. The native loading part creates a pop-up webpage based on the pop-up configuration parameter. It then displays the pop-up WebView on the current view of the hybrid app, overlaying the native content of the current view.
[0010] According to another aspect of the embodiments of the present disclosure, a type of apparatus is provided for implementing a pop-up window in a hybrid app when the hybrid app includes a native loading part and a web loading part. This apparatus comprises the following:
The pop-up configuration module is set to acquire the pop-up configuration parameters in the native loading part transmitted from the web loading part according to the pop-up command loaded in the web loading part; and the view overlay module is set to create a pop-up webpage in the native loading part based on the pop-up configuration parameter. The pop-up WebView is then displayed on the current view of the hybrid app, overlaying the native content of the current view.
The pop-up configuration module is set to acquire the pop-up configuration parameters in the native loading part transmitted from the web loading part according to the pop-up command loaded in the web loading part; and the view overlay module is set to create a pop-up webpage in the native loading part based on the pop-up configuration parameter. The pop-up WebView is then displayed on the current view of the hybrid app, overlaying the native content of the current view.
[0011] According to one aspect of the embodiments of the present disclosure, a storage medium storing a computer program is provided that, when executed by the processor of a computer, causes the computer to perform the methods of any of the above embodiments.
[0012] According to one aspect of the embodiments of the present disclosure, a computing device is provided, which comprises: A processor; and a memory, which stores commands executable by the processor. The processor is configured to execute any of the methods described in the above embodiments.
[0013] According to the technical solution provided by the embodiment of the present disclosure, when the pop-up window is implemented, overlaying the native content displayed by the application interface can prevent the user from entering other interfaces due to mis-operation, thereby reducing the mis-operation rate of the terminal, improving the processing efficiency of the terminal, and improving user experience.
[0014] It should be understood that both the foregoing general description and the detailed descriptions below are merely exemplary and explanatory and are not intended to limit the present disclosure.
[0015] Brief Description of Drawings
[0016] A better understanding of the present disclosure described above and its objectives, features, and advantages can be obtained from the reference drawings corresponding to the detailed descriptions and the exemplary embodiments thereof. The drawings described below are only some of the embodiments of the present disclosure. Average technicians in this field can obtain other drawings based on these drawings without any creative labor.
[0017] Fig. 1 is a schematic showing the implementation of a pop-up window in the related technology.
[0018] Fig. 2 is a schematic showing the structural principles of pop-up loading based on Fig. 1.
[0019] Fig. 3 is a flowchart of a pop-up implementation method based on an exemplary embodiment.
[0020] Fig. 4 is a schematic showing the structural principles of pop-up loading based on an exemplary embodiment.
[0021] Fig. 5 is a schematic showing the structural principles of pop-up loading based on an exemplary embodiment.
[0022] Fig. 6 is a flowchart of a pop-up implementation method based on an exemplary embodiment.
[0023] Fig. 7 is a schematic showing the structural principles of pop-up loading based on an exemplary embodiment.
[0024] Fig. 8 is a flowchart of a pop-up implementation method based on an exemplary embodiment.
[0025] Fig. 9 is a schematic showing the structural principles of pop-up loading based on an exemplary embodiment.
[0026] Fig. 10 is a structural schematic of the apparatus used for pop-up implementation based on an embodiment of the present disclosure.
[0027] Fig. 11 is a structural schematic of the computer device used for pop-up implementation based on an embodiment of the present disclosure.
[0028] Detailed Description
[0029] Exemplary embodiments will now be described more fully, with reference to the accompanying drawings. However, the exemplary embodiments can be embodied in a variety of forms and should not be construed as being limited to the embodiments set forth herein. Rather, these embodiments are provided so that the present disclosure will be thorough and complete and will fully convey the concepts of the exemplary embodiments to those skilled in this field. The reference numbers in the drawings denote the same or similar parts, so each number will only be described once.
[0030] Furthermore, the described features, structures, or characteristics can be combined in any suitable manner in one or more embodiments. In the following descriptions, numerous specific details are set forth to provide a better understanding of the embodiments of the present disclosure. However, skilled practitioners in this field shall note that the technical solution of the present disclosure may be implemented without one or more of the specific details, or other methods, components, apparatuses, and steps may be employed. In other instances, well-known methods, apparatuses, implementations, or operations are not shown or described in detail to avoid obscuring aspects of the present disclosure.
[0031] The block diagrams shown in the figures are merely functional entities and do not necessarily correspond to physically separate entities. That is, these functional entities may be implemented as software, implemented in one or more hardware modules or integrated circuits, or implemented in different networks and/or processor devices and/or microcontroller devices.
[0032] The flowcharts shown in the figures are merely illustrative. Not all of the content and operations/steps are necessarily included or performed in the order described.
For example, some operations/steps may be divided, and some operations/steps may be combined or partially merged. Therefore, the actual execution order may vary depending on the situation.
For example, some operations/steps may be divided, and some operations/steps may be combined or partially merged. Therefore, the actual execution order may vary depending on the situation.
[0033] It must be understood that, although the terms "first", "second", "third", and so on may be used to describe various components, these components are not limited by these terms.
These terms are only used to distinguish one component from another.
Therefore, the first component discussed below could be referred to as the second component in another context, without departing from the concepts set out in the present disclosure. The term "and/or" as used herein indicates any and all combinations of one or more of the associated listed items.
These terms are only used to distinguish one component from another.
Therefore, the first component discussed below could be referred to as the second component in another context, without departing from the concepts set out in the present disclosure. The term "and/or" as used herein indicates any and all combinations of one or more of the associated listed items.
[0034] Those skilled in this field will recognize that these drawings are only a schematic diagram of the exemplary embodiments, and the modules or processes in the drawings are not necessarily required to implement the disclosure and therefore are not intended to limit the scope of the disclosure.
[0035] . Before describing embodiments of the present invention in detail, we must first provide further information regarding some relevant technologies that may be involved in the embodiments.
[0036] With the popularization of the Internet, and especially mobile Internet, more and more product and service providers have chosen to use applications (apps) as one channel for interacting with consumers or even the primary channel. Current apps have several different development modes, including native mode, web mode, and hybrid mode, all of which have their own characteristics.
[0037] A native app is an app based on the native development mode. It is directly dependent on the operating system and provides the strongest interaction and the most powerful functions.
However, the development cost is high. Native apps must be developed independently for different platforms (such as Android and i0S), and update and maintenance costs are high. A
web app deploys a page on the server, and users can access it through their browsers. Web apps feature low development costs and can be used across platforms. The app does not need to be installed by the client, saving the user's local resources. However, web apps are heavily reliant on the network and consume network traffic. In addition, they cannot call the native Application Programming Interfaces (APIs) of the user's local system, so their functionality is very limited. A
hybrid app (hybrid interface application) generally refers to an app based on a hybrid development model. Such apps combine native and web elements in development, giving them some of the advantages of both native apps and web apps. Hybrid apps can be used across platforms, and their debugging, update, and maintenance costs are low. Hybrid apps can call native APIs, giving them better functionality. For these reasons, the use of hybrid apps is growing.
However, the development cost is high. Native apps must be developed independently for different platforms (such as Android and i0S), and update and maintenance costs are high. A
web app deploys a page on the server, and users can access it through their browsers. Web apps feature low development costs and can be used across platforms. The app does not need to be installed by the client, saving the user's local resources. However, web apps are heavily reliant on the network and consume network traffic. In addition, they cannot call the native Application Programming Interfaces (APIs) of the user's local system, so their functionality is very limited. A
hybrid app (hybrid interface application) generally refers to an app based on a hybrid development model. Such apps combine native and web elements in development, giving them some of the advantages of both native apps and web apps. Hybrid apps can be used across platforms, and their debugging, update, and maintenance costs are low. Hybrid apps can call native APIs, giving them better functionality. For these reasons, the use of hybrid apps is growing.
[0038] Currently, for most Hybrid applications, the implementation of pop-ups is performed in WebView. This is mainly implemented in the following two ways. The first method uses webpage technology to directly pop up a div box and draws the pop-up content in the box to display it to users. The second method uses webpage technology to pop up an inline frame (iframe), control the size and location of the frame, and open the specified webpage address in the iframe to display the pop-up. Because the native navigation bar is at a higher level than WebView, its masked portion cannot overlay the native navigation bar. When the navigation bar cannot be overlaid, the pop-up mask is not full screen, which compromises the aesthetics of the interface. Because the buttons on the navigation bar are clickable, such as a clickable back button, the current page cannot prevent page redirects caused by button clicks. This can result in unpredictable behavior. Therefore, both of the above two pop-up implementation methods are flawed to different degrees.
[0039] Fig. 1 is a schematic showing the implementation of a pop-up window in the related technology. As shown in the figure, after page 11 jumps to page 12, page 12 is in a display state after the pop-up window is loaded, and the navigation bar and the pop-up window are both operable at the same time.
[0040] Fig. 2 is a schematic showing the structural principles of pop-up loading based on Fig. 1. Using the two methods above, pages include the mask 24 in the WebView and the pop-up 23 and native navigation bar 22 in the WebView. Since the level of the native navigation bar 22 is higher than the current WebView, the mask 24 in the WebView located under the pop-up window cannot overlay the native navigation bar 22. If the native navigation bar 22 is not overlaid, the pop-up window 23 and the native navigation bar 22 in the WebView are both operable. In this situation, the user cannot easily be guided to complete the corresponding pop-up operations, which will affect user experience. On the other hand, when a pop-up is implemented by the div method, if only the pop-up content needs to be updated online, the entire project needs to be updated online. The pop-up content cannot be updated independently online. This may cause a significant increase in maintenance and management costs.
[0041] To address the above problems of the related technologies, the embodiments of the present disclosure provide pop-up implementation methods, apparatuses, and computer devices for hybrid apps. These are described in detail below.
[0042] Fig. 3 is a flowchart of a pop-up implementation method for a hybrid app based on an exemplary embodiment. The method of the present embodiment includes the following steps =
S301-S302. In one embodiment, the method of the present embodiment can be performed by a user terminal (e.g., a cell phone) running a hybrid app.
S301-S302. In one embodiment, the method of the present embodiment can be performed by a user terminal (e.g., a cell phone) running a hybrid app.
[0043] In step S301, the native loading part acquires pop-up configuration parameters transmitted from the web loading part according to the pop-up command loaded in the web loading part.
[0044] As mentioned above, hybrid apps are based on the hybrid development model, which combines native and web elements. Thus, when a hybrid app is run on the user terminal, it may be thought of as being composed of two parts that work together: the native loading part and the web loading part. The native loading part (hereinafter also referred to as "native") mainly interacts locally with the user terminal. It is used to load native content in the hybrid app and display preset basic frameworks. The web loading part primarily communicates and interacts with the server. It is used to load online content updated and maintained by the server. It can also display WebView content in the basic frameworks of the native loading part.
Here, native content is usually built into the hybrid app installation package. As the hybrid app is installed and stored on the user terminal, it is mainly used to construct the basic framework of the hybrid app user interface. Common native content includes, but is not limited to, the navigation bar and status bar.
Here, native content is usually built into the hybrid app installation package. As the hybrid app is installed and stored on the user terminal, it is mainly used to construct the basic framework of the hybrid app user interface. Common native content includes, but is not limited to, the navigation bar and status bar.
[0045] In one embodiment, the pop-up command can include a code segment retrieved from the server when the local application displays the WebView. This is used to trigger the display of the pop-up in the local application. In one embodiment, the pop-up command can also carry the pop-up configuration parameters. These can be the height of the pop-up box, the position of the pop-up box, the borders of the pop-up box, the rounded corners of the pop-up box, or where a Close button is displayed.
[0046] Next, in step S302, the native loading part creates a pop-up webpage based on the pop-up configuration parameters. It then displays the pop-up WebView on the current view of the hybrid app, overlaying the native content of the current view.
[0047] Fig. 4 is a schematic showing the structural principles of pop-up loading based on an exemplary embodiment. As shown in Fig. 4, native initializes a new native pop-up WebView 43 according to the received pop-up configuration parameters. The native pop-up WebView 43 is displayed on the current view 41 of the hybrid app and overlays the native navigation bar 42. The native pop-up WebView 43 here may have the same width and height as the current view 41, for example.
[0048] The visibility style of the native pop-up WebView 43 can be controlled to make the visual interface more aesthetic. For example, it can set the WebView width, height, spacing, alignment, border settings of the pop-up, background color, and Close button settings.
[0049] Fig. 5 is a schematic showing the structural principles of pop-up loading based on another exemplary embodiment. As shown in Fig. 5, a native mask view 54 can be configured in the above webpage structure. The native mask view 54 is placed between the native pop-up WebView 53 and the current view 51 and overlays the native navigation bar 52.
In one embodiment, the native mask view 54 can be implemented as a semitransparent mask layer.
Here, for example, native may initialize the native mask view 54 according to the mask configuration information in the received pop-up configuration parameters. The mask configuration information can include the mask color, the mask transparency, and whether or not a click on the mask closes the pop-up.
In one embodiment, the native mask view 54 can be implemented as a semitransparent mask layer.
Here, for example, native may initialize the native mask view 54 according to the mask configuration information in the received pop-up configuration parameters. The mask configuration information can include the mask color, the mask transparency, and whether or not a click on the mask closes the pop-up.
[0050] In some implementation methods, causing the native content of the current view to be overlaid may include causing the native navigation bar in the current view to be overlaid.
[0051] Optionally, the pop-up configuration parameters can include a callback function, allowing the method to perform the following operation: When user operation data is received in the pop-up WebView, the user operation data is delivered to the current view for processing by the callback function.
[0052] The callback function is used for data transfer. For example, when the user performs an interactive operation, such as data input or resource call, in the pop-up WebView, the pop-up WebView receives the data to be processed and sends it to the native. Then, the native passes the data to the current view through the callback function. Finally, the current view responds based on the data.
[0053] Optionally, the pop-up configuration parameters can include pop-up webpage code or a pop-up page address, allowing the method to perform the following operation:
In the pop-up WebView, the pop-up page is displayed according to the pop-up webpage code or the pop-up webpage is loaded according to the pop-up page address.
In the pop-up WebView, the pop-up page is displayed according to the pop-up webpage code or the pop-up webpage is loaded according to the pop-up page address.
[0054] The pop-up net map directly opens the destination page address when it is created.
The target pages include, but are not limited to, remote pages or local codes.
This means that the code of the destination page can be well separated from the code of the pop-up window. This improves the efficiency of subsequent code maintenance and project updates.
The target pages include, but are not limited to, remote pages or local codes.
This means that the code of the destination page can be well separated from the code of the pop-up window. This improves the efficiency of subsequent code maintenance and project updates.
[0055] Optionally, the pop-up configuration parameters can include an animation parameter used to display pop-up webpage videos on the current view of the hybrid app.
This includes the following scenario: Based on the animation parameters, the pop-up WebView is displayed on the current view in an animated manner.
This includes the following scenario: Based on the animation parameters, the pop-up WebView is displayed on the current view in an animated manner.
[0056] The animation method can be used to do the following: Change the pop-up WebView transparency from the initial 0 to 1; move or fade the pop-up WebView position from the bottom of the current view to the centered position of the current view; move or fade the pop-up page view position from the left side of the current view to the centered position of the current view;
or flip the pop-up WebView by 90 degrees.
or flip the pop-up WebView by 90 degrees.
[0057] For the method to implement a pop-up in a hybrid app based on the present embodiment, overlaying the native content can prevent the user from entering other interfaces due to mis-operation, thereby reducing the mis-operation rate of the terminal, improving the processing efficiency of the terminal, and improving user experience.
[0058] Fig. 6 is a flowchart of a pop-up implementation method for a hybrid app based on an exemplary embodiment. As shown in the figure, the method of the present embodiment includes the following steps S601-S603. In one embodiment, the method of the present embodiment can be performed by a user terminal (e.g., a cell phone) running a hybrid app.
[0059] In step S601, the native loading part acquires pop-up configuration parameters transmitted from the web loading part according to the pop-up command loaded in the web loading part.
[0060] The details of step S601 are the same as S301 from the embodiment in Fig. 3, so these details are not repeated here.
[0061] In step S602, the native loading part creates a pop-up WebView based on the pop-up parameters and the pop-up WebView overlays the original content of the current view.
[0062] In some embodiments of the present disclosure, after performing step S602, the electronic device may create a pop-up WebView based on the principles shown in Fig. 4. For the specifics of the displayed content, refer to the schematic of the embodiment shown in Fig. 7.
[0063] For example, when the user performs operations on the current view, the page pops up an authorization pop-up WebView. The authorization pop-up WebView completely overlays the current view, but when the user performs a corresponding operation in the authorization pop-up WebView or closes the view, the page redirects back to the current view.
[0064] In step S603, when the preset conditions are satisfied, the pop-up WebView is closed.
[0065] Optionally, when the pop-up parameters indicate that the pop-up WebView has a Close button, the pop-up WebView is closed when the user operates the Close button.
[0066] Optionally, when the pop-up parameters indicate closing conditions of the pop-up WebView, the pop-up WebView is closed when it has been determined that these conditions have been met. For example, when the user needs to input corresponding data in the pop-up WebView, the window is closed after the user clicks "Confirm".
[0067] Optionally, when the pop-up configuration parameters include a callback function and user operation data is received in the pop-up WebView, the user operation data is transmitted to the current view through the callback function for processing. In this case, the implemented pop-up interacts with the user data.
[0068] Optionally, when the pop-up configuration parameters include pop-up webpage code or a pop-up page address, the pop-up webpage is displayed in the pop-up WebView based on the pop-up webpage code, or the pop-up webpage is loaded based on the webpage address.
[0069] Optionally, when the pop-up configuration parameters include animation parameters, the pop-up WebView is displayed on the current view in an animated manner based on the animation parameters.
[0070] For the method to implement a pop-up in a hybrid app based on the present embodiment, overlaying the native content can prevent the user from entering other interfaces due to mis-operation, thereby reducing the mis-operation rate of the terminal, improving the processing efficiency of the terminal, and improving user experience. In addition, while overlaying the Native navigation bar, a new WebView pops up to implement the pop-up, which facilitates external data interaction with the pop-up content.
[0071] Fig. 8 is a flowchart of a pop-up implementation method for a hybrid app based on an exemplary embodiment. As shown in the figure, the method of the present embodiment includes the following steps S801-S804. In one embodiment, the method of the present embodiment can be performed by a user terminal (e.g., a cell phone) running a hybrid app.
[0072] In step S801, the native loading part acquires pop-up configuration parameters transmitted from the web loading part according to the pop-up command loaded in the web loading part.
[0073] The details of step S801 are the same as S301 from the embodiment in Fig. 3, so these details are not repeated here.
[0074] In step S802, the native loading part creates a mask view based on the mask parameters and the mask view overlays the original content of the current view.
[0075] After acquiring the command sent by the hybrid interface, native creates a new view element. Native sets the width and height of the view element to be equal to the width and height of the screen and sets the background color of the view element to be semitransparent. Then, the view element, i.e. the native mask layer view, is added to the hybrid interface and displays the native mask layer above the current WebView of the hybrid application. It overlays the native content of the current view, such as the native navigation bar.
[0076] In step S803, the native loading part creates a pop-up WebView based on the pop-up parameters and displays the pop-up Webpage view on the mask view.
[0077] In some embodiments of the present disclosure, after performing step S803, the electronic device may create a pop-up WebView based on the principles shown in Fig. 5. For the specifics of the displayed content, refer to the schematic of the embodiment shown in Fig. 9.
[0078] Optionally, when the pop-up configuration parameters include a callback function and user operation data is received in the pop-up WebView, the user operation data is transmitted to the current view through the callback function for processing.
[0079] Optionally, when the pop-up configuration parameters include pop-up webpage code or a pop-up page address, the pop-up webpage is displayed in the pop-up WebView based on the pop-up webpage code, or the pop-up webpage is loaded based on the webpage address.
[0080] Optionally, when the pop-up configuration parameters include animation parameters, the pop-up WebView is displayed on the current view in an animated manner based on the animation parameters.
[0081] In step S804, when the preset conditions are satisfied, the pop-up WebView is closed.
[0082] Optionally, the mask parameters can be used to indicate that the mask view closes the pop-up window when clicked. At this time, the pop-up WebView may be closed based on receiving a click operation when the user clicks the mask view.
[0083] When the mask view is initialized, the mask is set according to the pop-up configuration parameters, for example, whether the mask view can be clicked to close the pop-up window. When the pop-up WebView is displayed above the mask view, the user only needs to click on the mask to close or hide the pop-up WebView and display the current view again.
[0084] Optionally, when the pop-up parameters indicate that the pop-up WebView has a Close button, the pop-up WebView is closed when the user operates the Close button.
[0085] Optionally, when the pop-up parameters indicate closing conditions of the pop-up WebView, the pop-up WebView is closed when it has been determined that these conditions have been met. For example, the pop-up window must receive the keyboard or mouse operation before the pop-up window can be closed or hidden.
[0086] For the method to implement a pop-up in a hybrid app based on the present embodiment, overlaying the native content can prevent the user from entering other interfaces due to mis-operation, thereby reducing the mis-operation rate of the terminal, improving the processing efficiency of the terminal, and improving user experience. In addition, a mask view is added in the current WebView of the hybrid app. This allows users to focus on the pop-up content while blocking users from performing operations on the interface overlaid by the mask.
[0087] The following is an apparatus embodiment of the present disclosure, which can be used to implement the method embodiments of the present disclosure. For details not disclosed in the apparatus embodiments, refer to the method embodiments of the present disclosure.
[0088] Fig. 10 is a structural block diagram of the apparatus used for pop-up implementation based on an embodiment of the present disclosure. As shown in the diagram, the apparatus of the present embodiment includes a pop-up configuration module 101 and a view overlay module 102.
[0089] The pop-up configuration module 101 is set to acquire the pop-up configuration parameters in the native loading part transmitted from the web loading part according to the pop-up command loaded in the web loading part.
[0090] The view overlay module 102 is set to create a pop-up webpage in the native loading part based on the pop-up configuration parameter. The pop-up WebView is then displayed on the current view of the hybrid app, overlaying the native content of the current view.
[0091] Optionally, the view overlay module 102 can create a pop-up WebView based on the pop-up parameters, and the pop-up WebView overlays the native content of the current view.
[0092] Optionally, the view overlay module 102 can create a mask view based on the mask parameters and use the mask view to overlay the native content of the current view. Further, it creates a pop-up WebView based on the pop-up parameters. The pop-up WebView is displayed on the mask view.
[0093] Optionally, the mask parameters can be used to indicate that the mask view closes the pop-up window when clicked. At this time, the view overlay module 102 can close the pop-up WebView based on receiving a click operation when the user clicks the mask view.
[0094] Optionally, when the pop-up parameters indicate that the pop-up WebView has a Close button, the view overlay module 102 closes the pop-up WebView when the user operates the Close button.
[0095] Optionally, when the pop-up parameters indicate other closing conditions of the pop-up WebView, the view overlay module 102 will close the pop-up WebView when it has been determined that these conditions have been met.
[0096] Optionally, when the pop-up configuration parameters include a callback function, the view overlay module 102 transmits the user operation data to the current view through the callback function for processing when user operation data is received in the pop-up WebView.
[0097] The callback function is used for data transfer. For example, when the user performs an interactive operation, such as data input or resource call, in the pop-up WebView, the pop-up WebView receives the data to be processed and sends it to the native. Then, the native passes the data to the current view through the callback function. Finally, the current view responds based on the data.
[0098] Optionally, when the pop-up configuration parameters include animation parameters, the view overlay module 102 displays the pop-up WebView on the current view in an animated manner based on the animation parameters.
[0099] Optionally, when the pop-up configuration parameters include pop-up webpage code or a pop-up page address, the view overlay module 102 displays the pop-up webpage in the pop-up WebView based on the pop-up webpage code or loads the pop-up webpage based on the webpage address.
[0100] For the apparatus used to implement a pop-up in a hybrid app based on the present embodiment, overlaying the native content can prevent the user from entering other interfaces due to mis-operation, thereby reducing the mis-operation rate of the terminal, improving the processing efficiency of the terminal, and improving user experience.
[0101] The present embodiment is based on the same inventive concept as the foregoing method embodiments. It provides an apparatus to implement pop-ups in a hybrid app. The present embodiment can be used to implement the methods to implement pop-ups in hybrid apps provided in the above embodiments.
[0102] It should be noted that, although several modules or units used by the device to execute the actions are mentioned in the detailed description above, such divisions are not mandatory. In fact, in accordance with the embodiments of the present disclosure, the features and functions of two or more modules or units described above may be embodied in one module or unit. Conversely, the features and functions of one of the modules or units described above may be further divided into multiple modules or units. The components displayed as modules or units may or may not be physical units, i.e. they may be located in one place or may be distributed over multiple network elements. Some or all of the modules may be selected to achieve the purpose of the solution provided by the present disclosure according to actual needs.
This applies to the scope in which average technicians in this field can understand and implement solutions without any creative effort.
This applies to the scope in which average technicians in this field can understand and implement solutions without any creative effort.
[0103] Through the description of the above embodiments, technicians in this field will readily understand that the example embodiments described above may be implemented by software or by software in combination with necessary hardware.
[0104] For example, in an exemplary embodiment, a computer readable storage medium is also provided. This medium stores computer programs which, when executed by a processor, implement the steps of the methods described in any one of the above embodiments. For the specific steps of the method, refer to the detailed descriptions in the foregoing embodiments.
These details are not repeated here. The computer-readable storage medium may be a ROM, a random access memory (RAM), a CD-ROM, a magnetic tape, a floppy disk, or an optical data storage device.
These details are not repeated here. The computer-readable storage medium may be a ROM, a random access memory (RAM), a CD-ROM, a magnetic tape, a floppy disk, or an optical data storage device.
[0105] In another exemplary embodiment, a computing device is also provided. This may be a mobile terminal, such as a mobile phone or a tablet, or it may be a terminal device such as a desktop computer or a server. The present embodiment is not limited by device type. Fig. 11 is a schematic of the computer device 110 used for pop-up implementation based on the embodiments of the present disclosure. For example, device 110 can be provided as a mobile terminal. Referring to Fig. 11, device 110 includes a processing component 111 that further includes one or more processors and memory resources represented by memory 112 for storing commands executable by processing component 111, such as an app. An app stored in memory 112 may include one or more modules, each corresponding to a set of instructions. Additionally, the processing component 111 is configured to execute instructions in order to perform the pop-up implementation methods described above.
[0106] The memory can be used to store software programs and modules, and the processor executes various functional apps and data processing by running software programs and modules stored in the memory. The memory may include a high-speed RAM and may also include non-volatile memory, such as one or more magnetic storage devices, flash memory components, or other non-volatile solid-state memory components. In some instances, the memory can further include memory located in a location remote from the processor, which can be connected to the computer terminal or mobile terminal via a network. Examples of such networks include, but are not limited to, the Internet, internal company networks, local area networks, mobile communication networks, and combinations thereof.
[0107] Device 110 may also include a power supply component 113 configured to perform power management for device 110, a wired or wireless network interface 114 configured to connect device 110 to the network, and an input/output (I/O) interface 115.
Device 110 may operate based on an operating system stored in memory 112, such as Android or i0S.
Device 110 may operate based on an operating system stored in memory 112, such as Android or i0S.
[0108] Other embodiments of the present disclosure will be easily thought of after those skilled in the field have considered the specifications and carried out the inventions disclosed here. The present application is intended to cover any variations, uses, or adaptations of the present disclosure, which are in accordance with the general principles of the disclosure and include common general knowledge in the technical field or conventional techniques that are not disclosed in the present disclosure. The descriptions and embodiments are to be considered as illustrative only. The true scope and spirit of the disclosure is indicated by the appended claims.
[0109] Although the present disclosure has been described with reference to a few typical embodiments, it is understood that the terms used are illustrative and exemplary, not restrictive.
The present disclosure may be embodied in a variety of forms without departing from the spirit or scope of the application. It is to be understood that the above-described embodiments are not limited to the foregoing details but are construed broadly within the spirit and scope defined by the appended claims. All variations and modifications that come within the scope of the claims or the equivalents thereof are intended to be covered by the appended claims.
The present disclosure may be embodied in a variety of forms without departing from the spirit or scope of the application. It is to be understood that the above-described embodiments are not limited to the foregoing details but are construed broadly within the spirit and scope defined by the appended claims. All variations and modifications that come within the scope of the claims or the equivalents thereof are intended to be covered by the appended claims.
Claims (10)
1. This is a method for implementing pop-up windows in hybrid apps. Hybrid apps include a native loading part and web loading part, Such methods include:
The native loading part acquires pop-up configuration parameters transmitted from the web loading part according to the pop-up command loaded in the web loading part; and The native loading part creates a pop-up webpage based on the pop-up configuration parameter. It then displays the pop-up WebView on the current view of the hybrid app, overlaying the native content of the current view.
The native loading part acquires pop-up configuration parameters transmitted from the web loading part according to the pop-up command loaded in the web loading part; and The native loading part creates a pop-up webpage based on the pop-up configuration parameter. It then displays the pop-up WebView on the current view of the hybrid app, overlaying the native content of the current view.
2. In the method described in Claim 1, the pop-up parameters included in the pop-up configuration parameters are used to overlay the native content of the current view. This includes:
The pop-up WebView is created based on the pop-up window parameters and the pop-up WebView overlays the native content of the current view.
The pop-up WebView is created based on the pop-up window parameters and the pop-up WebView overlays the native content of the current view.
3. In the method described in Claim 1, the mask parameters and pop-up parameters included in the pop-up configuration parameters are used to overlay the native content of the current view. This includes:
A mask view is created based on the mask parameters and the mask view overlays the native content of the current view; and A pop-up WebView is created based on the pop-up parameters and displayed on the mask view.
A mask view is created based on the mask parameters and the mask view overlays the native content of the current view; and A pop-up WebView is created based on the pop-up parameters and displayed on the mask view.
4. In the methods described in claims 1-3, the pop-up configuration parameters include a callback function, allowing the method to perform the following operation:
When user operation data is received in the pop-up WebView, the user operation data is delivered to the current view for processing by the callback function.
When user operation data is received in the pop-up WebView, the user operation data is delivered to the current view for processing by the callback function.
5. In the methods described in claims 1-3, the pop-up window configuration parameters include animation parameters used to display pop-up webpage videos on the current view of the hybrid app. This includes the following scenario:
Based on the animation parameters, the pop-up WebView is displayed on the current view in an animated manner.
Based on the animation parameters, the pop-up WebView is displayed on the current view in an animated manner.
6. In the methods described in claims 1-3, the pop-up configuration parameters are also used to indicate the closing conditions of the pop-up WebView, allowing the methods to perform the following operation:
The pop-up window view is closed when it has been determined that the close conditions have been met.
The pop-up window view is closed when it has been determined that the close conditions have been met.
7. In the methods described in claims 1-3, the pop-up configuration parameters include pop-up webpage code or a pop-up page address, allowing the methods to perform the following operation:
In the pop-up WebView, the pop-up page is displayed according to the pop-up webpage code or the pop-up webpage is loaded according to the pop-up page address.
In the pop-up WebView, the pop-up page is displayed according to the pop-up webpage code or the pop-up webpage is loaded according to the pop-up page address.
8. This is a type of apparatus that implements pop-ups in hybrid apps. The hybrid app includes a native loading part and web loading part. Such apparatuses operate as follows:
The pop-up configuration module is set to acquire the pop-up configuration parameters in the native loading part transmitted from the web loading part according to the pop-up command loaded in the web loading part; and The view overlay module is set to create a pop-up webpage in the native loading part based on the pop-up configuration parameters. The pop-up WebView is then displayed on the current view of the hybrid app, overlaying the native content of the current view.
The pop-up configuration module is set to acquire the pop-up configuration parameters in the native loading part transmitted from the web loading part according to the pop-up command loaded in the web loading part; and The view overlay module is set to create a pop-up webpage in the native loading part based on the pop-up configuration parameters. The pop-up WebView is then displayed on the current view of the hybrid app, overlaying the native content of the current view.
9. This is a type of storage medium used to store computer programs. When the computer program is executed by a computer processor, it will cause the computer to execute any of the methods described in claims 1-7.
10. This is a type of computing device comprising:
A processor;
And a memory, which stores commands executable by the processor.
The processor is configured to execute any of the methods described in claims 1-7.
A processor;
And a memory, which stores commands executable by the processor.
The processor is configured to execute any of the methods described in claims 1-7.
Applications Claiming Priority (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811070419.9A CN109063202B (en) | 2018-09-13 | 2018-09-13 | Method and device for realizing popup in mixed interface application and computer equipment |
| CN201811070419.9 | 2018-09-13 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CA3054877A1 true CA3054877A1 (en) | 2020-03-13 |
Family
ID=64761568
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CA3054877A Pending CA3054877A1 (en) | 2018-09-13 | 2019-09-10 | Method, apparatus and computer device for implementing pop-up window in hybrid interface application |
Country Status (2)
| Country | Link |
|---|---|
| CN (1) | CN109063202B (en) |
| CA (1) | CA3054877A1 (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112153064A (en) * | 2020-09-28 | 2020-12-29 | 上海缓存命中科技有限公司 | Application store and method of use thereof |
| CN114995929A (en) * | 2021-11-17 | 2022-09-02 | 荣耀终端有限公司 | Popup window display method and device |
Families Citing this family (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109977333B (en) * | 2019-03-22 | 2020-06-09 | 北京三快在线科技有限公司 | Webpage display method and device, computer equipment and storage medium |
| CN112527424A (en) * | 2019-09-19 | 2021-03-19 | 北京国双科技有限公司 | Control method and device for popup window |
| CN111273841B (en) * | 2020-02-11 | 2021-08-17 | 天津车之家数据信息技术有限公司 | Page processing method and mobile terminal |
| CN111625741A (en) * | 2020-04-30 | 2020-09-04 | 贝壳技术有限公司 | Page data interaction method and device, storage medium and electronic equipment |
| CN112099891B (en) * | 2020-09-10 | 2024-01-12 | 亚信科技（南京）有限公司 | Popup display method and device, electronic equipment and computer readable storage medium |
| CN112733058B (en) * | 2020-12-31 | 2023-11-24 | 北京达佳互联信息技术有限公司 | Data processing system, method, device, electronic equipment and storage medium |
| CN112651882B (en) * | 2021-01-15 | 2023-11-07 | 抖音视界有限公司 | Interface display method and device, electronic equipment and computer readable storage medium |
| CN113031948B (en) * | 2021-03-24 | 2024-02-23 | 抖音视界有限公司 | Popup window display method and device, computer equipment and storage medium |
| CN113297524A (en) * | 2021-05-28 | 2021-08-24 | 山东省气象服务中心 | Mobile weather service system based on mixed mode and working method thereof |
| CN113377475B (en) * | 2021-06-22 | 2024-04-09 | 北京字节跳动网络技术有限公司 | Content display method and terminal equipment |
| CN116501422A (en) * | 2022-01-19 | 2023-07-28 | 北京字节跳动网络技术有限公司 | Split screen interaction method and device for mobile terminal, storage medium and equipment |
| CN114936055A (en) * | 2022-04-14 | 2022-08-23 | 北京金堤科技有限公司 | Popup window management method and device, storage medium and electronic equipment |
Family Cites Families (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102194003A (en) * | 2011-05-26 | 2011-09-21 | 重庆猪八戒网络有限公司 | Web page popup window method and device |
| CN103995884A (en) * | 2014-05-29 | 2014-08-20 | 北京中电普华信息技术有限公司 | Hybrid application page switching method and system |
| CN104765617B (en) * | 2015-05-04 | 2019-02-19 | 北京奇虎科技有限公司 | Based on the HTML5 stream application functional interface distribution method realized and system |
| JP2017097662A (en) * | 2015-11-25 | 2017-06-01 | キヤノン株式会社 | Information processor, control method of information processor, and program |
| CN105760162A (en) * | 2016-02-04 | 2016-07-13 | 四川长虹电器股份有限公司 | Development method for hybrid APP software |
| CN105786513A (en) * | 2016-02-29 | 2016-07-20 | 四川长虹电器股份有限公司 | Mixed mobile application development method based on Html5 |
| CN106445284B (en) * | 2016-09-13 | 2019-04-23 | 柚子（北京）科技有限公司 | Picture display process and device |
| CN106484509B (en) * | 2016-09-27 | 2020-09-25 | 腾讯科技（深圳）有限公司 | Output method and device of popup window and terminal |
| CN107808010A (en) * | 2017-11-17 | 2018-03-16 | 北京锐安科技有限公司 | A kind of pop-up page generation method, device, browser and storage medium |
| CN108052548A (en) * | 2017-11-27 | 2018-05-18 | 深圳市前海圆舟网络科技股份有限公司 | Method, system and the terminal device that a kind of webpage creates |
| CN107908793A (en) * | 2017-12-13 | 2018-04-13 | 上海携程商务有限公司 | The method and system of web page popup window |
-
2018
- 2018-09-13 CN CN201811070419.9A patent/CN109063202B/en active Active
-
2019
- 2019-09-10 CA CA3054877A patent/CA3054877A1/en active Pending
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112153064A (en) * | 2020-09-28 | 2020-12-29 | 上海缓存命中科技有限公司 | Application store and method of use thereof |
| CN114995929A (en) * | 2021-11-17 | 2022-09-02 | 荣耀终端有限公司 | Popup window display method and device |
| CN114995929B (en) * | 2021-11-17 | 2023-04-21 | 荣耀终端有限公司 | Popup window display method and device |
Also Published As
| Publication number | Publication date |
|---|---|
| CN109063202A (en) | 2018-12-21 |
| CN109063202B (en) | 2022-01-25 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CA3054877A1 (en) | Method, apparatus and computer device for implementing pop-up window in hybrid interface application | |
| EP3680766B1 (en) | Split screen display method, apparatus, terminal, and storage medium | |
| US10671357B2 (en) | Preview changes to mobile applications at different display resolutions | |
| CN108052365B (en) | User interface component generation method and device | |
| CN107992301B (en) | User interface implementation method, client and storage medium | |
| CN111158686B (en) | Webpage popup frame generation method and device, electronic equipment and storage medium | |
| US9069432B2 (en) | Copy and paste buffer | |
| US20070139430A1 (en) | Rendering "gadgets" with a browser | |
| CN108304234B (en) | Page display method and device | |
| CN113778272A (en) | Split screen processing method and device for light application and electronic device | |
| JP6750124B2 (en) | Terminal device, UI expansion method, and UI expansion program | |
| CN111813308B (en) | Interface processing method and device, electronic equipment and storage medium | |
| CN104704468A (en) | Cross system installation of WEB applications | |
| US10338937B2 (en) | Multi-pane graphical user interface with dynamic panes to present web data | |
| US20200201673A1 (en) | View switching | |
| CN112835485A (en) | Application interface processing method and device, electronic equipment and readable storage medium | |
| US10303331B2 (en) | Live mobile application visual editor demo | |
| CN103902727A (en) | Network search method and device | |
| CN109800044B (en) | HTML5 double-screen application method and device and electronic equipment | |
| CN103914784A (en) | Financial tape reading device and method for automatically positioning optimal display position of scrolling view | |
| CN116719456A (en) | Icon style switching method and device, electronic equipment and storage medium | |
| CN108401455B (en) | Multi-system control method, control device and mobile terminal | |
| CN110598137A (en) | Page display method and device and computing equipment | |
| US11295706B2 (en) | Customizable compact overlay window | |
| CN110853643A (en) | Method, device, equipment and storage medium for voice recognition in fast application |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| EEER | Examination request |
Effective date: 20220916 |
|
| EEER | Examination request |
Effective date: 20220916 |
|
| EEER | Examination request |
Effective date: 20220916 |
|
| EEER | Examination request |
Effective date: 20220916 |
|
| EEER | Examination request |
Effective date: 20220916 |
|
| EEER | Examination request |
Effective date: 20220916 |