WO2020019458A1 - 混合应用的页面切换方法、框架、计算机设备及存储介质 - Google Patents

混合应用的页面切换方法、框架、计算机设备及存储介质 Download PDF

Info

Publication number
WO2020019458A1
WO2020019458A1 PCT/CN2018/106487 CN2018106487W WO2020019458A1 WO 2020019458 A1 WO2020019458 A1 WO 2020019458A1 CN 2018106487 W CN2018106487 W CN 2018106487W WO 2020019458 A1 WO2020019458 A1 WO 2020019458A1
Authority
WO
WIPO (PCT)
Prior art keywords
page
data
hybrid application
data model
framework
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.)
Ceased
Application number
PCT/CN2018/106487
Other languages
English (en)
French (fr)
Inventor
邹国忠
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Ping An Technology Shenzhen Co Ltd
Original Assignee
Ping An Technology Shenzhen Co Ltd
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 Ping An Technology Shenzhen Co Ltd filed Critical Ping An Technology Shenzhen Co Ltd
Publication of WO2020019458A1 publication Critical patent/WO2020019458A1/zh
Anticipated expiration legal-status Critical
Ceased legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Definitions

  • the present application relates to the field of information processing technology, and in particular, to a method, a framework, a computer device, and a storage medium for page switching of a hybrid application.
  • Hybrid app is an application between web app and native app. It has both the good user interaction experience of native apps and the advantages of cross-platform development of web apps.
  • Hybrid apps include Native framework and javascript framework (a literal translation script language, hereinafter referred to as js), the two call each other and pass parameters to achieve the function of the entire hybrid application, of which the Vue framework is a progressive js framework, mainly used for user interface Build.
  • Native framework and javascript framework a literal translation script language, hereinafter referred to as js
  • each mecanic page built by the Vue framework maintains a separate data model, so data between réelle pages cannot be directly shared and manipulated.
  • the data cannot be updated in time without reloading the page.
  • the lower layer If the réelle page needs to be updated, it needs to be reloaded through reload (). Under this method, the page will often appear blank when reloading, and the use effect is poor.
  • the data of the JS framework and the native framework in a hybrid application cannot be shared and manipulated, and user data is generally stored locally, resulting in leakage or tampering of user data.
  • the purpose of this application is to provide a page switching method, framework, computer equipment, and storage medium for hybrid applications, which are used to solve the above-mentioned problems in the prior art.
  • the present application provides a page switching method for a hybrid application.
  • the page switching method of the hybrid application includes the following steps: in response to the hybrid application startup operation, launching the hybrid application to create a data model corresponding to the hybrid application; and in response to the page conversion operation, determining whether the first page and the second page are at the same information level, The page conversion operation is used to jump from the first page to the second page.
  • the data storage interface provided by the native framework of the hybrid application is called to transfer the data of the first page.
  • the hybrid application Store in the data model, control the hybrid application to jump from the first page to the second page, and call the data read interface provided by the native framework to read the data of the first page from the data model and render it; when the first page At a different information level from the second page, and when it is detected that the data of the first page is modified, the data storage interface provided by the native framework is called, the data of the first page is stored in the data model, and the refresh interface provided by the native framework is called To receive the trigger event of the native framework and call the data read interface provided by the native framework Reading the data of the first page from the data model and rendering it, wherein the trigger event is an event in which the native framework closes the first page and triggers the global method of the second page in response to the refresh interface call event; and in response to the hybrid application closing Operation, close the hybrid application, clear the data model.
  • the present application further provides a Vue framework of a hybrid application suitable for implementing the page switching method of the hybrid application provided by the present application.
  • the hybrid application includes a native framework and a Vue framework.
  • the Vue framework in this application includes: a data model creation module for responding to the hybrid application startup operation, launching the hybrid application, and creating a data model corresponding to the hybrid application; a page transition detection module for In response to the page conversion operation, it is determined whether the first page and the second page are at the same information level, wherein the page conversion operation is used to jump to the second page through the first page; the first page conversion module is used when the first page At the same information level as the second page, call the data storage interface provided by the native framework of the hybrid application to store the data of the first page into the data model, control the hybrid application to jump from the first page to the second page, and call
  • the data reading interface provided by the native framework reads the data of the first page from the data model and renders it; the second page conversion module is used when the first page and the second page are at different information levels, and the first page is detected When the data of a page is modified, the data storage interface provided by the native framework is
  • the data is stored in the data model, the refresh interface provided by the native framework is called, the trigger event of the native framework is received, the data read interface provided by the native framework is called, the data of the first page is read from the data model and rendered, and the trigger
  • the event is an event in which the native framework closes the first page and triggers the global method of the second page in response to the refresh interface call event; and the data model clearing module is used in response to the hybrid application closing operation, closing the hybrid application, and clearing the data model.
  • the present application further provides a computer device including a memory, a processor, and a computer program stored on the memory and executable on the processor.
  • a computer program stored on the memory and executable on the processor.
  • the hybrid application In response to the hybrid application startup operation, launch the hybrid application to create a data model corresponding to the hybrid application; and in response to the page conversion operation, determine whether the first page and the second page are at the same information level, where the page conversion operation is used to pass the first page Jump to the second page; when the first page and the second page are at the same information level, call the data storage interface provided by the native framework of the hybrid application, store the data of the first page into the data model, and control the hybrid application from the first One page jumps to the second page and calls the data reading interface provided by the native framework to read the data of the first page from the data model and render it; when the first page and the second page are at different information levels, and When the data of the first page is detected to be modified, the data storage interface provided by the native framework is called, the data of the first page is stored in the data model, the refresh interface provided by the native framework is called, the trigger event of the native framework is received, and the native framework is called The provided data reading interface reads the data of the first page from the data model
  • the present application further provides a computer-readable storage medium on which a computer program is stored, and when the program is executed by a processor, the following steps of a page switching method of a hybrid application are implemented:
  • the hybrid application In response to the hybrid application startup operation, launch the hybrid application to create a data model corresponding to the hybrid application; and in response to the page conversion operation, determine whether the first page and the second page are at the same information level, where the page conversion operation is used to pass the first page Jump to the second page; when the first page and the second page are at the same information level, call the data storage interface provided by the native framework of the hybrid application, store the data of the first page into the data model, and control the hybrid application from the first One page jumps to the second page and calls the data reading interface provided by the native framework to read the data of the first page from the data model and render it; when the first page and the second page are at different information levels, and When the data of the first page is detected to be modified, the data storage interface provided by the native framework is called, the data of the first page is stored in the data model, the refresh interface provided by the native framework is called, the trigger event of the native framework is received, and the native framework is called The provided data reading interface reads the data of the first page from the data model
  • the page switching method, framework, computer device, and storage medium of the hybrid application provided in this application create a data model corresponding to the hybrid application when the hybrid application is started, and the data model corresponds to the hybrid application, rather than a certain page.
  • the data operation interface provided by the framework operates on the data of the data model, which can directly share and manipulate data between pages.
  • the native framework when performing page conversion, first determine whether the first page and the second page are at the same information level, which belongs to At the same level of information, by calling the data storage interface provided by the native framework, the data of the first page is stored in the data model, and the hybrid application is controlled to jump from the first page to the second page, and call the data provided by the native framework to read Interface, which reads the data of the first page from the data model and renders it; when the first page and the second page are at different information levels and detects that the data of the first page is modified, the data storage provided by the native framework is called Interface to store the data of the first page into the data model, Using the refresh interface provided by the native framework, the native framework responds to the refresh interface invocation event, closes the first page and triggers the global method of the second page, receives the trigger event of the global method that triggered the native framework, and calls the data provided by the native framework to read Take the interface, read the data of the first page from the data model and render it, so that when the page is converted, there
  • FIG. 1 is a flowchart of a page switching method for a hybrid application in Embodiment 1 of the present application
  • FIG. 2 is a schematic block diagram of a Vue framework for a hybrid application in Embodiment 2 of the present application;
  • FIG. 3 is a hardware structural diagram of a computer device in Embodiment 3 of the present application.
  • Embodiment 1 of the present application provides a page switching method for a hybrid application.
  • the hybrid application includes a native framework and a javascript framework.
  • the javascript framework is used to implement and control the pages of the hybrid application.
  • the native framework is used to provide various data for the javascript framework.
  • the interface in particular, in this embodiment, the native framework provides a data manipulation interface for the javascript framework, and the data manipulation interface includes a data storage interface (saveData ()) and a data read interface (getData ()).
  • the javascript framework is a Vue framework
  • the main body of the page switching method is the Vue framework
  • the page of the hybrid application is a Vue page.
  • FIG. 1 is a flowchart of Embodiment 1 of the page switching method of the hybrid application provided by this application. As shown in FIG. 1, the page switching method of the hybrid application includes the following steps S101 to S105.
  • Step S101 In response to the hybrid application startup operation, launch the hybrid application and create a data model corresponding to the hybrid application.
  • the user operation is set to perform the startup operation of the hybrid application, for example, click the display icon of the hybrid application on the device interface, and the Vue framework starts the hybrid application.
  • the Vue framework first creates a data model corresponding to the hybrid application, such as , Preset the data model creation function, and encapsulate it into a callable function module, where the VUE framework calls this function module to create a data model, where the data structure of the data model can be based on the data of the page Feature setting, time page data storage.
  • the data model is created, it is preferably stored in the memory or cache of the device, for example, in the memory or cache of the mobile phone, in order to facilitate the rapid access and operation of data during the running of the hybrid application, and at the same time facilitate the hybrid
  • the data model is cleared.
  • the data model corresponding to the hybrid application is not maintained by separate pages.
  • the Vue framework can operate on the data in the data model through the data operation interface provided by the native framework, so that data can be shared and operated between pages. .
  • Step S102 In response to the page conversion operation, it is determined whether the first page and the second page are at the same information level.
  • the page conversion operation is used to jump from the first page to the second page, that is, when a Vue page is converted to another Vue page. Steps to detect the information-level relationship between the two pages.
  • the information hierarchy relationship between two pages includes two pages at the same information level, or the first page and the second page are at the upper and lower information layers, where the first page is the upper page and the second page is the lower page, for example,
  • the page hierarchy depth of a hybrid application is four levels, so two pages at the same information level means that the two pages are at the same page level depth. If the two pages are at the top and bottom information levels, the upper page is at the first level. At the level depth, the lower page is at the second page level depth.
  • Step S103 When the first page and the second page are at the same information level, the data storage interface provided by the native framework of the hybrid application is called, the data of the first page is stored in the data model, and the hybrid application is controlled to jump from the first page. Go to the second page and call the data read interface provided by the native framework to read the data of the first page from the data model and render it.
  • This step is for the page conversion between pages at the same information level.
  • the Vue framework calls the data storage interface saveData () provided by the native framework.
  • the data is stored in the data model, and then the hybrid application is controlled to jump from the first page to the second page, and then call the data reading interface getData () provided by the native framework to read the data of the first page from the data model and perform Rendering, that is, the Vue framework displays the read data on the page according to a predefined rule, thereby achieving data sharing between the first page and the second page.
  • Step S104 when the first page and the second page are at different information levels and it is detected that the data of the first page is modified, the data storage interface provided by the native framework is called to store the data of the first page into the data model, The refresh interface provided by the native framework is called, the trigger event of the native framework is received, the data read interface provided by the native framework is called, and the data of the first page is read from the data model and rendered.
  • This step is for the page conversion between pages at the upper and lower information levels.
  • the Vue framework detects that the data of the first page is modified, it first calls the native
  • the data storage interface saveData () provided by the framework stores the data of the first page into the data model corresponding to the hybrid application.
  • the Vue framework calls the refresh interface provided by the native framework.
  • the native framework calls the refresh interface according to the Vue framework. , Close the first page and trigger the global method of the Vue framework.
  • the Vue framework receives the trigger event, calls the data reading interface getData () provided by the native framework, reads the data of the hybrid application from the data model, and renders it.
  • the data of the second page is refreshed.
  • the hybrid application displays the lower page of the first page, that is, the second page is displayed, and the data in the second page has been updated.
  • the data update interface and / or data deletion interface provided by the native framework may be called to modify the data of the first page stored in the data model.
  • Step S105 In response to the hybrid application closing operation, the hybrid application is closed and the data model is cleared.
  • the Vue framework closes the hybrid application and clears the data model.
  • a data model corresponding to the hybrid application is created when the hybrid application is started, and the data model corresponds to the hybrid application, rather than corresponding to a certain page, through data operations provided by the native framework
  • the interface operates on the data of the data model, which can directly share and manipulate data between pages.
  • the information level relationship between the first page and the second page is first detected, when it belongs to the same level of information.
  • the model reads the data of the first page and renders it; when the first page and the second page are at different information levels, and the data of the first page is detected to be modified, the data storage interface provided by the native framework is called, and the first The data of a page is stored in the data model, and the refresh interface provided by the native framework is called.
  • the native framework In response to the refresh interface call event, the native framework closes the first page and triggers the global method of the second page, receives the trigger event of the global method that triggered the native framework, calls the data read interface provided by the native framework, and from the data model Read the data of the first page and render it, so that when the page is converted, there is no need to reload through reload (), but the data is directly read from the data model for rendering to avoid the page being blank when reloading; finally When closing the hybrid application, clearing the data model, that is, clearing the data model with the end of the life cycle of the hybrid application, ensures the security and timeliness of the data.
  • the data operation interface provided by the native framework for the javascript framework further includes a data update interface (updateData ()) and a data delete interface (deletData ()).
  • updateData a data update interface
  • deletData a data delete interface
  • a data update interface and / or a data deletion interface provided by the native framework is called to modify the data of the first page stored in the data model.
  • the user can modify the data of the current page, and the current page is the first page, and the page data modification operation is used to modify the data of the first page.
  • the page data modification operation is used to modify the data of the first page.
  • the user executes the page data modification operation to replace the data on the first page with new data, first call the data delete interface deleteData () to delete the original data on the first page, and then call the data update interface updateData () to update the corresponding data.
  • the new data is updated on the first page; when the user executes the page data modification operation to delete the data on the first page, the data deletion interface deleteData () is called directly to delete the original data to be deleted on the first page; when the user executes the When the page data modification operation adds data on the first page, the update interface updateData () is directly called to add the data to be updated on the first page. It makes the page refresh data of the hybrid application multi-page without reloading the page resources of the native webView.
  • the native framework is further configured to obtain the status information of the hybrid application, and store the obtained status information in a data model.
  • the status information includes the network status of the device running the hybrid application and / or the hybrid application.
  • Version number information so that while the js framework calls the interface provided by the native framework to add, delete, check, and modify data in the data model, the native framework can also store the network state or version number information in the data model in the data model by itself. In order to achieve data sharing and operation between the js framework and the native framework.
  • the second embodiment of the present application provides a Vue framework for a hybrid application that is suitable for implementing a page switching method of any of the hybrid applications provided in the present application.
  • the hybrid application includes a native framework and a javascript framework.
  • the javascript framework is used to implement and control the pages of the hybrid application.
  • the native framework is used to provide various data interfaces for the javascript framework.
  • the native framework is a javascript framework.
  • Provide a data operation interface which includes a data storage interface (saveData ()) and a data read interface (getData ()).
  • the javascript framework is a Vue framework.
  • the Vue framework includes a data model creation module 201, a page transition detection module 202, a first page transition module 203, a second page transition module 204, and a data model removal module 205.
  • the data model creation module 201 is configured to start a hybrid application in response to a hybrid application startup operation, and create a data model corresponding to the hybrid application.
  • the page transition detection module 202 is configured to determine whether the first page and the second page are at the same information level in response to the page transition operation.
  • the page transition operation is used to jump to the second page through the first page.
  • the first page conversion module 203 is used to call the data storage interface provided by the native framework of the hybrid application when the first page and the second page are at the same information level, to store the data of the first page into the data model, and control the hybrid application from The first page jumps to the second page and calls the data reading interface provided by the native framework to read the data of the first page from the data model and render it.
  • the second page conversion module 204 is configured to call the data storage interface provided by the native framework when the first page and the second page are at different information levels and detect that the data of the first page is modified.
  • call the refresh interface provided by the native framework receive the trigger event of the native framework, call the data read interface provided by the native framework, read the data of the first page from the data model and render it, where the trigger event is
  • the native framework responds to the refresh interface call event to close the first page and trigger an event of the global method of the second page.
  • the data model clearing module 205 is configured to close the hybrid application and clear the data model in response to the hybrid application closing operation.
  • a data model corresponding to the hybrid application is created through a data model creation module, and the data model corresponds to the hybrid application, rather than a page, through a native framework
  • the provided data operation interface operates on the data of the data model, which can directly share and manipulate data between pages.
  • the page conversion detection module first detects the difference between the first page and the second page. Information-level relationship.
  • the first page conversion module stores the data of the first page into the data model by calling the data storage interface provided by the native framework, and controls the hybrid application to jump from the first page to the second.
  • the second page conversion module calls the number provided by the native framework According to the storage interface, the data of the first page is stored in the data model, and the refresh interface provided by the native framework is called.
  • the native framework responds to the refresh interface call event, closes the first page and triggers the global method of the second page, and receives the native framework.
  • the trigger event of the triggering global method calls the data read interface provided by the native framework to read the data of the first page from the data model and render it, so that when the page is converted, there is no need to reload through reload ().
  • the hybrid application reads the data directly from the data model for rendering, avoiding blank pages when the page is reloaded.
  • the data model is cleared through the data model clearing module, that is, as the hybrid application's life cycle ends Clear the data model to ensure the security and timeliness of the data.
  • the data model creation module 201 creates the data model, it is preferably stored in the memory or cache of the device, for example, in the memory or cache of the mobile phone, so as to facilitate the rapid processing of data during the running process of the hybrid application. Access and operation, while facilitating the data model clearing module to clear the data model when the hybrid application is terminated.
  • the data operation interface provided by the native framework for the javascript framework further includes a data update interface (updateData ()) and a data delete interface (deletData ()), and the Vue framework of the hybrid application further includes a page data modification module, and the page data modification The module is used to create a data model corresponding to the hybrid application by the data model creation module, and then, in response to the page data modification operation, call the data update interface and / or data deletion interface provided by the native framework to perform the data on the first page stored in the data model. Modification, wherein the page data modification operation is used to modify the data of the first page, so that multiple pages of the hybrid application can achieve page refresh data without reloading the page resources of the native webView.
  • the native framework is also used to obtain the status information of the hybrid application and store the obtained state information into the data model, so that the js framework calls the interface provided by the native framework to add, delete, modify, etc. the data in the data model.
  • the native framework can also process the data in the data model by itself, so as to achieve data sharing and operation between the js framework and the native framework.
  • the status information of the hybrid application includes network status of a device running the hybrid application and / or version number information of the hybrid application.
  • This embodiment also provides a computer device, such as a smart phone, tablet computer, notebook computer, desktop computer, rack server, blade server, tower server, or rack server (including a stand-alone server, or Server cluster consisting of multiple servers).
  • the computer device 20 of this embodiment includes, but is not limited to, a memory 21 and a processor 22 that can be communicatively connected to each other through a system bus, as shown in FIG. 3.
  • FIG. 3 only shows the computer device 20 with components 21-22, but it should be understood that it is not required to implement all the illustrated components, and more or fewer components may be implemented instead.
  • the memory 21 (ie, a readable storage medium) includes a flash memory, a hard disk, a multimedia card, a card-type memory (for example, SD or DX memory, etc.), a random access memory (RAM), a static random access memory (SRAM), Read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, magnetic disks, optical disks, etc.
  • the memory 21 may be an internal storage unit of the computer device 20, such as a hard disk or a memory of the computer device 20.
  • the memory 21 may also be an external storage device of the computer device 20, for example, a plug-in hard disk, a smart media card (SMC), and a secure digital (Secure Digital, SD) card, flash card, etc.
  • the memory 21 may also include both the internal storage unit of the computer device 20 and its external storage device.
  • the memory 21 is generally used to store an operating system and various types of application software installed on the computer device 20, for example, the program code of the réelle framework of the hybrid application of Embodiment 2.
  • the memory 21 may also be used to temporarily store various types of data that have been output or are to be output.
  • the processor 22 may be a central processing unit (CPU), a controller, a microcontroller, a microprocessor, or other data processing chip in some embodiments.
  • the processor 22 is generally used to control the overall operation of the computer device 20.
  • the processor 22 is configured to run program code stored in the memory 21 or process data, such as a réelle framework of a hybrid application.
  • This embodiment also provides a computer-readable storage medium, such as a flash memory, a hard disk, a multimedia card, a card-type memory (for example, SD or DX memory, etc.), a random access memory (RAM), a static random access memory (SRAM), Read memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, magnetic disks, optical disks, servers, App application stores, etc., which have computer programs stored on them, When the program is executed by the processor, the corresponding function is realized.
  • the computer-readable storage medium of this embodiment is used to store the réelle framework of the hybrid application, and when executed by the processor, implements the page switching method of the hybrid application of the first embodiment.

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
  • Document Processing Apparatus (AREA)
  • Stored Programmes (AREA)

