Flutter hot update method, device, electronic device and storage medium

Abstract

An embodiment of the present application provides a Flutter hot update method, device, electronic device and storage medium, wherein the Flutter hot update method includes: mapping a target component in a React Native framework to a Flutter view through a Flutter tool; setting a mount point of a JsBundle file for the target component, and setting the path information of the mount point as an input parameter of the component to be updated; obtaining an updated version of the JsBundle file from a server; when starting the component to be updated, loading the updated version of the JsBundle file based on the input parameter, and displaying the updated version of the JsBundle file in a Flutter view.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a Flutter hot update method, device, electronic device, and storage medium. Background Art

[0002] Flutter is a cross-platform user interface (UI) development framework released by Google in 2018. It is characterized by being able to be published to mobile terminals and web terminals after one development. It has the advantages of fast development speed, high operating efficiency, and complete code reuse.

[0003] Based on the advantages of Flutter, more and more developers are choosing Flutter as a solution for mobile terminal development. However, as an emerging development framework, Flutter still has many imperfections, such as weak hot update capabilities. Summary of the invention

[0004] To solve the above technical problems, the embodiments of the present application provide a Flutter hot update method, device, electronic device and computer-readable storage medium, which can map the target component in the React Native framework to a Flutter view, and implement Flutter hot update by modifying the mount point of the JsBundle file, thereby solving the problem of weak Flutter hot update capability.

[0005] The present application embodiment provides a Flutter hot update method, which is applied to a terminal, and the method includes:

[0006] Use the Flutter tool to map the target components in the React Native framework to Flutter views;

[0007] Set a mount point of the JsBundle file for the target component, and set the path information of the mount point as an input parameter of the component to be updated;

[0008] Get the updated version of the JsBundle file from the server;

[0009] When the component to be updated is started, the updated version of the JsBundle file is loaded based on the input parameters, and the updated version of the JsBundle file is displayed in a Flutter view.

[0010] The embodiment of the present application also provides a Flutter hot update method, which is applied to a server, and the method includes:

[0011] Use React Native to write the components to be updated, and compile and package the written components to be updated into an updated version of the JsBundle file;

[0012] Send the updated version of the JsBundle file to the mobile terminal.

[0013] The embodiment of the present application also provides a Flutter hot update device, which is applied to a mobile terminal, and the device includes:

[0014] Embedding unit, which is used to map the target component in the React Native framework to a Flutter view through the Flutter tool;

[0015] A mounting unit, used to set a mounting point of the JsBundle file for the target component, and set the path information of the mounting point as an input parameter of the component to be updated;

[0016] The acquisition unit is used to obtain the updated version of the JsBundle file from the server;

[0017] The processing unit is used to load the updated version of the JsBundle file based on the input parameters when starting the component to be updated, and display the updated version of the JsBundle file in a Flutter view.

[0018] The embodiment of the present application also provides a Flutter hot update device, which is applied to a server, and the device includes:

[0019] The compilation unit is used to write the components to be updated using React Native, and compile and package the written components to be updated into a JsBundle file of the updated version;

[0020] The sending unit is used to send the updated version of the JsBundle file to the mobile terminal.

[0021] An embodiment of the present application also provides an electronic device, including a processor and a memory, wherein the memory stores a computer program, and the processor is used to call and run the computer program stored in the memory to execute the Flutter hot update method provided in the embodiment of the present application.

[0022] An embodiment of the present application also provides a computer-readable storage medium storing executable instructions, which, when executed by a processor, implements the Flutter hot update method provided in an embodiment of the present application.

[0023] The embodiments of the present application provide a Flutter hot update method, apparatus, network device, and computer-readable storage medium, wherein the Flutter hot update method comprises: a mobile terminal maps a target component in a React Native framework to a Flutter view through a Flutter tool, sets a mount point of a JsBundle file for the target component, and sets the path information of the mount point as an input parameter of the component to be updated; a server writes the component to be updated using React Native, and compiles and packages the written component to be updated into an updated version of the JsBundle file; when starting the component to be updated, the updated version of the JsBundle file is loaded based on the input parameters, and the updated version of the JsBundle file is displayed in a Flutter view, thereby realizing the Flutter hot update. BRIEF DESCRIPTION OF THE DRAWINGS

[0024] Figure 1 A flowchart of a Flutter hot update method provided in an embodiment of the present application;

[0025] Figure 2 A flowchart of a second Flutter hot update method provided in an embodiment of the present application;

[0026] Figure 3 A flowchart of a Flutter hot update method provided by an application embodiment of the present application;

[0027] Figure 4 A schematic diagram of the structure of a Flutter hot update device provided in an embodiment of the present application;

[0028] Figure 5 A schematic diagram of the structure of a second Flutter hot update device provided in an embodiment of the present application;

[0029] Figure 6 A schematic diagram of the composition of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0030] The following will describe the technical solutions in the embodiments of the present application in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0031] It should be noted that in the embodiments of the present application, the term "and / or" is only a description of the association relationship of the associated objects, indicating that three relationships may exist. For example, A and / or B can represent: A exists alone, A and B exist at the same time, and B exists alone. In addition, in the embodiments of the present application, the character " / " generally indicates that the associated objects before and after are in an "or" relationship.

[0032] In the description of the embodiments of the present application, the term "corresponding" may indicate a direct or indirect correspondence between two items, or an association relationship between the two items, or a relationship between indication and being indicated, configuration and being configured, and the like.

[0033] To facilitate understanding of the technical solutions of the embodiments of the present application, the relevant technologies of the embodiments of the present application are described below. The following related technologies can be arbitrarily combined with the technical solutions of the embodiments of the present application as optional solutions, and they all belong to the protection scope of the embodiments of the present application.

[0034] Flutter is a cross-platform user interface (UI) development framework released by Google in 2018. It is characterized by being able to be published to mobile terminals and web terminals after one development. It has the advantages of fast development speed, high operating efficiency, and complete code reuse.

[0035] Based on the advantages of Flutter, more and more developers are choosing Flutter as a solution for mobile terminal development. However, as an emerging development framework, Flutter still has many imperfections, such as weak hot update capabilities.

[0036] The hot update refers to updating the functions and interfaces of the components to be updated in the client application without updating the client application. Flutter already provides a hot update (Hot Reload) function, but it is limited to the application development stage. And because it is different from the application running mode, the application performance of the development mode is much worse. Once the developer wants to compile a formal application, Flutter no longer supports the hot update function. Therefore, many developers have implemented Flutter's hot update function by themselves. The existing solutions are mainly divided into three directions, namely the Web solution, the replacement solution of the compiled product, and the DSL parsing solution.

[0037] The above three solutions are introduced below.

[0038] Solution A: The Web solution is to build a browser into the application, pull web page files from the server to the client, and run them in the browser. This solution has the advantages of simple technology and low development cost. However, its performance is poor and the user experience is not good.

[0039] Solution B: The replacement solution for compiled products refers to pulling compiled products from the server to the client and replacing the original files on the client. Compiled products refer to the files contained in the installation package after the Flutter application is compiled. After replacing the original files on the client, the client's interface and functions can be updated. This solution has the advantage of high program running efficiency; however, it can only be used on the Android platform and cannot be implemented on the iOS platform. At the same time, the replacement file downloaded is large, and after replacing the compiled product, the application needs to be restarted to implement the update.

[0040] Solution C: DSL parsing solution is to define a special description language. The client will pull the script content written in DSL to the terminal and parse it, and then dynamically build the user interface and business logic according to the description. This solution has the advantages of small download content and fast update speed; however, the client needs to have built-in DSL parsing rules. Once there is a demand update beyond the existing parsing rules, the client with built-in new parsing rules needs to be completely updated.

[0041] The above three solutions have the following defects:

[0042] Solution A is compatible with Android and iOS platforms, but has poor performance and poor user experience.

[0043] Solution B meets the performance requirements, but is not compatible with the iOS platform and cannot implement cross-platform updates. After a hot update, the client must be restarted to take effect.

[0044] Solution C meets the cross-platform and performance requirements, but the corresponding parsing rules must be built into the client, which lacks flexibility and has great limitations.

[0045] In order to solve at least part of the above-mentioned defects, the following technical solutions of the embodiments of the present application are proposed.

[0046] In order to enable a more detailed understanding of the features and technical contents of the present application, the implementation of the present application is described in detail below in conjunction with the accompanying drawings. The attached drawings are for reference only and are not used to limit the present application. The described embodiments should not be regarded as limiting the present application. All other embodiments obtained by ordinary technicians in the field without making creative work are within the scope of protection of this application.

[0047] The present application embodiment provides a Flutter hot update method, which is applied to a mobile terminal. Figure 1 As shown, Figure 1 A schematic diagram of a flow chart of a Flutter hot update method provided in an embodiment of the present application, wherein the Flutter hot update method includes:

[0048] Step 101: Use the Flutter tool to map the target component in the React Native framework to a Flutter view;

[0049] Step 102: Setting a mount point of the JsBundle file for the target component, and setting the path information of the mount point as an input parameter of the component to be updated;

[0050] Step 103: Obtain an updated version of the JsBundle file from the server;

[0051] Step 104: When starting the component to be updated, the updated version of the JsBundle file is loaded based on the input parameters, and the updated version of the JsBundle file is displayed in a Flutter view.

[0052] In the above embodiment, React Native is a mobile terminal application (Application, APP for short) cross-platform user interface (User Interface, UI for short) development framework developed by Facebook.

[0053] Taking the application of React Native on the Android platform as an example, the React Native framework is divided into Java layer, C++ layer and JS layer.

[0054] Among them, the Java layer mainly provides the UI renderer UIManager of the Android platform and some other functional components. UIManager is used to map JavaScript to Android Widget.

[0055] The C++ layer mainly handles the communication between Java and JavaScript and executes JavaScript code. This layer encapsulates JavaScriptCore and performs JS parsing. Because React Native runs in JavaScriptCore, there is no browser incompatibility. The Bridge in the C++ layer bridges the core interface of Java and JavaScript communication.

[0056] The JS layer provides various components and some tool libraries for developers to use.

[0057] From the above description, we can see that the advantage of React Native is that it is developed using JavaScript, but has performance close to that of native applications. Its disadvantage is that the built-in components are strongly related to the native platform components, and it is impossible to fully reuse the code. For example, the file formats packaged using the compile and package commands on the Android platform and the iOS platform are different.

[0058] Therefore, compared with Flutter, React Native has performance close to that of native applications. In hybrid development, the main scene uses native components, and other activity scenes use React Native components, which reduces the development difficulty. React Native also supports hot updates by updating the JsBundle file of the component.

[0059] Therefore, Flutter hot update can be achieved by mapping the target component in the React Native framework to a Flutter view.

[0060] Specifically, the identity document (ID) corresponding to the drawing data of the view view rendered on the Native side by the target component in the React Native framework is the texture IDtextureId. The Framework layer of Flutter submits a layer tree Layer Tree to the Engine layer, traverses each leaf node of the Layer Tree in the pipeline, and each leaf node will eventually call the Skia engine to complete the drawing of the UI element. After the traversal is completed, call glPresentRenderBuffer on the IOS platform or call glSwapBuffer on the Android platform to complete the on-screen operation. Among them, there are many types of Layer. Take the Android platform as an example: AndroidView uses TextureLayer. When TextureLayer is traversed, it will call an Engine layer method SceneBuilder::addTexture() with textureId as the input parameter. Finally, when drawing, the Skia engine directly finds the corresponding drawing data in the GPU according to textureId and draws it to the screen.

[0061] Furthermore, the default packaging strategy of React Native is to place the JsBundle file and related resources in a fixed location in the project, which cannot be changed at runtime. Therefore, to achieve hot update, the updated version of the JsBundle file downloaded from the server must be mounted in the writable directory of the corresponding component to be updated. When the group to be updated is started, the updated version of the JsBundle file in the specified writable directory can be loaded. Based on this, the mount point of the JsBundle file must be set for the target component first, and the path information of the mount point must be set as the input parameter of the component to be updated for loading.

[0062] Furthermore, to implement hot update of Flutter, that is, to update the components in Flutter, the server needs to store the JsBundle file of the updated version of the target component.

[0063] Based on this, in one embodiment, before obtaining the updated version of the JsBundle file from the server, the method further includes:

[0064] Send an update query request to the server, wherein the update query request is used to request the server to query whether there is a newer version of the JsBundle file;

[0065] When there is a newer version of the JsBundle file, obtain the newer version of the JsBundle file from the server.

[0066] After the mobile terminal obtains the updated version of the JsBundle file, in order to save the storage space of the mobile terminal and ensure that the updated view of the component to be updated can be displayed on the screen of the mobile terminal when the component to be updated is started next time, the updated version of the JsBundle file needs to be used to replace the old version of the JsBundle file.

[0067] Based on this, in one embodiment, after obtaining the updated version of the JsBundle file from the server, the method further includes:

[0068] The JsBundle file of the updated version is used to replace the JsBundle file of the old version.

[0069] In the prior art, the method for mapping the target component in the React Native framework to the Flutter view is as follows: in the engine layer of the Flutter framework, the Skia engine directly finds the corresponding drawing data in the GPU according to the textureId and draws it on the screen. Wherein, the drawing data refers to the drawing data of the target component in the React Native framework. Further, on the target operating system platform, the drawing data of the target component in the React Native framework is obtained by the rendering component on the target operating system platform. Taking the Android platform as an example, the Java layer in the React Native framework mainly provides the UI renderer UIManager of the Android platform and some other functional components. The UIManager is used to map JavaScript to an Android Widget. Therefore, if the target component in the React Native framework is to be mapped to the Flutter view, the rendering component of React Native on the target operating system platform must first be mapped to the Flutter view. When starting the FlutterActivity, the engine in the React Native framework is called, and the target component in the React Native framework can be mapped to the Flutter view by mapping it to the rendering component of the Flutter view.

[0070] Based on this, in one embodiment, mapping the target component in the React Native framework to a Flutter view by using the Flutter tool includes:

[0071] Use the Flutter tool to map the rendering components of React Native on the target operating system platform to Flutter views;

[0072] Based on the target component in the React Native framework, the target component in the React Native framework is mapped to the Flutter view by mapping it to the rendering component of the Flutter view.

[0073] Furthermore, since Flutter was born in an era when Android and iOS platforms were very mature, in actual development, there are some plug-ins that are not officially provided by Flutter. In this case, you can implement some functions by creating and writing plug-ins yourself. However, if you need native components on the target operating system platform, such as Amap, video player, and live broadcast, they cannot be well integrated with Flutter.

[0074] In order to solve the problem that the above existing native components cannot be directly applied to the APP developed by Flutter, Flutter provides the first view component PlatformView, which allows the target component in the React Native framework to be mapped to the Flutter view.

[0075] PlatformView is a general term for the second view component AndroidView applied on the Android platform and the second view component UIKitView applied on the iOS platform. Taking AndroidView as an example, its working mechanism mainly has three processes:

[0076] First, the measurement of the View tree, that is, the measurement mechanism of AndroidView, which is mainly used to measure the size of each View;

[0077] Second, the layout of the View tree, that is, the layout mechanism of AndroidView, which is mainly used to display each View to the corresponding position of the screen coordinate system;

[0078] Third, the drawing of the View tree, that is, the drawing mechanism of AndroidView, is mainly used to draw each View.

[0079] Based on this, in one embodiment, mapping the rendering component of React Native on the target operating system platform to a Flutter view by using the Flutter tool includes:

[0080] On the target operating system platform, based on the first view component in the Flutter tool, the rendering component in the React Native framework is mapped to the Flutter view through the second view component on the target operating system platform.

[0081] The first view component in the Flutter tool is a PlatformView component, the second view component on the Android platform is an AndroidView component, and the second view component on the iOS platform is a UIKitView component.

[0082] Because the existing target operating system platforms are usually Android platform and iOS platform, based on this, in one embodiment, the target operating system platform includes at least one of the following: Android platform, iOS platform.

[0083] Since the file corresponding to the target component obtained from the server is an updated version of the JsBundle file, and the JsBundle file can only be loaded using the React Native engine, based on this, in one embodiment, when starting the component to be updated, the updated version of the JsBundle file is loaded based on the input parameters, including:

[0084] When the component to be updated is started, the engine in the React Native framework is called, and the JsBundle file of the updated version is loaded by the engine based on the input parameters.

[0085] The present application also provides a Flutter hot update method, which is applied to a server. Figure 2 As shown, Figure 2 A schematic diagram of a second Flutter hot update method provided in an embodiment of the present application, wherein the Flutter hot update method includes:

[0086] Step 201: Use React Native to write the component to be updated, and compile and package the written component to be updated into an updated version of the JsBundle file;

[0087] Step 202: Send the updated version of the JsBundle file to the mobile terminal.

[0088] Among them, in step 201, the compiled components to be updated are compiled and packaged into a JsBundle file of an updated version, and the following method can be used:

[0089] Use the react-native bundle command to compile and package. Android and iOS platforms need to be compiled and packaged separately because the content and format of the packaged JsBundle files and image resource files are different.

[0090] The packaging code for the Android platform is:

[0091] #Switch the project root directory. My local directory is ~ / Documents / RNSample

[0092] Cd ~ / Documents / RNSample

[0093] #If there is no relevant directory, create a file save directory

