WO2020199544A1 - 一种网页加载方法及其装置、智能设备 - Google Patents

一种网页加载方法及其装置、智能设备 Download PDF

Info

Publication number
WO2020199544A1
WO2020199544A1 PCT/CN2019/109120 CN2019109120W WO2020199544A1 WO 2020199544 A1 WO2020199544 A1 WO 2020199544A1 CN 2019109120 W CN2019109120 W CN 2019109120W WO 2020199544 A1 WO2020199544 A1 WO 2020199544A1
Authority
WO
WIPO (PCT)
Prior art keywords
page
switching
home
target
displayed
Prior art date
Application number
PCT/CN2019/109120
Other languages
English (en)
French (fr)
Inventor
王桂斌
Original Assignee
苏宁云计算有限公司
苏宁易购集团股份有限公司
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by 苏宁云计算有限公司, 苏宁易购集团股份有限公司 filed Critical 苏宁云计算有限公司
Priority to CA3176866A priority Critical patent/CA3176866A1/en
Publication of WO2020199544A1 publication Critical patent/WO2020199544A1/zh

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/445—Program loading or initiating
    • G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
    • 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/445—Program loading or initiating

Definitions

  • the invention relates to the technical field of mobile applications, in particular to a web page loading method and device, and smart equipment.
  • Hybrid App refers to an app between web-app and native-app.
  • Hybrid App uses both programming language and web page language to develop and produce.
  • Programming language (Native) is the client The cornerstone of the application, during application development, the corresponding development language should be selected according to the operating system carried by the terminal.
  • the Android operating system needs to be developed in Java language
  • the iOS operating system needs to be developed in Objective-C language
  • the programming language is used to develop and compile client applications. It needs to be installed on the terminal to run.
  • the server application developed and compiled by the web language (Html) is deployed on the server or encapsulated in the client application. There is no need to distinguish the operating system of the terminal. It has cross-platform features.
  • the client application When in use, the client application passes The web control loads the webpage resources developed by the webpage language to display the webpage. It can be seen that mixed-mode mobile applications have both "the advantages of a good user interaction experience for Native Apps" and “the advantages of cross-platform Web App development".
  • the client application In mixed-mode mobile applications, the client application’s display of web pages includes two parts, namely the page structure part and the dynamic data part.
  • the client application will load the corresponding page structure through the Web control.
  • Web page address after loading is completed, the dynamic data is obtained through data request, and the complete display of the page is completed according to the returned dynamic data;
  • the web page corresponding to the next page is loaded through the current web control or a new web control Address, request rendering of dynamic data in turn and display the full page view.
  • the purpose of the present invention is to provide a web page loading method, a device, and a smart device, which can realize that the user experience of a hybrid mode mobile application in terms of page display is closer to that of a natively developed application.
  • one aspect of the present invention provides a web page loading method, including:
  • Step S1 pre-download the structure codes of multiple pages to be displayed, and write the same HTML file in the unit of the page;
  • Step S2 associating the webpage addresses of each page structure, and simultaneously distinguishing the page structure separately;
  • Step S3 calling the style attribute control to arrange the multiple page structures horizontally or vertically according to the identification sequence
  • Step S4 Load the dynamic data of the home page by automatically accessing the associated web page address through the web control, so that the home page is displayed and the rest of the page structure is hidden;
  • Step S5 Detect the user's page switching instruction to obtain an identifier of the target page structure, and switch the target page structure to the nearest position of the home page based on the identifier;
  • Step S6 when the switching conditions are met, the target page is gradually cut in and revealed by simulating the native switching animation, and the home page is gradually cut out and hidden;
  • Step S7 until the target page structure is completely cut in, access the associated web page address through the web control to sequentially perform dynamic data request rendering and display the complete page view.
  • it also includes:
  • step S8 when the view of the target page is fully displayed, it is defined as the home page, and step S5 is returned to.
  • the page switching instruction includes a next page switching instruction and a previous page returning instruction.
  • the method of 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 home page based on the identifier includes:
  • the logo of the target page structure is automatically locked, and the related pages are extracted based on the logo structure and stored next to the adjacent position of the home page to update and adjust the arrangement of each page structure ;
  • the adjacent position next to the home page refers to a position horizontally connected with the home page, or the nearest lower position of the home page.
  • the method for pre-downloading the structure codes of multiple pages to be displayed includes:
  • the web page loading method provided by the present invention has the following beneficial effects:
  • the structure codes of multiple pages to be displayed are pre-downloaded, and the downloaded structure codes are stored in the same HTML file in units of pages, and the web page address is associated with the corresponding web page structure. Differentiate the structure of each page, so that the style attribute control can arrange multiple page structures according to the different identifiers.
  • the page switching operation is executed by detecting the page switching instruction.
  • the specific process is to switch the target page structure to the nearest position of the home page to simulate the native switching animation when the switching conditions are met, and the target page structure is gradually cut into At the same time, the home page is gradually cut out and hidden, until the target page structure is completely cut into the call to the web control to access the associated web page address to sequentially perform dynamic data request rendering and display the complete page view.
  • the present invention can significantly reduce the number of times that web controls are called to load pages.
  • it When entering the functional module, it only needs to be loaded once to get all to be displayed.
  • the complete arrangement of the page structure effectively reduces the waiting time for page switching, and finally makes the user experience of the hybrid mode mobile application in terms of page display closer to that of the originally developed application.
  • Another aspect of the present invention provides a web page loading device, which is applied to the web page loading method described in the above technical solution, and the device includes:
  • the loading unit is used to pre-download the structure code of multiple pages to be displayed, and write the same HTML file with the page as a unit;
  • the page identification unit is used for associating the webpage address of each page structure, and simultaneously distinguishing the page structure separately;
  • the control unit is used to call the style attribute control to arrange the multiple pages horizontally or vertically according to the identification sequence;
  • the homepage display unit is used to load the dynamic data of the homepage page by automatically accessing the associated webpage address through the web control, so that the homepage page is displayed while the rest of the page structure is hidden;
  • the switching processing unit is used to detect the page switching instruction of the user to obtain the identifier of the target page structure, and switch the target page structure to the nearest position of the home page based on the identifier;
  • Animation unit used to gradually cut in and reveal the target page structure by simulating native switching animation when the switching conditions are met, and at the same time gradually cut out and hide the home page;
  • the switching unit is used until the target page structure is completely cut in, and the associated web page address is accessed through the web control to sequentially perform dynamic data request rendering and display a complete page view.
  • it also includes:
  • Cycle unit when the view of the target page is completely displayed, it is defined as the home page, and the processing unit is switched in response again.
  • the switching processing unit is specifically configured to automatically lock the identification of the target page when the next page switching instruction/previous page return instruction is detected, and at the same time extract the associated page based on the identification structure and store it in an adjacent position of the home page Next, to update and adjust the arrangement of each page structure;
  • the adjacent position next to the home page refers to a position horizontally connected with the home page, or the nearest lower position of the home page.
  • the switching unit is specifically configured to download the structure codes of all pages to be displayed at one time based on the current visit, and write them into the same HTML file in units of pages.
  • the beneficial effects of the web page loading device provided by the present invention are the same as the beneficial effects of the web page loading method provided by the above technical solutions, and will not be repeated here.
  • a third aspect of the present invention provides a smart device, including the web page loading device described in the above technical solution.
  • the beneficial effects of the smart device provided by the present invention are the same as the beneficial effects of the web page loading device provided by the above technical solutions, and will not be repeated here.
  • FIG. 1 is a schematic flowchart of a webpage loading method in Embodiment 1 of the present invention
  • Embodiment 1 of the present invention is a schematic diagram of the horizontal arrangement of page structures in Embodiment 1 of the present invention.
  • FIG. 3 is a schematic diagram of switching the target page structure to the nearest position of the home page in the first embodiment of the present invention
  • FIG. 4 is a schematic diagram of the process of cutting the target page structure into the home page in the first embodiment of the present invention
  • FIG. 5 is a schematic diagram showing the structure of the target page completely cut into and displayed in the first embodiment of the present invention
  • Fig. 6 is a structural block diagram of a web page loading device in the second embodiment of the present invention.
  • This embodiment provides a web page loading method, including:
  • Step S1 pre-download the structure codes of multiple pages to be displayed, for example, download the structure codes of all pages to be displayed at one time based on the current visit, and write the same HTML file in units of pages;
  • step S2 associate the structure of each page Web page address, and distinguish the page structure separately;
  • step S3, call the style attribute control to arrange multiple page structures horizontally or vertically according to the identification order;
  • step S4 automatically access the associated web page address through the web control to load the home page Dynamic data, so that the home page is displayed while the rest of the page structure is hidden;
  • step S5 the user's page switching instruction is detected to obtain the identification of the target page structure, and the target page structure is switched to the nearest position of the home page based on the identification;
  • step S6 when the switching conditions are met, the target page structure is gradually cut in and revealed by simulating the native switching animation, while the home page is gradually cut out and hidden;
  • step S7 until the target page structure is completely cut in, the associated webpage address is accessed through the web control to
  • the structure codes of multiple pages to be displayed are pre-downloaded, and the downloaded structure codes are stored in the same HTML file in units of pages, and the web page address is associated with the corresponding web page structure. Then make a distinguishing mark for each page structure, so that the style attribute control can arrange multiple page structures according to the distinguishing mark.
  • the page switching operation is executed by detecting the page switching instruction. The specific process is to switch the target page structure to the nearest position of the home page to simulate the native switching animation and gradually change the target page structure when the switching conditions are met. Cut in and reveal, and at the same time, gradually cut out and hide the home page until the target page structure is completely cut in to call the web control to access the associated web page address to sequentially perform dynamic data request rendering and display the complete page view.
  • this embodiment can significantly reduce the number of times that the web control is called to load the page.
  • the web control When entering the functional module, it only needs to be loaded once to get all waiting.
  • the complete arrangement of the page structure of the display page effectively reduces the waiting time for page switching, and finally makes the user experience of the hybrid mode mobile application in terms of page display closer to the original developed application.
  • the above-mentioned embodiment further includes:
  • step S8 when the view of the target page is fully displayed, it is defined as the home page, and step S5 is returned to.
  • steps S5 to S7 can be repeatedly executed through the above cycle setting, so that multiple pre-downloaded page structures can be repeatedly called to meet the user's page switching requirements.
  • the above-mentioned page switching instruction includes a next page switching instruction and a previous page returning instruction.
  • detecting the user's page switching instruction to obtain the identifier of the target page structure, and switching the target page structure to the nearest location of the home page based on the identifier includes:
  • the logo of the target page structure is automatically locked, and the related pages are extracted based on the logo structure and stored next to the adjacent position of the home page to update and adjust the arrangement of each page structure ;
  • the adjacent position next to the home page refers to the position that is horizontally connected with the home page, or the nearest lower position of the home page.
  • FIG. 2-5 When the user opens the mobile application, the structure codes of the three pages to be displayed are downloaded at one time, and the pages are written into the same HTML file in units of pages and marked as page1. page2 and page3, and then call the style attribute control to arrange the three page structures horizontally or vertically. For ease of understanding, the horizontal arrangement is used as an example.
  • Page1 is at the homepage position. The first time the web control loads the page, page1 is displayed. , The remaining page2 and page3 are in a hidden state. As shown in Figure 2, when the user’s page switching instruction is detected, such as the switching instruction from page1 to page3, the page arrangement structure is adjusted by calling the style attribute control.
  • this embodiment provides a web page loading device, including:
  • the loading unit 1 is used to pre-download the structure codes of multiple pages to be displayed, and write the same HTML file with the page as a unit;
  • the page identification unit 2 is used for associating the webpage address of each page structure, and simultaneously distinguishing the page structure separately;
  • the control unit 3 is used to call the style attribute control to arrange multiple pages horizontally or vertically according to the identification sequence;
  • the home page display unit 4 is used to automatically access the associated web page address to load the dynamic data of the home page through the web control, so that the home page is displayed and the rest of the page structure is hidden;
  • the switching processing unit 5 is configured to detect the page switching instruction of the user to obtain the identifier of the target page structure, and switch the target page structure to the nearest position of the home page based on the identifier;
  • the animation unit 6 is used to gradually cut in and reveal the target page structure by simulating the native switch animation when the switching conditions are met, and at the same time gradually cut out and hide the home page;
  • the switching unit 7 is used to perform dynamic data request rendering and display a complete page view in turn by accessing the associated web page address through the web control until the target page structure is completely cut in.
  • it also includes:
  • Cyclic unit 8 when the view of the target page is fully displayed, it is defined as the home page, and the processing unit is switched in response again.
  • the switching processing unit 5 is specifically configured to automatically lock the identification of the target page when the next page switching instruction/previous page return instruction is detected, and at the same time extract the associated page based on the identification structure and store it next to the home page To update and adjust the arrangement of each page structure;
  • the adjacent position next to the home page refers to the position that is horizontally connected with the home page, or the nearest lower position of the home page.
  • 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 them into the same HTML file in units of pages.
  • the beneficial effects of the web page loading device provided in the embodiment of the present invention are the same as the beneficial effects of the web page loading method provided in the first embodiment above, and will not be repeated here.
  • This embodiment provides a smart device, which includes the web page loading device described in the foregoing embodiment.
  • the beneficial effects of the smart device provided by the embodiment of the present invention are the same as the beneficial effects of the web page loading apparatus provided in the first embodiment above, and will not be repeated here.
  • the above-mentioned inventive method can be implemented by a program instructing relevant hardware.
  • the above-mentioned program can be stored in a computer-readable storage medium.
  • the storage medium may be: ROM/RAM, magnetic disk, optical disk, memory card, etc.

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