Abstract

本申请提供的混合应用的页面切换方法、框架、计算机设备及存储介质，在启动混合应用时创建数据模型，在页面转换时，判断两个页面是否处于同一信息层级，处于同一信息层级时，调用数据存储接口，将前页面的数据存储至数据模型，控制混合应用页面跳转，并调用数据读取接口，从数据模型中读取原页面的数据并进行渲染；处于不同的信息层级，且检测到原页面的数据进行修改时，调用数据存储接口，将原页面的数据存储至数据模型，调用刷新接口，接收原生框架的触发事件，调用原生框架提供的数据读取接口，从数据模型中读取原页面的数据并进行渲染，混合应用关闭时清除数据模型。通过本申请，在页面转换时能够快速重新加载，且数据安全。

Description

混合应用的页面切换方法、框架、计算机设备及存储介质
本申请申明享有2018年7月27日递交的申请号为CN 201810840066X、名称为“混合应用的页面切换方法、框架、计算机设备及存储介质”的中国专利申请的优先权，该中国专利申请的整体内容以参考的方式结合在本申请中。
技术领域
本申请涉及信息处理技术领域，尤其涉及一种混合应用的页面切换方法、框架、计算机设备及存储介质。
背景技术
混合应用(Hybrid app)是一种介于网页应用(Web app)和原生应用(native app)之间的应用，兼具原生应用良好的用户交互体验以及网页应用跨平台开发的优势，混合应用包括原生框架和javascript框架(一种直译式脚本语言，以下简称js)，两者互相调用并传递参数实现整个混合应用的功能，其中，Vue框架是一种渐进式的js框架，主要用于用户界面的构建。
目前Vue框架构建的每一个vue页面单独维护一个数据模型，因此各个vue页面之间的数据无法直接共享和操作，同时在上层vue页面关闭之后，不重新加载页面的情况下数据无法及时更新，下层vue页面若要进行更新，则需要通过reload()进行重新加载，这种方法下，页面在重新加载时往往会出现空白，使用效果较差。
此外，混合应用中js框架与原生框架的数据无法进行共享和操作，而且用户数据一般保存本地，导致用户数据的泄漏或被篡改。
因此，提供一种在页面转换时能够快速重新加载，避免出现空白的混合应用的页面切换方法，是本领域需要解决的技术问题。
发明内容
本申请的目的是提供一种混合应用的页面切换方法、框架、计算机设备及存储介质，用于解决现有技术存在的上述问题。
为实现上述目的，本申请提供一种混合应用的页面切换方法。
该混合应用的页面切换方法包括以下步骤：响应于混合应用启动操作，启动混合应用，创建混合应用对应的数据模型；响应于页面转换操作，判断第一页面与第二页面是否处于同一信息层级，其中，页面转换操作用于通过第一页面跳转至第二页面；当第一页面与第二页面处于同一信息层级时，调用混合应用的原生框架提供的数据存储接口，将第一页面的数据存储至数据模型中，控制混合应用从第一页面跳转至第二页面，并调用原生框架提供的数据读取接口，从数据模型中读取第一页面的数据并进行渲染；当第一页面与第二页面处于不同的信息层级，且检测到第一页面的数据被修改时，调用原生框架提供的数据存储接口，将第一页面的数据存储至数据模型中，调用原生框架提供的刷新接口，接收原生框架的触发事件，调用原生框架提供的数据读取接口，从数据模型中读取第一页面的数据并进行渲染，其中，触发事件为原生框架响应于刷新接口调用事件关闭第一页面并触发第二页面的全局方法的事件；以及响应于混合应用关闭操作，关闭混合应用，清除数据模型。
为实现上述目的，本申请还提供一种适于实现本申请提供的混合应用的页面切换方法的混合应用的Vue框架。
混合应用包括原生框架和Vue框架，本申请中的Vue框架包括：数据模型创建模块，用于响应于混合应用启动操作，启动混合应用，创建混合应用对应的数据模型；页面转换检测模块，用于响应于页面转换操作，判断第一页面与第二页面是否处于同一信息层级，其中，页面转换操作用于通过第一页面跳转至第二页面；第一页面转换模块，用于当第一页面与第二页面处于 同一信息层级时，调用混合应用的原生框架提供的数据存储接口，将第一页面的数据存储至数据模型中，控制混合应用从第一页面跳转至第二页面，并调用原生框架提供的数据读取接口，从数据模型中读取第一页面的数据并进行渲染；第二页面转换模块，用于当第一页面与第二页面处于不同的信息层级，且检测到第一页面的数据被修改时，调用原生框架提供的数据存储接口，将第一页面的数据存储至数据模型中，调用原生框架提供的刷新接口，接收原生框架的触发事件，调用原生框架提供的数据读取接口，从数据模型中读取第一页面的数据并进行渲染，其中，触发事件为原生框架响应于刷新接口调用事件关闭第一页面并触发第二页面的全局方法的事件；以及数据模型清除模块，用于响应于混合应用关闭操作，关闭混合应用，清除数据模型。
为实现上述目的，本申请还提供一种计算机设备，包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，处理器执行程序时实现混合应用的页面切换方法的以下步骤：
响应于混合应用启动操作，启动混合应用，创建混合应用对应的数据模型；响应于页面转换操作，判断第一页面与第二页面是否处于同一信息层级，其中，页面转换操作用于通过第一页面跳转至第二页面；当第一页面与第二页面处于同一信息层级时，调用混合应用的原生框架提供的数据存储接口，将第一页面的数据存储至数据模型中，控制混合应用从第一页面跳转至第二页面，并调用原生框架提供的数据读取接口，从数据模型中读取第一页面的数据并进行渲染；当第一页面与第二页面处于不同的信息层级，且检测到第一页面的数据被修改时，调用原生框架提供的数据存储接口，将第一页面的数据存储至数据模型中，调用原生框架提供的刷新接口，接收原生框架的触发事件，调用原生框架提供的数据读取接口，从数据模型中读取第一页面的数据并进行渲染，其中，触发事件为原生框架响应于刷新接口调用事件关闭第一页面并触发第二页面的全局方法的事件；以及响应于混合应用关闭操作，关闭混合应用，清除数据模型。
为实现上述目的，本申请还提供计算机可读存储介质，其上存储有计算机程序，程序被处理器执行时实现混合应用的页面切换方法的以下步骤：
响应于混合应用启动操作，启动混合应用，创建混合应用对应的数据模型；响应于页面转换操作，判断第一页面与第二页面是否处于同一信息层级，其中，页面转换操作用于通过第一页面跳转至第二页面；当第一页面与第二页面处于同一信息层级时，调用混合应用的原生框架提供的数据存储接口，将第一页面的数据存储至数据模型中，控制混合应用从第一页面跳转至第二页面，并调用原生框架提供的数据读取接口，从数据模型中读取第一页面的数据并进行渲染；当第一页面与第二页面处于不同的信息层级，且检测到第一页面的数据被修改时，调用原生框架提供的数据存储接口，将第一页面的数据存储至数据模型中，调用原生框架提供的刷新接口，接收原生框架的触发事件，调用原生框架提供的数据读取接口，从数据模型中读取第一页面的数据并进行渲染，其中，触发事件为原生框架响应于刷新接口调用事件关闭第一页面并触发第二页面的全局方法的事件；以及响应于混合应用关闭操作，关闭混合应用，清除数据模型。
本申请提供的混合应用的页面切换方法、框架、计算机设备及存储介质，在混合应用启动的同时，创建混合应用对应的数据模型，该数据模型对应混合应用，而不是对应某个页面，通过原生框架提供的数据操作接口对数据模型的数据进行操作，能够实现页面之间的数据直接共享和操作；同时，在进行页面转换时，先判断第一页面与第二页面是否处于同一信息层级，属于同一层级信息时，通过调用原生框架提供的数据存储接口，将第一页面的数据存储至数据模型中，控制混合应用从第一页面跳转至第二页面，并调用原生框架提供的数据读取接口，从数据模型中读取第一页面的数据并进行渲染；当第一页面与第二页面处于不同的信息层级，且检测到第一页面的数据进行修改时，调用原生框架提供的数据存储接口，将第一页面的数据存储至数据模型中，调用原生框架提供的刷新接口，原生框架响应于该刷新接口调用事 件，关闭第一页面并触发第二页面的全局方法，接收原生框架的该触发全局方法的触发事件，调用原生框架提供的数据读取接口，从数据模型中读取第一页面的数据并进行渲染，从而在进行页面转换时，无需通过reload()进行重新加载，而是直接从数据模型中读取数据进行渲染，避免页面在重新加载时出现空白；最后在关闭混合应用时，清除数据模型，保证了数据的安全性和及时性。
附图说明
图1为本申请实施例一中混合应用的页面切换方法的流程图；
图2为本申请实施例二中混合应用的Vue框架的原理框图；
图3为本申请实施例三中计算机设备的硬件结构图。
具体实施方式
为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本申请，并不用于限定本申请。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
实施例一
本申请实施例一提供了一种混合应用的页面切换方法，该混合应用包括原生框架和javascript框架，javascript框架用于实现和控制该混合应用的页面，原生框架用于为javascript框架提供各种数据接口，特别的，在该实施例中，原生框架为javascript框架提供数据操作接口，该数据操作接口包括数据存储接口(saveData())和数据读取接口(getData())。其中，javascript框架为Vue框架时，该页面切换方法的执行主体为此Vue框架，混合应用的页面为Vue页面，图1为本申请提供的混合应用的页面切换方法的实施例一的流程图，如图1所示，该混合应用的页面切换方法包括如下的步骤S101至步骤S105。
步骤S101：响应于混合应用启动操作，启动混合应用，创建混合应用对应的数据模型。
用户操作设执行混合应用的启动操作，例如点击混合应用在设备界面上的显示图标，Vue框架启动混合应用，在启动该混合应用的同时，Vue框架首先创建一个对应该混合应用的数据模型，例如，预设数据模型创建函数，并将其封装为一个可调用的功能模块，在该处VUE框架调用此功能模块，即可进行数据模型的创建，其中，数据模型的数据结构可依据页面的数据特点设置，时间页面的数据存储。该数据模型被创建后，优选保存在设备的内存或缓存中，例如，保存在手机的内存或缓存中，以方便在混合应用的运行过程中，快速对数据进行访问和操作，同时方便在混合应用被终止时，清除数据模型。对应于混合应用的数据模型，并不是由单独的页面进行维护，Vue框架能够通过原生框架提供的数据操作接口，对数据模型中的数据进行操作，从而能够实现各个页面之间数据的共享和操作。
步骤S102：响应于页面转换操作，判断第一页面与第二页面是否处于同一信息层级。
混合应用启动后，用户在混合应用的显示界面上进行页面转换操作，该页面转换操作用于通过第一页面跳转至第二页面，也即由一个Vue转换为另一个Vue页面时，通过该步骤来检测两个页面之间的信息层级关系。其中两个页面之间的信息层级关系包括两个页面处于同一信息层级，或者第一页面与第二页面处于上下信息层，其中，第一页面为上层页面，第二页面为下层页面，例如，某混合应用的页面层级深度为四层，则两个页面处于相同的信息层级是指两个页面同处于同一层页面层级深度，如果两个页面处于上下信息层，则上层页面处于第一层页面层级深度时，下层页面处于第二层页面层级深度。
步骤S103：当第一页面与第二页面处于同一信息层级时，调用混合应用的原生框架提供的数据存储接口，将第一页面的数据存储至数据模型中，控 制混合应用从第一页面跳转至第二页面，并调用原生框架提供的数据读取接口，从数据模型中读取第一页面的数据并进行渲染。
该步骤针对同一信息层级的页面之间的页面转换，对于处于同一信息层级的第一页面与第二页面进行转换时，Vue框架调用原生框架提供的数据存储接口saveData()，首先将第一页面的数据存储至数据模型中，然后控制混合应用从第一页面跳转至第二页面，再调用原生框架提供的数据读取接口getData()，从数据模型中读取第一页面的数据并进行渲染，也即，Vue框架将读取到的数据根据预定义的规则显示在页面中，从而实现了第一页面与第二页面之间的数据共享。
步骤S104：当第一页面与第二页面处于不同的信息层级，且检测到第一页面的数据被修改时，调用原生框架提供的数据存储接口，将第一页面的数据存储至数据模型中，调用原生框架提供的刷新接口，接收原生框架的触发事件，调用原生框架提供的数据读取接口，从数据模型中读取第一页面的数据并进行渲染。
该步骤针对上下信息层级的页面之间的页面转换，对于从处于上层信息层级的第一页面转换为下层信息层级的第二页面，Vue框架检测到第一页面的数据进行修改时，首先调用原生框架提供的数据存储接口saveData()，将第一页面的数据存储至与该混合应用对应的数据模型中，同时，Vue框架调用原生框架提供的刷新接口，原生框架根据Vue框架对刷新接口的调用，关闭第一页面并触发Vue框架的全局方法，Vue框架接收该触发事件，调用原生框架提供的数据读取接口getData()，从数据模型中读取该混合应用的数据并进行渲染，实现第二页面的数据刷新，此时该混合应用显示第一页面的下层页面，也即显示第二页面，同时第二页面中的数据已经进行了更新。其中，在对第一页面的数据进行修改时，可调用原生框架提供的数据更新接口和/或数据删除接口对数据模型中存储的第一页面的数据进行修改。
步骤S105：响应于混合应用关闭操作，关闭混合应用，清除数据模型。
在该步骤中，用户操作执行混合应用的关闭操作后，Vue框架关闭该混合应用的同时，将数据模型清空。
在该实施例提供的混合应用的页面切换方法中，在混合应用启动的同时，创建混合应用对应的数据模型，该数据模型对应混合应用，而不是对应某个页面，通过原生框架提供的数据操作接口对数据模型的数据进行操作，能够实现页面之间的数据直接共享和操作；同时，在进行页面转换时，先检测第一页面与第二页面之间的信息层级关系，属于同一层级信息时，通过调用原生框架提供的数据存储接口，将第一页面的数据存储至数据模型中，控制混合应用从第一页面跳转至第二页面，并调用原生框架提供的数据读取接口，从数据模型中读取第一页面的数据并进行渲染；当第一页面与第二页面处于不同的信息层级，且检测到第一页面的数据进行修改时，调用原生框架提供的数据存储接口，将第一页面的数据存储至数据模型中，调用原生框架提供的刷新接口，原生框架响应于该刷新接口调用事件，关闭第一页面并触发第二页面的全局方法，接收原生框架的该触发全局方法的触发事件，调用原生框架提供的数据读取接口，从数据模型中读取第一页面的数据并进行渲染，从而在进行页面转换时，无需通过reload()进行重新加载，而是直接从数据模型中读取数据进行渲染，避免页面在重新加载时出现空白；最后在关闭混合应用时，清除数据模型，也即随着混合应用程序的生命周期结束而清除数据模型，保证了数据的安全性和及时性。
可选地，在一种实施例中，原生框架为javascript框架提供的数据操作接口还包括数据更新接口(updateData())和数据删除接口(deletData())，在步骤S101之后，该方法还包括下面的步骤：
响应于页面数据修改操作，调用原生框架提供的数据更新接口和/或数据删除接口对数据模型中存储的第一页面的数据进行修改。
其中，在混合应用启动后，用户可对当前页面的数据进行修改，以当前页面为第一页面，则页面数据修改操作用于修改第一页面的数据。当用户执 行该页面数据修改操作将第一页面的数据采用新的数据替换时，先调用数据删除接口deletData()将第一页面上的原数据删除，再调用数据更新接口updateData()将对应的新数据更新于第一页面上；当用户执行该页面数据修改操作将第一页面的数据删除时，直接调用数据删除接口deletData()将第一页面上待删除的原数据删除；当用户执行该页面数据修改操作在第一页面上增加数据时，直接调用更新接口updateData()在第一页面上的增加待更新的数据。使得混合应用多页面不用原生webView重新加载页面资源即可实现页面刷新数据。
可选地，在上述实施例中，原生框架还用于获取混合应用的状态信息，并将获取到的状态信息存储至数据模型中，状态信息包括运行混合应用的设备网络状态和/或混合应用的版本号信息，使得js框架在调用原生框架提供的接口对数据模型中的数据进行增删查改等处理的同时，原生框架也可以自行对数据模型中的网络状态或版本号信息存储在数据模型中，从而实现js框架与原生框架之间的数据共享和操作。
实施例二
本申请实施例二提供了一种适于实现本申请提供的任意一种混合应用的页面切换方法的混合应用的Vue框架，相关描述可参照上述实施例一。该混合应用包括原生框架和javascript框架，javascript框架用于实现和控制该混合应用的页面，原生框架用于为javascript框架提供各种数据接口，特别的，在该实施例中，原生框架为javascript框架提供数据操作接口，该数据操作接口包括数据存储接口(saveData())和数据读取接口(getData())。其中，javascript框架为Vue框架，该Vue框架包括：数据模型创建模块201、页面转换检测模块202、第一页面转换模块203、第二页面转换模块204和数据模型清除模块205。
其中，数据模型创建模块201用于响应于混合应用启动操作，启动混合 应用，创建混合应用对应的数据模型。
页面转换检测模块202用于响应于页面转换操作，判断第一页面与第二页面是否处于同一信息层级，其中，页面转换操作用于通过第一页面跳转至第二页面。
第一页面转换模块203用于当第一页面与第二页面处于同一信息层级时，调用混合应用的原生框架提供的数据存储接口，将第一页面的数据存储至数据模型中，控制混合应用从第一页面跳转至第二页面，并调用原生框架提供的数据读取接口，从数据模型中读取第一页面的数据并进行渲染。
第二页面转换模块204用于当第一页面与第二页面处于不同的信息层级，且检测到第一页面的数据被修改时，调用原生框架提供的数据存储接口，将第一页面的数据存储至数据模型中，调用原生框架提供的刷新接口，接收原生框架的触发事件，调用原生框架提供的数据读取接口，从数据模型中读取第一页面的数据并进行渲染，其中，触发事件为原生框架响应于刷新接口调用事件关闭第一页面并触发第二页面的全局方法的事件。
数据模型清除模块205用于响应于混合应用关闭操作，关闭混合应用，清除数据模型。
在该实施例提供的混合应用的Vue框架中，在混合应用启动的同时，通过数据模型创建模块创建混合应用对应的数据模型，该数据模型对应混合应用，而不是对应某个页面，通过原生框架提供的数据操作接口对数据模型的数据进行操作，能够实现页面之间的数据直接共享和操作；同时，在进行页面转换时，通过页面转换检测模块先检测第一页面与第二页面之间的信息层级关系，属于同一层级信息时，由第一页面转换模块通过调用原生框架提供的数据存储接口，将第一页面的数据存储至数据模型中，控制混合应用从第一页面跳转至第二页面，并调用原生框架提供的数据读取接口，从数据模型中读取第一页面的数据并进行渲染；当第一页面与第二页面处于不同的信息层级，且检测到第一页面的数据进行修改时，由第二页面转换模块调用原生 框架提供的数据存储接口，将第一页面的数据存储至数据模型中，调用原生框架提供的刷新接口，原生框架响应于该刷新接口调用事件，关闭第一页面并触发第二页面的全局方法，接收原生框架的该触发全局方法的触发事件，调用原生框架提供的数据读取接口，从数据模型中读取第一页面的数据并进行渲染，从而在进行页面转换时，无需通过reload()进行重新加载，而是直接从数据模型中读取数据进行渲染，避免页面在重新加载时出现空白；最后在关闭混合应用时，通过数据模型清除模块清除数据模型，也即随着混合应用程序的生命周期结束而清除数据模型，保证了数据的安全性和及时性。
可选地，数据模型创建模块201创建该数据模型后，优选保存在设备的内存或缓存中，例如，保存在手机的内存或缓存中，以方便在混合应用的运行过程中，快速对数据进行访问和操作，同时方便在混合应用被终止时，数据模型清除模块清除数据模型。
可选地，原生框架为javascript框架提供的数据操作接口还包括数据更新接口(updateData())和数据删除接口(deletData())，混合应用的Vue框架还包括页面数据修改模块，该页面数据修改模块用于在数据模型创建模块创建混合应用对应的数据模型之后，响应于页面数据修改操作，调用原生框架提供的数据更新接口和/或数据删除接口对数据模型中存储的第一页面的数据进行修改，其中，页面数据修改操作用于修改第一页面的数据，使得混合应用多页面不要原生webView重新加载页面资源即可实现页面刷新数据。
可选地，原生框架还用于获取混合应用的状态信息，并将获取到的状态信息存储至数据模型中，使得js框架在调用原生框架提供的接口对数据模型中的数据进行增删查改等处理的同时，原生框架也可以自行对数据模型中的数据进行处理，从而实现js框架与原生框架之间的数据共享和操作。
进一步可选地，上述混合应用的状态信息包括运行混合应用的设备网络状态和/或混合应用的版本号信息。
实施例三
本实施例还提供一种计算机设备，如可以执行程序的智能手机、平板电脑、笔记本电脑、台式计算机、机架式服务器、刀片式服务器、塔式服务器或机柜式服务器(包括独立的服务器，或者多个服务器所组成的服务器集群)等。如图3所示，本实施例的计算机设备20至少包括但不限于：可通过系统总线相互通信连接的存储器21、处理器22，如图3所示。需要指出的是，图3仅示出了具有组件21-22的计算机设备20，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。
本实施例中，存储器21(即可读存储介质)包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，存储器21可以是计算机设备20的内部存储单元，例如该计算机设备20的硬盘或内存。在另一些实施例中，存储器21也可以是计算机设备20的外部存储设备，例如该计算机设备20上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。当然，存储器21还可以既包括计算机设备20的内部存储单元也包括其外部存储设备。本实施例中，存储器21通常用于存储安装于计算机设备20的操作系统和各类应用软件，例如实施例2的混合应用的vue框架的程序代码等。此外，存储器21还可以用于暂时地存储已经输出或者将要输出的各类数据。
处理器22在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器22通常用于控制计算机设备20的总体操作。本实施例中，处理器22用于运行存储器21中存储的程序代码或者处理数据，例如混合应用的vue框架等。
实施例四
本实施例还提供一种计算机可读存储介质，如闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘、服务器、App应用商城等等，其上存储有计算机程序，程序被处理器执行时实现相应功能。本实施例的计算机可读存储介质用于存储混合应用的vue框架，被处理器执行时实现实施例一的混合应用的页面切换方法。
上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。
以上仅为本申请的优选实施例，并非因此限制本申请的专利范围，凡是利用本申请说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本申请的专利保护范围内。

Claims (20)

  1. 一种混合应用的页面切换方法，其特征在于，包括：
    响应于混合应用启动操作，启动所述混合应用，创建所述混合应用对应的数据模型；
    响应于页面转换操作，判断第一页面与第二页面是否处于同一信息层级，其中，所述页面转换操作用于通过所述第一页面跳转至所述第二页面；
    当所述第一页面与所述第二页面处于同一信息层级时，调用所述混合应用的原生框架提供的数据存储接口，将所述第一页面的数据存储至所述数据模型中，控制所述混合应用从所述第一页面跳转至所述第二页面，并调用所述原生框架提供的数据读取接口，从所述数据模型中读取所述第一页面的数据并进行渲染；
    当所述第一页面与所述第二页面处于不同的信息层级，且检测到所述第一页面的数据被修改时，调用所述原生框架提供的所述数据存储接口，将所述第一页面的数据存储至所述数据模型中，调用所述原生框架提供的刷新接口，接收所述原生框架的触发事件，调用所述原生框架提供的数据读取接口，从所述数据模型中读取所述第一页面的数据并进行渲染，其中，所述触发事件为所述原生框架响应于所述刷新接口调用事件关闭所述第一页面并触发所述第二页面的全局方法的事件；以及
    响应于混合应用关闭操作，关闭所述混合应用，清除所述数据模型。
  2. 根据权利要求1所述的混合应用的页面切换方法，其特征在于，在创建所述混合应用对应的数据模型之后，所述方法还包括：
    将所述数据模型存储在运行所述混合应用的设备内存中。
  3. 根据权利要求1所述的混合应用的页面切换方法，其特征在于，在创建 所述混合应用对应的数据模型之后，所述方法还包括：
    将所述数据模型存储在运行所述混合应用的设备缓存中。
  4. 根据权利要求1所述的混合应用的页面切换方法，其特征在于，在创建所述混合应用对应的数据模型之后，所述方法还包括：
    响应于页面数据修改操作，调用所述原生框架提供的数据更新接口和/或数据删除接口对所述数据模型中存储的所述第一页面的数据进行修改，其中，所述页面数据修改操作用于修改所述第一页面的数据。
  5. 根据权利要求1所述的混合应用的页面切换方法，其特征在于，所述原生框架还用于获取所述混合应用的状态信息，并将获取到的所述状态信息存储至所述数据模型中。
  6. 根据权利要求1所述的混合应用的页面切换方法，其特征在于，所述状态信息包括运行所述混合应用的设备网络状态和/或所述混合应用的版本号信息。
  7. 一种混合应用的Vue框架，其特征在于，包括：
    数据模型创建模块，用于响应于混合应用启动操作，启动所述混合应用，创建所述混合应用对应的数据模型；
    页面转换检测模块，用于响应于页面转换操作，判断第一页面与第二页面是否处于同一信息层级，其中，所述页面转换操作用于通过所述第一页面跳转至所述第二页面；
    第一页面转换模块，用于当所述第一页面与所述第二页面处于同一信息层级时，调用所述混合应用的原生框架提供的数据存储接口，将所述第一页面的数据存储至所述数据模型中，控制所述混合应用从所述第一页面跳转至 所述第二页面，并调用所述原生框架提供的数据读取接口，从所述数据模型中读取所述第一页面的数据并进行渲染；
    第二页面转换模块，用于当所述第一页面与所述第二页面处于不同的信息层级，且检测到所述第一页面的数据被修改时，调用所述原生框架提供的所述数据存储接口，将所述第一页面的数据存储至所述数据模型中，调用所述原生框架提供的刷新接口，接收所述原生框架的触发事件，调用所述原生框架提供的数据读取接口，从所述数据模型中读取所述第一页面的数据并进行渲染，其中，所述触发事件为所述原生框架响应于所述刷新接口调用事件关闭所述第一页面并触发所述第二页面的全局方法的事件；以及
    数据模型清除模块，用于响应于混合应用关闭操作，关闭所述混合应用，清除所述数据模型。
  8. 根据权利要求7所述的混合应用的Vue框架，其特征在于，所述数据模型创建模块在创建所述混合应用对应的数据模型之后，还用于将所述数据模型存储在运行所述混合应用的设备内存中。
  9. 根据权利要求7所述的混合应用的Vue框架，其特征在于，所述数据模型创建模块在创建所述混合应用对应的数据模型之后，还用于将所述数据模型存储在运行所述混合应用的设备缓存中。
  10. 根据权利要求7所述的混合应用的Vue框架，其特征在于，还包括：
    页面数据修改模块，用于在所述数据模型创建模块创建所述混合应用对应的数据模型之后，响应于页面数据修改操作，调用所述原生框架提供的数据更新接口和/或数据删除接口对所述数据模型中存储的所述第一页面的数据进行修改，其中，所述页面数据修改操作用于修改所述第一页面的数据。
  11. 根据权利要求7所述的混合应用的Vue框架，其特征在于，所述原生框架还用于获取所述混合应用的状态信息，并将获取到的所述状态信息存储至所述数据模型中。
  12. 根据权利要求7所述的混合应用的Vue框架，其特征在于，所述状态信息包括运行所述混合应用的设备网络状态和/或所述混合应用的版本号信息。
  13. 一种计算机设备，所述计算机设备包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现混合应用的页面切换方法的以下步骤：
    响应于混合应用启动操作，启动所述混合应用，创建所述混合应用对应的数据模型；
    响应于页面转换操作，判断第一页面与第二页面是否处于同一信息层级，其中，所述页面转换操作用于通过所述第一页面跳转至所述第二页面；
    当所述第一页面与所述第二页面处于同一信息层级时，调用所述混合应用的原生框架提供的数据存储接口，将所述第一页面的数据存储至所述数据模型中，控制所述混合应用从所述第一页面跳转至所述第二页面，并调用所述原生框架提供的数据读取接口，从所述数据模型中读取所述第一页面的数据并进行渲染；
    当所述第一页面与所述第二页面处于不同的信息层级，且检测到所述第一页面的数据被修改时，调用所述原生框架提供的所述数据存储接口，将所述第一页面的数据存储至所述数据模型中，调用所述原生框架提供的刷新接口，接收所述原生框架的触发事件，调用所述原生框架提供的数据读取接口，从所述数据模型中读取所述第一页面的数据并进行渲染，其中，所述触发事件为所述原生框架响应于所述刷新接口调用事件关闭所述第一页面并触发所述第二页面的全局方法的事件；以及
    响应于混合应用关闭操作，关闭所述混合应用，清除所述数据模型。
  14. 根据权利要求13所述的计算机设备，其特征在于，在创建所述混合应用对应的数据模型之后，所述处理器执行所述程序时实现混合应用的页面切换方法还包括以下步骤：
    将所述数据模型存储在运行所述混合应用的设备内存中。
  15. 根据权利要求13所述的计算机设备，其特征在于，在创建所述混合应用对应的数据模型之后，所述处理器执行所述程序时实现混合应用的页面切换方法还包括以下步骤：
    将所述数据模型存储在运行所述混合应用的设备缓存中。
  16. 根据权利要求13所述的计算机设备，其特征在于，在创建所述混合应用对应的数据模型之后，所述处理器执行所述程序时实现混合应用的页面切换方法还包括以下步骤：
    响应于页面数据修改操作，调用所述原生框架提供的数据更新接口和/或数据删除接口对所述数据模型中存储的所述第一页面的数据进行修改，其中，所述页面数据修改操作用于修改所述第一页面的数据。
  17. 根据权利要求13所述的计算机设备，其特征在于，所述原生框架还用于获取所述混合应用的状态信息，并将获取到的所述状态信息存储至所述数据模型中。
  18. 根据权利要求13所述的计算机设备，其特征在于，所述状态信息包括运行所述混合应用的设备网络状态和/或所述混合应用的版本号信息。
  19. 一种计算机可读存储介质，其上存储有计算机程序，其特征在于：所述程序被处理器执行时实现混合应用的页面切换方法的以下步骤：
    响应于混合应用启动操作，启动所述混合应用，创建所述混合应用对应的数据模型；
    响应于页面转换操作，判断第一页面与第二页面是否处于同一信息层级，其中，所述页面转换操作用于通过所述第一页面跳转至所述第二页面；
    当所述第一页面与所述第二页面处于同一信息层级时，调用所述混合应用的原生框架提供的数据存储接口，将所述第一页面的数据存储至所述数据模型中，控制所述混合应用从所述第一页面跳转至所述第二页面，并调用所述原生框架提供的数据读取接口，从所述数据模型中读取所述第一页面的数据并进行渲染；
    当所述第一页面与所述第二页面处于不同的信息层级，且检测到所述第一页面的数据被修改时，调用所述原生框架提供的所述数据存储接口，将所述第一页面的数据存储至所述数据模型中，调用所述原生框架提供的刷新接口，接收所述原生框架的触发事件，调用所述原生框架提供的数据读取接口，从所述数据模型中读取所述第一页面的数据并进行渲染，其中，所述触发事件为所述原生框架响应于所述刷新接口调用事件关闭所述第一页面并触发所述第二页面的全局方法的事件；以及
    响应于混合应用关闭操作，关闭所述混合应用，清除所述数据模型。
  20. 根据权利要求19所述的计算机可读存储介质，其特征在于，在创建所述混合应用对应的数据模型之后，所述程序被处理器执行时实现混合应用的页面切换方法还包括以下步骤：
    将所述数据模型存储在运行所述混合应用的设备内存中。
PCT/CN2018/106487 2018-07-27 2018-09-19 混合应用的页面切换方法、框架、计算机设备及存储介质 Ceased WO2020019458A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201810840066.XA CN110020323B (zh) 2018-07-27 2018-07-27 混合应用的页面切换方法、系统、计算机设备及存储介质
CN201810840066.X 2018-07-27

Publications (1)

Publication Number Publication Date
WO2020019458A1 true WO2020019458A1 (zh) 2020-01-30

Family

ID=67188341

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2018/106487 Ceased WO2020019458A1 (zh) 2018-07-27 2018-09-19 混合应用的页面切换方法、框架、计算机设备及存储介质

Country Status (2)

Country Link
CN (1) CN110020323B (zh)
WO (1) WO2020019458A1 (zh)

Cited By (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111859212A (zh) * 2020-05-11 2020-10-30 马上消费金融股份有限公司 一种获取页面的方法、终端设备及存储介质
CN112597423A (zh) * 2021-01-04 2021-04-02 聚好看科技股份有限公司 一种网页内容显示方法、终端及服务器
CN112732742A (zh) * 2021-01-12 2021-04-30 平安医疗健康管理股份有限公司 查询页面创建方法、装置、计算机设备和存储介质
CN113535417A (zh) * 2020-04-14 2021-10-22 腾讯科技（深圳）有限公司 数据交互装置和方法
CN113778573A (zh) * 2020-05-29 2021-12-10 北京沃东天骏信息技术有限公司 一种在用户界面中实现页面的方法及系统
CN113835747A (zh) * 2021-09-24 2021-12-24 广州品唯软件有限公司 接口对页面影响的定位方法及装置
CN113934425A (zh) * 2021-11-15 2022-01-14 平安普惠企业管理有限公司 页面处理方法、装置、计算机设备及存储介质
CN115544353A (zh) * 2022-07-05 2022-12-30 天津车之家软件有限公司 一种页面显示方法、移动终端、计算设备及存储介质
CN116257719A (zh) * 2023-05-16 2023-06-13 建信金融科技有限责任公司 页面更新方法、装置、计算机设备和存储介质

Families Citing this family (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110611844B (zh) * 2019-10-18 2021-12-28 网易（杭州）网络有限公司 应用中播放器的控制方法、装置和视频播放装置
CN111523073A (zh) * 2020-04-23 2020-08-11 深圳市商汤科技有限公司 数据的管理方法、装置、电子设备以及存储介质
CN112100553B (zh) * 2020-08-11 2023-11-17 深圳市拓邦软件技术有限公司 一种网页页面配置方法、装置、电子设备及存储介质
CN112612540B (zh) * 2020-12-18 2024-04-09 北京达佳互联信息技术有限公司 数据模型配置方法、装置、电子设备及存储介质
CN113360239A (zh) * 2021-06-29 2021-09-07 平安普惠企业管理有限公司 页面更新方法、装置、计算机设备和存储介质
CN113448556A (zh) * 2021-06-30 2021-09-28 未鲲(上海)科技服务有限公司 一种数据管理方法、装置及终端设备
CN115061717B (zh) * 2022-06-30 2023-09-05 北京亚控科技发展有限公司 应用管理方法、应用订阅方法及相关设备

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 北京中电普华信息技术有限公司 一种混合应用页面的切换方法及系统
CN106886533A (zh) * 2015-12-16 2017-06-23 五八同城信息技术有限公司 混合应用的实现方法及装置
CN107102904A (zh) * 2017-03-29 2017-08-29 腾讯科技（深圳）有限公司 基于混合应用程序的交互方法及装置
CN107133322A (zh) * 2017-05-04 2017-09-05 四川长虹电器股份有限公司 移动应用中HTML与Native交互的公共数据通道的实现方法
CN107305553A (zh) * 2016-04-20 2017-10-31 北京京东尚科信息技术有限公司 一种基于Hybrid App中动态跳转Hybrid页面的方法及系统
CN107870929A (zh) * 2016-09-26 2018-04-03 平安科技（深圳）有限公司 Hybrid框架下应用页面的翻页方法及系统

Family Cites Families (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103984686B (zh) * 2013-02-07 2018-10-12 阿里巴巴集团控股有限公司 页面切换方法及装置
CN104850602B (zh) * 2015-05-04 2018-11-27 微梦创科网络科技（中国）有限公司 一种基于互联网网页的渲染刷新实现方法及装置
CN106991110B (zh) * 2016-10-12 2020-06-26 阿里巴巴集团控股有限公司 网页页面的切换方法及装置
CN107368560B (zh) * 2017-07-07 2022-11-04 腾讯科技（深圳）有限公司 移动应用的页面实现方法和装置、计算机可读存储介质

Patent 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 北京中电普华信息技术有限公司 一种混合应用页面的切换方法及系统
CN106886533A (zh) * 2015-12-16 2017-06-23 五八同城信息技术有限公司 混合应用的实现方法及装置
CN107305553A (zh) * 2016-04-20 2017-10-31 北京京东尚科信息技术有限公司 一种基于Hybrid App中动态跳转Hybrid页面的方法及系统
CN107870929A (zh) * 2016-09-26 2018-04-03 平安科技（深圳）有限公司 Hybrid框架下应用页面的翻页方法及系统
CN107102904A (zh) * 2017-03-29 2017-08-29 腾讯科技（深圳）有限公司 基于混合应用程序的交互方法及装置
CN107133322A (zh) * 2017-05-04 2017-09-05 四川长虹电器股份有限公司 移动应用中HTML与Native交互的公共数据通道的实现方法

Cited By (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113535417A (zh) * 2020-04-14 2021-10-22 腾讯科技（深圳）有限公司 数据交互装置和方法
CN111859212A (zh) * 2020-05-11 2020-10-30 马上消费金融股份有限公司 一种获取页面的方法、终端设备及存储介质
CN113778573A (zh) * 2020-05-29 2021-12-10 北京沃东天骏信息技术有限公司 一种在用户界面中实现页面的方法及系统
CN112597423A (zh) * 2021-01-04 2021-04-02 聚好看科技股份有限公司 一种网页内容显示方法、终端及服务器
CN112597423B (zh) * 2021-01-04 2023-11-03 聚好看科技股份有限公司 一种网页内容显示方法、终端及服务器
CN112732742A (zh) * 2021-01-12 2021-04-30 平安医疗健康管理股份有限公司 查询页面创建方法、装置、计算机设备和存储介质
CN112732742B (zh) * 2021-01-12 2023-03-28 深圳平安医疗健康科技服务有限公司 查询页面创建方法、装置、计算机设备和存储介质
CN113835747A (zh) * 2021-09-24 2021-12-24 广州品唯软件有限公司 接口对页面影响的定位方法及装置
CN113934425A (zh) * 2021-11-15 2022-01-14 平安普惠企业管理有限公司 页面处理方法、装置、计算机设备及存储介质
CN115544353A (zh) * 2022-07-05 2022-12-30 天津车之家软件有限公司 一种页面显示方法、移动终端、计算设备及存储介质
CN116257719A (zh) * 2023-05-16 2023-06-13 建信金融科技有限责任公司 页面更新方法、装置、计算机设备和存储介质
CN116257719B (zh) * 2023-05-16 2023-07-21 建信金融科技有限责任公司 页面更新方法、装置、计算机设备和存储介质

Also Published As

Publication number Publication date
CN110020323A (zh) 2019-07-16
CN110020323B (zh) 2023-04-07

Similar Documents

Publication Publication Date Title
WO2020019458A1 (zh) 混合应用的页面切换方法、框架、计算机设备及存储介质
US12468552B2 (en) Execution of sub-application processes within application program
US11169789B2 (en) Rich text box for live applications in a cloud collaboration platform
US11231959B2 (en) Foreground and background switching entry generation and display following quit operations
US11249745B2 (en) Image upgrade method and device
US12050756B1 (en) Managing application windows of applications from different servers within a same browser window on a user device
US8775923B1 (en) Web page restoration
TW202141300A (zh) 頁面處理方法、裝置、設備及儲存媒體
US9804767B2 (en) Light dismiss manager
US10747510B1 (en) Application runtime modification
CN113221048B (zh) 页面跳转方法、装置、计算机设备和存储介质
WO2018130085A1 (zh) 一种页面展示方法及装置
CN111767002B (zh) 页面展示方法、装置、设备及存储介质
US9558014B2 (en) System, method and apparatus for transparently enabling software applications with adaptive user interfaces
WO2020006911A1 (zh) 混合型应用的接口调用方法、装置及计算机可读存储介质
CN109684573B (zh) 目标图片显示方法及装置、存储介质、电子设备
US9804878B2 (en) Using a status indicator for a merge operation for writing data associated with a virtual machine
CN114003228A (zh) 界面更新方法、装置、计算机设备以及存储介质
CN115756840B (zh) 硬件资源调度方法、系统、计算机设备和存储介质
CN114780089B (zh) 一种页面切换时的悬浮窗添加方法、装置、设备及介质
CN119166920A (zh) 一种页面渲染方法、装置、设备、存储介质及程序产品
US20220245683A1 (en) Systems and methods for generating a visualized recurrence schedule
CN115454591A (zh) 一种应用程序的模式切换方法及装置
CN114721696B (zh) 界面更新方法、装置、智能终端及存储介质
CN121807386A (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: 18927457

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: 18927457

Country of ref document: EP

Kind code of ref document: A1