[0094] mkdir -p bundles / android / bundles

[0095] #Execute the packaging command

[0096] react-native bundle--entry-file index.js--platform android--devfalse--bundle-output. / bundles / android / bundles / index.android.bundle--assets-dest. / bundles / android / bundles

[0097] The packaging code for the iOS platform is:

[0098] #Switch the project root directory. My local directory is ~ / Documents / RNSample

[0099] cd ~ / Documents / RNSample

[0100] #If there is no relevant directory, create a file save directory

[0101] mkdir -p bundles / ios / bundles

[0102] #Execute the packaging command

[0103] react-native bundle--entry-file index.js--platform ios--dev false--bundle-output. / bundles / ios / bundles / index.ios.bundle--assets-dest. / bundles / ios / bundles

[0104] The server compiles and packages the written component to be updated into an updated version of the JsBundle file for storage. The mobile terminal can obtain the updated version of the JsBundle file from the server as the mounting point of the JsBundle file mounted on the target component so that the engine of the React Native framework can load and use it.

[0105] Furthermore, when the mobile terminal has a Flutter hot update requirement, if there is a newer version of the JsBundle file in the server, the server sends the newer version of the JsBundle file to the mobile terminal. In this way, the server can avoid sending a newer version of the JsBundle file to a mobile terminal that does not have a Flutter hot update requirement, effectively reducing bandwidth pressure.

[0106] Based on this, in one embodiment, sending the updated version of the JsBundle file to the mobile terminal includes:

[0107] An update query request from a mobile terminal is received, and when a newer version of the JsBundle file is available, the newer version of the JsBundle file is sent to the mobile terminal.

[0108] The embodiments of the present application provide a Flutter hot update method, apparatus, network device, and computer-readable storage medium, wherein the Flutter hot update method comprises: a mobile terminal maps a target component in a React Native framework to a Flutter view through a Flutter tool, sets a mount point of a JsBundle file for the target component, and sets the path information of the mount point as an input parameter of the component to be updated; a server writes the component to be updated using React Native, and compiles and packages the written component to be updated into an updated version of the JsBundle file; when starting the component to be updated, the updated version of the JsBundle file is loaded based on the input parameters, and the updated version of the JsBundle file is displayed in a Flutter view, thereby realizing the Flutter hot update.

[0109] The present application is further described below in conjunction with the application examples:

[0110] Figure 3 A flow chart of the Flutter hot update method provided by the application embodiment of the present application. Figure 3 As shown, the Flutter hot update method provided by the application embodiment of the present application includes:

[0111] Step 301: The mobile terminal maps the target component in the React Native framework to a Flutter view through the Flutter tool on the target operating system platform;

[0112] Specifically, the following steps are included:

[0113] Use the Flutter tool to map the rendering components of React Native on the target operating system platform to Flutter views;

[0114] Based on the target component in the React Native framework, the target component in the React Native framework is mapped to the Flutter view by mapping it to the rendering component of the Flutter view.

[0115] Wherein, taking the target operating system platform as the Android platform as an example, the rendering component of ReactNative on the target operating system platform is mapped to a Flutter view by using the Flutter tool, including:

[0116] Step 30111: On the Android platform, implement the PlatformView interface provided by the Flutter tool;

[0117] Step 30112: Based on the PlatformView interface, create the PlatformViewFactory class, override the create method, and use the implemented PlatformView as the return value;

[0118] Step 30113: Based on the PlatformViewFactory class, implement FluttePlugin and register PlatformViewFactory to the Flutter engine;

[0119] Furthermore, taking the target operating system platform as the iOS platform as an example, mapping the target component in the ReactNative framework to the Flutter view by using the Flutter tool includes:

[0120] Step 30121: On the iOS platform, implement the PlatformView interface provided by the Flutter tool;

[0121] Step 30122: Based on the PlatformView interface, extend the FlutterPlatformView class and the FlutterPlatformViewFactory class, rewrite the create method, and use FlutterPlatformView as the return value;

[0122] Step 30123: Set FlutterPlugin, implement the register method, and return FlutterPlatformViewFactory;

[0123] Step 30124: Set AppDelegate and register FlutterPlatformViewFactory to the Flutter engine in the application method;

[0124] Step 302: The mobile terminal sets a mount point of the JsBundle file for the target component on the target operating system platform, and sets the path information of the mount point as an input parameter of the component to be updated;

[0125] Among them, taking the target operating system platform as the Android platform as an example, setting the mount point of the JsBundle file for the target component includes: setting ReactInstanceManager on the Android platform; specifically, rewriting the getJSBundleFile method of ReacNativeHost and modifying the parameters of the JSBundleFile file to a custom file path.

[0126] Further, taking the target operating system platform as the iOS platform as an example, setting the mount point of the JsBundle file for the target component includes: on the iOS platform, setting the mount point of the JsBundle file for the target component while creating the RCTRootView.

[0127] Step 303: The server uses React Native to write the component to be updated, and compiles and packages the written component to be updated into a JsBundle file of an updated version;

[0128] Step 304: the mobile terminal sends an update query request to the server, wherein the update query request is used to request the server to query whether there is an updated version of the JsBundle file; if the server has an updated version of the JsBundle file, the server sends the updated version of the JsBundle file to the mobile terminal;

[0129] Step 305: When starting the component to be updated, the mobile terminal calls the engine in the React Native framework, loads the updated version of the JsBundle file based on the input parameters through the engine, and displays the updated version of the JsBundle file in a Flutter view.

[0130] The Flutter hot update method provided in the application embodiment of the present application first maps the target component in the ReactNative framework to a Flutter view through the Flutter tool, and sets a mount point of the JsBundle file for the target component on the target operating system platform, thereby solving the problem of weak hot update capability of Flutter.

[0131] At the same time, the Flutter hot update method provided in the application embodiment of the present application maps the target component in the React Native framework to a Flutter view, so that the target component in the React Native framework runs independently on the container provided by Flutter, and can freely implement the functions of the target component without being restricted by Flutter, which greatly improves the flexibility of Flutter hot update and makes the target component more scalable.

[0132] Furthermore, the Flutter hot update method provided in the application embodiment of the present application maps the target component in the React Native framework to a Flutter view, and based on the characteristics that both Flutter and React Native can run across platforms, the hot update code can be written once and run on multiple terminals. At the same time, the excellent performance of Flutter can be guaranteed, providing a good user experience.

[0133] Furthermore, the Flutter hot update method provided in the application embodiment of the present application maps the target component in the React Native framework to a Flutter view, wherein React Native calls the native components of each target operating system platform at the bottom layer, and therefore has performance close to that of the platform native components compared to Web technology.

[0134] In order to implement the Flutter hot update method applied to a mobile terminal provided in the embodiment of the present application, the embodiment of the present application also provides a Flutter hot update device applied to a mobile terminal. Figure 4 As shown, Figure 4 A structural diagram of a Flutter hot update device provided in an embodiment of the present application, the Flutter hot update device 400 includes:

[0135] The embedding unit 401 is used to map the target component in the React Native framework to a Flutter view through the Flutter tool;

[0136] The mounting unit 402 is used to set a mounting point of the JsBundle file for the target component, and set the path information of the mounting point as an input parameter of the component to be updated;

[0137] The acquisition unit 403 is used to acquire the updated version of the JsBundle file from the server;

[0138] The processing unit 404 is used to load the updated version of the JsBundle file based on the input parameters when starting the component to be updated, and display the updated version of the JsBundle file in a Flutter view.

[0139] In order to implement the Flutter hot update method applied to the server provided in the embodiment of the present application, the embodiment of the present application also provides a Flutter hot update device applied to the server. Figure 5 As shown, Figure 5 This is a structural diagram of a second Flutter hot update device provided in an embodiment of the present application. The Flutter hot update device 500 includes:

[0140] The compiling unit 501 is used to compile the component to be updated by using React Native, and compile and package the compiled component to be updated into a JsBundle file of an updated version;

[0141] The sending unit 502 is used to send the updated version of the JsBundle file to the mobile terminal.

[0142] Those skilled in the art should understand that Figure 4 The Flutter hot update device 400 and Figure 5 The implementation functions of each unit in the second Flutter hot update device 500 shown can be understood by referring to the relevant description of the aforementioned Flutter hot update method. Figure 4 The Flutter hot update device 400 and Figure 5 The functions of each unit in the second Flutter hot update device 500 shown can be implemented by a program running on a processor, or by a specific logic circuit.

[0143] It should be noted that: the Flutter hot update device 400 and the second Flutter hot update device 500 provided in the above embodiment only use the division of the above program units as an example when performing Flutter hot update. In actual applications, the above processing can be assigned to different program units as needed, that is, the internal structure of the system is divided into different program units to complete all or part of the processing described above. In addition, the Flutter hot update device 400 and the second Flutter hot update device 500 provided in the above embodiment belong to the same concept as the Flutter hot update method embodiment. The specific implementation process is detailed in the method embodiment and will not be repeated here.

[0144] Based on the hardware implementation of the above-mentioned program unit, and in order to implement the Flutter hot update method provided in the embodiment of the present application, the embodiment of the present application also provides an electronic device, such as Figure 6 As shown, Figure 6 A schematic diagram of the composition of an electronic device provided in an embodiment of the present application; the electronic device 600 includes:

[0145] A processor 601 and a memory 602, wherein the memory 602 stores a computer program, and the processor 601 is used to call and run the computer program stored in the memory 602 to execute the Flutter hot update method provided in an embodiment of the present application.

[0146] In practical applications, such as Figure 6As shown, the various components in the electronic device 600 are coupled together through a bus module 603. It can be understood that the bus module 603 is used to realize the connection and communication between these components. In addition to the data bus, the bus module 603 also includes a power bus, a control bus and a status signal bus. However, for the sake of clarity, Figure 6 Various buses are labeled as bus module 603.

[0147] The embodiment of the present application also provides a computer-readable storage medium storing executable instructions. When the executable instructions are executed by a processor, the Flutter hot update method provided in the embodiment of the present application is implemented.

[0148] In some embodiments, the storage medium may be a magnetic random access memory (FRAM), 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), a flash memory, a magnetic surface memory, an optical disk, or a compact disc read-only memory (CD-ROM); it may also be various devices including one or any combination of the above memories.

[0149] In some embodiments, executable instructions may be in the form of a program, software, software module, script or code, written in any form of programming language (including compiled or interpreted languages, or declarative or procedural languages), and may be deployed in any form, including as a stand-alone program or as a module, component, subroutine or other unit suitable for use in a computing environment.

[0150] As an example, executable instructions may, but need not, correspond to a file in a file system, may be stored as part of a file that stores other programs or data, for example, in one or more scripts in a Hypertext Markup Language (HTML) document, in a single file dedicated to the program in question, or in multiple coordinated files (e.g., files storing one or more modules, subroutines, or code portions).

[0151] By way of example, executable instructions may be deployed to be executed on one computing device, or on multiple computing devices located at one site, or on multiple computing devices distributed across multiple sites and interconnected by a communication network.

[0152] It should be noted that: "first", "second", etc. are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence.

[0153] The technical solutions described in the embodiments of the present application can be combined arbitrarily without conflict.

[0154] In the several embodiments provided in the present application, it should be understood that the disclosed methods and electronic devices can be implemented in other ways. The device embodiments described above are only schematic. For example, the division of the units is only a logical function division. There may be other division methods in actual implementation, such as: multiple units or components can be combined, or can be integrated into another system, or some features can be ignored or not executed. In addition, the coupling, direct coupling, or communication connection between the components shown or discussed can be through some interfaces, and the indirect coupling or communication connection of the devices or units can be electrical, mechanical or other forms.

[0155] The units described above as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units; some or all of the units may be selected according to actual needs to achieve the purpose of the present embodiment.

[0156] In addition, all functional units in the embodiments of the present application may be integrated into a second processing unit, or each unit may be a separate unit, or two or more units may be integrated into one unit; the above-mentioned integrated units may be implemented in the form of hardware or in the form of hardware plus software functional units.

[0157] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any technician familiar with the technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be covered by the protection scope of the present application.

Claims

1. A Flutter hot update method, applied to a mobile terminal, characterized in that: include: Use the Flutter tool to map the target components in the React Native framework to Flutter views; Set a mount point of the JsBundle file for the target component, and set the path information of the mount point as an input parameter of the component to be updated; Get the updated version of the JsBundle file from the server; When starting the component to be updated, loading the updated version of the JsBundle file based on the input parameters, and displaying the updated version of the JsBundle file in a Flutter view; The mapping of the target component in the React Native framework to a Flutter view by using the Flutter tool includes: On the target operating system platform, based on the first view component in the Flutter tool, the rendering component of React Native on the target operating system platform is mapped to the Flutter view through the second view component on the target operating system platform; the first view component allows the target component in the React Native framework to be mapped to the Flutter view; Based on the target component in the React Native framework, the target component in the React Native framework is mapped to the Flutter view by mapping it to the rendering component of the Flutter view.

2. The method according to claim 1, characterized in that Before obtaining the updated version of the JsBundle file from the server, the following steps are also included: Send an update query request to the server, wherein the update query request is used to request the server to query whether there is a newer version of the JsBundle file; When there is a newer version of the JsBundle file, obtain the newer version of the JsBundle file from the server.

3. The method according to claim 1, characterized in that After obtaining the updated version of the JsBundle file from the server, the following steps are also included: The JsBundle file of the updated version is used to replace the JsBundle file of the old version.

4. The method according to claim 1, characterized in that: The target operating system platform includes at least one of the following: an Android platform and an iOS platform; wherein the second view component on the Android platform is an AndroidView component, and the second view component on the iOS platform is a UIKitView component.

5. The method according to claim 1, characterized in that The first view component in the Flutter tool is the PlatformView component.

6. The method according to any one of claims 1 to 3, characterized in that: When the component to be updated is started, the updated version of the JsBundle file is loaded based on the input parameters, including: When the component to be updated is started, the engine in the React Native framework is called, and the JsBundle file of the updated version is loaded by the engine based on the input parameters.

7. A Flutter hot update method, applied to a server, characterized in that: include: Use React Native to write the components to be updated, and compile and package the written components to be updated into an updated version of the JsBundle file; Send the updated version of the JsBundle file to the mobile terminal; The mobile terminal maps a rendering component of React Native on the target operating system platform to a Flutter view through a second view component on the target operating system platform based on a first view component in the Flutter tool on the target operating system platform; the first view component allows mapping a target component in the React Native framework to a Flutter view; Based on the target component in the React Native framework, the target component in the React Native framework is mapped to the Flutter view by mapping it to the rendering component of the Flutter view; a mount point of the JsBundle file is set for the target component, and the path information of the mount point is set as an input parameter of the component to be updated; when starting the component to be updated, the updated version of the JsBundle file is loaded based on the input parameter, and the updated version of the JsBundle file is displayed in the Flutter view.

8. The method according to claim 7, characterized in that The sending of the updated version of the JsBundle file to the mobile terminal includes: An update query request from a mobile terminal is received, and when a newer version of the JsBundle file is available, the newer version of the JsBundle file is sent to the mobile terminal.

9. A Flutter hot update device, applied to a mobile terminal, characterized in that: include: Embedding unit, which is used to map the target component in the React Native framework to a Flutter view through the Flutter tool; A mounting unit, used to set a mounting point of the JsBundle file for the target component, and set the path information of the mounting point as an input parameter of the component to be updated; The acquisition unit is used to obtain the updated version of the JsBundle file from the server; A processing unit, configured to load the updated version of the JsBundle file based on the input parameters when starting the component to be updated, and display the updated version of the JsBundle file in a Flutter view; The embedding unit is further used to map the rendering component of React Native on the target operating system platform to a Flutter view through a second view component on the target operating system platform based on the first view component in the Flutter tool on the target operating system platform; the first view component allows the target component in the React Native framework to be mapped to the Flutter view; Based on the target component in the React Native framework, the target component in the React Native framework is mapped to the Flutter view by mapping it to the rendering component of the Flutter view.

10. A Flutter hot update device, applied to a server, characterized in that: include: The compilation unit is used to write the components to be updated using React Native, and compile and package the written components to be updated into a JsBundle file of the updated version; A sending unit, configured to send an updated version of the JsBundle file to the mobile terminal, so that the mobile terminal, on the target operating system platform, maps the rendering component of React Native on the target operating system platform to the Flutter view through the second view component on the target operating system platform based on the first view component in the Flutter tool; the first view component allows the target component in the React Native framework to be mapped to the Flutter view; Based on the target component in the ReactNative framework, the target component in the React Native framework is mapped to the Flutter view by mapping it to the rendering component of the Flutter view; a mount point of the JsBundle file is set for the target component, and the path information of the mount point is set as an input parameter of the component to be updated; when starting the component to be updated, the updated version of the JsBundle file is loaded based on the input parameter, and the updated version of the JsBundle file is displayed in the Flutter view.

11. An electronic device, characterized in that: It comprises a processor and a memory, wherein the memory stores a computer program, and the processor is used to call and run the computer program stored in the memory to execute the method according to any one of claims 1 to 6, or the method according to any one of claims 7 to 8.

12. A computer-readable storage medium, characterized in that: Executable instructions are stored, and when the executable instructions are executed by a processor, the method according to any one of claims 1 to 6 or the method according to any one of claims 7 to 8 is implemented.

Images