Application starting method and device, electronic equipment and storage medium
By using a shared Bridge instance and separate JS packages in React Native applications, the white screen issue during React Native application startup was resolved, improving startup performance and user experience.
Patent Information
- Application Number
- CN201910887498.0
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2019-09-19
- Publication Date
- 2026-01-16
- Estimated Expiration
- 2039-09-19
AI Technical Summary
The initial white screen when launching a React Native application can be quite long, impacting the user experience. Furthermore, the startup performance decreases as the application becomes more complex.
It adopts a React Native component architecture where all view controllers share a single Bridge instance, the JS core package and the JS business package are separated, the Bridge instance is pre-created and cached, and temporary interfaces are rendered in parallel when the JS package is loaded.
It reduces memory usage and initialization time, shortens loading time, and improves application startup performance and user experience.
Smart Images

Figure CN112612531B_ABST
Abstract
Description
TECHNICAL FIELD
[0001] The present application relates to the technical field of computer, and in particular, to an application program starting method and device, electronic equipment and storage medium. BACKGROUND
[0002] React Native(RN) is an open source cross-platform mobile application development framework. React Native supports the development of mobile applications supporting IOS, Android and Web platforms using JavaScript(JS) language. Mobile applications developed using React Native(hereinafter referred to as: React Native application or RN application) not only have user experience comparable to native applications, but also can realize multi-end code reuse and have high development efficiency. In the React Native application, all JS files will eventually be packaged into a package file, i.e. JS Bundle(JS Bundle can also be referred to as JS package), and loaded, and communication with the native framework is realized through the Bridge(Bridge can also be referred to as a bridge or other names).
[0003] When the React Native application is started for the first time, the entire JS Bundle needs to be loaded, and then the rendering function is executed to render the first page. In this process, a white background is usually displayed, and the user will feel a short period of white screen phenomenon, which affects the user experience. Currently, in response to such a situation, the React Native application will display a loading animation to the user when it is started for the first time, and the animation will be closed after the entire JS Bundle is loaded and the first page is rendered. With the increasing complexity of the application, the size of the JS Bundle continues to increase, and the animation time will become longer and longer.
[0004] In order to further improve the starting performance of the React Native application, the component architecture of React Native is optimized in the prior art. Specifically, a corresponding Bridge instance is set for each page, and the JS Bundle corresponding to the page is loaded through the Bridge instance corresponding to the page. With the above component architecture of React Native, the starting performance of the React Native application is poor. SUMMARY
[0005] The present application provides an application program starting method, device, electronic equipment and storage medium to improve the starting performance of the application program.
[0006] In a first aspect, the present application provides an application program starting method, comprising:
[0007] obtaining a starting instruction of an application installed on a terminal device;
[0008] According to the starting instruction, a pre-created Bridge instance is called to perform an operation of loading a JS package, wherein the Bridge instance is a unique interface for loading the JS package, the JS package includes a JS core package and at least one JS business package, and the JS package is used to create an interface view of the application.
[0009] According to the JS package, the interface view of the application is created in a React Native environment.
[0010] Optionally, when the JS package includes a JS core package and one JS business package, the JS package is used to create a homepage interface view of the application.
[0011] When the JS package includes a JS core package and a plurality of JS business packages, the JS package is used to create a homepage interface view of the application and other interface views associated with the homepage interface view.
[0012] Optionally, the operation of calling the pre-created Bridge instance to load the JS package according to the starting instruction includes:
[0013] The pre-created Bridge instance is called to load the JS core package from a local resource or a server;
[0014] According to an identifier corresponding to the at least one JS business package, a JS business package corresponding to the identifier is loaded from the local resource or the server.
[0015] Optionally, the method further includes: in the process of performing the operation of loading the JS package, an operation of rendering a temporary interface is performed in parallel.
[0016] Correspondingly, the operation of creating the interface view of the application in the React Native environment according to the JS package includes:
[0017] In the React Native environment, the interface view of the application is obtained according to the JS package and the temporary interface.
[0018] Optionally, the method further includes:
[0019] obtaining a business access request for the application;
[0020] According to the business access request, it is determined whether a JS business package corresponding to the business access request is cached in a local resource;
[0021] If the JS service package corresponding to the service access request is cached in the local resource, the JS service package corresponding to the service access request is acquired from the local resource through the Bridge instance;
[0022] If the JS service package corresponding to the service access request is not cached in the local resource, the JS service package corresponding to the service access request is acquired from the server through the Bridge instance.
[0023] Optionally, the method further comprises: creating an interface view corresponding to the service access request in the React Native environment according to the JS service package corresponding to the service access request.
[0024] Optionally, if the JS service package corresponding to the service access request is not cached in the local resource, after the JS service package corresponding to the service access request is acquired from the server through the Bridge instance, the method further comprises:
[0025] Caching the JS service package corresponding to the service access request to the local resource.
[0026] Optionally, before the operation of acquiring the starting instruction of the application installed on the terminal device, the method further comprises:
[0027] Initializing a React Native environment, and creating a Bridge instance preloading framework JS module file in the React Native environment after initialization is completed;
[0028] Or, caching the Bridge instance after the application is started last time.
[0029] In a second aspect, the application provides an application starting device, comprising:
[0030] An acquisition module, configured to acquire a starting instruction of an application installed on a terminal device;
[0031] A loading module, configured to call a pre-created Bridge instance to perform an operation of loading a JS package according to the starting instruction, wherein the Bridge instance is a unique interface for loading the JS package, the JS package comprises a JS core package and at least one JS service package, and the JS package is used to create an interface view of the application;
[0032] A view interface creation module, configured to create an interface view of the application in a React Native environment according to the JS package.
[0033] In a third aspect, the application further provides an electronic device, comprising a memory, a processor and computer program instructions;
[0034] The memory stores the computer program instructions.
[0035] The processor executes the computer program instructions to perform the method of the first aspect.
[0036] In a fourth aspect, the application further provides a readable storage medium, comprising a program;
[0037] The program, when executed by a processor, performs the method of the first aspect.
[0038] In a fifth aspect, the application further provides a program product, the program product comprising a computer program stored in a readable storage medium, at least one processor of an application starting device can read the computer program from the readable storage medium, and the at least one processor executes the computer program to enable the application starting device to perform the application starting method according to any one of the first aspect.
[0039] The application provides an application starting method and device, electronic equipment and a storage medium. A starting instruction of an application installed on a terminal device is acquired. According to the starting instruction, a pre-created Bridge instance is called, an operation of loading a JS package is performed, and further, an interface view of the application is created in a React Native environment according to the loaded JS package. Since the pre-created Bridge instance is the only interface for loading the JS package, the Bridge instance occupies less memory, and the starting performance of the application can be improved. In addition, when the loaded JS package includes multiple JS service packages, the initialization of the Bridge instance does not need to be repeatedly performed, the time consumption for starting the application is reduced, and the starting performance of the application is improved. Further, since all the JS service packages share one JS core package, the JS core package does not need to be repeatedly loaded, the size of the JS package is reduced, the time consumption for loading the JS package is shortened, and the starting performance of the application is improved. BRIEF DESCRIPTION OF DRAWINGS
[0040] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the prior art, the drawings needed in the embodiments or prior art description will be briefly introduced. Obviously, the drawings in the following description are some embodiments of the present application, and for those skilled in the art, other drawings can also be obtained without creative labor.
[0041] Figure 1 A schematic diagram of the starting process of the React Native application in the prior art is shown in FIG. 1.
[0042] Figure 2 A schematic diagram of the component architecture of the React Native in the prior art is shown in FIG. 2.
[0043] Figure 3 A schematic diagram of the component architecture of React Native provided by this invention;
[0044] Figure 4 This is a flowchart illustrating an embodiment of the application launch method provided by the present invention;
[0045] Figure 5 This is a flowchart illustrating a second embodiment of the application launch method provided by the present invention.
[0046] Figure 6 A flowchart illustrating a third embodiment of the application launch method provided by the present invention;
[0047] Figure 7 This is a schematic diagram of the structure of an embodiment of the application launcher provided by the present invention;
[0048] Figure 8 This is a schematic diagram of the structure of a second embodiment of the application launcher provided by the present invention;
[0049] Figure 9 This is a schematic diagram of the structure of Embodiment 3 of the application launch device provided by the present invention;
[0050] Figure 10 This is a schematic diagram of the structure of an electronic device according to a first embodiment of the present invention. Detailed Implementation
[0051] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.
[0052] Figure 1 This is a diagram illustrating the startup process of a React Native application in existing technology, for reference only. Figure 1 As shown, the startup process of a React Native application includes the following steps: native initialization, loading JS packages, pre-reading, reading, JS rendering, and Native rendering. The execution order of each step can be as follows: Figure 1 The arrows shown indicate the direction. (Refer to...) Figure 1 As shown, loading the JS package accounts for approximately 50% of the application's startup time. As the application becomes more complex, the size of the JS package that needs to be loaded at startup increases, and the loading time for the JS package increases accordingly.
[0053] In the traditional way, when loading the JS package, the white screen or an animation is shown to the user, but as the size of the JS package increases, the white screen duration or animation duration becomes longer and longer, and the user experience becomes worse.
[0054] In the traditional way, there is also a way to optimize the component architecture of React Native to improve the startup performance of the application. Figure 2 The component architecture of React Native in the prior art is shown in the figure. Figure 2 The component architecture of React Native shown includes multiple view controllers, each of which corresponds to a Bridge instance through which the JS package corresponding to the page can be loaded. Further, the JS package corresponding to each page includes a JS core package and a JS business package. In actual application, different view controllers can call different businesses through the Bridge instances corresponding thereto, and different view controllers can also call the same business through the Bridge instances corresponding thereto. For example, view controller 1 calls the JS package corresponding to business 1 through Bridge 1, view controller 2 also calls the JS package corresponding to business 1 through Bridge 2, and view controller 3 can call the JS package corresponding to business 2 through Bridge 3.
[0055] Adopting Figure 2 The component architecture of React Native shown has the following problems:
[0056] 1. In the above architecture, a Bridge instance is created for each interface view. For a complex application, there are multiple interface views, and pre-creating multiple Bridge instances will occupy a large amount of memory and affect the application performance.
[0057] 2. For a complex application, when starting, there can be multiple interface views, so multiple JS packages corresponding to the multiple interface views need to be loaded. If multiple JS packages are loaded, multiple Bridge instances corresponding to the multiple JS packages need to be initialized during the loading process, which will take a long time and affect the startup performance of the application.
[0058] 3. Each JS package contains a JS core package and a JS business package, and if multiple JS packages are loaded, the JS core package will be loaded repeatedly, which not only increases the size of a single JS package, but also takes a long time to load the JS package, affecting the startup performance of the application.
[0059] Based on the above problems in the prior art, the present application proposes a component architecture of React Native, as shown in Figure 3The component architecture of the illustrated React Native includes multiple view controllers, all of which correspond to a unique Bridge instance through which a JS package is loaded. For the JS package part, the JS core package is split from the JS business package, and all JS business packages share a JS core package.
[0060] In Figure 3 Based on the component architecture of the illustrated React Native, the application further provides an application starting method to shorten the starting time of the application and improve the starting performance of the application.
[0061] Figure 4 A flowchart of the application starting method embodiment one is provided. Figure 4 The method of the embodiment includes the following steps.
[0062] S401, obtaining a starting instruction of an application installed on a terminal device.
[0063] Specifically, the starting instruction can be implemented in the following ways.
[0064] In one possible implementation, a user generates the starting instruction of the application by touching an icon corresponding to the application to be started displayed on a touch screen of the terminal device. In another possible implementation, the user can generate the starting instruction by inputting an audio, such as "open XX application", to the terminal device, and the terminal device performs voice recognition on the collected audio. In another possible implementation, the user can also generate the starting instruction by selecting an icon corresponding to the application to be started by operating a key on the terminal device, and then pressing a "confirm" key to determine to start the application corresponding to the icon.
[0065] Of course, the starting instruction of the application installed on the terminal device can also be obtained in other ways, such as double-clicking the icon corresponding to the application, long-pressing the icon corresponding to the application, and the like, which are not limited to the above-described several ways. The above-mentioned several possible implementation ways are only exemplary and are not a limitation on the specific implementation of the step.
[0066] S402, according to the starting instruction, calling a pre-created Bridge instance to perform a loading operation of a JS package.
[0067] Specifically, the JS package includes a JS core package and at least one JS business package, wherein the JS core package includes source code, routing configuration information of all pages of the application, and encapsulated tool functions with universality, and the JS business package includes routing configuration information of all pages corresponding to the business and business information.
[0068] The pre-created Bridge instance called in this step loads the JS package from the local resource or the server, and the pre-created Bridge instance is the only interface for loading the JS package. Illustratively, the pre-created Bridge instance called loads the JS package, which can be achieved in the following manner:
[0069] In a possible implementation, the terminal device loads the JS package from the local resource. Specifically, the terminal device calls the pre-created Bridge instance to load the JS core package from the local resource, and loads at least one JS service package from the local resource according to the identifier of the at least one JS service package.
[0070] In another possible implementation, the terminal device loads the JS package from the server. Specifically, the terminal device sends a JS package acquisition request to the server, the server sends the JS package to the terminal device after receiving the JS package acquisition request, the terminal device receives the JS package and stores the JS package in the local resource, and then the terminal device calls the pre-created Bridge instance to load the JS package from the local resource.
[0071] In this step, if the JS package is stored in the local resource, the JS package is loaded from the local resource first, and if the JS package is not stored in the local resource, the JS package is loaded from the server. If the JS core package is stored in the local resource, the JS core package is loaded from the local resource, and if the JS core package is not stored in the local resource, the JS core package is loaded from the server; if the JS service package is stored in the local resource, the JS service package is loaded from the local resource, and if the JS service package is not stored in the local resource, the JS service package is loaded from the server.
[0072] In addition, the pre-created Bridge instance can be obtained in the following manner:
[0073] In a possible implementation, the React Native environment is initialized before the starting instruction of the application installed on the terminal device is acquired, and the Bridge instance is created in the initialized React Native environment. That is, the Bridge instance is created in the initialized React Native environment.
[0074] In another possible implementation, the Bridge instance is cached after the application is started once, and the cached Bridge instance is called to load the JS package when the application is started next time.
[0075] Through preloading and caching the Bridge instance, the secondary loading speed can be improved, the starting time consumption of the application can be shortened, and the starting performance of the application can be improved.
[0076] S403、According to the JS package, the interface view of the application is created in the React Native environment.
[0077] Specifically, when the JS package includes the JS core package and one JS business package, a home interface view of the application is created in the React Native environment according to the JS package.
[0078] When the JS package includes the JS core package and multiple JS business packages, a home interface view of the application and other interface views associated with the home interface view are created in the React Native environment according to the JS package. The other interface views associated with the home interface view include other interface views that can be jumped to through the home interface view.
[0079] In the embodiment, a starting instruction of an application installed on a terminal device is acquired, a pre-created Bridge instance is called according to the starting instruction, an operation of loading a JS package is performed, and further, an interface view of the application is created in the React Native environment according to the loaded JS package. In the embodiment, the pre-created Bridge instance is the only interface for loading the JS package, and the Bridge instance occupies less memory, which can improve the starting performance of the application. In addition, when the loaded JS package includes multiple JS business packages, the initialized Bridge instance does not need to be repeatedly executed, which reduces the time consumption for starting the application and improves the starting performance of the application. Further, since all the JS business packages share one JS core package, the JS core package does not need to be repeatedly loaded, which not only reduces the size of the JS package, but also shortens the time consumption for loading the JS package and improves the starting performance of the application.
[0080] Figure 5 The flow of the application starting method embodiment two provided by the application is shown in FIG. 5. Figure 5 As shown in the figure, the method of the embodiment includes:
[0081] S501, acquiring a starting instruction of an application installed on a terminal device.
[0082] The step S501 in the embodiment is similar to the step S401 in the embodiment shown in FIG. 4, and the detailed description in the embodiment shown in FIG. 4 can be referred to, which will not be repeated here. Figure 4 Figure 4 S502, calling a pre-created Bridge instance according to the starting instruction, and performing an operation of loading a JS package.
[0083] S503, performing an operation of rendering a temporary interface in parallel in the process of performing the operation of loading the JS package.
[0084] S503, performing an operation of rendering a temporary interface in parallel in the process of performing the operation of loading the JS package.
[0085] Specifically, when the terminal device loads the JS package from the server, the terminal device sends a JS package acquisition request to the server, the server sends the JS package to the terminal device after receiving the JS package acquisition request, the terminal device receives the JS package and stores the JS package in a local resource, and then the terminal device loads the JS package from the local resource by calling the pre-created Bridge instance.
[0086] Exemplarily, in the process of performing the operation of loading the JS package, the operation of rendering the temporary interface is performed in parallel, which can be implemented in the following manner:
[0087] After the terminal device sends the JS package acquisition request, if the server does not return the JS package, the terminal device performs the operation of rendering the temporary interface, wherein the operation of rendering the temporary interface means performing a rendering function to obtain an initial interface view, and the initial interface view includes a related icon in a home interface view and a layout image of the home interface view.
[0088] S504, in the React Native environment, obtaining the interface view of the application according to the JS package and the temporary interface.
[0089] The step S504 in the embodiment is similar to the step S403 in the embodiment shown in Figure 4 The detailed description of the embodiment shown in Figure 4 The detailed description of the embodiment shown in
[0090] In the embodiment, the operation of rendering the temporary interface is performed in parallel in the process of obtaining the JS package from the network side by the terminal device, which can improve the resource utilization of the terminal device and improve the rendering speed of the home interface, thereby effectively improving the starting performance of the application.
[0091] Figure 6 The flowchart of the application starting method embodiment three provided by the application is shown in the figure. The method of the embodiment can be executed after the step S303 of the embodiment shown in Figure 3 The method of the embodiment can also be executed after the step S504 of the embodiment shown in Figure 5
[0092] As shown in Figure 6 The method of the embodiment includes:
[0093] S601, obtaining a service access request for the application.
[0094] S602, determining whether a JS service package corresponding to the service access request is cached in a local resource according to the service access request.
[0095] If the JS service package corresponding to the service request is cached in the local resource, step S603 is performed; if the JS service package corresponding to the service request is not cached in the local resource, step S604 is performed.
[0096] S603, acquiring the JS service package corresponding to the service access request from the local resource through the Bridge instance.
[0097] S604, acquiring the JS service package corresponding to the service access request from the server through the Bridge instance.
[0098] In actual application, if the application has accessed the page after the last start, the JS service package corresponding to the page may be cached, or the server sends the JS service package corresponding to the page with higher user access possibility to the terminal device, so that the terminal device caches the JS service package corresponding to the page with higher user access possibility in the local resource.
[0099] Therefore, if the JS service package corresponding to the service access request is cached in the local resource, the JS service package corresponding to the service access request is loaded from the local resource; if the JS service package corresponding to the service access request is not cached in the local resource, the JS service package corresponding to the service access request needs to be acquired from the server.
[0100] Specifically, the terminal device can acquire the JS service package corresponding to the service access request from the server in the following manner: the terminal device sends a JS service package acquisition request to the server, the server sends the JS service package to the terminal device after receiving the JS service package acquisition request, the terminal device receives the JS service package and stores the JS service package in the local resource, and then the terminal device loads the JS service package from the local resource by calling the pre-created Bridge instance.
[0101] S605, creating an interface view corresponding to the service access request in the React Native environment according to the JS service package corresponding to the service access request.
[0102] In the embodiment, since the JS core package is loaded when the application is started for the first time, only the JS business package for creating the interface view corresponding to the business access request needs to be loaded when the interface view corresponding to the business access request is created, and the JS core package does not need to be loaded repeatedly, thereby reducing the size of the JS package, shortening the time consumption for loading the JS package, and shortening the time required for the view interface to jump. In addition, in the embodiment, since the Bridge instance created in advance is initialized when the application is started for the first time, the Bridge instance created in advance is called to load the JS business package corresponding to the business access request, and the Bridge instance does not need to be initialized repeatedly, thereby shortening the time consumption for loading the JS package and shortening the time required for the view interface to jump.
[0103] In actual application, when the React Native application is expanded, the application compatible with the Web end can be compiled, but since the browser version of the terminal device held by some users is low, the React Native application cannot be compatible, therefore, in order to ensure the compatibility of the browser and the React Native application, the corresponding Polyfill can also be introduced in the React Native application.
[0104] Specifically, Polyfill.io reads the User-Agent (UA) header of each request, and generates the Polyfill suitable for the browser, and loads the corresponding Polyfill based on the characteristics used by the current application.
[0105] Figure 7 The structure schematic diagram of the application program starting device embodiment one provided by the application is shown in FIG. 1. Figure 7 As shown in FIG. 1, the device 70 of the embodiment includes an acquisition module 71, a loading module 72, and a view interface creating module 73.
[0106] The acquisition module 71 is configured to acquire the starting instruction of the application installed on the terminal device.
[0107] The loading module 72 is configured to call the Bridge instance created in advance to perform the operation of loading the JS package according to the starting instruction, wherein the Bridge instance is the only interface for loading the JS package, the JS package includes the JS core package and at least one JS business package, and the JS package is used to create the interface view of the application.
[0108] Specifically, when the JS package includes the JS core package and one JS business package, the JS package is used to create the homepage interface view of the application; when the JS package includes the JS core package and multiple JS business packages, the JS package is used to create the homepage interface view of the application and other interface views associated with the homepage interface view.
[0109] The view interface creation module 73 is used to create the interface view of the application in the React Native environment based on the JS package.
[0110] Specifically, the view interface creation module 73 is used to: call a pre-created Bridge instance to load the JS core package from local resources or a server; and load the JS business package corresponding to the identifier from local resources or a server according to the identifier corresponding to the at least one JS business package.
[0111] The apparatus provided in this embodiment can be used to perform... Figure 4 The technical solutions of the method embodiments shown are similar in principle and in effect, and will not be described again here.
[0112] Figure 8 This is a schematic diagram of the structure of a second embodiment of the application launch device provided by the present invention. Figure 8 As shown, the device 80 in this embodiment is in Figure 7 Based on the embodiment shown, it also includes: a rendering module 74.
[0113] The rendering module 74 is used to perform the rendering of a temporary interface in parallel while the loading module 72 is loading the JS package.
[0114] The apparatus provided in this embodiment can be used to perform... Figure 5 The technical solutions of the method embodiments shown are similar in principle and in effect, and will not be described again here.
[0115] Figure 9 This is a schematic diagram of the structure of Embodiment 3 of the application launch device provided by the present invention. Figure 9 As shown, the device 90 of this embodiment, in Figure 8 Based on the embodiment shown, it also includes: a cache module 75.
[0116] exist Figure 9 In the embodiment shown, the acquisition module 71 is further configured to acquire business access requests for the application.
[0117] The loading module 72 is further configured to determine, based on the business access request, whether the JS business package corresponding to the business access request is cached in the local resources; if the JS business package corresponding to the business access request is cached in the local resources, then the JS business package corresponding to the business access request is obtained from the local resources through the Bridge instance; if the JS business package corresponding to the business access request is not cached in the local resources, then the JS business package corresponding to the business access request is obtained from the server through the Bridge instance.
[0118] The view interface creation module 73 is further configured to create an interface view corresponding to the service access request in the React Native environment according to the JS service package corresponding to the service access request.
[0119] If the JS service package corresponding to the service access request is not cached in the local resource, after the Bridge instance obtains the JS service package corresponding to the service access request from the server, the caching module 75 is configured to cache the JS service package corresponding to the service access request to the local.
[0120] Optionally, before the obtaining module 71 obtains the starting instruction of the application installed on the terminal device, the caching module 75 is further configured to: initialize the React Native environment, and create the Bridge instance in the initialized React Native environment; or cache the Bridge instance after the last start of the application.
[0121] The apparatus provided in the embodiment can be used to execute the application program starting method. Figure 6 The method embodiment shown in the technical scheme, its implementation principle and technical effect are similar, here will not repeat.
[0122] Figure 10 The structure diagram of the electronic device embodiment provided by the present application is shown in the figure. Figure 10 The electronic device 100 of the embodiment includes a memory 101, a processor 102 and a computer program.
[0123] The computer program is stored in the memory 101 and is configured to be executed by the processor 102 to realize the application program starting method shown in any embodiment. Figures 4 to 6 The relevant description and effect corresponding to the steps of the application program starting method can be understood, and here will not be repeated. Figures 4 to 6
[0124] In the embodiment, the memory 101 and the processor 102 are connected through the bus 103.
[0125] The embodiment of the present application further provides a computer readable storage medium, which stores a computer program, and the computer program is executed by a processor to realize the application program starting method shown in any embodiment of the present application. Figures 4 to 6
[0126] In several embodiments provided by the present application, it should be understood that the disclosed apparatus and method can be implemented in other manners. For example, the described apparatus embodiments are merely schematic. For example, the division of the modules is merely a logical function division. For another example, an actual division can be another division manner, for example, multiple modules or components can be combined or integrated into another system, or some features can be ignored or not executed. In addition, the displayed or discussed mutual couplings or direct couplings or communication connections can be indirect couplings or communication connections through some interfaces, devices or modules, and can be in electrical, mechanical or other forms.
[0127] The modules illustrated as separated components can or can not be physically separated, and the components illustrated as modules can or can not be physical modules, i.e., can be located in one place or distributed to multiple network modules. Part or all of the modules can be selected according to actual needs to achieve the purpose of the embodiment.
[0128] In addition, each functional module in each embodiment of the present application can be integrated into a processing module, or each module can be physically present alone, or two or more modules can be integrated into one module. The integrated module can be realized in the form of hardware or in the form of hardware plus software functional module.
[0129] The program code for implementing the method of the present application can be written in any combination of one or more programming languages. The program code can be provided to a processor or controller of a general purpose computer, a special purpose computer, or other programmable data processing apparatus, so that the program code, when executed by the processor or controller, causes the functions / operations specified in the flowcharts and / or block diagrams to be performed. The program code can be executed entirely on a machine, partially on a machine, partially on a machine as a separate software package, and partially on a remote machine or server.
[0130] In the context of the present application, a machine-readable medium can be a tangible medium that contains or stores a program for use by or in connection with an instruction execution system, apparatus, or device. The machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can include but is not limited to an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any suitable combination of the foregoing. More specific examples of the machine-readable storage medium would include an electrical connection based on one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or Flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.
[0131] Moreover, while operations have been depicted in a particular order, this should not be understood as requiring such order nor that all illustrated operations be performed, to achieve desirable results. In certain circumstances, multitasking and parallel processing can be advantageous. Likewise, while a number of specific implementation details have been outlined, so as to provide a thorough description of the embodiments, the scope of the application is not limited to the specific details nor the order in which operations are performed. Certain features can be combined in a single implementation or embodiment, and likewise, some implementations or embodiments can be separated into constituent features. Conversely, various features of a single implementation or embodiment can be combined with or substituted for features of another implementation or embodiment.
[0132] Finally, it should be noted that the language used in the specification has been principally selected for readability and instructional purposes and can not have been selected to delineate or circumscribe the inventive subject matter, resorting as it can to a degree of abstraction. To that end, the subject matter disclosed above can encompass one or more aspects and / or elements of the description and / or drawings utilized by candidates as examples illustrating the aspects of the application encompassed by other examples and / or candidates, and vice versa. As such, the foregoing description should not be interpreted as a complete and comprehensive disclosure of the basic underlying principles of the subject matter.
Claims
1. An application program startup method characterized by comprising: The method comprises: obtaining a starting instruction of an application installed on a terminal device; according to the starting instruction, calling a pre-created Bridge instance to perform an operation of loading a JS package, wherein the Bridge instance is a unique interface for loading the JS package, the JS package comprises a JS core package and at least one JS service package, and the JS package is used to create an interface view of the application; creating the interface view of the application in a React Native environment according to the JS package; The method further comprises: in the process of performing the operation of loading the JS package, performing an operation of rendering a temporary interface in parallel; Accordingly, the step of creating the interface view of the application in the React Native environment according to the JS package comprises: obtaining the interface view of the application in the React Native environment according to the JS package and the temporary interface; Further comprising: obtaining a service access request for the application; determining whether a JS service package corresponding to the service access request is cached in a local resource according to the service access request; if the JS service package corresponding to the service access request is cached in the local resource, obtaining the JS service package corresponding to the service access request from the local resource through the Bridge instance; if the JS service package corresponding to the service access request is not cached in the local resource, obtaining the JS service package corresponding to the service access request from a server through the Bridge instance; Before the step of obtaining the starting instruction of the application installed on the terminal device, the method further comprises: initializing a React Native environment, and creating a Bridge instance in the initialized React Native environment; or, caching the Bridge instance after the last start of the application.
2. The method of claim 1, wherein, When the JS package comprises a JS core package and one JS service package, the JS package is used to create a home page interface view of the application; When the JS package comprises a JS core package and multiple JS service packages, the JS package is used to create a home page interface view of the application and other interface views associated with the home page interface view.
3. The method of claim 1, wherein, The step of calling the pre-created Bridge instance to perform the operation of loading the JS package comprises: calling the pre-created Bridge instance to load the JS core package from a local resource or a server; according to an identifier corresponding to each of the at least one JS service package, loading a JS service package corresponding to the identifier from the local resource or the server.
4. The method of claim 1, wherein, Further comprising: creating an interface view corresponding to the service access request in the React Native environment according to the JS service package corresponding to the service access request.
5. An application program startup apparatus characterized by comprising: It comprises: an obtaining module configured to obtain a starting instruction of an application installed on a terminal device; The loading module is configured to invoke a pre-created Bridge instance according to the start instruction, and perform an operation of loading a JS package, wherein the Bridge instance is a unique interface for loading the JS package, the JS package includes a JS core package and at least one JS business package, and the JS package is used to create an interface view of the application; The view interface creating module is configured to create the interface view of the application in a React Native environment according to the JS package; The rendering module is configured to perform an operation of rendering a temporary interface in parallel in a process of performing the operation of loading the JS package; The view interface creating module is further configured to obtain the interface view of the application in the React Native environment according to the JS package and the temporary interface; The obtaining module is further configured to obtain a business access request for the application; The loading module is further configured to determine whether a JS business package corresponding to the business access request is cached in a local resource according to the business access request, acquire the JS business package corresponding to the business access request from the local resource through the Bridge instance if the JS business package corresponding to the business access request is cached in the local resource, and acquire the JS business package corresponding to the business access request from a server through the Bridge instance if the JS business package corresponding to the business access request is not cached in the local resource; The apparatus further includes a caching module configured to cache the JS business package corresponding to the business access request to the local resource. Before the obtaining module obtains the start instruction of the application installed on the terminal device, the caching module is further configured to initialize a React Native environment, and create a Bridge instance in the React Native environment after initialization is completed; or cache the Bridge instance after the application is last started.
6. An electronic device, comprising: Comprise: a memory, a processor and computer program instructions; the memory stores the computer program instructions; the processor executes the computer program instructions to perform the method of any one of claims 1 to 4.
7. A readable storage medium characterized by, Comprise: a program; the program is executed by the processor to perform the method of any one of claims 1 to 4.
Citation Information
Patent Citations
Call processing method and apparatus, storage medium
CN109240697A
Page starting method and device, terminal and computer readable storage medium
CN109783744A