Page update method, electronic device and page update system
By replacing the Web Bundle file with the Webview component of the RN proxy page on the IOS side, the problem that RN services on the IOS side cannot be updated dynamically is solved, normal iterative updates of the business and bug fixes are realized, and user experience is improved.
Patent Information
- Application Number
- CN202311820130.5
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2023-12-26
- Publication Date
- 2025-08-05
- Estimated Expiration
- 2043-12-26
AI Technical Summary
The IOS side cannot perform dynamic updates of React Native (RN) services, resulting in bugs that cannot be fixed in online services and affecting user experience.
Load the Webview component through the RN proxy page, and replace the original second Web Bundle file in the client with the first Web Bundle file to achieve normal iterative updates and bug fixes for RN services.
It realizes dynamic updates of the IOS side RN service and improves the user experience.
Smart Images

Figure CN117707583B_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the field of Internet technology, and in particular to a page updating method, an electronic device, and a page updating system. Background Art
[0002] At present, React Native (RN) cross-platform technology has been widely used in various applications. It can enable a set of code to run on both Android and iOS. However, the iOS side cannot dynamically update RN services, which will cause some problems that cannot be fixed in time during user use, thereby reducing the user experience. Summary of the Invention
[0003] In order to at least overcome the above-mentioned deficiencies in the prior art, the present application aims to provide a page updating method, an electronic device and a page updating system.
[0004] In a first aspect, an embodiment of the present application provides a page update method, applied to a client, the page update method comprising:
[0005] Get the update notification for the target page sent by the server;
[0006] Launching the Webview component through a preset RN proxy page according to the update notification;
[0007] The Webview component downloads a first Web Bundle file corresponding to the target page according to the address information carried in the update notification, and uses the first Web Bundle file to replace a second Web Bundle file originally corresponding to the target page in the client.
[0008] In a possible implementation, the method further includes:
[0009] Obtaining rendering instructions for the target page;
[0010] The Webview component is started through the preset RN proxy page to render and display the target page according to the first Web Bundle file.
[0011] In a possible implementation, the target page is an HTML5 page.
[0012] In one possible implementation, the first Web Bundle file includes a simulated RN interface, and the method further includes:
[0013] Data interaction is performed with the target page through the simulated RN interface.
[0014] In a possible implementation, the client uses an IOS operating system; and the method further includes:
[0015] An installation package of an application based on the RN framework is obtained from an application store platform, and a target application is installed through the installation package, where the installation package includes the second Web Bundle file.
[0016] In a second aspect, an embodiment of the present application further provides a page update method, which is applied to a page update system including a server and a client. The page update method includes:
[0017] The server obtains a first Web Bundle file corresponding to the target page;
[0018] The server issues an update notification for the target page;
[0019] The client obtains the update notification for the target page;
[0020] The client starts the Webview component through a preset RN proxy page according to the update notification;
[0021] The client downloads a first Web Bundle file corresponding to the target page through the Webview component according to the address information carried in the file update notification, and uses the first Web Bundle file to replace a second Web Bundle file originally corresponding to the target page in the client.
[0022] In a possible implementation, the step of the server obtaining a first Web Bundle file corresponding to the target page includes:
[0023] Get the React Native business code corresponding to the target page;
[0024] Generate an abstract syntax tree of the React Native business code through a code compiler;
[0025] The abstract syntax tree is traversed, and a React-Native node in the abstract syntax tree is replaced with a React-Native-Web node to obtain the first Web Bundle file.
[0026] In a possible implementation, the method further includes:
[0027] The server provides an installation package of the target application to the application store platform, where the installation package of the target application includes the second Web Bundle file.
[0028] In a third aspect, an embodiment of the present application further provides an electronic device, including:
[0029] a memory for storing one or more programs;
[0030] The processor implements the page update method provided in the first aspect when the one or more programs are executed by the processor.
[0031] In a fourth aspect, an embodiment of the present application further provides a page update system, which includes a server and a client, and the server and the client cooperate with each other to implement the page update method provided in the second aspect above.
[0032] Based on any one of the above aspects, the page update method, electronic device and page update system provided in the embodiments of the present application can load the Webview component through the RN proxy page, and the Webview component uses the first Web Bundle file to replace the second Web Bundle file originally corresponding to the target page in the client. In this way, the normal iterative update of the RN service can be realized, and the bugs in the RN service can be repaired, thereby improving the user experience. BRIEF DESCRIPTION OF THE DRAWINGS
[0033] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the following is a brief introduction to the drawings required in the embodiments. It should be understood that the following drawings only show certain embodiments of the present application and therefore should not be regarded as limiting the scope. For ordinary technicians in this field, other relevant drawings can be obtained based on these drawings without paying any creative work.
[0034] Figure 1 A schematic diagram of an application scenario of the page update system provided in this embodiment;
[0035] Figure 2 This is one of the schematic flow charts of the page update method provided in this embodiment;
[0036] Figure 3 This is a second schematic flow chart of the page update method provided in this embodiment;
[0037] Figure 4 This is a third schematic flow chart of the page update method provided in this embodiment;
[0038] Figure 5 A schematic diagram of sub-steps of step S310 provided in this embodiment;
[0039] Figure 6 This is a schematic structural block diagram of the electronic device provided in this embodiment.
[0040] Icon: 100 - server; 200 - client; 700 - electronic device; 710 - processor; 720 - computer-readable storage medium. DETAILED DESCRIPTION
[0041] To make the objectives, technical solutions, and advantages of the embodiments of the present application more clear, the technical solutions in the embodiments of the present application will be clearly and completely described below in conjunction with the accompanying drawings of the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Generally, the components of the embodiments of the present application described and shown in the drawings herein can be arranged and designed in various different configurations.
[0042] Therefore, the following detailed description of the embodiments of the present application provided in the accompanying drawings is not intended to limit the scope of the present application for protection, but merely represents selected embodiments of the present application. All other embodiments obtained by persons of ordinary skill in the art based on the embodiments in the present application without creative work are within the scope of protection of the present application.
[0043] It should be noted that similar reference numerals and letters denote similar items in the following drawings, and therefore, once an item is defined in one drawing, it does not need to be further defined or explained in subsequent drawings.
[0044] In the description of this application, it should be noted that the terms "upper" and "lower" and the like indicate orientations or positional relationships based on the orientations or positional relationships shown in the accompanying drawings, or the orientations or positional relationships in which the product of this application is typically placed when in use. These terms are intended solely to facilitate the description of this application and simplify the description, and are not intended to indicate or imply that the device or element referred to must have a specific orientation, be constructed, or operate in a specific orientation. Therefore, they should not be construed as limitations on this application. Furthermore, the terms "first" and "second" and the like are used solely for distinction and should not be construed as indicating or implying relative importance.
[0045] It should also be noted that, in the description of this application, unless otherwise expressly specified or limited, the terms "disposed," "installed," "connected," and "connected" should be understood in a broad sense. For example, they can refer to fixed connections, detachable connections, or integral connections; they can refer to mechanical connections or electrical connections; they can refer to direct connections or indirect connections through an intermediate medium; and they can refer to internal connections between two components. Those skilled in the art will understand the specific meanings of the above terms in this application based on the specific circumstances.
[0046] It should be noted that, in the absence of conflict, different features in the embodiments of the present application can be combined with each other.
[0047] The inventors have found that React Native (RN) is a cross-platform framework developed by Facebook that can be used to quickly develop high-performance, easy-to-maintain applications on Android and IOS. Usually, when dynamically updating RN services, the project source code can be packaged through the RN packager and then uploaded to the CDN (Content Delivery Network). The application can download the Bundle file through the specified Bundle address and interact with the native system through the JavaScript engine to execute native code and render native pages. However, the current review process on the IOS side cannot dynamically execute native code. Therefore, the IOS side cannot dynamically update the RN service, which will result in the inability to repair bugs in online services and the inability to iterate new versions of the application.
[0048] This embodiment provides a solution that can solve the above-mentioned problem. The specific implementation methods of this application are described in detail below with reference to the accompanying drawings.
[0049] Please refer to Figure 1 , Figure 1 Example This embodiment provides a page update system, which may include a server 100 and a client 200. The server 100 and the client 200 may communicate with each other via a wired network or a wireless network, and the server 100 and the client 200 cooperate with each other to implement a page update method.
[0050] It is understandable that Figure 1 For illustration only, Figure 1 The illustrated application scenario only illustrates one client 200 . In some other application scenarios, the server 100 may establish communication with more clients 200 , so that more clients 200 can obtain update notifications for the target page sent by the server 100 .
[0051] The server 100 may be an independent client or a cluster composed of multiple clients.
[0052] In the embodiment of the present application, the client 200 may be a client device, such as a smart phone, a personal computer (PC), a tablet computer, etc.
[0053] Please refer to Figure 2 , Figure 2 Example The page update method provided in this embodiment can be applied to Figure 1 For the client 200 shown, the page updating method may include the following steps.
[0054] Step S110: Obtain an update notification for the target page sent by the server 100.
[0055] In this embodiment, when the target page needs to be updated, the update notification sent by the server 100 may be obtained. The update notification may include a URL (Uniform Resource Locator) address.
[0056] For example, when a user opens an application on the client 200, if the target page in the application needs to be updated, the application in the client 200 can obtain the update notification sent by the server 100, and perform subsequent page updates according to the update notification.
[0057] Step S120: Start the Webview component through the preset RN proxy page according to the update notification.
[0058] In this embodiment, the preset RN proxy page can be loaded according to the update notification sent by the server 100 obtained in step S110, and the Webview component can be started through the RN proxy page.
[0059] Specifically, the RN proxy page can be a native React Native component, and the RN proxy page can include a built-in WebView component for loading and displaying web content. The RN proxy page can serve as a bridge between the React Native application and the web content, allowing the React Native application to display the web page and interact with the React Native application. The Webview component is a control for embedding web page content in an application, and the Webview component allows the application to display the web page in a native way and obtain the ability to interact with the web page.
[0060] In step S130 , the Webview component downloads a first Web Bundle file corresponding to the target page according to the address information carried in the update notification, and uses the first Web Bundle file to replace a second Web Bundle file originally corresponding to the target page in the client 200 .
[0061] In this embodiment, the Webview component can obtain CDN (Content Delivery Network) address information based on the address information carried by the update notification, thereby downloading the first Web Bundle file corresponding to the target page according to the CDN address information, and using the first Web Bundle file to replace the second Web Bundle file originally corresponding to the target page in the client 200, thereby further realizing the update of the target page.
[0062] Specifically, the address information carried in the update notification may be URL address information, the first Web Bundle file is the file required for the page update, the first Web Bundle file contains the updated code, and the second Web Bundle file is the file to be updated. The first Web Bundle file may be a file package related to a specific business scenario, and may specifically be composed of various resource files such as JavaScript code, images, and layout files.
[0063] Based on the above design, the page update method provided in the embodiment of the present application can load the Webview component through the RN proxy page, and the Webview component uses the first WebBundle file corresponding to the target page to replace the second Web Bundle file originally corresponding to the target page in the client 200. In this way, the normal iterative update of the RN service can be realized, and the bugs in the RN service can be repaired, thereby further improving the user experience.
[0064] In one possible implementation, see Figure 3 , the page updating method may further include the following steps.
[0065] Step S210: Obtain rendering instructions for the target page.
[0066] Step S220: Start the Webview component through the preset RN proxy page to render and display the target page according to the first WebBundle file.
[0067] In this embodiment, when the target page needs to be rendered, the Webview component can be loaded through the preset RN proxy page, and the Webview component renders and displays the target page based on the first Web Bundle file obtained in step S130 that has replaced the second Web Bundle file. The first Web Bundle file can be a file package related to a specific business scenario, and can specifically be composed of various resource files such as JavaScript code, images, and layout files.
[0068] In the above design, the target page can be loaded and rendered according to the first Web Bundle file through the Webview component without indirectly rendering the native page through the JavaScript engine. In this way, the page can be updated through the review of the IOS side.
[0069] In a possible implementation, the target page may be an HTML5 page.
[0070] In this embodiment, the target page is an HTML page, specifically an H5 (HTML5) page that is the same as the native UI. In step S220, the HTML5 page can be loaded and rendered by the Webview component, and the HTML5 page content loaded by the Webview component can be dynamically updated.
[0071] In a possible implementation, the first Web Bundle file may include a simulated RN interface (Application Programming Interface, API). In step S130, data interaction with the target page may also be performed through the simulated RN interface.
[0072] In this embodiment, the application can obtain some key information through the simulated RN interface and combine it with the URL address information in the update notification to obtain the CDN address information that can be used to download the first Web Bundle file. In this way, the Webview component can load the first Web Bundle file using the CDN address information and interact with the target page through the simulated RN interface.
[0073] In one possible implementation, the operating system of the client 200 includes an Android operating system and an iOS operating system. In an embodiment of the present application, the client 200 may use an iOS operating system. Before step S110, the client 200 may also obtain an installation package of an application based on the RN framework from an application store platform, and install the target application through the installation package. The installation package of the application may include the second WebBundle file.
[0074] In this embodiment, the client 200 can obtain the application installation package based on the RN (ReactNative) framework from the application store platform on the IOS side, and install the target application through the application installation package. The target application may include the second Web Bundle file. The second Web Bundle file is the file in the client 200 originally corresponding to the target page. The second Web Bundle file can run in the Webview component, and the Webview component can render an HTML page through the second Web Bundle file.
[0075] In some examples, when a bug occurs in the target application and the HTML page rendered by the Webview component through the second Web Bundle file needs to be updated, the Webview component can download the first Web Bundle file corresponding to the target page according to the address information carried in the update notification, and use the first Web Bundle file to replace the second Web Bundle file of the target application, so that the target page can be rendered and displayed by the Webview component according to the first Web Bundle file.
[0076] Specifically, the client 200 may be the client 200 of the target application, which may be an application developed based on the React Native framework. React Native is a framework for developing app interface functions using JavaScript. It can implement business code for various mobile platforms. For example, a single code can run on both iOS and Android platforms while retaining near-native performance. This makes development very convenient and can significantly improve mobile development efficiency. It is a new generation of open source mobile framework.
[0077] In the above design, since the native code cannot be dynamically executed in the review process on the IOS side, when the React Native business code is not updated, the target page can be rendered and displayed according to the second Web Bundle file through the Webview component. When the React Native business code is updated, the Webview component can render and display the target page according to the first Web Bundle file, thereby realizing the dynamic update of the RN business on the IOS side.
[0078] The embodiment of the present application also provides a page update method, which can be applied to a page update system including a server 100 and a client 200. Figure 4 , the page updating method may include the following steps.
[0079] In step S310 , the server 100 obtains a first Web Bundle file corresponding to a target page.
[0080] In this embodiment, the server 100 can obtain the first WebBundle file corresponding to the target page, where the first WebBundle file is a file required for page update, and the first WebBundle file packages all resources required by the target page, such as HTML, CSS, JavaScript, images, and fonts.
[0081] In step S320, the server 100 issues an update notification for the target page.
[0082] In this embodiment, when the target page needs to be updated, the server 100 may issue the update notification for the target page. Specifically, the update notification may include a URL (Uniform Resource Locator) address.
[0083] In step S330 , the client 200 obtains the update notification for the target page.
[0084] In this embodiment, the client 200 may obtain the update notification for the target page sent by the server 100 in step S320.
[0085] In step S340 , the client 200 starts the Webview component through a preset RN proxy page according to the update notification.
[0086] In this embodiment, the client 200 can load the preset RN proxy page according to the update notification obtained in step S330, and start the Webview component through the RN proxy page. Specifically, the RN proxy page can be a native React Native component, and the RN proxy page can include a built-in WebView component for loading and displaying Web content. The RN proxy page can serve as a bridge between the React Native application and the Web content, allowing the React Native application to display the Web page and interact with the ReactNative application. The Webview component is a control for embedding web page content in an application, and the Webview component allows the application to display web pages in a native manner and obtain the ability to interact with web pages.
[0087] In step S350 , the client 200 downloads the first Web Bundle file corresponding to the target page through the Webview component according to the address information carried in the file update notification, and uses the first Web Bundle file to replace the second Web Bundle file originally corresponding to the target page in the client 200 .
[0088] In this embodiment, the client 200 can obtain CDN (Content Delivery Network) address information by splicing the address information carried in the update notification obtained in step S330 through the Webview component, thereby downloading the first Web Bundle file corresponding to the target page according to the CDN address information, and using the first Web Bundle file to replace the second Web Bundle file originally corresponding to the target page in the client 200, thereby further realizing the update of the target page. Specifically, the first Web Bundle file is a file that needs to be used for page update, and the second Web Bundle file is a file that needs to be updated. Among them, the first Web Bundle file can be a file package related to a specific business scenario, and can specifically be composed of various resource files such as JavaScript code, pictures and layout files.
[0089] In the above design, the client 200 can start the Webview component through the RN proxy page. The client 200 can also download the first Web Bundle file corresponding to the target page through the Webview component according to the address information carried in the file update notification issued by the server 100, and use the first Web Bundle file to replace the second Web Bundle file originally corresponding to the target page in the client 200. In this way, the normal iterative update of the RN service can be realized, and the bugs in the RN service can be repaired, thereby further improving the user experience.
[0090] In one possible implementation, see Figure 5 , step S310 may include the following sub-steps.
[0091] Step S311: Obtain the React Native business code corresponding to the target page.
[0092] In this embodiment, when the target page needs to be updated, the updated React Native business code corresponding to the target page can be retrieved. React Native (RN) is a cross-platform mobile application development framework that currently supports iOS and Android platforms. RN uses JavaScript, similar to HTML's JSX, and CSS to develop mobile applications.
[0093] In some examples, when a bug occurs in the original React Native business code, the React Native business code needs to be updated. Only in this way can the updated React Native business code corresponding to the target page be obtained, thereby updating the target page.
[0094] Step S312: Generate an abstract syntax tree of the React Native business code through a code compiler.
[0095] In this embodiment, the code compiler may perform syntax analysis on the React Native business code obtained in step S311 to obtain the Abstract Syntax Tree (AST). The Abstract Syntax Tree (AST) is a tree representation of the abstract syntax structure of the React Native business code, and each node on the tree represents a structure in the React Native business code.
[0096] Specifically, the code compiler can be a JavaScript code compiler. When the abstract syntax tree of the React Native business code is obtained through the code compiler, the code compiler can be used to perform static analysis on the React Native business code (analyzing the code without executing the code) to generate the abstract syntax tree (AST). The code compiler can provide an API to parse the React Native business code and construct the abstract syntax tree (AST).
[0097] Step S313: traverse the abstract syntax tree, replace the React-Native node in the abstract syntax tree with a React-Native-Web node, and obtain the first Web Bundle file.
[0098] In this embodiment, the Abstract Syntax Tree (AST) generated in step S312 can be traversed to locate the import node with the module name React-Native in the AST. The import node with the module name React-Native in the React Native business code can then be replaced with the import node with the module name React-Native-Web through the Web bundler. For example, "import{TouchableOpacity}from'React-Native'" can be replaced with "import{TouchableOpacity}from'React-Native-Web'," thereby obtaining the first WebBundle file corresponding to the updated React Native business code. The first Web Bundle file can be a file package related to a specific business scenario, specifically consisting of various resource files such as JavaScript code, images, and layout files. In this way, the React Native business code can be run in the Webview component.
[0099] Specifically, the native interface (Application Programming Interface, API) of the React Native business code can be replaced with the interface (Application Programming Interface, API) of React Native Web, wherein the interface of React Native Web is the same as the native interface of the React Native business code, but the underlying implementation method is different.
[0100] After replacing the React-Native node in the Abstract Syntax Tree (AST) with the React-Native-Web node to obtain the first Web Bundle file, the first Web Bundle file corresponding to the updated React Native business code can also be stored in a Content Delivery Network (CDN). A CDN is an intelligent virtual network built on top of the existing network. Relying on edge servers 100 deployed in various locations, and through the load balancing, content distribution, and scheduling functions of a central platform, CDN enables users to obtain the required content nearby, reducing network congestion and improving user access response speed and hit rate.
[0101] In the above design, the updated React Native business code can be obtained and the first Web Bundle file can be generated according to the React Native business code. In this way, the second Web Bundle file originally corresponding to the target page in the client 200 can be replaced with the first WebBundle file, thereby further implementing the update of the target page.
[0102] Specifically, when the React Native business code is not updated, the target page can be rendered and displayed according to the second Web Bundle file through the Webview component. When the React Native business code is updated, the Webview component can render and display the target page according to the first Web Bundle file, thereby realizing dynamic update of RN business.
[0103] In a possible implementation, before step S310, the server 100 may further provide an installation package of the target application to the application store platform, where the installation package of the target application may include the second Web Bundle file.
[0104] Specifically, the application store platform can be an application store platform on the IOS side. In this embodiment, the server 100 can provide the installation package of the target application based on the RN (React Native) framework to the application store platform on the IOS side. The installation package of the target application can include the second Web Bundle file. The second Web Bundle file is the file originally corresponding to the target page in the client 200. The second WebBundle file can run in the Webview component, and the Webview component can render an HTML page through the second WebBundle file. The client 200 can install the target application through the installation package of the target application provided by the server 100.
[0105] When a bug occurs in the target application and the target page needs to be updated, the Webview component can download the first WebBundle file corresponding to the target page according to the address information carried in the update notification, and use the first Web Bundle file to replace the second Web Bundle file of the target application, so that the target page can be rendered and displayed according to the first Web Bundle file through the Webview component.
[0106] In the above design, since the native code cannot be dynamically executed in the review link on the IOS side, when the React Native business code is not updated, the target page can be rendered and displayed according to the second WebBundle file through the Webview component. After the React Native business code is updated, the Webview component can render and display the target page according to the first Web Bundle file, thereby realizing the dynamic update of the RN business.
[0107] Based on the same inventive concept, this embodiment also provides an electronic device 700, please refer to Figure 6 , Figure 6 The block diagram of the electronic device 700 is shown as an example. The electronic device 700 includes a computer-readable storage medium 720 and a processor 710 .
[0108] The computer-readable storage medium 720 and the processor 710 are electrically connected to each other, directly or indirectly, to enable data transmission or interaction. For example, these components may be electrically connected to each other via one or more communication buses or signal lines. The processor 710 is configured to execute the executable modules stored in the computer-readable storage medium 720.
[0109] The computer-readable storage medium 720 may be, but is not limited to, a random access memory (RAM), a read-only memory (ROM), a programmable read-only memory (PROM), an erasable programmable read-only memory (EPROM), an electrically erasable programmable read-only memory (EEPROM), etc. The computer-readable storage medium 720 is used to store a program, and the processor 710 executes the program after receiving an execution instruction.
[0110] The processor 710 may be an integrated circuit chip with signal processing capabilities. The above-mentioned processor 710 may be a general-purpose processor 710, including a central processing unit 710 (CPU), a network processor 710 (NP), etc.; it may also be a digital signal processor 710 (DSP), an application-specific integrated circuit (ASIC), a field programmable gate array (FPGA) or other programmable logic device, discrete gate or transistor logic device, discrete hardware component. The various methods, steps and logic block diagrams disclosed in the embodiments of the present application can be implemented or executed. The general-purpose processor 710 may be a microprocessor 710 or the processor 710 may also be any conventional processor 710, etc.
[0111] To sum up, the page update method, electronic device and page update system provided in the embodiments of the present application can load the Webview component through the RN proxy page, and the Webview component uses the first Web Bundle file to replace the second Web Bundle file originally corresponding to the target page in the client. In this way, the normal iterative update of the RN service can be realized, and the bugs in the RN service can be repaired, thereby improving the user experience.
[0112] The above description is merely a preferred embodiment of the present application and is not intended to limit the present application. Various modifications and variations are possible for those skilled in the art. Any modifications, equivalent substitutions, or improvements made within the spirit and principles of the present application shall be included within the scope of protection of the present application.
[0113] It will be apparent to those skilled in the art that the present application is not limited to the details of the exemplary embodiments described above and that the present application can be implemented in other specific forms without departing from the spirit or essential characteristics of the present application. Therefore, the embodiments should be considered in all respects as illustrative and non-restrictive, and the scope of the present application is defined by the appended claims, not the foregoing description, and all variations within the meaning and range of equivalents of the claims are intended to be included therein. Any reference sign in a claim should not be construed as limiting the claim to which it relates.
Claims
1. A page update method, characterized in that: Applied to a client, the method includes: Get the update notification for the target page sent by the server; Starting the Webview component through a preset RN proxy page according to the update notification; the RN proxy page is used to load and display Web content; The Webview component downloads a first Web Bundle file corresponding to the target page according to the address information carried in the update notification, and uses the first Web Bundle file to replace a second Web Bundle file originally corresponding to the target page in the client.
2. The page updating method according to claim 1, characterized in that: The method further comprises: Obtaining rendering instructions for the target page; The Webview component is started through the preset RN proxy page, and the Webview component renders and displays the target page according to the first WebBundle file.
3. The page updating method according to claim 1, wherein: The target page is an HTML5 page.
4. The page updating method according to claim 3, wherein: The first Web Bundle file includes a simulated RN interface, and the method further includes: Data interaction is performed with the target page through the simulated RN interface.
5. The page updating method according to claim 1, wherein: The client uses an IOS operating system; the method further includes: An installation package of an application based on the RN framework is obtained from an application store platform, and a target application is installed through the installation package, where the installation package includes the second Web Bundle file.
6. A page update method, characterized in that: Applied to a page updating system including a server and a client, the method includes: The server obtains a first Web Bundle file corresponding to the target page; The server issues an update notification for the target page; The client obtains the update notification for the target page; The client starts the Webview component through a preset RN proxy page according to the update notification; The client downloads a first Web Bundle file corresponding to the target page through the Webview component according to the address information carried in the file update notification, and uses the first Web Bundle file to replace a second Web Bundle file originally corresponding to the target page in the client.
7. The page updating method according to claim 6, characterized in that: The step of the server obtaining a first Web Bundle file corresponding to the target page includes: Get the React Native business code corresponding to the target page; Generate an abstract syntax tree of the React Native business code through a code compiler; The abstract syntax tree is traversed, and a React-Native node in the abstract syntax tree is replaced with a React-Native-Web node to obtain the first Web Bundle file.
8. The page updating method according to claim 6, characterized in that: The method further comprises: The server provides an installation package of the target application to the application store platform, where the installation package of the target application includes the second Web Bundle file.
9. An electronic device, characterized in that: include: a memory for storing one or more programs; The processor implements the method according to any one of claims 1 to 5 when the one or more programs are executed by the processor.
10. A page update system, characterized in that: The page update system includes a server and a client, and the server and the client cooperate with each other to implement the method according to any one of claims 6 to 8.
Citation Information
Patent Citations
Application updating method and device based on RN
CN114398073A