一种网页加载方法及其装置、智能设备，涉及移动应用技术领域，能够实现混合模式移动应用在页面展示方面的用户体验更接近于原生开发的应用。该方法包括：预下载多个待显示页面的结构代码，并以页面为单元写入同一个HTML文件（S1）；关联各页面结构的网页地址，同时分别对所述页面结构做区别标识（S2）；调用样式属性控件根据标识顺序对多个页面结构做水平排列或者垂直排列（S3）；通过web控件自动访问关联的网页地址加载首页页面的动态数据（S4）；侦测用户的页面切换指令将目标页面结构切换至首页页面最邻近位置处（S5）；当满足切换条件时通过模拟原生切换动画将目标页面逐步切入显现，同时将首页页面逐渐切出隐藏（S6）；直至目标页面结构完全切入，通过web控件进行动态数据的请求渲染并展示完全的页面视图（S7）。

Description

一种网页加载方法及其装置、智能设备 技术领域
本发明涉及移动应用技术领域，尤其涉及一种网页加载方法及其装置、智能设备。
背景技术
混合模式移动应用(Hybrid App)，是指介于web-app、native-app这两者之间的app，Hybrid App同时使用了程序语言与网页语言共同开发制作，程序语言(Native)是客户端应用的基石，在应用开发时需根据终端搭载的操作系统选择对应的开发语言，比如Android操作系统需使用java语言开发，iOS操作系统需使用Objective-C语言开发，程序语言开发编译的客户端应用需要安装到终端上运行，网页语言(Html)开发编译的服务端应用部署在服务端或封装在客户端应用中，无需区分终端的操作系统，具备跨平台的特性，在使用时客户端应用通过Web控件加载网页语言开发的网页资源展示网页。可见，混合模式移动应用兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。
在混合模式移动应用中，其客户端应用对网页页面的展示包括两个部分，分别为页面结构部分和动态数据部分，一般来说显示页面时，客户端应用会通过Web控件加载页面结构对应的网页地址，加载完成后通过数据请求获取动态数据，并根据返回的动态数据完成页面的完全展示；当用户触发切换页面操作时，通过当前Web控件或新建Web控件的方式加载下一个页面对应的网页地址，依次进行动态数据的请求渲染并展示完全页面视图。
在实际应用中发现，混合模式移动应用在加载显示页面时存在下述问题：由于Web控件对网页地址的加载和页面资源的渲染需要耗费一段时间，此阶段会导致页面处于无内容状态，尤其是在切换页面时更加明显，通常显示为白屏等待状态，综上，混合模式开发下网页语言部分的页面展示实现技术相 较于原生开发存在体验上的差距。
发明内容
本发明的目的在于提供一种网页加载方法及其装置、智能设备，能够实现混合模式移动应用在页面展示方面的用户体验更接近于原生开发的应用。
为了实现上述目的，本发明的一方面提供一种网页加载方法，包括：
步骤S1，预下载多个待显示页面的结构代码，并以页面为单元写入同一个HTML文件；
步骤S2，关联各页面结构的网页地址，同时分别对所述页面结构做区别标识；
步骤S3，调用样式属性控件根据标识顺序对多个所述页面结构做水平排列或者垂直排列；
步骤S4，通过web控件自动访问关联的网页地址加载首页页面的动态数据，使得首页页面被展示而其余页面结构被隐藏；
步骤S5，侦测用户的页面切换指令以获取目标页面结构的标识，基于该标识将目标页面结构切换至首页页面最邻近位置处；
步骤S6，当满足切换条件时通过模拟原生切换动画将目标页面逐步切入显现，同时将首页页面逐渐切出隐藏；
步骤S7，直至目标页面结构完全切入，通过web控件访问关联的网页地址依次进行动态数据的请求渲染并展示完全的页面视图。
优选地，还包括：
步骤S8，当目标页面的视图被完全展示后将其定义为首页页面，返回执行步骤S5。
具体地，所述页面切换指令包括下一页面切换指令和上一页面返回指令。
优选地，所述侦测用户的页面切换指令以获取目标页面结构的标识，基于该标识将目标页面结构切换至首页页面最邻近位置处的方法包括：
当侦测到下一页面切换指令/上一页面返回指令时自动锁定目标页面结构 的标识，同时基于该标识结构抽取关联页面存放于首页页面的相邻位置旁，以更新调整各页面结构的排列；
所述首页页面的相邻位置旁是指与首页页面水平衔接的位置处，或者首页页面最邻近的下方位置处。
优选地，所述预下载多个待显示页面的结构代码的方法包括：
基于当前访问一次性下载全部待显示页面的结构代码。
与现有技术相比，本发明提供的网页加载方法具有以下有益效果：
本发明提供的网页加载方法中，通过预下载多个待显示页面的结构代码，并将下载的结构代码以页面为单元共同存储在同一HTML文件中，同时将网页地址与对应网页结构关联后再对各个页面结构做区别标识，使得样式属性控件能够给根据区别标识对多个页面结构做顺序排列，用户在启动移动应用时为了保证较佳地使用体验，需将首页页面设置成自动被加载渲染的模式，之后，通过侦测页面切换指令来执行页面切换操作，具体过程为，将目标页面结构切换至首页页面最邻近位置处，以在满足切换条件时模拟原生切换动画将目标页面结构逐步切入显现，同时将首页页面逐渐切出隐藏，直至目标页面结构完全切入调用web控件访问关联的网页地址依次进行动态数据的请求渲染并展示完全的页面视图。
可见，相比较于现有技术中采用页面与HTML文件数量一一对应的技术方案，本发明能够显著减少调用web控件加载页面的次数，在进入功能模块时只需一次加载即可得到全部待显示页面的完整排列页面结构，进而有效减少了页面切换的等待时间，最终使得混合模式移动应用在页面展示方面的用户体验更接近于原生开发的应用。
本发明的另一方面提供一种网页加载装置，应用于上述技术方案所述的网页加载方法中，所述装置包括：
加载单元，用于预下载多个待显示页面的结构代码，并以页面为单元写入同一个HTML文件；
页面标识单元，用于关联各页面结构的网页地址，同时分别对所述页面 结构做区别标识；
控制单元，用于调用样式属性控件根据标识顺序对多个所述页面做水平排列或者垂直排列；
首页展示单元，用于通过web控件自动访问关联的网页地址加载首页页面的动态数据，使得首页页面被展示而其余页面结构被隐藏；
切换处理单元，用于侦测用户的页面切换指令以获取目标页面结构的标识，基于该标识将目标页面结构切换至首页页面最邻近位置处；
动画单元，用于当满足切换条件时通过模拟原生切换动画将目标页面结构逐步切入显现，同时将首页页面逐渐切出隐藏；
切换单元，用于直至目标页面结构完全切入，通过web控件访问关联的网页地址依次进行动态数据的请求渲染并展示完全的页面视图。
优选地，还包括：
循环单元，当目标页面的视图被完全展示后将其定义为首页页面，重新响应切换处理单元。
优选地，所述切换处理单元具体用于当侦测到下一页面切换指令/上一页面返回指令时自动锁定目标页面的标识，同时基于该标识结构抽取关联页面存放于首页页面的相邻位置旁，以更新调整各页面结构的排列；
所述首页页面的相邻位置旁是指与首页页面水平衔接的位置处，或者首页页面最邻近的下方位置处。
优选地，所述切换单元具体用于基于当前访问一次性下载全部待显示页面的结构代码，并以页面为单元写入同一个HTML文件中。
与现有技术相比，本发明提供的网页加载装置的有益效果与上述技术方案提供的网页加载方法的有益效果相同，在此不做赘述。
本发明的第三方面提供一种智能设备，包括上述技术方案所述的网页加载装置。
与现有技术相比，本发明提供的智能设备的有益效果与上述技术方案提供的网页加载装置的有益效果相同，在此不做赘述。
附图说明
此处所说明的附图用来提供对本发明的进一步理解，构成本发明的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：
图1为本发明实施例一中网页加载方法的流程示意图；
图2为本发明实施例一中页面结构水平排列的示意图；
图3为本发明实施例一中将目标页面结构切换至首页页面最邻近位置处的示意图；
图4为本发明实施例一中将目标页面结构切入首页页面切出的过程示意图；
图5为本发明实施例一中将目标页面结构完全切入展示的示意图；
图6为本发明实施例二中网页加载装置的结构框图。
附图标记：
1-加载单元，                      2-页面标识单元；
3-控制单元，                      4-首页展示单元；
5-切换处理单元，                  6-动画单元；
7-切换单元，                      8-循环单元。
具体实施方式
为使本发明的上述目的、特征和优点能够更加明显易懂，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动的前提下所获得的所有其它实施例，均属于本发明保护的范围。
实施例一
请参阅图1，本实施例提供一种网页加载方法，包括：
步骤S1，预下载多个待显示页面的结构代码，例如，基于当前访问一次性下载全部待显示页面的结构代码，并以页面为单元写入同一个HTML文件；步骤S2，关联各页面结构的网页地址，同时分别对页面结构做区别标识；步骤S3，调用样式属性控件根据标识顺序对多个页面结构做水平排列或者垂直排列；步骤S4，通过web控件自动访问关联的网页地址加载首页页面的动态数据，使得首页页面被展示而其余页面结构被隐藏；步骤S5，侦测用户的页面切换指令以获取目标页面结构的标识，基于该标识将目标页面结构切换至首页页面最邻近位置处；步骤S6，当满足切换条件时通过模拟原生切换动画将目标页面结构逐步切入显现，同时将首页页面逐渐切出隐藏；步骤S7，直至目标页面结构完全切入，通过web控件访问关联的网页地址依次进行动态数据的请求渲染并展示完全的页面视图。
本实施例提供的网页加载方法中，通过预下载多个待显示页面的结构代码，并将下载的结构代码以页面为单元共同存储在同一HTML文件中，同时将网页地址与对应网页结构关联后再对各个页面结构做区别标识，使得样式属性控件能够给根据区别标识对多个页面结构做顺序排列，用户在启动移动应用时为了保证较佳地使用体验，需将首页页面设置成自动被加载渲染的模式，之后，通过侦测页面切换指令来执行页面切换操作，具体过程为，将目标页面结构切换至首页页面最邻近位置处，以在满足切换条件时模拟原生切换动画将目标页面结构逐步切入显现，同时将首页页面逐渐切出隐藏，直至目标页面结构完全切入调用web控件访问关联的网页地址依次进行动态数据的请求渲染并展示完全的页面视图。
可见，相比较于现有技术中采用页面与HTML文件数量一一对应的技术方案，本实施例能够显著减少调用web控件加载页面的次数，在进入功能模块时只需一次加载即可得到全部待显示页面的完整排列页面结构，进而有效减少了页面切换的等待时间，最终使得混合模式移动应用在页面展示方面的用户体验更接近于原生开发的应用。
优选地，上述实施例还包括：
步骤S8，当目标页面的视图被完全展示后将其定义为首页页面，返回执行步骤S5。当目标页面被完全加载显示后，通过上述循环设置能够重复执行步骤S5至步骤S7，使得预下载的多个页面结构能够被反复调用，满足用户的页面切换需求。
示例性地，上述页面切换指令包括下一页面切换指令和上一页面返回指令。
具体地，上述实施例中侦测用户的页面切换指令以获取目标页面结构的标识，基于该标识将目标页面结构切换至首页页面最邻近位置处的方法包括：
当侦测到下一页面切换指令/上一页面返回指令时自动锁定目标页面结构的标识，同时基于该标识结构抽取关联页面存放于首页页面的相邻位置旁，以更新调整各页面结构的排列；首页页面的相邻位置旁是指与首页页面水平衔接的位置处，或者首页页面最邻近的下方位置处。通过对页面排列的就近调整，能够减少从首页页面切换至目标页面的过程等待时间，使得页面的切换过程更加顺畅，提高了用户体验。
具体实施时，请参阅图2-5，当用户打开移动应用时一次性下载3个待显示页面的结构代码，同时以页面为单元写入同一个HTML文件中，并分别将其标识为page1、page2和page3，接着调用样式属性控件将3个页面结构做水平排列或者垂直排列，为便于理解现以水平排列做示例说明，page1处于首页位置，Web控件第一次加载网页使page1处于被展示状态，其余page2和page3处于被隐藏的状态，如图2所述，当侦测用户的页面切换指令时，如从page1切换到page3的切换指令，通过调用样式属性控件对页面的排列结构进行调整，使得page3切换至与page1衔接的临近位置处，如图3所述，并在满足切换条件时通过模拟原生切换动画将page3逐步切入显现，以及将page1逐渐切出隐藏，如图4所述，直至page3被完全载入时切入动画完成，此时page1隐藏，降低页面结构的层叠排列，依次进行动态数据的请求渲染并展示完全页面视图，如图5所述。
实施例二
请参阅图1和图6，本实施例提供一种网页加载装置，包括：
加载单元1，用于预下载多个待显示页面的结构代码，并以页面为单元写入同一个HTML文件；
页面标识单元2，用于关联各页面结构的网页地址，同时分别对页面结构做区别标识；
控制单元3，用于调用样式属性控件根据标识顺序对多个页面做水平排列或者垂直排列；
首页展示单元4，用于通过web控件自动访问关联的网页地址加载首页页面的动态数据，使得首页页面被展示而其余页面结构被隐藏；
切换处理单元5，用于侦测用户的页面切换指令以获取目标页面结构的标识，基于该标识将目标页面结构切换至首页页面最邻近位置处；
动画单元6，用于当满足切换条件时通过模拟原生切换动画将目标页面结构逐步切入显现，同时将首页页面逐渐切出隐藏；
切换单元7，用于直至目标页面结构完全切入，通过web控件访问关联的网页地址依次进行动态数据的请求渲染并展示完全的页面视图。
优选地，还包括：
循环单元8，当目标页面的视图被完全展示后将其定义为首页页面，重新响应切换处理单元。
优选地，切换处理单元5具体用于当侦测到下一页面切换指令/上一页面返回指令时自动锁定目标页面的标识，同时基于该标识结构抽取关联页面存放于首页页面的相邻位置旁，以更新调整各页面结构的排列；
首页页面的相邻位置旁是指与首页页面水平衔接的位置处，或者首页页面最邻近的下方位置处。
具体地，切换单元7具体用于基于当前访问一次性下载全部待显示页面的结构代码，并以页面为单元写入同一个HTML文件中。
与现有技术相比，本发明实施例提供的网页加载装置的有益效果与上述 实施例一提供的网页加载方法的有益效果相同，在此不做赘述。
实施例三
本实施例提供一种智能设备，其包括上述实施例所述的网页加载装置。
与现有技术相比，本发明实施例提供的智能设备的有益效果与上述实施例一提供的网页加载装置的有益效果相同，在此不做赘述。
本领域普通技术人员可以理解，实现上述发明方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，上述程序可以存储于计算机可读取存储介质中，该程序在执行时，包括上述实施例方法的各步骤，而的存储介质可以是：ROM/RAM、磁碟、光盘、存储卡等。
以上，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以所述权利要求的保护范围为准。

Claims (10)

  1. 一种网页加载方法，其特征在于，包括：
    步骤S1，预下载多个待显示页面的结构代码，并以页面为单元写入同一个HTML文件；
    步骤S2，关联各页面结构的网页地址，同时分别对所述页面结构做区别标识；
    步骤S3，调用样式属性控件根据标识顺序对多个所述页面结构做水平排列或者垂直排列；
    步骤S4，通过web控件自动访问关联的网页地址加载首页页面的动态数据，使得首页页面被展示而其余页面结构被隐藏；
    步骤S5，侦测用户的页面切换指令以获取目标页面结构的标识，基于该标识将目标页面结构切换至首页页面最邻近位置处；
    步骤S6，当满足切换条件时通过模拟原生切换动画将目标页面结构逐步切入显现，同时将首页页面逐渐切出隐藏；
    步骤S7，直至目标页面结构完全切入，通过web控件访问关联的网页地址依次进行动态数据的请求渲染并展示完全的页面视图。
  2. 根据权利要求1所述的方法，其特征在于，还包括：
    步骤S8，当目标页面的视图被完全展示后将其定义为首页页面，返回执行步骤S5。
  3. 根据权利要求1所述的方法，其特征在于，所述页面切换指令包括下一页面切换指令和上一页面返回指令。
  4. 根据权利要求3所述的方法，其特征在于，所述侦测用户的页面切换指令以获取目标页面结构的标识，基于该标识将目标页面结构切换至首页页面最邻近位置处的方法包括：
    当侦测到下一页面切换指令/上一页面返回指令时自动锁定目标页面结构 的标识，同时基于该标识结构抽取关联页面存放于首页页面的相邻位置旁，以更新调整各页面结构的排列；
    所述首页页面的相邻位置旁是指与首页页面水平衔接的位置处，或者首页页面最邻近的下方位置处。
  5. 根据权利要求1所述的方法，其特征在于，所述预下载多个待显示页面的结构代码的方法包括：
    基于当前访问一次性下载全部待显示页面的结构代码。
  6. 一种网页加载装置，其特征在于，包括：
    加载单元，用于预下载多个待显示页面的结构代码，并以页面为单元写入同一个HTML文件；
    页面标识单元，用于关联各页面结构的网页地址，同时分别对所述页面结构做区别标识；
    控制单元，用于调用样式属性控件根据标识顺序对多个所述页面做水平排列或者垂直排列；
    首页展示单元，用于通过web控件自动访问关联的网页地址加载首页页面的动态数据，使得首页页面被展示而其余页面结构被隐藏；
    切换处理单元，用于侦测用户的页面切换指令以获取目标页面结构的标识，基于该标识将目标页面结构切换至首页页面最邻近位置处；
    动画单元，用于当满足切换条件时通过模拟原生切换动画将目标页面结构逐步切入显现，同时将首页页面逐渐切出隐藏；
    切换单元，用于直至目标页面结构完全切入，通过web控件访问关联的网页地址依次进行动态数据的请求渲染并展示完全的页面视图。
  7. 根据权利要求6所述的装置，其特征在于，还包括：
    循环单元，当目标页面的视图被完全展示后将其定义为首页页面，重新 响应切换处理单元。
  8. 根据权利要求7所述的装置，其特征在于，所述切换处理单元具体用于当侦测到下一页面切换指令/上一页面返回指令时自动锁定目标页面的标识，同时基于该标识结构抽取关联页面存放于首页页面的相邻位置旁，以更新调整各页面结构的排列；
    所述首页页面的相邻位置旁是指与首页页面水平衔接的位置处，或者首页页面最邻近的下方位置处。
  9. 根据权利要求6所述的装置，其特征在于，所述切换单元具体用于基于当前访问一次性下载全部待显示页面的结构代码，并以页面为单元写入同一个HTML文件中。
  10. 一种智能设备，其特征在于，包括权利要求6-9中任一项所述的网页加载展示装置。
PCT/CN2019/109120 2019-04-01 2019-09-29 一种网页加载方法及其装置、智能设备 WO2020199544A1 (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CA3176866A CA3176866A1 (en) 2019-04-01 2019-09-29 Webpage loading method, apparatus, and smart device

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201910258588.3A CN111857855B (zh) 2019-04-01 2019-04-01 一种网页加载方法及其装置、智能设备
CN201910258588.3 2019-04-01

Publications (1)

Publication Number Publication Date
WO2020199544A1 true WO2020199544A1 (zh) 2020-10-08

Family

ID=72664847

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2019/109120 WO2020199544A1 (zh) 2019-04-01 2019-09-29 一种网页加载方法及其装置、智能设备

Country Status (3)

Country Link
CN (1) CN111857855B (zh)
CA (1) CA3176866A1 (zh)
WO (1) WO2020199544A1 (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112667939A (zh) * 2021-01-04 2021-04-16 天津中新智冠信息技术有限公司 网页刷新方法、装置、电子设备以及存储介质
CN113360121A (zh) * 2021-07-09 2021-09-07 帆软软件有限公司 分页展示及页间动画的可视化设计方法
US11663285B2 (en) 2021-09-06 2023-05-30 Microsoft Technology Licensing, Llc Webpage management in native application

Families Citing this family (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112989249A (zh) * 2021-02-19 2021-06-18 北京皮尔布莱尼软件有限公司 一种页面显示方法、计算设备及存储介质
CN114138372B (zh) * 2021-12-06 2024-06-14 中国工商银行股份有限公司 前端组件加载方法及装置
CN114610305B (zh) * 2022-03-11 2023-11-10 数坤科技(宁波)有限公司 隐形网页资源的开发方法、装置、电子设备及介质
CN115640477B (zh) * 2022-08-26 2024-05-21 百度在线网络技术（北京）有限公司 应用程序首页的内容推荐方法、装置、设备、介质及产品

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103995884A (zh) * 2014-05-29 2014-08-20 北京中电普华信息技术有限公司 一种混合应用页面的切换方法及系统
CN104462567A (zh) * 2014-12-26 2015-03-25 北京奇虎科技有限公司 web页面的切换方法和装置及综合页面提供装置
US20150095836A1 (en) * 2012-06-13 2015-04-02 Tencent Technology (Shenzhen) Company Limited Method, apparatus and computer storage medium for switching pages
CN105426538A (zh) * 2015-12-21 2016-03-23 北京奇虎科技有限公司 页面切换方法及装置
US20160283606A1 (en) * 2013-09-17 2016-09-29 Beijing Qihoo Technology Company Limited Method for performing webpage loading, device and browser thereof
CN108427597A (zh) * 2018-03-16 2018-08-21 崔红保 加速页面渲染的方法及装置

Family Cites Families (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102073686A (zh) * 2010-12-24 2011-05-25 汉柏科技有限公司 一种页面文件的垂直动态加载方法及装置
US8595752B1 (en) * 2011-06-13 2013-11-26 Google Inc. Hybrid application message passing
CN103051684B (zh) * 2012-12-07 2017-03-15 百度在线网络技术（北京）有限公司 将网站转化为Web App进行展示的方法、系统和装置
US9639263B2 (en) * 2014-08-05 2017-05-02 Weebly, Inc. Native overlay for rapid editing of web content
CN107729452B (zh) * 2017-10-09 2020-07-10 武汉斗鱼网络科技有限公司 网页加载方法、装置、电子设备及计算机可读存储介质

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20150095836A1 (en) * 2012-06-13 2015-04-02 Tencent Technology (Shenzhen) Company Limited Method, apparatus and computer storage medium for switching pages
US20160283606A1 (en) * 2013-09-17 2016-09-29 Beijing Qihoo Technology Company Limited Method for performing webpage loading, device and browser thereof
CN103995884A (zh) * 2014-05-29 2014-08-20 北京中电普华信息技术有限公司 一种混合应用页面的切换方法及系统
CN104462567A (zh) * 2014-12-26 2015-03-25 北京奇虎科技有限公司 web页面的切换方法和装置及综合页面提供装置
CN105426538A (zh) * 2015-12-21 2016-03-23 北京奇虎科技有限公司 页面切换方法及装置
CN108427597A (zh) * 2018-03-16 2018-08-21 崔红保 加速页面渲染的方法及装置

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112667939A (zh) * 2021-01-04 2021-04-16 天津中新智冠信息技术有限公司 网页刷新方法、装置、电子设备以及存储介质
CN113360121A (zh) * 2021-07-09 2021-09-07 帆软软件有限公司 分页展示及页间动画的可视化设计方法
CN113360121B (zh) * 2021-07-09 2022-06-03 帆软软件有限公司 分页展示及页间动画的可视化设计方法
US11663285B2 (en) 2021-09-06 2023-05-30 Microsoft Technology Licensing, Llc Webpage management in native application

Also Published As

Publication number Publication date
CN111857855B (zh) 2021-10-29
CA3176866A1 (en) 2020-10-08
CN111857855A (zh) 2020-10-30

Similar Documents

Publication Publication Date Title
WO2020199544A1 (zh) 一种网页加载方法及其装置、智能设备
CN110020292B (zh) 网页内容提取方法以及终端设备
CN109254773A (zh) 骨架页面生成方法、装置、设备和存储介质
WO2020131756A1 (en) Method and apparatus for browser application to load first screen of web page
CN105955888B (zh) 一种页面调试预览方法及系统
WO2020019458A1 (zh) 混合应用的页面切换方法、框架、计算机设备及存储介质
CN111367518B (zh) 页面布局方法、装置、计算设备及计算机存储介质
CN112631591B (zh) 表元素联动方法、装置、设备与计算机可读存储介质
CN105528389A (zh) 一种基于手机浏览器内核的逻辑控制方法及装置
CN105094559A (zh) 显示处理方法及电子设备
CN109582890A (zh) 页面加载方法、装置、计算机设备及存储介质
CN110007831B (zh) 一种翻页控制方法、装置及终端设备
CN111949841A (zh) 列表展示方法及装置、计算机设备和计算机可读介质
CN103309741A (zh) 调用插件功能的方法和装置
CN105159673A (zh) 一种设置控件样式的方法和装置
CN108897889A (zh) 一种网页优化方法、网页优化装置以及计算机设备
CN108920645A (zh) 智能设备页面显示的方法、装置、智能设备和存储介质
CN114968307A (zh) 控制程序的更新方法、终端设备及存储介质
CN114489619A (zh) 一种界面视图显示方法及终端设备、计算机可读存储介质
CN113010416A (zh) 银行柜面交易自动化测试方法及装置
CN111190574B (zh) 多级联动组件的选项选择方法、装置、设备和存储介质
CN112214404A (zh) 移动应用的测试方法、装置、存储介质及电子设备
CN112035106A (zh) 同源数据多平台同步方法、装置、介质及电子设备
CN112306838A (zh) 页面布局兼容性测试方法、装置、设备及可读存储介质
CN114356188B (zh) 一种实现页面元素拖拽的方法及计算机设备

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 19923637

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 19923637

Country of ref document: EP

Kind code of ref document: A1

32PN Ep: public notification in the ep bulletin as address of the adressee cannot be established

Free format text: NOTING OF LOSS OF RIGHTS PURSUANT TO RULE 112(1) EPC (EPO FORM 1205 DATED 22/04/2022)

ENP Entry into the national phase

Ref document number: 3176866

Country of ref document: CA

122 Ep: pct application non-entry in european phase

Ref document number: 19923637

Country of ref document: EP

Kind code of ref document: A1