CN109063202B - Method and device for realizing popup in mixed interface application and computer equipment - Google Patents
Method and device for realizing popup in mixed interface application and computer equipment Download PDFInfo
- Publication number
- CN109063202B CN109063202B CN201811070419.9A CN201811070419A CN109063202B CN 109063202 B CN109063202 B CN 109063202B CN 201811070419 A CN201811070419 A CN 201811070419A CN 109063202 B CN109063202 B CN 109063202B
- Authority
- CN
- China
- Prior art keywords
- popup
- view
- native
- pop
- webpage
- 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.)
- Active
Links
Images
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 relates to a method, an apparatus, an electronic device, and a computer-readable medium for implementing pop-up in a hybrid interface application. The method comprises the following steps: the native loading part acquires popup configuration parameters transmitted from the webpage loading part according to the popup instruction loaded in the webpage loading part; and the native loading part creates a popup web page view based on the popup configuration parameters, displays the popup web page view on a current view of the hybrid interface application, and enables native content of the current view to be covered. The popup window implementation method, the popup window implementation device, the electronic equipment and the computer readable medium can solve the problem that a cover layer covers a navigation bar and a main item cannot be separated to be on-line, and the popup window is higher in flexibility.
Description
Technical Field
The present disclosure relates to the field of internet technologies, and in particular, to a method and an apparatus for implementing pop-up window in a hybrid interface application, and a computing device.
Background
The popup is a window which pops up automatically when a webpage, software, a mobile phone APP and the like are opened, and a floating layer, a prompt box, a control and the like which are covered on a screen page are generally triggered by a certain logic and are called as popup. Currently, in the process of business research and development, a requirement of popping up a popup window in a hybrid interface is often encountered, and the popup window based on a web view (WebView) is mainly implemented in the following two ways. One of them is to directly pop up a div frame by using a webpage technology, and draw popup contents in the frame to achieve the popup effect; another way is to use the web page technology to pop up an iframe (iframe) frame, control the size and position of the iframe frame, and open the specified web page address in the iframe frame to achieve the pop-up window effect.
Therefore, a new method and apparatus for implementing pop-up in a hybrid interface application, and a computing device are needed.
The above information disclosed in this background section is only for enhancement of understanding of the background of the disclosure and therefore it may contain information that does not constitute prior art that is already known to a person of ordinary skill in the art.
Disclosure of Invention
Accordingly, an object of the present disclosure is to provide a method and apparatus for implementing pop-up in a hybrid interface application, and a computing device, which overcome, at least to some extent, one or more of the problems due to the limitations and disadvantages of the related art.
Additional features and advantages of the disclosure will be set forth in the detailed description which follows, or in part will be obvious from the description, or may be learned by practice of the disclosure.
According to an aspect of the embodiments of the present disclosure, a method for implementing popup in a hybrid interface application is provided, where the hybrid interface application includes a native loading part and a web page loading part, and the method includes: the native loading part acquires popup configuration parameters transmitted from the webpage loading part according to the popup instruction loaded in the webpage loading part; and the native loading portion creates a pop-up webpage view based on the pop-up configuration parameters, displays the pop-up webpage view on a current view of the hybrid interface application, and causes native content of the current view to be overlaid.
According to another aspect of the embodiments of the present disclosure, there is provided an apparatus for implementing popup in a hybrid interface application including a native loading part and a web page loading part, the apparatus including: the popup configuration module is set to acquire popup configuration parameters transmitted from the webpage loading part in the native loading part according to the popup instruction loaded in the webpage loading part; and a view overlay module configured to create a pop-up webpage view based on the pop-up configuration parameters at the native loading portion, display the pop-up webpage view on a current view of the hybrid interface application, and overlay native content of the current view.
According to an aspect of the embodiments of the present disclosure, there is provided a storage medium storing a computer program which, when executed by a processor of a computer, causes the computer to perform the method according to any one of the above embodiments.
According to an aspect of an embodiment of the present disclosure, there is provided a computing device including: a processor; a memory storing instructions executable by the processor; wherein the processor is configured to perform a method as described in any of the above embodiments.
According to the technical scheme provided by the embodiment of the disclosure, when the popup is realized, the navigation bar can be prevented from entering other interfaces due to misoperation of a user by covering the original content displayed on the application interface, so that the misoperation rate of the terminal is reduced, the processing efficiency of the terminal is improved, and the user experience is improved.
It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the disclosure.
Drawings
The above and other objects, features and advantages of the present disclosure will become more apparent by describing in detail exemplary embodiments thereof with reference to the attached drawings. The drawings described below are merely some embodiments of the present disclosure, and other drawings may be derived from those drawings by those of ordinary skill in the art without inventive effort.
Fig. 1 is a schematic diagram of a pop-up window implementation in the related art.
FIG. 2 is a schematic view of a pop-up window loading principle based on the embodiment shown in FIG. 1
FIG. 3 is a flow diagram illustrating a method of a pop-up implementation in accordance with an exemplary embodiment.
FIG. 4 is a schematic structural diagram illustrating one implementation of a pop-up window in accordance with one illustrative embodiment.
FIG. 5 is a schematic structural diagram illustrating one implementation of a pop-up window in accordance with an exemplary embodiment.
FIG. 6 is a flow diagram illustrating a method of a pop-up implementation in accordance with an exemplary embodiment.
FIG. 7 is a schematic diagram illustrating one implementation of a pop-up window in accordance with an exemplary embodiment.
FIG. 8 is a flowchart illustrating a method of a pop-up implementation, according to an example embodiment.
FIG. 9 is a schematic diagram illustrating one implementation of a pop-up window in accordance with an exemplary embodiment.
Fig. 10 is a schematic structural diagram of a pop-up window implementation device according to an embodiment of the disclosure.
FIG. 11 is a schematic diagram of a computing device according to an embodiment of the present disclosure.
Detailed Description
Example embodiments will now be described more fully with reference to the accompanying drawings. Example embodiments may, however, be embodied in many different forms and should not be construed as limited to the embodiments set forth herein; rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the concept of example embodiments to those skilled in the art. The same reference numerals denote the same or similar parts in the drawings, and thus, a repetitive description thereof will be omitted.
Furthermore, the described features, structures, or characteristics may be combined in any suitable manner in one or more embodiments. In the following description, numerous specific details are provided to give a thorough understanding of embodiments of the disclosure. One skilled in the relevant art will recognize, however, that the subject matter of the present disclosure can be practiced without one or more of the specific details, or with other methods, components, devices, steps, and so forth. In other instances, well-known methods, devices, implementations, or operations have not been shown or described in detail to avoid obscuring aspects of the disclosure.
The block diagrams shown in the figures are functional entities only and do not necessarily correspond to physically separate entities. I.e. these functional entities may be implemented in the form of software, or in one or more hardware modules or integrated circuits, or in different networks and/or processor means and/or microcontroller means.
The flow charts shown in the drawings are merely illustrative and do not necessarily include all of the contents and operations/steps, nor do they necessarily have to be performed in the order described. For example, some operations/steps may be decomposed, and some operations/steps may be combined or partially combined, so that the actual execution sequence may be changed according to the actual situation.
It will be understood that, although the terms first, second, third, etc. may be used herein to describe various components, these components should not be limited by these terms. These terms are used to distinguish one element from another. Thus, a first component discussed below may be termed a second component without departing from the teachings of the disclosed concept. As used herein, the term "and/or" includes any and all combinations of one or more of the associated listed items.
It is to be understood by those skilled in the art that the drawings are merely schematic representations of exemplary embodiments, and that the blocks or processes shown in the drawings are not necessarily required to practice the present disclosure and are, therefore, not intended to limit the scope of the present disclosure.
Before describing embodiments of the present invention in detail, some related art that may be involved in the embodiments will be described in detail.
With the popularity of the internet, and in particular mobile networks, more and more product and service providers choose to use applications (apps) as one of the channels, and even the primary channel, for interacting with consumers. As several development modes of App at present, a Native (Native) mode, a Web (network) mode and a Hybrid (Hybrid) mode have respective characteristics.
The Native App is based on a Native development mode, is directly dependent on an operating system, and has the strongest interactivity and the most powerful function; however, the development cost is high, independent development is required on different platforms (such as Android and iOS), and the updating and maintenance cost is high. The Web App is a Web page deployed on a server, a user can access the Web page through a browser, the development cost is low, the Web App can be applied in a cross-platform mode, and the App does not need to be installed on a client side, so that the local resources of the user are saved; however, it is too network-dependent, requires traffic consumption, and cannot call the native API (Application Programming Interface) of the user's local system, so that the function is very limited. Hybrid apps (Hybrid interface applications) generally refer to apps based on a Hybrid development mode, and Native and Web elements are used in a Hybrid manner in development, so that partial advantages of the Native apps and the Web apps are combined, cross-platform debugging can be achieved, updating and maintenance costs are low, Native APIs can be called, functions are more complete, and therefore the Hybrid apps are more and more widely applied.
At present, for most Hybrid apps, the implementation of popup is performed in a web view (WebView), and is mainly implemented in the following two ways. One of them is to directly pop up a div frame by using a webpage technology, and draw popup contents in the frame to achieve the popup effect; another way is to use the web page technology to pop up an iframe (iframe) frame, control the size and position of the iframe frame, and open the specified web page address in the iframe frame to achieve the pop-up window effect. Since Native (Native) navigation bar is higher level than WebView, its overlay part cannot cover Native navigation bar. In the case of not covering the navigation bar, the cover layer of the pop-up window is not a full screen, which may cause the aesthetic degree of the interface to be reduced, and since the buttons on the navigation are in a clickable state, such as a clickable back button, the current page cannot prevent the page jump caused by the click of the button, resulting in unpredictable behavior. Thus, both implementations of pop-up windows described above suffer from different levels of drawbacks.
Fig. 1 is a schematic diagram of a popup implementation in the related art, and as shown in the drawing, after a page 11 jumps to a page 12, the page 12 is in a display state after popup loading is completed, and a navigation bar and the popup are in an operable state at the same time.
Fig. 2 is a schematic structural diagram based on the popup loading shown in fig. 1, in which a webpage view (WebView) inner cover layer 24, a webpage view inner popup 23, and a Native (Native) navigation bar 22 exist on a page in the two manners. Since the Native navigation bar 22 is higher in level than the current WebView, the inner cover layer 24 of the web page view under the popup cannot cover the Native navigation bar 22. Under the condition that the Native navigation bar 22 is not covered, the pop-up window 23 and the Native navigation bar 22 in the webpage view are both in an operable state, so that the user cannot be conveniently guided to complete the corresponding pop-up window operation, and the user experience will be influenced. On the other hand, for the popup realized in the div mode, if the popup is updated and brought on line only, the whole project needs to be updated and brought on line, the popup cannot be updated and brought on line independently, and the later maintenance and management cost is increased greatly.
In view of the foregoing problems in the related art, embodiments of the present disclosure provide a method and apparatus for implementing popup in a hybrid interface application, and a computing device, which are respectively described in detail below.
Fig. 3 is a flowchart of a method for implementing popup in a Hybrid interface application (Hybrid App) according to an embodiment of the present disclosure, where as shown in the figure, the method of the present embodiment includes the following steps S301 to S302. In one embodiment, the method of the present embodiment may be performed by a user terminal (e.g., a mobile phone) running the Hybrid App.
In step S301, the native loading portion obtains the popup configuration parameters transferred from the web page loading portion according to the popup instruction loaded in the web page loading portion.
As mentioned earlier, the Hybrid App is based on a Hybrid development model, in which Native and Web elements are used in a Hybrid. Correspondingly, when running on the user terminal, the Hybrid App can also be regarded as being matched with a Native (Native) loading part and a Web page (Web) loading part. The Native loading part (hereinafter also referred to as Native) mainly interacts with a user terminal locally, is used for loading Native (Native) content in the Hybrid App, and displays a preset basic framework in the Hybrid App; the Web loading part mainly carries out communication interaction with the server, is used for loading the network content updated and maintained by the server, and is displayed in a basic framework of the Native loading part in a form of a webpage view (Webview). The Native content is usually built in an installation package of the Hybrid App and is stored locally in the user terminal along with the installation of the Hybrid App, and is mainly used for constructing a basic framework of a Hybrid App user interface, and common Native content includes, but is not limited to, a navigation bar, a status bar and the like.
In one embodiment, the pop-up instruction includes, for example, a piece of code retrieved from the server to trigger the display of a pop-up in the native application when the native application displays WebView. In one embodiment, the pop-up window instruction may also carry pop-up window configuration parameters, such as, but not limited to, the height of the pop-up frame, the position of the pop-up frame, the frame border of the pop-up frame, the rounded corners of the pop-up frame, whether to have a close button, and the like.
Subsequently, in step S302, the native loading portion creates a popup web page view based on the popup configuration parameters, displays the popup web page view on a current view of the hybrid interface application, and enables native content of the current view to be covered.
FIG. 4 is a block diagram illustrating one implementation of a pop-up window in accordance with an example embodiment. As shown in fig. 4, the Native initializes a new Native popup web page view 43 according to the received popup configuration parameters, and the Native popup web page view 43 is displayed on the current view 41 of the Hybrid application and overlaid on the Native navigation bar 42. The Native pop-up page view 43 here may be, for example, the same width and height as the current view 41.
The visibility style of the Native popup webpage view 43 can be controlled, so that the visual interface is more attractive; for example, including, but not limited to, setting the width, height, spacing, alignment, border setting, background color, close button setting, etc. of the pop-up webpage view.
FIG. 5 is a block diagram illustrating a pop-up implementation according to another exemplary embodiment. As shown in fig. 5, a Native layer view 54 may be configured in the above-mentioned web page structure, and the Native layer view 54 is disposed between the Native popup web page view 53 and the current view 51 and is overlaid on the Native navigation bar 52. In one embodiment, Native mask view 54 may be implemented as a layer of translucent mask. Here, for example, Native may initialize the Native cover layer view 54 according to cover layer configuration information in the received pop window configuration parameters, the cover layer configuration information including, but not limited to, cover layer color, cover layer transparency, whether the cover layer can be clicked to close the pop window.
In some embodiments, here overlaying Native content of the current view may include, for example, overlaying a Native navigation bar in the current view.
Optionally, the pop-window configuration parameter includes a callback function, and the method further includes: and when user operation data are received in the pop-up window webpage view, the user operation data are transmitted to the current view through the callback function for processing.
The callback function is used for data transmission, for example, when a user has data input or resource calling and other interactive operations in the popup webpage view, the popup webpage view receives data to be processed and sends the data to Native, the Native transmits the data to the current view through the callback function, and the current view responds based on the data.
Optionally, the popup configuration parameter includes a popup web page code or a popup page address, and the method further includes: and in the popup webpage view, displaying a popup page according to the popup webpage code or loading the popup page according to the popup page address.
When the popup net picture is created, a target page address is directly opened, wherein the target page address comprises but is not limited to a remote page or a local code and the like, so that the code of the target page can be well and forcibly separated from the code of the popup, and the efficiency of later code maintenance and project updating is improved.
Optionally, the popup configuration parameters include animation parameters, and the displaying the popup web page view on the current view of the hybrid interface application includes: and displaying the popup webpage view on the current view in an animation mode corresponding to the animation parameter based on the animation parameter.
The animation modes include but are not limited to: the transparency of the pop-up webpage view is changed and gradually changed from 0 to 1; the pop-up webpage view position moves or gradually changes from the bottom of the current view to the middle position of the current view; the pop-up webpage view position moves or gradually changes from the left side of the current view to the middle position of the current view; the pop-up webpage view has a 90-degree flip effect.
According to the method for realizing the popup in the mixed interface application, Native content is covered, and the situation that a navigation bar enters other interfaces due to misoperation of a user can be prevented, so that the misoperation rate of the terminal is reduced, the processing efficiency of the terminal is improved, and the user experience is improved.
Fig. 6 is a flowchart of a method for implementing popup in a hybrid interface application according to an embodiment of the present disclosure, where 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 may be performed by a user terminal (e.g., a mobile phone) running the Hybrid App.
In step S601, the native loading portion obtains the popup configuration parameters transferred from the web page loading portion according to the popup instruction loaded in the web page loading portion.
Step S601 can refer to details of embodiment S301 in fig. 3, which are not described herein again.
In step S602, the native loading section creates a pop-up web page view based on the pop-up parameter and overlays the pop-up web page view on the native content of the current view.
In some examples of the disclosure, after performing step S602, the electronic device may create a pop-up webpage view based on the principle shown in fig. 4, and the presented content may specifically refer to the schematic diagram exemplarily shown in fig. 7.
For example, when a user performs a current view operation, a page pops up an authorized popup web page view, the authorized popup web page view completely covers the current view, but after the user performs a corresponding operation on the authorized popup web page view or closes the authorized popup web page view, the page jumps back to the current view.
In step S603, when the preset condition is satisfied, the pop-up webpage view is closed.
Optionally, when the popup parameter indicates the popup webpage view band closing button, the popup webpage view is closed based on receiving an operation of a user on the closing button.
Optionally, when the popup parameter indicates a closing condition of the popup web page view, based on determining that the closing condition is satisfied, closing the popup web page view. For example, the user needs to input corresponding data in the pop-up window webpage view, and after clicking 'confirm', the pop-up window disappears.
Optionally, the popup configuration parameters include a callback function, and when user operation data is received in the popup webpage view, the user operation data is transmitted to the current view through the callback function for processing, so that data interaction between the popup window and the user is realized.
Optionally, the popup configuration parameter includes a popup web page code or a popup page address, and in the popup web page view, the popup page is displayed according to the popup web page code or loaded according to the popup page address.
Optionally, the pop-up window configuration parameter includes an animation parameter, and the pop-up window web page view is displayed on the current view in an animation manner corresponding to the animation parameter based on the animation parameter.
According to the method for realizing the popup in the mixed interface application, Native content is covered, and the navigation bar can be prevented from entering other interfaces due to misoperation of a user, so that the misoperation rate of the terminal is reduced, the processing efficiency of the terminal is improved, and the user experience is improved; furthermore, when the Native navigation bar is covered, a new view page is popped up to realize the popup effect, and data interaction between the outside and popup content is facilitated.
Fig. 8 is a flowchart of a method for implementing popup in a hybrid interface application according to an embodiment of the present disclosure, and as shown in the figure, the method of the present embodiment includes the following steps S801 to S804. In one embodiment, the method of the present embodiment may be performed by a user terminal (e.g., a mobile phone) running the Hybrid App.
In step S801, the native loading portion acquires the popup configuration parameters transferred from the web page loading portion according to the popup instruction loaded in the web page loading portion.
Step S801 may refer to details of embodiment S301 in fig. 3, which are not described herein again.
In step S802, the native loading portion creates a cross-layer view based on the cross-layer parameters and overlays the cross-layer view on the native content of the current view.
Native creates a view element after acquiring an instruction sent by a Hybrid interface, sets the width of the view element to be higher than the width of a screen, and sets the background color of the view element to be semitransparent. And then adding the view element, namely a Native Mongolian view, on the Hybrid interface, wherein the Native Mongolian view is displayed on the current WebView of the Hybrid application and covers the Native content of the current view, such as a Native navigation bar.
In step S803, the native loading section creates a popup web page view based on the popup parameter and displays the popup web page view on the cover view.
In some examples of the disclosure, after executing step S803, the electronic device may create a pop-up webpage view based on the principle shown in fig. 5, and the presented content may specifically refer to the schematic diagram exemplarily shown in fig. 9.
Optionally, the popup configuration parameters include a callback function, and when user operation data is received in the popup webpage view, the user operation data is transferred to the current view through the callback function for processing.
Optionally, the popup configuration parameter includes a popup web page code or a popup page address, and in the popup web page view, the popup page is displayed according to the popup web page code or loaded according to the popup page address.
Optionally, the pop-up window configuration parameter includes an animation parameter, and the pop-up window web page view is displayed on the current view in an animation manner corresponding to the animation parameter based on the animation parameter.
In step S804, when a preset condition is satisfied, the popup web page view is closed.
Optionally, the cover sheet parameter may be used to instruct the cover sheet view to close a popup window when clicked, and at this time, based on receiving a click operation of a user on the cover sheet view, the popup window web page view may be closed.
When the cover layer view is initialized, the cover layer is set according to the configuration parameters of the popup window, for example, whether the popup window can be closed by clicking the cover layer view or not, when the popup webpage view is displayed on the cover layer view, a user only needs to click any position of the cover layer view, the popup webpage view is closed or hidden, and the current view is displayed again.
Optionally, when the popup parameter indicates the popup webpage view band closing button, the popup webpage view is closed based on receiving an operation of a user on the closing button.
Optionally, when the popup parameter indicates a closing condition of the popup web page view, based on determining that the closing condition is satisfied, closing the popup web page view. For example, the pop-up window needs to be closed or hidden after the operation of the keyboard or the mouse is acquired.
According to the method for realizing the popup in the mixed interface application, Native content is covered, and the navigation bar can be prevented from entering other interfaces due to misoperation of a user, so that the misoperation rate of the terminal is reduced, the processing efficiency of the terminal is improved, and the user experience is improved; furthermore, a layer of covering layer view is added on the current WebView of the Hybrid application, so that the user can concentrate on popup content and the user can be blocked from operating the interface covered by the covering layer.
The following are embodiments of the disclosed apparatus that may be used to perform embodiments of the disclosed methods. For details not disclosed in the embodiments of the apparatus of the present disclosure, refer to the embodiments of the method of the present disclosure.
Fig. 10 is a block diagram of an apparatus for implementing pop-up in a hybrid interface application according to an embodiment of the present disclosure, and as shown in the drawing, the apparatus of the present embodiment includes a pop-up configuration module 101 and a view covering module 102.
The popup configuration module 101 is configured to obtain, at the native loading portion, the popup configuration parameters transferred from the web page loading portion according to the popup instruction loaded in the web page loading portion.
A view overlay module 102 configured to create a pop-up webpage view based on the pop-up configuration parameters in the native loading portion, display the pop-up webpage view on a current view of the hybrid interface application, and cause native content of the current view to be overlaid.
Optionally, the view overlay module 102 creates the pop-up webpage view based on the pop-up parameter and overlays the pop-up webpage view on the native content of the current view.
Optionally, the view overlay module 102 creates a overlay view based on the overlay parameters and overlays the overlay view on the native content of the current view; and then creating the popup webpage view based on the popup parameter, and displaying the popup webpage view on the cover layer view.
Optionally, the cover layer parameter may indicate that the cover layer view closes a popup window when clicked, and at this time, the view overlay module 102 may close the popup web page view based on receiving a click operation of the user on the cover layer view.
Optionally, when the popup parameter indicates the popup webpage view band closing button, the view covering module 102 closes the popup webpage view based on receiving an operation of the closing button by a user.
Optionally, when the pop-up window parameter indicates other closing conditions of the pop-up window web page view, the view covering module 102 closes the pop-up window web page view based on determining that the other closing conditions are satisfied.
Optionally, the pop-up window configuration parameter includes a callback function, and the view overlay module 102 is further configured to, when receiving the user operation data in the pop-up window web view, transmit the user operation data to the current view through the callback function for processing.
The callback function is used for data transmission, for example, when a user has data input or resource calling and other interactive operations in the popup webpage view, the popup webpage view receives data to be processed and sends the data to Native, the Native transmits the data to the current view through the callback function, and the current view responds based on the data.
Optionally, the pop-up window configuration parameter includes an animation parameter, and the view overlay module 102 is further configured to display the pop-up window web page view on the current view in an animation manner corresponding to the animation parameter based on the animation parameter.
Optionally, the popup configuration parameter includes a popup web page code or a popup page address, and the view overlay module 102 is further configured to display a popup page according to the popup web page code or load the popup page according to the popup page address in the popup web page view.
According to the device for realizing the popup in the mixed interface application, Native content is covered, and the situation that a navigation bar enters other interfaces due to misoperation of a user can be prevented, so that the misoperation rate of the terminal is reduced, the processing efficiency of the terminal is improved, and the user experience is improved.
The present embodiment provides a pop-up device in a hybrid interface application based on the same inventive concept as the method embodiment described above, and the present embodiment can be used to implement the method for implementing pop-up in a hybrid interface application provided in the above embodiment.
It should be noted that although in the above detailed description several modules or units of the device for action execution are mentioned, such a division is not mandatory. Indeed, the features and functionality of two or more modules or units described above may be embodied in one module or unit, according to embodiments of the present disclosure. Conversely, the features and functions of one module or unit described above may be further divided into embodiments by a plurality of modules or units. The components shown as modules or units may or may not be physical units, i.e. may be located in one place or may also be distributed over a plurality of network units. Some or all of the modules can be selected according to actual needs to achieve the purpose of the wood-disclosed scheme. One of ordinary skill in the art can understand and implement it without inventive effort.
Through the description of the above embodiments, those skilled in the art will readily understand that the above described exemplary embodiments may be implemented by software, or by software in combination with necessary hardware.
For example, in an example embodiment, there is also provided a computer readable storage medium, on which a computer program is stored, which when executed by a processor, may implement the steps of the method described in any of the above embodiments. The detailed description of the steps of the method can refer to the detailed description in the foregoing embodiments, and the detailed description is omitted here. The computer readable storage medium may be a ROM, a Random Access Memory (RAM), a CD-ROM, a magnetic tape, a floppy disk, an optical data storage device, and the like.
In another example embodiment, a computing device is further provided, where the computing device may be a mobile terminal such as a mobile phone and a tablet computer, and may also be a terminal device such as a desktop computer and a server, which is not limited in this example embodiment. FIG. 11 shows a schematic diagram of a computing device 110 in an example embodiment according to the present disclosure. For example, the device 110 may 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 instructions, such as applications, that are executable by processing component 111. The application programs stored in memory 112 may include one or more modules that each correspond to a set of instructions. Further, the processing component 111 is configured to execute instructions to perform the above-described pop-window implementation method.
The memory may be used for storing software programs and modules, and the processor may execute various functional applications and data processing by operating the software programs and modules stored in the memory. The memory may include high speed random access memory, and may also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some examples, the memory may further include memory located remotely from the processor, which may be connected to a computer terminal or a mobile terminal through a network. Examples of such networks include, but are not limited to, the internet, intranets, local area networks, mobile communication networks, and combinations thereof.
The device 110 may also include a power component 113 configured to perform power management of the device 110, a wired or wireless network interface 114 configured to connect the device 110 to a network, and an input output (I/O) interface 115. The device 110 may operate based on an operating system stored in the memory 112, such as Android, IOS, or the like.
Other embodiments of the disclosure will be apparent to those skilled in the art from consideration of the specification and practice of the disclosure disclosed herein. This application is intended to cover any variations, uses, or adaptations of the disclosure following, in general, the principles of the disclosure and including such departures from the present disclosure as come within known or customary practice within the art to which the disclosure pertains. It is intended that the specification and examples be considered as exemplary only, with a true scope and spirit of the disclosure being indicated by the following claims.
While the present disclosure has been described with reference to several exemplary embodiments, it is understood that the terminology used is intended to be in the nature of words of description and illustration, rather than of limitation. As the present disclosure may be embodied in several forms without departing from the spirit or essential characteristics thereof, it should also be understood that the above-described embodiments are not limited by any of the details of the foregoing description, but rather should be construed broadly within its spirit and scope as defined in the appended claims, and therefore all changes and modifications that fall within the meets and bounds of the claims, or equivalences of such meets and bounds are therefore intended to be embraced by the appended claims.
Claims (9)
1. A method for implementing a popup in a hybrid interface application, the hybrid interface application including a native load portion and a web page load portion, the method comprising:
in the mixed interface application, acquiring popup configuration parameters transmitted from the webpage loading part through the native loading part according to the popup instruction loaded in the webpage loading part; and
the native loading portion creating a pop-up webpage view based on the pop-up configuration parameters, displaying the pop-up webpage view on a current view of the hybrid interface application, and causing native content of the current view to be overlaid; the native content comprises a native navigation bar;
the popup configuration parameters include a masking parameter and a popup parameter, and the causing native content of the current view to be overwritten includes:
creating a native skin view based on the skin parameters and overlaying the native skin view on native content of the current view; and
creating the popup web page view based on the popup parameter and displaying the popup web page view on the native cover view;
the native loading part is used for loading native content in the mixed interface application and displaying a preset basic framework in the mixed interface application; the webpage loading part is used for loading the network content updated and maintained by the server and displaying the network content in the basic frame of the native loading part in the form of webpage view.
2. The method of claim 1, wherein the popup configuration parameter comprises a popup parameter, the causing native content of the current view to be overwritten comprising:
creating the pop-up webpage view based on the pop-up parameters and overlaying the pop-up webpage view on the native content of the current view.
3. The method of any of claims 1-2, wherein the pop-window configuration parameter comprises a callback function, the method further comprising:
and when user operation data are received in the pop-up window webpage view, the user operation data are transmitted to the current view through the callback function for processing.
4. The method of any of claims 1-2, wherein the pop-up configuration parameters include animation parameters, the displaying the pop-up webpage view on the current view of the hybrid interface application comprising:
and displaying the popup webpage view on the current view in an animation mode corresponding to the animation parameter based on the animation parameter.
5. The method of any of claims 1-2, wherein the popup configuration parameter is further for indicating a closing condition of the popup web page view, the method further comprising:
and when the closing condition is determined to be met, closing the popup webpage view.
6. The method of any of claims 1-2, wherein the popup configuration parameter comprises a popup web page code or a popup page address, the method further comprising:
and in the popup webpage view, displaying a popup page according to the popup webpage code or loading the popup page according to the popup page address.
7. An apparatus for implementing pop-up in a hybrid interface application, the hybrid interface application including a native load portion and a web page load portion, the apparatus comprising:
the popup configuration module is arranged for acquiring popup configuration parameters transmitted from the webpage loading part through the native loading part according to the popup instruction loaded in the webpage loading part in the mixed interface application; and
a view overlay module configured to create a pop-up webpage view based on the pop-up configuration parameters at the native loading portion, display the pop-up webpage view on a current view of the hybrid interface application, and overlay native content of the current view; the native content comprises a native navigation bar;
the popup configuration parameters include a masking parameter and a popup parameter, and the causing native content of the current view to be overwritten includes:
creating a native skin view based on the skin parameters and overlaying the native skin view on native content of the current view; and
creating the popup web page view based on the popup parameter and displaying the popup web page view on the native cover view;
the native loading part is used for loading native content in the mixed interface application and displaying a preset basic framework in the mixed interface application; the webpage loading part is used for loading the network content updated and maintained by the server and displaying the network content in the basic frame of the native loading part in the form of webpage view.
8. A storage medium storing a computer program which, when executed by a processor of a computer, causes the computer to perform the method of any one of claims 1-6.
9. A computing device, comprising:
a processor;
a memory storing instructions executable by the processor;
wherein the processor is configured to perform the method of any one of claims 1-6.
Priority Applications (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 |
| CA3054877A CA3054877A1 (en) | 2018-09-13 | 2019-09-10 | Method, apparatus and computer device for implementing pop-up window in hybrid interface application |
Applications Claiming Priority (1)
| 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 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN109063202A CN109063202A (en) | 2018-12-21 |
| CN109063202B true CN109063202B (en) | 2022-01-25 |
Family
ID=64761568
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811070419.9A Active CN109063202B (en) | 2018-09-13 | 2018-09-13 | Method and device for realizing popup in mixed interface application and computer equipment |
Country Status (2)
| Country | Link |
|---|---|
| CN (1) | CN109063202B (en) |
| CA (1) | CA3054877A1 (en) |
Families Citing this family (14)
| 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 |
| CN112153064B (en) * | 2020-09-28 | 2022-11-22 | 上海缓存命中科技有限公司 | Application store and use method thereof |
| 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 |
| CN114995929B (en) * | 2021-11-17 | 2023-04-21 | 荣耀终端有限公司 | Popup window display method and device |
| 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 |
Citations (6)
| 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 |
| CN106445284A (en) * | 2016-09-13 | 2017-02-22 | 柚子（北京）科技有限公司 | Screen display method and device |
| CN107808010A (en) * | 2017-11-17 | 2018-03-16 | 北京锐安科技有限公司 | A kind of pop-up page generation method, device, browser and storage medium |
| CN107908793A (en) * | 2017-12-13 | 2018-04-13 | 上海携程商务有限公司 | The method and system of web page popup window |
| CN108052548A (en) * | 2017-11-27 | 2018-05-18 | 深圳市前海圆舟网络科技股份有限公司 | Method, system and the terminal device that a kind of webpage creates |
Family Cites Families (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| 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 |
| CN106484509B (en) * | 2016-09-27 | 2020-09-25 | 腾讯科技（深圳）有限公司 | Output method and device of popup window and terminal |
-
2018
- 2018-09-13 CN CN201811070419.9A patent/CN109063202B/en active Active
-
2019
- 2019-09-10 CA CA3054877A patent/CA3054877A1/en active Pending
Patent Citations (6)
| 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 |
| CN106445284A (en) * | 2016-09-13 | 2017-02-22 | 柚子（北京）科技有限公司 | Screen display method and device |
| 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 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN109063202A (en) | 2018-12-21 |
| CA3054877A1 (en) | 2020-03-13 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109063202B (en) | Method and device for realizing popup in mixed interface application and computer equipment | |
| EP3680766B1 (en) | Split screen display method, apparatus, terminal, and storage medium | |
| US11868586B2 (en) | Floating window user interface display method and apparatus, device, and storage medium | |
| CN112817684B (en) | User interface display method, device, terminal and storage medium | |
| EP3761161B1 (en) | Input method interface display method and device, and terminal and storage medium | |
| WO2019174546A1 (en) | User interface display method and device, apparatus, and storage medium | |
| CN107992301B (en) | User interface implementation method, client and storage medium | |
| KR100677777B1 (en) | Windowing systems | |
| CN106547417B (en) | Method and device for displaying background task message | |
| JPH10177467A (en) | Multitask data processing system and its method | |
| JP2003514273A (en) | Data input in GUI | |
| CN107580039B (en) | Transmission progress display method and device and terminal | |
| CN111813308B (en) | Interface processing method and device, electronic equipment and storage medium | |
| CN111796820A (en) | Method and device for constructing front-end page based on integrated assembly and electronic equipment | |
| CN108021366B (en) | Interface animation realization method and device, electronic equipment and storage medium | |
| CN111209503B (en) | Processing method and device for popup window in webpage, electronic equipment and storage medium | |
| CN116719456A (en) | Icon style switching method and device, electronic equipment and storage medium | |
| CN111708533A (en) | Method and device for setting mouse display state in application thin client | |
| US11295706B2 (en) | Customizable compact overlay window | |
| CN113286185A (en) | Display device and homepage display method | |
| CN116340680A (en) | Display equipment and control method for managing life cycle of plug-in object | |
| CN111813476A (en) | Mobile banking application method based on android minus one screen | |
| CN110853643A (en) | Method, device, equipment and storage medium for voice recognition in fast application | |
| CN112637683A (en) | Display equipment system optimization method and display equipment | |
| Sroczyński | Designing human-computer interaction for mobile devices with the FMX application platform |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |