Webpage loading method and device and intelligent equipment
Technical Field
The invention relates to the technical field of mobile application, in particular to a webpage loading method and device and intelligent equipment.
Background
The Hybrid-mode mobile application (Hybrid App) is an App between a Web-App and a Native-App, the Hybrid App is developed and manufactured by using a program language and a webpage language together, the program language (Native) is a fundamental stone of client application, a corresponding development language needs to be selected according to an operating system carried by a terminal during application development, for example, an Android operating system needs to be developed by using a java language, an iOS operating system needs to be developed by using an Objective-C language, client application compiled by program language development needs to be installed on the terminal for running, server application compiled by the webpage language (Html) is deployed at a server or packaged in the client application, the operating system of the terminal does not need to be distinguished, the Hybrid App has a cross-platform characteristic, and the client application loads webpage resources developed by the webpage language through a Web control during use to display a webpage. Therefore, the mixed-mode mobile application has the advantages of good user interaction experience of Native App and cross-platform development of WebApp.
In the mixed-mode mobile application, the display of a webpage by a client application comprises two parts, namely a page structure part and a dynamic data part, generally speaking, when the webpage is displayed, the client application loads a webpage address corresponding to a page structure through a Web control, acquires dynamic data through a data request after the loading is finished, and finishes the complete display of the webpage according to the returned dynamic data; when a user triggers the page switching operation, a webpage address corresponding to the next page is loaded in a mode of the current Web control or a newly-built Web control, the request rendering of dynamic data is carried out in sequence, and a complete page view is displayed.
In practical application, the mixed-mode mobile application has the following problems when loading a display page: because the loading of the Web page address and the rendering of the page resource by the Web control need to take a period of time, the page is in a no-content state at this stage, and is particularly more obvious when the page is switched, and is usually displayed in a white screen waiting state.
Disclosure of Invention
The invention aims to provide a webpage loading method, a webpage loading device and intelligent equipment, which can realize that the user experience of mixed-mode mobile application in the aspect of webpage display is closer to that of originally developed application.
In order to achieve the above object, an aspect of the present invention provides a web page loading method, including:
step S1, pre-downloading the structure codes of a plurality of pages to be displayed, and writing the structure codes into the same HTML file by taking the pages as units;
step S2, associating the web page addresses of each page structure, and simultaneously respectively identifying the page structures;
step S3, calling style attribute control to arrange multiple page structures horizontally or vertically according to the identification sequence;
step S4, automatically accessing the related webpage address through the web control to load the dynamic data of the home page, so that the home page is displayed and the rest page structures are hidden;
step S5, detecting the page switching instruction of the user to obtain the mark of the target page structure, and switching the target page structure to the nearest position of the home page based on the mark;
step S6, gradually switching in and appearing the target page through simulating a native switching animation when the switching condition is met, and gradually switching out and hiding the home page;
and step S7, until the target page structure is completely cut in, the web control accesses the associated webpage address to sequentially perform dynamic data request rendering and display a complete page view.
Preferably, the method further comprises the following steps:
and step S8, defining the view of the target page as a home page after the view of the target page is completely displayed, and returning to execute the step S5.
Specifically, the page switching instruction includes a next page switching instruction and a previous page return instruction.
Preferably, the method for detecting a page switching instruction of a user to obtain an identifier of a target page structure and switching the target page structure to a position closest to a home page based on the identifier includes:
when a next page switching instruction/a previous page returning instruction is detected, the identifier of the target page structure is automatically locked, and meanwhile, the related page is extracted and stored beside the adjacent position of the first page based on the identifier structure so as to update and adjust the arrangement of each page structure;
the adjacent position of the home page refers to a position horizontally connected with the home page or a lower position nearest to the home page.
Preferably, the method for pre-downloading the structure codes of the plurality of pages to be displayed comprises the following steps:
and downloading the structure codes of all the pages to be displayed at one time based on the current access.
Compared with the prior art, the webpage loading method provided by the invention has the following beneficial effects:
in the webpage loading method provided by the invention, by pre-downloading the structure codes of a plurality of pages to be displayed, storing the downloaded structure codes in the same HTML file by taking the pages as units, associating the webpage addresses with the corresponding webpage structures and then making a distinguishing identifier for each page structure, a style attribute control can arrange the page structures in sequence according to the distinguishing identifiers, a user needs to set a home page into an automatic loading rendering mode in order to ensure better use experience when starting mobile application, and then executes page switching operation by detecting a page switching instruction, wherein the specific process is that a target page structure is switched to the nearest position of the home page, so as to simulate a primary switching animation to gradually switch in the target page structure and simultaneously gradually switch out and hide the home page, and performing dynamic data request rendering in sequence until the target page structure is completely switched into the webpage address for calling the web control to access the correlation and displaying a complete page view.
Therefore, compared with the technical scheme that the number of the pages and the number of the HTML files are in one-to-one correspondence in the prior art, the method and the device can obviously reduce the frequency of calling the web control to load the pages, and can obtain the complete arrangement page structure of all the pages to be displayed only by once loading when the functional module enters, so that the waiting time of page switching is effectively reduced, and finally, the user experience of the mixed mode mobile application in the aspect of page display is closer to the originally developed application.
Another aspect of the present invention provides a web page loading apparatus, which is applied to the web page loading method in the foregoing technical solution, and the apparatus includes:
the loading unit is used for pre-downloading the structure codes of a plurality of pages to be displayed and writing the same HTML file by taking the pages as units;
the page identification unit is used for associating the webpage addresses of all the page structures and simultaneously respectively identifying the page structures;
the control unit is used for calling the style attribute control to horizontally arrange or vertically arrange the plurality of pages according to the identification sequence;
the home page display unit is used for automatically accessing the associated webpage address through the web control to load the dynamic data of the home page, so that the home page is displayed and the rest page structures are hidden;
the switching processing unit is used for detecting a page switching instruction of a user to acquire an identifier of a target page structure and switching the target page structure to the nearest position of a home page based on the identifier;
the animation unit is used for gradually switching in and showing the structure of the target page by simulating the native switching animation when the switching condition is met, and simultaneously gradually switching out and hiding the page of the first page;
and the switching unit is used for accessing the associated webpage addresses through the web control to sequentially perform dynamic data request rendering and display a complete page view until the target page structure is completely switched in.
Preferably, the method further comprises the following steps:
and the circulating unit is used for defining the target page as a home page after the view of the target page is completely displayed, and re-responding to the switching processing unit.
Preferably, the switching processing unit is specifically configured to automatically lock the identifier of the target page when a next page switching instruction/a previous page returning instruction is detected, and extract, based on the identifier structure, the associated page to be stored beside the adjacent position of the top page, so as to update and adjust the arrangement of each page structure;
the adjacent position of the home page refers to a position horizontally connected with the home page or a lower position nearest to the home page.
Preferably, the switching unit is specifically configured to download the structure codes of all the pages to be displayed at one time based on the current access, and write the structure codes into the same HTML file with the page as a unit.
Compared with the prior art, the beneficial effects of the webpage loading device provided by the invention are the same as those of the webpage loading method provided by the technical scheme, and the detailed description is omitted here.
The third aspect of the present invention provides an intelligent device, which includes the web page loading apparatus according to the above technical solution.
Compared with the prior art, the beneficial effects of the intelligent device provided by the invention are the same as those of the webpage loading device provided by the technical scheme, and are not repeated herein.
Drawings
The accompanying drawings, which are included to provide a further understanding of the invention and are incorporated in and constitute a part of this specification, illustrate embodiments of the invention and together with the description serve to explain the invention and not to limit the invention. In the drawings:
fig. 1 is a schematic flow chart illustrating a web page loading method according to an embodiment of the present invention;
FIG. 2 is a schematic diagram of a horizontal arrangement of page structures according to one embodiment of the present invention;
FIG. 3 is a diagram illustrating a structure of a target page being switched to a position closest to a home page according to a first embodiment of the present invention;
FIG. 4 is a schematic diagram illustrating a process of cutting a target page structure into a home page according to a first embodiment of the present invention;
FIG. 5 is a diagram illustrating a target page structure being completely cut into the display according to an embodiment of the present invention;
fig. 6 is a block diagram of a web page loading apparatus according to a second embodiment of the present invention.
Reference numerals:
1-loading unit, 2-page identification unit;
3-control unit, 4-home page display unit;
5-switching processing unit, 6-animation unit;
7-switching unit, 8-circulating unit.
Detailed Description
In order to make the aforementioned objects, features and advantages of the present invention comprehensible, embodiments accompanied with figures are described in detail below. It is to be understood that the described embodiments are merely exemplary of the invention, and not restrictive of the full scope of the invention. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
Example one
Referring to fig. 1, the present embodiment provides a method for loading a web page, including:
step S1, pre-downloading the structure codes of a plurality of pages to be displayed, for example, downloading the structure codes of all the pages to be displayed at one time based on the current access, and writing the structure codes into the same HTML file by taking the pages as units; step S2, associating the web page addresses of each page structure, and simultaneously respectively making distinguishing marks on the page structures; step S3, calling the style attribute control to horizontally arrange or vertically arrange a plurality of page structures according to the identification sequence; step S4, automatically accessing the related webpage address through the web control to load the dynamic data of the home page, so that the home page is displayed and the rest page structures are hidden; step S5, detecting the page switching instruction of the user to obtain the mark of the target page structure, and switching the target page structure to the nearest position of the home page based on the mark; step S6, gradually switching in and revealing the target page structure through simulating a native switching animation when the switching condition is met, and simultaneously gradually switching out and hiding the home page; and step S7, until the target page structure is completely cut in, the web control accesses the associated webpage address to sequentially perform dynamic data request rendering and display a complete page view.
In the method for loading a web page provided by this embodiment, by pre-downloading the structure codes of a plurality of pages to be displayed, storing the downloaded structure codes in the same HTML file together with the pages as units, associating the web page addresses with the corresponding web page structures, and then identifying the respective page structures, the style attribute control can arrange the plurality of page structures in order according to the identification, the user needs to set the home page in an automatic loading rendering mode when starting the mobile application to ensure better experience, and then execute the page switching operation by detecting the page switching instruction, the specific process is to switch the target page structure to the nearest position of the home page, so as to simulate the native switching animation to gradually cut in the target page structure and gradually cut out and hide the home page when the switching condition is satisfied, and performing dynamic data request rendering in sequence until the target page structure is completely switched into the webpage address for calling the web control to access the correlation and displaying a complete page view.
Therefore, compared with the technical scheme that the number of the pages and the number of the HTML files are in one-to-one correspondence in the prior art, the method and the device for displaying the mixed-mode mobile application can obviously reduce the number of times for calling the web control to load the pages, and can obtain the complete arrangement page structure of all the pages to be displayed only by once loading when the web control enters the functional module, so that the waiting time for page switching is effectively reduced, and finally, the user experience of the mixed-mode mobile application in the aspect of page display is closer to that of the originally developed application.
Preferably, the above embodiment further comprises:
and step S8, defining the view of the target page as a home page after the view of the target page is completely displayed, and returning to execute the step S5. After the target page is completely loaded and displayed, the steps S5 to S7 can be repeatedly executed through the above loop setting, so that a plurality of pre-downloaded page structures can be repeatedly called, and the page switching requirement of the user is met.
Illustratively, the page switch instruction includes a next page switch instruction and a previous page return instruction.
Specifically, the method for detecting the page switching instruction of the user to obtain the identifier of the target page structure and switching the target page structure to the nearest position of the top page based on the identifier in the above embodiment includes:
when a next page switching instruction/a previous page returning instruction is detected, the identifier of the target page structure is automatically locked, and meanwhile, the related page is extracted and stored beside the adjacent position of the first page based on the identifier structure so as to update and adjust the arrangement of each page structure; the adjacent position of the home page refers to a position horizontally connected with the home page or a position below the home page which is most adjacent. By adjusting the page arrangement nearby, the waiting time of the process of switching from the first page to the target page can be reduced, the switching process of the pages is smoother, and the user experience is improved.
In specific implementation, referring to fig. 2-5, when a user opens a mobile application, structure codes of 3 pages to be displayed are downloaded at one time, and the pages are written into the same HTML file in units of pages and identified as page1, page2, and page3, and then style attribute controls are invoked to horizontally arrange or vertically arrange the 3 page structures, so as to facilitate understanding, the page1 is in a top page position, the Web control loads a webpage for the first time to enable the page1 to be in a displayed state, and the rest of the page2 and the page3 are in a hidden state, as shown in fig. 2, when a page switching instruction of the user is detected, such as a switching instruction from the page1 to the page3, the arrangement structure of the page is adjusted by invoking the style attribute controls, so that the page3 is switched to a position adjacent to the page1, as shown in fig. 3, and when a switching condition is satisfied, animation 3 is simulated to gradually switched into the displayed state, and gradually cutting out and hiding the page1, as shown in fig. 4, until the cut-in animation is completed when the page3 is completely loaded, at this time, hiding the page1, reducing the stacking arrangement of the page structure, sequentially performing request rendering of dynamic data, and displaying a complete page view, as shown in fig. 5.
Example two
Referring to fig. 1 and fig. 6, the present embodiment provides a web page loading apparatus, including:
the system comprises a loading unit 1, a display unit and a display unit, wherein the loading unit 1 is used for pre-downloading structure codes of a plurality of pages to be displayed and writing the same HTML file by taking the pages as units;
the page identification unit 2 is used for associating the webpage addresses of the page structures and respectively identifying the page structures;
the control unit 3 is used for calling the style attribute control to horizontally arrange or vertically arrange the plurality of pages according to the identification sequence;
the home page display unit 4 is used for automatically accessing the associated webpage address through the web control to load the dynamic data of the home page, so that the home page is displayed and the rest page structures are hidden;
the switching processing unit 5 is configured to detect a page switching instruction of a user to obtain an identifier of a target page structure, and switch the target page structure to a position closest to a home page based on the identifier;
the animation unit 6 is used for gradually switching in and showing the structure of the target page by simulating a native switching animation when the switching condition is met, and gradually switching out and hiding the page of the first page;
and the switching unit 7 is used for sequentially performing dynamic data request rendering and displaying a complete page view by accessing the associated webpage address through the web control until the target page structure is completely switched in.
Preferably, the method further comprises the following steps:
and the circulating unit 8 is used for defining the target page as a home page after the view of the target page is completely displayed, and responding to the switching processing unit again.
Preferably, the switching processing unit 5 is specifically configured to automatically lock the identifier of the target page when a next page switching instruction/a previous page returning instruction is detected, and extract the associated page based on the identifier structure and store the associated page next to the adjacent position of the top page, so as to update and adjust the arrangement of each page structure;
the adjacent position of the home page refers to a position horizontally connected with the home page or a position below the home page which is most adjacent.
Specifically, the switching unit 7 is specifically configured to download the structure codes of all the pages to be displayed at one time based on the current access, and write the structure codes into the same HTML file by taking the page as a unit.
Compared with the prior art, the beneficial effects of the webpage loading device provided by the embodiment of the invention are the same as those of the webpage loading method provided by the first embodiment, and are not repeated herein.
EXAMPLE III
The embodiment provides an intelligent device, which comprises the webpage loading device in the embodiment.
Compared with the prior art, the beneficial effects of the intelligent device provided by the embodiment of the invention are the same as those of the webpage loading device provided by the first embodiment, and are not described herein again.
It will be understood by those skilled in the art that all or part of the steps in the method for implementing the invention may be implemented by hardware instructions related to a program, the program may be stored in a computer-readable storage medium, and when executed, the program includes the steps of the method of the embodiment, and the storage medium may be: ROM/RAM, magnetic disks, optical disks, memory cards, and the like.
The above description is only for the specific embodiments of the present invention, but the scope of the present invention is not limited thereto, and any person skilled in the art can easily conceive of the changes or substitutions within the technical scope of the present invention, and the changes or substitutions should be covered within the scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the appended claims.