CN112416458A - Preloading method and device based on ReactNative, computer equipment and storage medium - Google Patents
Preloading method and device based on ReactNative, computer equipment and storage medium Download PDFInfo
- Publication number
- CN112416458A CN112416458A CN202011314147.XA CN202011314147A CN112416458A CN 112416458 A CN112416458 A CN 112416458A CN 202011314147 A CN202011314147 A CN 202011314147A CN 112416458 A CN112416458 A CN 112416458A
- Authority
- CN
- China
- Prior art keywords
- page
- component file
- service component
- preloading
- preloaded
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
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
- G06F9/44526—Plug-ins; Add-ons
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR 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
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- Stored Programmes (AREA)
Abstract
The embodiment of the application belongs to the field of research and development management, and relates to a preloading method based on ReactNative. The application also provides a preloading device, computer equipment and a storage medium based on the ReactNative. In addition, the application also relates to a block chain technology, and the service component file can be stored in the block chain. According to the method and the device, the white screen operation can be avoided, and the user experience is enhanced.
Description
Technical Field
The present application relates to the field of research and development management technologies, and in particular, to a preloading method and apparatus based on ReactNative, a computer device, and a storage medium.
Background
ReactNative is a mobile terminal hybrid framework which is popular at present, is used on a mobile terminal in a large number, can be directly used on platforms such as Android, iOS, H5 and applets, and has strong cross-platform characteristics. The real native development is commonly used in the development of a native APP (Application), and a module developed through the real native needs to be first printed into a bundle file before debugging, and then the APP can be loaded and displayed.
However, in practical use, when the ReactNative page is loaded in the Android for the first time, the bundle file needs to be loaded in an analyzing mode, and the loading of the bundle file in the analyzing mode is time-consuming operation, so that obvious white screen can appear from the loading of the bundle file to the rendering of the corresponding ReactNative page by the ReactNative page, and the user experience is poor.
Disclosure of Invention
The embodiment of the application aims to provide a preloading method and device based on Reactnative, computer equipment and a storage medium, so as to solve the problem that in the related art, when an application program is loaded by using a Reactnative page, a white screen appears, and user experience is poor.
In order to solve the above technical problem, an embodiment of the present application provides a preloading method based on ReactNative, which adopts the following technical solutions:
configuring a preloading page through Reactnative, packaging the preloading page, and deploying the preloading page in a service component file under a resource directory;
creating a layout interface on an application program starting page, and transmitting the preloading page into the layout interface;
loading and analyzing the service component file into a memory by using the layout interface, and acquiring a preloaded page; and
and when the application program is started, displaying the preloading page through the layout interface.
Further, the step of creating a layout interface at the application start page and transferring the preloaded page into the layout interface includes:
loading the service component file by using a management class provided by ReactNative;
and associating the layout interface with the management class, and transmitting the preloading page in the service component file into the layout interface.
Further, the step of associating the layout interface with the management class and transferring the preloaded page in the business component file into the layout interface includes:
calling an application starting method in the layout interface, and transmitting the management class into the layout interface;
and transmitting the preloading page into the layout interface through the management class.
Further, the step of packaging the preloaded page and deploying the preloaded page in a service component file under a resource directory includes:
packing the execution codes of the preloaded pages to generate preloaded service component files;
and distributing a unique identification mark for the preloaded service component file, and deploying the preloaded page service component file in a service component file of a corresponding service.
Further, the step of loading and analyzing the service component file into a memory by using the layout interface and acquiring the preloaded page includes:
the layout interface acquires a storage path of a service component file corresponding to the preloaded page according to the identification information of the preloaded page;
analyzing and loading the service component file corresponding to the storage path by using the layout interface, and caching the service component file into a memory;
and acquiring the preloaded page from the memory.
Further, the step of obtaining, by the layout interface according to the preloaded page identification information, a storage path of the service component file corresponding to the preloaded page includes:
according to the identification information of the preloaded page, matching with the unique identification of the preloaded service component file of the preloaded page;
determining a preloaded service component file corresponding to the preloaded page according to the unique identification mark;
and determining a storage path of the corresponding business component file based on the storage path of the preloaded business component file.
Further, the step of parsing and loading the service component file corresponding to the storage path by using the layout interface includes:
loading the service component file into a memory by using the layout interface;
analyzing the service component file loaded into the memory, and respectively obtaining the execution codes of the service component file and the pre-loading page, wherein the execution codes are used for starting the corresponding service and the pre-loading page.
In order to solve the above technical problem, an embodiment of the present application further provides a preloading device based on the ReactNative, which adopts the following technical scheme:
the configuration module is used for configuring the preloading page through the Reactnative, packaging the preloading page and deploying the preloading page in a service component file under a resource directory;
the creating module is used for creating a layout interface on an application program starting page and transmitting the preloading page into the layout interface;
the loading analysis module is used for loading and analyzing the service component file into a memory by using the layout interface and acquiring the preloading page; and
and the display module is used for displaying the preloading page through the layout interface when the application program is started.
In order to solve the above technical problem, an embodiment of the present application further provides a computer device, which adopts the following technical solutions:
the computer device comprises a memory having computer readable instructions stored therein which when executed by the processor implement the steps of the ReactNative based preloading method as described above.
In order to solve the above technical problem, an embodiment of the present application further provides a computer-readable storage medium, which adopts the following technical solutions:
the computer readable storage medium has stored thereon computer readable instructions which, when executed by a processor, implement the steps of the ReactNative based preloading method as described above.
Compared with the prior art, the embodiment of the application mainly has the following beneficial effects:
the method includes the steps that a preloading page is configured through Reactnative, the preloading page is packaged and is deployed in a service component file under a resource directory, a layout interface is created in an application program starting page, the preloading page is transmitted into the layout interface, the service component file is loaded and analyzed into a memory through the layout interface, the preloading page is obtained, and the preloading page is displayed through the layout interface when the application program is started; according to the method and the device, the layout interface is created on the application program starting page, the service component file and the preloading page are loaded in advance through the layout interface, so that the ReactNative page can directly acquire the service component file from the memory while the application program is loaded and the preloading page is displayed, the white screen operation can be avoided, and the user experience is enhanced.
Drawings
In order to more clearly illustrate the solution of the present application, the drawings needed for describing the embodiments of the present application will be briefly described below, and it is obvious that the drawings in the following description are some embodiments of the present application, and that other drawings can be obtained by those skilled in the art without inventive effort.
FIG. 1 is an exemplary system architecture diagram in which the present application may be applied;
FIG. 2 is a flow diagram of one embodiment of a ReactNative-based preloading method according to the present application;
FIG. 3 is a flowchart of one embodiment of step S203 in FIG. 2;
FIG. 4 is a schematic diagram of a configuration of one embodiment of a ReactNative-based preloading device according to the application;
FIG. 5 is a schematic block diagram of one embodiment of a computer device according to the present application.
Detailed Description
Unless defined otherwise, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs; the terminology used in the description of the application herein is for the purpose of describing particular embodiments only and is not intended to be limiting of the application; the terms "including" and "having," and any variations thereof, in the description and claims of this application and the description of the above figures are intended to cover non-exclusive inclusions. The terms "first," "second," and the like in the description and claims of this application or in the above-described drawings are used for distinguishing between different objects and not for describing a particular order.
Reference herein to "an embodiment" means that a particular feature, structure, or characteristic described in connection with the embodiment can be included in at least one embodiment of the application. The appearances of the phrase in various places in the specification are not necessarily all referring to the same embodiment, nor are separate or alternative embodiments mutually exclusive of other embodiments. It is explicitly and implicitly understood by one skilled in the art that the embodiments described herein can be combined with other embodiments.
In order to make the technical solutions better understood by those skilled in the art, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings.
In order to solve the problem of poor user experience caused by the fact that a white screen appears when a ReactNative page is used for loading an application program in the related art, the application provides a preloading method based on ReactNative, which relates to artificial intelligence and can be applied to a system architecture 100 shown in FIG. 1, wherein the system architecture 100 can comprise terminal devices 101, 102 and 103, a network 104 and a server 105. The network 104 serves as a medium for providing communication links between the terminal devices 101, 102, 103 and the server 105. Network 104 may include various connection types, such as wired, wireless communication links, or fiber optic cables, to name a few.
The user may use the terminal devices 101, 102, 103 to interact with the server 105 via the network 104 to receive or send messages or the like. The terminal devices 101, 102, 103 may have various communication client applications installed thereon, such as a web browser application, a shopping application, a search application, an instant messaging tool, a mailbox client, social platform software, and the like.
The terminal devices 101, 102, 103 may be various electronic devices having a display screen and supporting web browsing, including but not limited to smart phones, tablet computers, e-book readers, MP3 players (Moving Picture Experts Group Audio Layer III, mpeg compression standard Audio Layer 3), MP4 players (Moving Picture Experts Group Audio Layer IV, mpeg compression standard Audio Layer 4), laptop portable computers, desktop computers, and the like.
The server 105 may be a server providing various services, such as a background server providing support for pages displayed on the terminal devices 101, 102, 103.
It should be noted that the preloading method based on the ReactNative provided in the embodiment of the present application is generally executed by the terminal device, and accordingly, the preloading device based on the ReactNative is generally disposed in the terminal device.
It should be understood that the number of terminal devices, networks, and servers in fig. 1 is merely illustrative. There may be any number of terminal devices, networks, and servers, as desired for implementation.
With continuing reference to fig. 2, a flow diagram of one embodiment of a ReactNative based preloading method according to the present application is shown, including the steps of:
step S201, a preloading page is configured through ReactNative, packaged and deployed in a service component file under a resource directory.
ReactNative is a mobile terminal hybrid framework of the current comparison process, is used more at the mobile terminal, and has strong cross-platform characteristics because the ReactNative can be directly used on platforms such as Android, iOS, H5 and applets.
In order to solve the problem that the ReactNative analyzes the white screen of a file of a loading service component (bundle) for the first time, a preloading page (PreLoadPage) is configured based on the ReactNative technology and used for preloading.
In this embodiment, the page content of the preloaded page is set to the simplest blank content.
In this embodiment, the preloaded page is configured by using the ReactNative, and specifically, the preloaded page may be configured by using a Class PreLoadPage extensions read.
And packaging the preloaded pages, and deploying the preloaded pages in a service component (bundle) file under a system resource directory, wherein the bundle file is placed under a resource directory, for example, the bundle file is placed under an assets directory of Android.
It should be noted that the Bundle file may contain some binary codes (classes. Bundle can be loaded/unloaded dynamically. Taking an Android system as an example, a Bundle is a module in an Android application, a Bundle file is usually attached to a main APK package in a zip file manner, and the APK can modularize functions of an application program and package the functions into an independent pluggable Bundle file through the Bundle so as to dynamically add or remove part of functions. For an APK of an application program containing multiple services, a multiple Bundle architecture can be applied. The method can be disassembled into different bundles according to different services in the application program, so as to be beneficial to quick iteration of the services.
In some optional implementation manners of this embodiment, the step of packaging the preloaded pages and deploying the preloaded pages in the service component file under the resource directory specifically includes the following steps:
packing the execution codes of the preloaded pages to generate preloaded service component files;
and allocating a unique identification mark for the preloaded service component file, and deploying the preloaded page service component file in the service component file of the corresponding service.
The execution code is used for starting the service corresponding to the execution code, and the unique identification is used for determining the relevance between the preloading page and the service component file corresponding to the service. In this embodiment, the execution code of the preloaded page is packaged by the packaging script to generate a preloaded service component file, and the preloaded page service component file is deployed in the service component file of the corresponding service, so that the preloaded page can be associated with the service of the application program.
Step S202, a layout interface is created on the application program starting page, and the preloaded page is transmitted into the layout interface.
In this embodiment, a layout interface (ReactRootView) is created at the application startup page, and specifically, a new ReactRootView () is called to create a ReactRootView object through a new keyword in java code.
Further, after the ReactRootView object is created, the length and the width of the ReactRootView object are set to be 1 pixel, so that the ReactRootView is used for loading the service component file resources in advance on the premise of avoiding the perception of a user.
In some optional implementations, creating a layout interface at an application startup page, and transferring the preloaded page into the layout interface specifically includes:
and S301, loading the service component file by using the management class provided by ReactNative.
Specifically, the ReactInstanceManger provided by ReactNative is used to load the bundle file under the resource directory, and the ReactInstanceManger provides the management class for the ReactNative.
Step S302, the layout interface is associated with the management class, and the preloading page in the service component file is transmitted into the layout interface.
Specifically, an application starting method in a layout interface is called, and a management class is transmitted into the layout interface; and the preloaded page is transmitted into the layout interface through the management class.
The application starting method is a startReactapplication method, and the startReactapplication method called in the layout interface is specifically startReactapplication (reactInstanceManger, "PreLoadPage").
It should be noted that, when creating the realinstancemanager, the realnative page creates the realinstancemanager object through the static method builder of the realinstancemanager; the setunbleAssetName method is called by ReactInstanceManger, and the bundle file name is passed into ReactInstanceManger.
In this embodiment, a bundle file has a preloaded page, a service component file under a resource directory is loaded by using a management class provided by the ReactNative, identification information of the preloaded page can be acquired, the preloaded page identification information is transmitted to a layout interface by a startReactApplication (PreLoadPage) method, and the layout interface acquires the preloaded page identification information.
The preloading page is transmitted into the layout interface, so that a foundation is laid for displaying the preloading page by using the layout interface subsequently.
Step S203, the service component file is loaded and analyzed into the memory by using the layout interface, and a preloaded page is obtained.
Specifically, the layout interface acquires a storage path of a service component file corresponding to the preloaded page according to the identification information of the preloaded page; analyzing and loading the service component file corresponding to the storage path by using a layout interface, and caching the service component file into a memory; and acquiring the preloaded page from the memory.
In this embodiment, the layout interface is used to load, analyze and cache the service component file in the memory in advance, and since the service component file contains the preloaded page, the preloaded page can be obtained after the service component file is loaded and analyzed, so that the ReactNative can start a corresponding service according to the service component file which is loaded and analyzed in advance, and avoid the occurrence of white screen operation.
In some optional implementation manners, the step of obtaining, by the layout interface according to the preloaded page identification information, a storage path of the service component file corresponding to the preloaded page specifically includes:
matching with the unique identification of the preloaded page preloaded service component file according to the preloaded page identification information;
determining a preloaded service component file corresponding to the preloaded page according to the unique identification mark;
and determining a storage path of the corresponding business component file based on the storage path of the preloaded business component file.
It should be understood that the identification information of the preloaded page and the unique identification of the preloaded service component file of the preloaded page are stored in association, the corresponding preloaded service component file can be queried according to the identification information of the preloaded page, and the preloaded service component file is deployed in the service component file, so that the storage path of the corresponding service component file can be determined according to the storage path of the preloaded service component file.
In some optional implementation manners, the step of parsing and loading the service component file corresponding to the storage path by using the layout interface specifically includes the following steps:
loading the service component file into a memory by using a layout interface;
analyzing the service component file loaded into the memory, and respectively acquiring the execution codes of the service component file and the preloaded page, wherein the execution codes are used for starting the corresponding service and the preloaded page.
The occupation of local resources can be reduced by executing the codes to start corresponding services.
The method comprises the steps of determining a request path of a service component according to a storage path of a service component file, loading the service component file into a memory by using a layout interface according to the request path of the service component, analyzing the service component file loaded into the memory, and acquiring an execution code of the service component file.
The service component file and the preloaded page are loaded in advance through the layout interface, so that when the ReactNative page loads an application program, the service component file is directly obtained from the memory while the preloaded page is displayed, and no white screen operation occurs.
It is emphasized that, to further ensure the privacy and security of the service component file, the service component file may also be stored in a node of a blockchain.
The block chain referred by the application is a novel application mode of computer technologies such as distributed data storage, point-to-point transmission, a consensus mechanism, an encryption algorithm and the like. A block chain (Blockchain), which is essentially a decentralized database, is a series of data blocks associated by using a cryptographic method, and each data block contains information of a batch of network transactions, so as to verify the validity (anti-counterfeiting) of the information and generate a next block. The blockchain may include a blockchain underlying platform, a platform product service layer, an application service layer, and the like.
And step S204, when the application program is started, displaying the preloading page through the layout interface.
It should be noted that, the length and width of the layout interface are all set to 1 pixel, so that the layout interface is invisible to the user, and the service component file resources required by the layout interface are loaded in advance on the premise that the user does not perceive the preloaded page while the invisible layout interface displays the preloaded page.
The pre-loaded page is displayed when the application program is started, and the screen can be prevented from being displayed in a white mode. In this embodiment, the preloaded page needs to be loaded in advance, and because the preloaded page is in the service component file, the service component file needs to be loaded in advance correspondingly. Therefore, when the preloading page is displayed on the layout interface, the service component file is not required to be read from the disk and is directly obtained from the memory, the loading time of the resource file is greatly shortened, and the blank screen is avoided.
The method includes the steps that a preloading page is configured through Reactnative, the preloading page is packaged and is deployed in a service component file under a resource directory, a layout interface is created in an application program starting page, the preloading page is transmitted into the layout interface, the service component file is loaded and analyzed into a memory through the layout interface, the preloading page is obtained, and the preloading page is displayed through the layout interface when the application program is started; according to the method and the device, the layout interface is created on the application program starting page, the service component file and the preloading page are loaded in advance through the layout interface, so that the ReactNative page can directly acquire the service component file from the memory while the application program is loaded and the preloading page is displayed, the white screen operation can be avoided, and the user experience is enhanced.
The application is operational with numerous general purpose or special purpose computing system environments or configurations. For example: personal computers, server computers, hand-held or portable devices, tablet-type devices, multiprocessor systems, microprocessor-based systems, set top boxes, programmable consumer electronics, network PCs, minicomputers, mainframe computers, distributed computing environments that include any of the above systems or devices, and the like. The application may be described in the general context of computer-executable instructions, such as program modules, being executed by a computer. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform particular tasks or implement particular abstract data types. The application may also be practiced in distributed computing environments where tasks are performed by remote processing devices that are linked through a communications network. In a distributed computing environment, program modules may be located in both local and remote computer storage media including memory storage devices.
It will be understood by those skilled in the art that all or part of the processes of the methods of the embodiments described above can be implemented by hardware associated with computer readable instructions, which can be stored in a computer readable storage medium, and when executed, the processes of the embodiments of the methods described above can be included. The storage medium may be a non-volatile storage medium such as a magnetic disk, an optical disk, a Read-Only Memory (ROM), or a Random Access Memory (RAM).
It should be understood that, although the steps in the flowcharts of the figures are shown in order as indicated by the arrows, the steps are not necessarily performed in order as indicated by the arrows. The steps are not performed in the exact order shown and may be performed in other orders unless explicitly stated herein. Moreover, at least a portion of the steps in the flow chart of the figure may include multiple sub-steps or multiple stages, which are not necessarily performed at the same time, but may be performed at different times, which are not necessarily performed in sequence, but may be performed alternately or alternately with other steps or at least a portion of the sub-steps or stages of other steps.
With further reference to fig. 4, as an implementation of the method shown in fig. 2, the present application provides an embodiment of a preloading device based on ReactNative, where the embodiment of the device corresponds to the embodiment of the method shown in fig. 2, and the device may be specifically applied to various electronic devices.
As shown in fig. 4, the ReactNative based preloading device 400 according to this embodiment includes: a configuration module 401, a creation module 402, a load resolution module 403, and a presentation module 404. Wherein:
the configuration module 401 is configured to configure a preloaded page through the Reactnative, package the preloaded page, and deploy the preloaded page in a service component file in a resource directory;
the creating module 402 is configured to create a layout interface on an application start page, and transfer the preloaded page into the layout interface;
the loading analysis module 403 is configured to use the layout interface to load and analyze the service component file into a memory, and obtain the preloaded page;
the presentation module 404 is configured to present the preloaded page through the layout interface when the application is started.
It is emphasized that, to further ensure the privacy and security of the service component file, the service component file may also be stored in a node of a blockchain.
In this embodiment, a layout interface is created on an application program start page, and a service component file and a preloaded page are loaded in advance through the layout interface, so that the ReactNative page directly obtains the service component file from a memory while the application program is loaded and the preloaded page is displayed, and therefore, a white screen operation can be avoided, and user experience is enhanced.
In some optional implementations of this embodiment, the creating module 402 includes a loading submodule and an association submodule, where the loading submodule is configured to load the service component file using a management class provided by realnative; the association submodule is used for associating the layout interface with the management class and transmitting the preloaded page in the business component file into the layout interface.
The preloading page is transmitted into the layout interface, so that a foundation is laid for displaying the preloading page by using the layout interface subsequently.
In some optional implementation manners of this embodiment, the association submodule includes a calling unit and an importing unit, where the calling unit is configured to call an application starting method in the layout interface and import the management class into the layout interface; the transmitting unit is used for transmitting the preloading page into the layout interface through the management class.
In some optional implementations of this embodiment, the configuration module 401 further includes: the packaging sub-module is used for packaging the execution codes of the preloaded pages to generate preloaded service component files; the deployment submodule is used for distributing a unique identification for the preloaded service component file and deploying the preloaded page service component file into a service component file of a corresponding service.
In this embodiment, the preloaded page is packaged to generate a preloaded service component file, and the preloaded page service component file is deployed in a service component file of a corresponding service, so that the preloaded page can be associated with a service of an application program.
In some optional implementation manners, the loading analysis module 403 includes an obtaining submodule and an analysis loading submodule, where the obtaining submodule is used for obtaining, by the layout interface, a storage path of a service component file corresponding to a preloaded page according to the preloaded page identification information; the analysis loading submodule is used for analyzing and loading the service component file corresponding to the storage path by using the layout interface and caching the service component file into a memory; the obtaining submodule is further used for obtaining the preloading page from the memory.
In this embodiment, the layout interface is used to load, analyze and cache the service component file in the memory in advance, and since the service component file contains the preloaded page, the preloaded page can be obtained after the service component file is loaded and analyzed, so that the ReactNative can start a corresponding service according to the service component file which is loaded and analyzed in advance, and avoid the occurrence of white screen operation.
In some optional implementation manners, the obtaining sub-module includes a matching unit and a determining unit, and the matching unit is configured to match, according to the preloaded page identification information, a unique identification identifier of the preloaded service component file of the preloaded page; the determining unit is used for determining the preloaded service component file corresponding to the preloaded page according to the unique identification mark and determining the storage path of the corresponding service component file based on the storage path of the preloaded service component file.
In some optional implementations, the parse-loading submodule is further configured to:
loading the service component file into a memory by using the layout interface;
analyzing the service component file loaded into the memory, and respectively obtaining the execution codes of the service component file and the pre-loading page, wherein the execution codes are used for starting the corresponding service and the pre-loading page.
The service component file and the preloaded page are loaded in advance through the layout interface, so that when the ReactNative page loads an application program, the service component file is directly obtained from the memory while the preloaded page is displayed, and no white screen operation occurs.
In order to solve the technical problem, an embodiment of the present application further provides a computer device. Referring to fig. 5, fig. 5 is a block diagram of a basic structure of a computer device according to the present embodiment.
The computer device 5 comprises a memory 51, a processor 52, a network interface 53 communicatively connected to each other via a system bus. It is noted that only a computer device 5 having components 51-53 is shown, but it is understood that not all of the shown components are required to be implemented, and that more or fewer components may be implemented instead. As will be understood by those skilled in the art, the computer device is a device capable of automatically performing numerical calculation and/or information processing according to a preset or stored instruction, and the hardware includes, but is not limited to, a microprocessor, an Application Specific Integrated Circuit (ASIC), a Programmable Gate Array (FPGA), a Digital Signal Processor (DSP), an embedded device, and the like.
The computer device can be a desktop computer, a notebook, a palm computer, a cloud server and other computing devices. The computer equipment can carry out man-machine interaction with a user through a keyboard, a mouse, a remote controller, a touch panel or voice control equipment and the like.
The memory 51 includes at least one type of readable storage medium including a flash memory, a hard disk, a multimedia card, a card type memory (e.g., SD or DX memory, etc.), a Random Access Memory (RAM), a Static Random Access Memory (SRAM), a Read Only Memory (ROM), an Electrically Erasable Programmable Read Only Memory (EEPROM), a Programmable Read Only Memory (PROM), a magnetic memory, a magnetic disk, an optical disk, etc. In some embodiments, the memory 51 may be an internal storage unit of the computer device 5, such as a hard disk or a memory of the computer device 5. In other embodiments, the memory 51 may also be an external storage device of the computer device 5, such as a plug-in hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash memory Card (Flash Card), and the like, which are provided on the computer device 5. Of course, the memory 51 may also comprise both an internal storage unit of the computer device 5 and an external storage device thereof. In this embodiment, the memory 51 is generally used for storing an operating system and various application software installed on the computer device 5, such as computer readable instructions of a preloading method based on ReactNative, and the like. Further, the memory 51 may also be used to temporarily store various types of data that have been output or are to be output.
The processor 52 may be a Central Processing Unit (CPU), controller, microcontroller, microprocessor, or other data Processing chip in some embodiments. The processor 52 is typically used to control the overall operation of the computer device 5. In this embodiment, the processor 52 is configured to execute computer readable instructions stored in the memory 51 or process data, for example, execute computer readable instructions of the ReactNative-based preloading method.
The network interface 53 may comprise a wireless network interface or a wired network interface, and the network interface 53 is generally used for establishing communication connections between the computer device 5 and other electronic devices.
In this embodiment, when the processor executes the computer readable instructions stored in the memory, the steps of the read native-based preloading method in the above embodiments are implemented, a layout interface is created on an application program start page, and the service component file and the preload page are loaded in advance through the layout interface, so that the read native page directly obtains the service component file from the memory while the application program is loaded to display the preload page, thereby avoiding the occurrence of a white screen operation and enhancing user experience.
The application further provides another embodiment, that is, a computer-readable storage medium is provided, where computer-readable instructions are stored, and the computer-readable instructions can be executed by at least one processor, so that the at least one processor performs the steps of the above-mentioned realnative-based preloading method, creates a layout interface on an application program start page, and loads a service component file and a preload page in advance through the layout interface, so that the realnative page directly obtains the service component file from a memory while loading the application program to display the preload page, and white screen operation can be avoided, thereby enhancing user experience.
Through the above description of the embodiments, those skilled in the art will clearly understand that the method of the above embodiments can be implemented by software plus a necessary general hardware platform, and certainly can also be implemented by hardware, but in many cases, the former is a better implementation manner. Based on such understanding, the technical solutions of the present application may be embodied in the form of a software product, which is stored in a storage medium (such as ROM/RAM, magnetic disk, optical disk) and includes instructions for enabling a terminal device (such as a mobile phone, a computer, a server, an air conditioner, or a network device) to execute the method according to the embodiments of the present application.
It is to be understood that the above-described embodiments are merely illustrative of some, but not restrictive, of the broad invention, and that the appended drawings illustrate preferred embodiments of the invention and do not limit the scope of the invention. This application is capable of embodiments in many different forms and is provided for the purpose of enabling a thorough understanding of the disclosure of the application. Although the present application has been described in detail with reference to the foregoing embodiments, it will be apparent to one skilled in the art that the present application may be practiced without modification or with equivalents of some of the features described in the foregoing embodiments. All equivalent structures made by using the contents of the specification and the drawings of the present application are directly or indirectly applied to other related technical fields and are within the protection scope of the present application.
Claims (10)
1. A preloading method based on ReactNative is characterized by comprising the following steps:
configuring a preloading page through Reactnative, packaging the preloading page, and deploying the preloading page in a service component file under a resource directory;
creating a layout interface on an application program starting page, and transmitting the preloading page into the layout interface;
loading and analyzing the service component file into a memory by using the layout interface, and acquiring the preloading page; and
and when the application program is started, displaying the preloading page through the layout interface.
2. The ReactNative-based preloading method according to claim 1, wherein the creating a layout interface at an application launch page, the step of transferring the preload page into the layout interface comprises:
loading the service component file by using a management class provided by ReactNative;
and associating the layout interface with the management class, and transmitting the preloading page in the service component file into the layout interface.
3. The ReactNative-based preloading method according to claim 2, wherein the step of associating the layout interface with the management class and transferring the preloaded page in the business component file into the layout interface comprises:
calling an application starting method in the layout interface, and transmitting the management class into the layout interface;
and transmitting the preloading page into the layout interface through the management class.
4. The ReactNative-based preloading method according to claim 3, wherein the step of packaging the preloading page and deploying it in a service component file under a resource directory comprises:
packing the execution codes of the preloaded pages to generate preloaded service component files;
and distributing a unique identification mark for the preloaded service component file, and deploying the preloaded page service component file in a service component file of a corresponding service.
5. The ReactNative-based preloading method according to claim 4, wherein the step of loading and analyzing the service component file into a memory by using the layout interface and acquiring the preloaded page comprises:
the layout interface acquires a storage path of a service component file corresponding to the preloaded page according to the identification information of the preloaded page;
analyzing and loading the service component file corresponding to the storage path by using the layout interface, and caching the service component file into a memory;
and acquiring the preloaded page from the memory.
6. The ReactNative-based preloading method according to claim 5, wherein the step of the layout interface obtaining the storage path of the business component file corresponding to the preloaded page according to the preloaded page identification information comprises:
according to the identification information of the preloaded page, matching with the unique identification of the preloaded service component file of the preloaded page;
determining a preloaded service component file corresponding to the preloaded page according to the unique identification mark;
and determining a storage path of the corresponding business component file based on the storage path of the preloaded business component file.
7. The ReactNative-based preloading method according to claim 5, wherein the step of analytically loading the business component file corresponding to the deposit path using the layout interface comprises:
loading the service component file into a memory by using the layout interface;
analyzing the service component file loaded into the memory, and respectively obtaining the execution codes of the service component file and the pre-loading page, wherein the execution codes are used for starting the corresponding service and the pre-loading page.
8. A ReactNative-based preloading device is characterized by comprising:
the configuration module is used for configuring the preloading page through the Reactnative, packaging the preloading page and deploying the preloading page in a service component file under a resource directory;
the creating module is used for creating a layout interface on an application program starting page and transmitting the preloading page into the layout interface;
the loading analysis module is used for loading and analyzing the service component file into a memory by using the layout interface and acquiring the preloading page; and
and the display module is used for displaying the preloading page through the layout interface when the application program is started.
9. A computer device comprising a memory having computer readable instructions stored therein and a processor which when executed implements the steps of the ReactNative based preloading method as recited in any one of claims 1 to 7.
10. A computer readable storage medium having computer readable instructions stored thereon which, when executed by a processor, implement the steps of the ReactNative based preloading method as defined in any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011314147.XA CN112416458A (en) | 2020-11-20 | 2020-11-20 | Preloading method and device based on ReactNative, computer equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011314147.XA CN112416458A (en) | 2020-11-20 | 2020-11-20 | Preloading method and device based on ReactNative, computer equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112416458A true CN112416458A (en) | 2021-02-26 |
Family
ID=74777817
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011314147.XA Pending CN112416458A (en) | 2020-11-20 | 2020-11-20 | Preloading method and device based on ReactNative, computer equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112416458A (en) |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113825008A (en) * | 2021-11-24 | 2021-12-21 | 飞狐信息技术（天津）有限公司 | Active page display method and device |
| CN113918241A (en) * | 2021-10-27 | 2022-01-11 | 挂号网（杭州）科技有限公司 | Application running method and device, electronic equipment and storage medium |
| CN114117285A (en) * | 2022-01-27 | 2022-03-01 | 浙江口碑网络技术有限公司 | Position information processing method and device based on H5 page and electronic equipment |
| CN114296789A (en) * | 2022-03-09 | 2022-04-08 | 太平金融科技服务(上海)有限公司深圳分公司 | Business processing method, device, equipment and storage medium based on full-flow configuration |
| CN114780167A (en) * | 2022-03-28 | 2022-07-22 | 上海幻电信息科技有限公司 | Preloading method and system based on ReactNative |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109783744A (en) * | 2018-12-05 | 2019-05-21 | 北京奇艺世纪科技有限公司 | The page starts method, apparatus, terminal and computer readable storage medium |
| CN110007978A (en) * | 2018-11-20 | 2019-07-12 | 阿里巴巴集团控股有限公司 | A kind of method, device and equipment preloading the page |
| CN110309451A (en) * | 2018-03-02 | 2019-10-08 | 拉扎斯网络科技（上海）有限公司 | A kind of web preloads the generation method and device of the page |
| CN110442399A (en) * | 2019-08-09 | 2019-11-12 | 广州小鹏汽车科技有限公司 | The React Native business of application executes method, apparatus, storage medium and terminal device |
| CN111258800A (en) * | 2020-02-03 | 2020-06-09 | 北京无限光场科技有限公司 | Page processing method and device and electronic equipment |
| CN111898053A (en) * | 2020-07-31 | 2020-11-06 | 平安普惠企业管理有限公司 | Page browsing method, device, equipment and computer readable storage medium |
-
2020
- 2020-11-20 CN CN202011314147.XA patent/CN112416458A/en active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110309451A (en) * | 2018-03-02 | 2019-10-08 | 拉扎斯网络科技（上海）有限公司 | A kind of web preloads the generation method and device of the page |
| CN110007978A (en) * | 2018-11-20 | 2019-07-12 | 阿里巴巴集团控股有限公司 | A kind of method, device and equipment preloading the page |
| CN109783744A (en) * | 2018-12-05 | 2019-05-21 | 北京奇艺世纪科技有限公司 | The page starts method, apparatus, terminal and computer readable storage medium |
| CN110442399A (en) * | 2019-08-09 | 2019-11-12 | 广州小鹏汽车科技有限公司 | The React Native business of application executes method, apparatus, storage medium and terminal device |
| CN111258800A (en) * | 2020-02-03 | 2020-06-09 | 北京无限光场科技有限公司 | Page processing method and device and electronic equipment |
| CN111898053A (en) * | 2020-07-31 | 2020-11-06 | 平安普惠企业管理有限公司 | Page browsing method, device, equipment and computer readable storage medium |
Non-Patent Citations (1)
| Title |
|---|
| 腾讯IVWEB团队: "React-Native 安卓预加载优化方案", pages 1 - 4, Retrieved from the Internet <URL:https://cloud.tencent.com/developer/article/1005382> * |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113918241A (en) * | 2021-10-27 | 2022-01-11 | 挂号网（杭州）科技有限公司 | Application running method and device, electronic equipment and storage medium |
| CN113825008A (en) * | 2021-11-24 | 2021-12-21 | 飞狐信息技术（天津）有限公司 | Active page display method and device |
| CN114117285A (en) * | 2022-01-27 | 2022-03-01 | 浙江口碑网络技术有限公司 | Position information processing method and device based on H5 page and electronic equipment |
| CN114117285B (en) * | 2022-01-27 | 2022-05-31 | 浙江口碑网络技术有限公司 | Position information processing method and device based on H5 page and electronic equipment |
| CN114296789A (en) * | 2022-03-09 | 2022-04-08 | 太平金融科技服务(上海)有限公司深圳分公司 | Business processing method, device, equipment and storage medium based on full-flow configuration |
| CN114296789B (en) * | 2022-03-09 | 2022-07-22 | 太平金融科技服务(上海)有限公司深圳分公司 | Business processing method, device, equipment and storage medium based on full-process configuration |
| CN114780167A (en) * | 2022-03-28 | 2022-07-22 | 上海幻电信息科技有限公司 | Preloading method and system based on ReactNative |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112416458A (en) | Preloading method and device based on ReactNative, computer equipment and storage medium | |
| CN111414407A (en) | Data query method and device of database, computer equipment and storage medium | |
| CN105718313A (en) | Application operation method and device | |
| CN113536185B (en) | Application page loading method, storage medium and related equipment | |
| CN112631910A (en) | Front-end testing method and device, computer equipment and storage medium | |
| CN113259342A (en) | Login verification method, device, computer equipment and medium | |
| CN115098186A (en) | Project processing method and device, computer equipment and storage medium | |
| CN112631924A (en) | Automatic testing method and device, computer equipment and storage medium | |
| CN111552535A (en) | Interface picture replacing method and device, computer equipment and storage medium | |
| CN115794437A (en) | Calling method and device of microservice, computer equipment and storage medium | |
| CN113434254B (en) | Client deployment method, client deployment apparatus, computer device, and storage medium | |
| CN112083925A (en) | Data acquisition method, device, equipment and storage medium based on H5 page development | |
| CN110765610A (en) | PDM (product data management) integration method and device, computer equipment and storage medium | |
| CN113315829B (en) | Client offline H5 page loading method and device, computer equipment and medium | |
| CN114090066A (en) | User interface card view generation method and device, computer equipment and medium | |
| CN113377376A (en) | Data packet generation method, data packet generation device, electronic device, and storage medium | |
| CN112328940A (en) | Method and device for embedding transition page into webpage, computer equipment and storage medium | |
| CN112714148A (en) | Interface configuration method, device, equipment and medium | |
| CN115795209A (en) | Method, device, equipment and medium for executing Eval function based on browser plug-in | |
| CN117290019A (en) | Interface calling method and device, computer equipment and storage medium | |
| CN114238466A (en) | Message pushing method and device, computer equipment and storage medium | |
| CN117591190A (en) | Application data loading optimization method, device, equipment and storage medium thereof | |
| CN116700829A (en) | Resource data processing method, device, computer equipment and storage medium | |
| CN113946397A (en) | Display package packaging method, device, system and storage medium | |
| CN117008993A (en) | Resource processing method, device, computer equipment and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |