Dynamic update method, device, electronic device and storage medium of Flutter component

Abstract

The present invention provides a method, device, electronic device and storage medium for dynamically updating a Flutter component, the method comprising: obtaining dynamic resources corresponding to a Flutter dynamic component to be updated in a target page; decoding the dynamic resources to obtain multiple expressions with a recursive hierarchical structure, each expression including at least one component configuration; recursively parsing the multiple expressions according to the recursive hierarchical structure, and instantiating the component configuration in each expression to obtain multiple component configuration instances; constructing the multiple component configuration instances into a Flutter component configuration tree; calling the Flutter component configuration tree through the Flutter system to display the updated Flutter dynamic component on the target page. The present invention reduces the size of the application package, reduces the space occupied, and can be directly developed by Flutter developers without additional learning costs.

Description

Technical Field

[0001] The present invention relates to the field of front-end technology, and in particular to a dynamic update method, device, electronic device and storage medium of a Flutter component. Background Art

[0002] Dynamic updates can expand the way software is updated, reduce the cost of reaching users, and eliminate the need for users to upgrade apps (applications) in the app market. Dynamic updates make it easier to change software content and can meet the need for some content to be quickly released to the market.

[0003] In the prior art, Flutter components can be dynamically updated based on MXFlutter. However, MXFlutter is a dynamic framework based on JavaScript and needs to be developed using JavaScript, while Flutter development uses the Dart language. There is a discrepancy between the development population and language between the two.

[0004] MXFlutter, developed using the JavaScript development language, is to some extent separated from the Flutter ecosystem. It also needs to imitate Flutter and build a JavaScript mirror framework, which is aimed at front-end JavaScript developers. However, it requires a high learning cost for Flutter developers. During use, communication between JavaScript and Dart is required, and the communication link is long. In addition, when the application is running, additional JavaScript needs to be run, which results in a larger application package and occupies more space. Summary of the invention

[0005] In view of the above problems, embodiments of the present invention are proposed to provide a method, device, electronic device, and storage medium for dynamically updating a Flutter component that overcomes the above problems or at least partially solves the above problems.

[0006] According to a first aspect of the present invention, a method for dynamically updating a Flutter component is provided, comprising:

[0007] Get the dynamic resources corresponding to the Flutter dynamic components to be updated in the target page;

[0008] Decoding the dynamic resource to obtain a plurality of expressions having a recursive hierarchical structure, each of the expressions including at least one component configuration;

[0009] Recursively parsing the multiple expressions according to the recursive hierarchical structure, and instantiating the component configuration in each expression to obtain multiple component configuration instances;

[0010] According to the recursive hierarchical structure, the multiple component configuration instances are constructed into a Flutter component configuration tree corresponding to the Flutter dynamic component;

[0011] The Flutter component configuration tree is called through the Flutter system to display the updated Flutter dynamic component on the target page.

[0012] According to a second aspect of the present invention, a dynamic update device for a Flutter component is provided, including:

[0013] The dynamic resource acquisition module is used to obtain the dynamic resources corresponding to the Flutter dynamic components to be updated in the target page;

[0014] A dynamic resource decoding module, used for decoding the dynamic resource to obtain a plurality of expressions having a recursive hierarchical structure, each of the expressions including at least one component configuration;

[0015] A recursive parsing module, used to recursively parse the multiple expressions according to the recursive hierarchical structure, and instantiate the component configuration in each expression to obtain multiple component configuration instances;

[0016] A Flutter component configuration tree construction module, used to construct the multiple component configuration instances into a Flutter component configuration tree corresponding to the Flutter dynamic component according to the recursive hierarchical structure;

[0017] The page rendering module is used to call the Flutter component configuration tree through the Flutter system to display the updated Flutter dynamic component on the target page.

[0018] According to a third aspect of the present invention, an electronic device is also provided, including a processor, a memory, and a computer program stored in the memory and executable on the processor. When the computer program is executed by the processor, the dynamic update method of the Flutter component as described in the first aspect is implemented.

[0019] According to a fourth aspect of the present invention, a computer-readable storage medium is also provided, on which a computer program is stored. When the computer program is executed by a processor, the dynamic update method of the Flutter component as described in the first aspect is implemented.

[0020] The dynamic update method, device, electronic device and storage medium of the Flutter component provided by the present invention obtain the dynamic resources corresponding to the Flutter dynamic component to be updated in the target page, decode the dynamic resources, obtain multiple expressions with a recursive hierarchical structure, recursively parse the multiple expressions according to the recursive hierarchical structure, and instantiate the component configuration in each expression to obtain multiple component configuration instances, build the multiple component configuration instances into a Flutter component configuration tree corresponding to the Flutter dynamic component, call the Flutter component configuration tree through the Flutter system to display the updated Flutter dynamic component on the target page, and realize the dynamic update of the Flutter dynamic component. Since the dynamic resources are developed by the Flutter framework, there is no need to run additional JavaScript when the application is running, which reduces the size of the application package and reduces the space occupied. It can be directly developed by Flutter developers without additional learning costs and does not require communication between JavaScript and Dart.

[0021] The above description is only an overview of the technical solution of the present invention. In order to more clearly understand the technical means of the present invention, it can be implemented according to the contents of the specification. In order to make the above and other purposes, features and advantages of the present invention more obvious and easy to understand, the specific implementation methods of the present invention are listed below. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] Various other advantages and benefits will become apparent to those of ordinary skill in the art by reading the following detailed description of the preferred embodiment.The drawings are only for the purpose of illustrating the preferred embodiments and are not to be construed as limiting the invention.

[0023] Figure 1 This is a flowchart of a method for dynamically updating a Flutter component provided by an embodiment of the present invention;

[0024] Figure 2 This is a flowchart of a dynamic update method of a Flutter component provided by an embodiment of the present invention;

[0025] Figure 3 This is a structural block diagram of a dynamic update device for a Flutter component provided by an embodiment of the present invention;

[0026] Figure 4 A structural block diagram of an electronic device provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0027] The exemplary embodiments of the present invention will be described in more detail below with reference to the accompanying drawings. Although the exemplary embodiments of the present invention are shown in the accompanying drawings, it should be understood that the present invention can be implemented in various forms and should not be limited by the embodiments set forth herein. On the contrary, these embodiments are provided in order to enable a more thorough understanding of the present invention and to enable the scope of the present invention to be fully communicated to those skilled in the art.

[0028] Figure 1 is a flowchart of a method for dynamically updating a Flutter component provided by an embodiment of the present invention, such as Figure 1 As shown, the method may include:

[0029] Step 101: Get the dynamic resources corresponding to the Flutter dynamic component to be updated in the target page.

[0030] Among them, Flutter is a cross-platform software development framework, and programs developed using Flutter can run on Android, iOS and browsers. The Flutter dynamic component, FairWidget, is a composite component that can be displayed as a whole page or as part of a page. The Flutter component expresses the elements of a page, which is an abstract concept. It can be atomic or composite. Atomic components cannot be separated from other components, while composite components are a new component composed of multiple components spliced ​​together. The dynamic resource is a binary resource, which is compiled from the code written in the Dart language. The encoding format can be json or flatbuffer. It is a file on a mobile phone or server. It is transmitted in the form of a data byte stream. The file format of the dynamic resource is ".fair.bin" and ".fair.json".

[0031] During the operation of the application to which the target page belongs, when loading the target page, the content to be displayed on the page can be a system component or a Flutter dynamic component. According to the Flutter component configuration tree structure of the target page, the system components and Flutter dynamic components in the target page are loaded separately. The system components can be loaded directly, and for the Flutter dynamic components, the corresponding dynamic resources can be obtained from the cache. If the dynamic resources corresponding to the Flutter dynamic components do not exist in the cache, the corresponding dynamic resources can be obtained from the server. The dynamic resources corresponding to the Flutter dynamic components to be updated exist in the cache, which are preloaded after the application is started. When the dynamic resources corresponding to the Flutter dynamic components do not exist in the cache, the Flutter dynamic components are the Flutter dynamic components to be updated.

[0032] In one embodiment of the present invention, obtaining the dynamic resources corresponding to the Flutter dynamic component to be updated in the target page includes: when the target page loads the Flutter dynamic component, obtaining the dynamic resources corresponding to the Flutter dynamic component from a cache or a server.

[0033] When the target page loads the Flutter dynamic component, the dynamic resource is queried from the cache first according to the component identifier configured by the Flutter dynamic component. If it exists, it is a hit. If it does not exist, the cache management mechanism is triggered to pull the dynamic resource from the remote server in real time. The dynamic resources in the cache are persistently cached, and the dynamic resources in the cache can be maintained and managed according to the validity of the dynamic resources.

[0034] Step 102: decode the dynamic resource to obtain multiple expressions with a recursive hierarchical structure, each of which includes at least one component configuration.

[0035] The expression is an abstract representation of the page view result. Component configuration (Widget object) is the configuration information of an interface element. A Widget object ultimately represents a visible or invisible element on the screen and is the basic unit used in development.

[0036] After obtaining the dynamic resources corresponding to the Flutter dynamic components, decode the dynamic resources to obtain an expression list in the agreed format, that is, multiple expressions with a recursive hierarchical structure, each of which includes at least one component configuration. For example, an expression is x+y=z, and x, y, and z are all component configurations in the expression. Another example: an expression is as follows:

[0037]

[0038] Among them, Icon is the component configuration in the expression.

[0039] In one embodiment of the present invention, decoding the dynamic resource to obtain multiple expressions with a recursive hierarchical structure includes: decoding the dynamic resource, and performing signature verification and integrity check on the dynamic resource to obtain multiple expressions with a recursive hierarchical structure.

[0040] After obtaining the dynamic resources corresponding to the Flutter dynamic components, the dynamic resources are decoded. During the decoding process, the signature of the dynamic resources is verified to ensure the legality and security of the dynamic resources. After the decoding is completed, the decoded dynamic resources are checked for integrity to determine the integrity of the dynamic resources. After the signature verification and integrity check are passed, multiple expressions with a recursive hierarchical structure are obtained.

[0041] Step 103: recursively parse the multiple expressions according to the recursive hierarchical structure, and instantiate the component configuration in each expression to obtain multiple component configuration instances.

[0042] Among them, an instance is a programming object in memory, and a component configuration instance is a memory object corresponding to a component configuration.

[0043] According to the recursive hierarchical structure, the expression is recursively parsed through the decoder. In each recursive layer, the component configuration corresponding to the expression of that layer is instantiated. After each expression is parsed and instantiated, multiple component configuration instances are obtained. When instantiating the component configuration in each expression, the component configuration that needs to be instantiated can be queried from the component configuration registry, and the component configuration in the expression is instantiated according to the query result to obtain the component configuration instance.

[0044] Among them, the component configuration registry is divided into two types: one is the system component configuration table generated based on the Flutter framework itself, and the other is the business component configuration table customized by the developer. When instantiating the component configuration in the expression, first query the component configuration in the current expression from the business component configuration table. If it is a hit, instantiate the component configuration in the current expression based on the query result. If it is not a hit, further query the component configuration in the current expression from the system component configuration table. If it is a hit, instantiate the component configuration in the current expression based on the query result. If it is not a hit, give a fallback component.

[0045] Step 104: construct the multiple component configuration instances into a Flutter component configuration tree corresponding to the Flutter dynamic component according to the recursive hierarchical structure.

[0046] After recursively parsing and instantiating multiple expressions with a recursive hierarchical structure, multiple component configuration instances are obtained, and the multiple component configuration instances obtained are constructed into a Flutter component configuration tree (Widget Tree) corresponding to the Flutter component according to the recursive hierarchical structure. The Flutter component configuration tree is a tree of a widget composed of many component configurations (Widget objects) organized together.

[0047] Step 105: Call the Flutter component configuration tree through the Flutter system to display the updated Flutter dynamic component on the target page.

[0048] After building the Flutter component configuration tree corresponding to the Flutter dynamic component, the Flutter component configuration tree is handed over to the Flutter system, that is, the Flutter system calls the Flutter component configuration tree, and the Flutter system drives the subsequent component tree (Element Tree) and rendering tree (RenderObject Tree) to be updated, and finally the visual content information of the updated Flutter dynamic component is displayed on the target page.

[0049] The dynamic update method of the Flutter component provided in this embodiment obtains the dynamic resources corresponding to the Flutter dynamic component to be updated in the target page, decodes the dynamic resources, obtains multiple expressions with a recursive hierarchical structure, recursively parses the multiple expressions according to the recursive hierarchical structure, and instantiates the component configuration in each expression to obtain multiple component configuration instances, constructs the multiple component configuration instances into a Flutter component configuration tree corresponding to the Flutter dynamic component, calls the Flutter component configuration tree through the Flutter system to display the updated Flutter dynamic component on the target page, and realizes the dynamic update of the Flutter dynamic component. Since the dynamic resources are developed by the Flutter framework, there is no need to run additional JavaScript when the application is running, which reduces the size of the application package and reduces the space occupied. It can be directly developed by Flutter developers without additional learning cost and communication between JavaScript and Dart.

[0050] On the basis of the above technical solution, the method further comprises:

[0051] After the application to which the target page belongs is started, the local dynamic resource table of the target application is loaded, the dynamic resource table including the component identifier and resource configuration information of the Flutter dynamic component; according to the dynamic resource table, the update configuration information corresponding to the component identifier is obtained from the server; the resource configuration information corresponding to the component identifier in the dynamic resource table is updated to the update configuration information to obtain an updated dynamic resource table; if the dynamic resource corresponding to the component identifier in the dynamic resource table is a remote resource, the dynamic resource is preloaded from the resource address in the resource configuration information in the dynamic resource table through a background thread, and persistent caching is performed.

[0052] The resource configuration information includes the resource address and other configuration information. The other configuration information may be, for example, resource validity, version information, release time, etc.

[0053] After the application to which the target page belongs is started, the local dynamic resource table of the target reference program is loaded, and the update configuration information corresponding to each component identifier is obtained from the server asynchronously through the network. When obtaining the update configuration information from the server, the resource configuration information corresponding to the component identifier can be sent to the server, and the server compares the received resource configuration information corresponding to the component identifier with the latest local resource configuration information corresponding to the component identifier, determines the corresponding resource configuration information that needs to be updated, obtains the update configuration information, and returns it to the client. The resource configuration information in the dynamic resource table is updated according to the update configuration information corresponding to the component identifier to obtain an updated dynamic resource table. According to the updated dynamic resource table, the dynamic resources (i.e., binary resources) of the Flutter dynamic component are preheated, i.e., preloaded. If the dynamic resource corresponding to the component identifier in the dynamic resource table is a built-in resource, the dynamic resource can be directly loaded; if the dynamic resource corresponding to the component identifier in the dynamic resource table is a remote resource, the dynamic resource is downloaded to the local from the resource address in the resource configuration information in the dynamic resource table through the background thread. After the download is completed, it is persistently cached according to the cache rules. For dynamic resources in persistent cache, you can save configuration information such as resource version number, release time, effective version, current software version number, and whether to force cache refresh for each dynamic resource.

[0054] By preloading the dynamic resources to be updated into the cache after the application to which the target page belongs is started, the speed of loading and dynamic updating of subsequent target pages can be improved.

[0055] On the basis of the above technical solution, when the Flutter dynamic component is loaded on the target page, the dynamic resources corresponding to the Flutter dynamic component are obtained from the cache or the server, including: when the Flutter dynamic component is loaded on the target page, the dynamic resources corresponding to the Flutter dynamic component are queried from the cache; if the dynamic resources corresponding to the Flutter dynamic component are queried from the cache, the dynamic resources corresponding to the Flutter dynamic component are obtained from the cache; if the dynamic resources corresponding to the Flutter dynamic component are not queried from the cache, the dynamic resources corresponding to the Flutter dynamic component are obtained from the server.

[0056] When loading the Flutter dynamic component on the target page, first, the dynamic resource corresponding to the Flutter dynamic component is preferentially queried from the cache according to the component identifier of the Flutter dynamic component. If the dynamic resource exists in the cache, the dynamic resource is hit, that is, the dynamic resource corresponding to the Flutter dynamic component is obtained from the cache. If the dynamic resource corresponding to the Flutter dynamic component does not exist in the cache, it means that the Flutter dynamic component is a Flutter dynamic component to be updated. At this time, the dynamic resource corresponding to the Flutter dynamic component can be obtained from the server in real time. When obtaining the dynamic resource corresponding to the Flutter dynamic component from the server, the resource address of the dynamic resource of the Flutter dynamic component can be obtained according to the attribute configuration information of the Flutter dynamic component in the target page, and the dynamic resource is obtained from the corresponding server through the resource address; if the attribute configuration information of the Flutter dynamic component in the target page does not have the resource address of the Flutter dynamic component, the resource address of the Flutter dynamic component is obtained from the above-mentioned updated dynamic resource table, and the dynamic resource is obtained from the corresponding server through the resource address. When loading the Flutter dynamic component on the target page, the dynamic resource is preferentially obtained from the cache. If it does not exist in the cache, it is obtained from the server to speed up the acquisition of dynamic resources.

[0057] On the basis of the above technical solution, after obtaining the dynamic resources corresponding to the Flutter dynamic component from the server, it also includes: persistently caching the dynamic resources corresponding to the Flutter dynamic component.

[0058] After obtaining the dynamic resources corresponding to the Flutter dynamic component from the server, the dynamic resources corresponding to the Flutter dynamic component are persistently cached so that the dynamic resources can be obtained from the cache when the Flutter dynamic component is loaded next time, thereby improving the loading speed of the Flutter dynamic component.

[0059] On the basis of the above technical solution, the method further includes: when obtaining the dynamic resources corresponding to the Flutter dynamic component from the server, displaying the progress bar information on the target page.

[0060] When pulling dynamic resources corresponding to Flutter dynamic components from the server, the progress bar information is displayed on the target page to show the loading progress of the Flutter dynamic components and give users intuitive prompts.

[0061] On the basis of the above technical solution, it also includes: performing validity detection on the dynamic resources in the cache and deleting invalid dynamic resources.

[0062] For the management and maintenance of dynamic resources in the local cache, the validity of the dynamic resources in the cache can be periodically checked according to the configuration information of the dynamic resources, and invalid dynamic resources can be deleted, and valid dynamic resources can be retained. For example, when the resource version number of a dynamic resource is earlier than the resource version number of the latest dynamic resource, the dynamic resource is determined to be an invalid dynamic resource and deleted from the cache. By checking the validity of dynamic resources in the cache, invalid dynamic resources can be deleted in time, freeing up storage space for storing valid dynamic resources.

[0063] On the basis of the above technical solution, it also includes: when instantiating the component configuration in each expression, checking whether the Flutter dynamic component has a scope; if the Flutter dynamic component has a scope, identifying the variables of the component configuration in each expression; binding the scope and the variable to construct an observer for the variable, and the observer is used to observe changes in the value of the variable.

[0064] When instantiating the component configuration (i.e., Widget object) in each expression, check whether the Flutter dynamic component has a scope based on the pre-saved binding relationship between the component identifier and the scope function. If the Flutter dynamic component has a scope, call the scope function corresponding to the Flutter dynamic component to obtain the scope corresponding to the Flutter dynamic component, identify the variables in the component configuration in each expression, and if a component is configured as a variable, bind the variable and the scope to build an observer for the variable. The observer is a listener to observe changes in the value of the variable. By binding scopes and variables, local refresh can be supported, which improves the efficiency of page construction.

[0065] Based on the above technical solution, the method further includes: observing the change of the value of the variable through the observer, and when the variable changes, binding the component configuration and the changed value of the variable, and returning a new component configuration instance.

[0066] After building an observer for the variable through the observer pattern, during the process of displaying the target page, the observer can be used to observe changes in the value of the variable. When the variable changes, the component configuration corresponding to the variable and the value after the variable changes are bound, and a new component configuration instance (i.e., Widget object) is returned. Subsequently, the Flutter component configuration tree can be updated according to the new component configuration instance, realizing partial refresh and improving the efficiency of page construction.

[0067] Figure 2 This is a flowchart of a method for dynamically updating a Flutter component provided by an embodiment of the present invention. Figure 2The 7 steps in the explanation are as follows:

[0068] 1. After starting an application based on the Flutter framework, load the local dynamic resource table, which includes the component identification and resource configuration information of the Flutter dynamic component, and asynchronously connect to the network to obtain the updated configuration information from the server, and update the dynamic resource table according to the updated configuration information. After starting, the dynamic resource configuration information in the application will become the latest state.

[0069] 2. Preheat the dynamic resources (i.e. binary resources) of the Flutter dynamic component according to the updated dynamic resource table. If the dynamic resource corresponding to the Flutter dynamic component is a built-in resource, load the dynamic resource directly; if the dynamic resource corresponding to the Flutter dynamic component is a remote resource, preload the dynamic resource from the resource address in the resource configuration information in the dynamic resource table through a background thread to download the dynamic resource to the local computer. After downloading, the local computer will persist the resource according to the cache rules. The validity of the cache is combined with the resource version number, release time, effective version, current software version number, whether to force the cache to be refreshed, etc., to manage and maintain the local cache, thereby deleting invalid resources and retaining valid resources.

[0070] 3. During the page loading process, depending on the actual business situation, the content that needs to be displayed on the page may be system components or Flutter dynamic components; load the corresponding components separately, among which system components can be loaded directly.

[0071] 4. When encountering a Flutter dynamic component, the dynamic resource is queried from the cache first according to the component identifier configured by the Flutter dynamic component. If it exists, it is hit. If it does not exist, the cache management mechanism is triggered. It is pulled from the remote server in real time and then cached. During the pulling process, the page displays the progress bar information. After hitting the resource, it starts to decode the resource, including signature verification, to ensure the legality and security of the resource, and perform integrity check.

[0072] 5. After the resource is loaded and verified, a set of multiple expressions with a recursive hierarchical structure in an agreed format will be obtained. The expression is an abstract representation of the page view result. The decoder will recursively parse the expression and instantiate the corresponding component configuration in each layer of recursive parsing. The component configuration is queried from the component configuration registry. The component configuration registry is divided into two types: one is the system component configuration table generated based on the Flutter framework itself, and the other is the business component configuration table customized by the developer.

[0073] 6. When instantiating the component configuration (i.e., the Widget object), it will check whether the current dynamic component has a scope. If there is a scope, the current dynamic component and the scope will be associated and bound. When associating and binding, the association between the component identifier of the Flutter dynamic component and the scope function can be stored in the form of key-value. Identify the variables in the component configuration, replace and bind them from the scope. After binding the scope and variables, accurate local refresh can be performed. When the value of the variable in the scope changes, the observer will be notified. The observer is a listener one by one. After receiving the notification, the observer rebinds the component configuration and the updated value of the variable and returns a new component configuration instance (i.e., the Widget object).

[0074] 7. When the component configuration tree of the entire page is built (i.e., Widget Tree), the dynamic update logic is completed, and the component configuration tree is handed over to the Flutter system, which drives the subsequent updates of the component tree and rendering tree, and finally displays the visual content information on the screen.

[0075] The dynamic update method of the Flutter component provided in the embodiment of the present invention allows terminal users to upgrade to a new page without noticing, reducing the process of users going to the market to install new packages. The application can pull new dynamic resources from the server according to demands and matching strategies, thereby changing the overall or partial content of the page. There is no need to republish the application, and the terminal users can see the latest product page; for developers of Flutter applications, they can develop normally without switching the development language (compared to MXFlutter, which requires the use of JavaScript). After the development is completed, a new resource package is generated and uploaded through the background; for the software development team, the appropriate dynamic update capability directly improves the speed at which new product solutions reach users, and there is no need to wait for periodic application releases.

[0076] It should be noted that, for the sake of simplicity, the method embodiments are described as a series of action combinations, but those skilled in the art should be aware that the embodiments of the present invention are not limited by the order of the actions described, because according to the embodiments of the present invention, certain steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also be aware that the embodiments described in the specification are all preferred embodiments, and the actions involved are not necessarily required by the embodiments of the present invention.

[0077] Figure 3 is a structural block diagram of a dynamic update device for a Flutter component provided by an embodiment of the present invention, such as Figure 3 As shown, the dynamic update device of the Flutter component may include:

[0078] The dynamic resource acquisition module 301 is used to acquire the dynamic resources corresponding to the Flutter dynamic components to be updated in the target page;

[0079] A dynamic resource decoding module 302, configured to decode the dynamic resource to obtain a plurality of expressions having a recursive hierarchical structure, each of the expressions comprising at least one component configuration;

[0080] A recursive parsing module 303, configured to recursively parse the multiple expressions according to the recursive hierarchical structure, and instantiate the component configuration in each expression to obtain multiple component configuration instances;

[0081] A Flutter component configuration tree construction module 304 is used to construct the multiple component configuration instances into a Flutter component configuration tree corresponding to the Flutter dynamic component according to the recursive hierarchical structure;

[0082] The page rendering module 305 is used to call the Flutter component configuration tree through the Flutter system to display the updated Flutter dynamic component on the target page.

[0083] Optionally, the dynamic resource acquisition module is specifically used to:

[0084] When the target page loads the Flutter dynamic component, the dynamic resources corresponding to the Flutter dynamic component are obtained from the cache or the server.

[0085] Optionally, the device further comprises:

[0086] A dynamic resource table loading module, used to load the local dynamic resource table of the target application after the application to which the target page belongs is started, wherein the dynamic resource table includes a component identifier and resource configuration information of a Flutter dynamic component;

[0087] An update configuration acquisition module, used to acquire update configuration information corresponding to the component identifier from a server according to the dynamic resource table;

[0088] A dynamic resource table updating module, used to update the resource configuration information corresponding to the component identifier in the dynamic resource table to the updated configuration information, to obtain an updated dynamic resource table;

[0089] The dynamic resource preloading module is used to preload the dynamic resource from the resource address in the resource configuration information in the dynamic resource table through a background thread and perform persistent caching if the dynamic resource corresponding to the component identifier in the dynamic resource table is a remote resource.

[0090] Optionally, the dynamic resource acquisition module includes:

[0091] A dynamic resource query unit, used to query the dynamic resource corresponding to the Flutter dynamic component from the cache when the target page loads the Flutter dynamic component;

[0092] A first dynamic resource acquisition unit, configured to acquire the dynamic resource corresponding to the Flutter dynamic component from the cache if the dynamic resource corresponding to the Flutter dynamic component is queried from the cache;

[0093] The second dynamic resource acquisition unit is used to acquire the dynamic resource corresponding to the Flutter dynamic component from the server if the dynamic resource corresponding to the Flutter dynamic component is not queried from the cache.

[0094] Optionally, the device further comprises:

[0095] The persistent cache module is used to persistently cache the dynamic resources corresponding to the Flutter dynamic component.

[0096] Optionally, the device further comprises:

[0097] The progress bar display module is used to display the progress bar information on the target page when the dynamic resources corresponding to the Flutter dynamic component are obtained from the server.

[0098] Optionally, the device further comprises:

[0099] The validity detection module is used to perform validity detection on the dynamic resources in the cache and delete invalid dynamic resources.

[0100] Optionally, the device further comprises:

[0101] A scope checking module is used to check whether the Flutter dynamic component has a scope when instantiating the component configuration in each expression;

[0102] A variable identification module, used to identify the variables configured by the component in each expression if the Flutter dynamic component has a scope;

[0103] A scope variable binding module is used to bind the scope and the variable to construct an observer for the variable, and the observer is used to observe changes in the value of the variable.

[0104] Optionally, the device further comprises:

[0105] The component configuration update module is used to observe the change of the value of the variable through the observer, and when the variable changes, bind the component configuration and the changed value of the variable, and return a new component configuration instance.

[0106] Optionally, the dynamic resource decoding module is specifically used to:

[0107] The dynamic resource is decoded, and a signature verification and an integrity check are performed on the dynamic resource to obtain a plurality of expressions having a recursive hierarchical structure.

[0108] The dynamic update device of the Flutter component provided in this embodiment obtains the dynamic resources corresponding to the Flutter dynamic component to be updated in the target page, decodes the dynamic resources, obtains multiple expressions with a recursive hierarchical structure, recursively parses the multiple expressions according to the recursive hierarchical structure, and instantiates the component configuration in each expression to obtain multiple component configuration instances, constructs the multiple component configuration instances into a Flutter component configuration tree corresponding to the Flutter dynamic component, calls the Flutter component configuration tree through the Flutter system to display the updated Flutter dynamic component on the target page, and realizes the dynamic update of the Flutter dynamic component. Since the dynamic resources are developed by the Flutter framework, there is no need to run additional JavaScript when the application is running, which reduces the size of the application package and reduces the space occupied. It can be directly developed by Flutter developers without additional learning cost and communication between JavaScript and Dart.

[0109] Figure 4 FIG. 1 is a structural block diagram of an electronic device provided by an embodiment of the present invention. Figure 4 As shown, the electronic device 400 may include one or more processors 401 and one or more memories 402 connected to the processors 401. The electronic device 400 may also include an input interface 403 and an output interface 404 for communicating with another device or system. The program code executed by the CPU of the processor 401 may be stored in the memory 402.

[0110] The processor 401 in the electronic device 400 calls the program code stored in the memory 402 to execute the dynamic update method of the Flutter component in the above embodiment.

[0111] The above elements in the above electronic device may be connected to each other via a bus, such as one or any combination of a data bus, an address bus, a control bus, an expansion bus and a local bus.

[0112] According to one embodiment of the present invention, a computer-readable storage medium is further provided, on which a computer program is stored, and the storage medium may be a read-only memory (ROM) or a readable and writable medium, such as a hard disk or a flash memory. When the computer program is executed by the processor, the dynamic update method of the Flutter component of the foregoing embodiment is implemented.

[0113] The various embodiments in this specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the various embodiments can be referenced to each other.

[0114] It will be appreciated by those skilled in the art that the embodiments of the present invention may be provided as methods, devices, or computer program products. Therefore, the embodiments of the present invention may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Moreover, the embodiments of the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program codes.

[0115] The embodiments of the present invention are described with reference to the flowcharts and / or block diagrams of the methods, terminal devices (systems), and computer program products according to the embodiments of the present invention. It should be understood that each process and / or block in the flowchart and / or block diagram, as well as the combination of the processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing terminal device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing terminal device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0116] These computer program instructions may also be stored in a computer readable memory capable of directing a computer or other programmable data processing terminal device to operate in a specific manner, so that the instructions stored in the computer readable memory produce a manufactured product including an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0117] These computer program instructions can also be loaded onto a computer or other programmable data processing terminal device so that a series of operating steps are executed on the computer or other programmable terminal device to produce a computer-implemented process, thereby providing instructions for executing on the computer or other programmable terminal device to implement the process. Figure 1 A process or multiple processes and / or boxes Figure 1 A step that specifies a function in one or more boxes.

[0118] Although the preferred embodiments of the present invention have been described, those skilled in the art may make additional changes and modifications to these embodiments once they have learned the basic creative concept. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments and all changes and modifications that fall within the scope of the embodiments of the present invention.

[0119] Finally, it should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or terminal device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or terminal device. In the absence of further restrictions, the elements defined by the sentence "comprise a ..." do not exclude the existence of other identical elements in the process, method, article or terminal device including the elements.

[0120] The above is a detailed introduction to a dynamic update method, device, electronic device and storage medium of a Flutter component provided by the present invention. Specific examples are used in this article to illustrate the principles and implementation methods of the present invention. The description of the above embodiments is only used to help understand the method of the present invention and its core idea; at the same time, for those skilled in the art, according to the idea of ​​the present invention, there will be changes in the specific implementation method and application scope. In summary, the content of this specification should not be understood as limiting the present invention.

Claims

1. A dynamic update method for a Flutter component, characterized in that: include: When a Flutter dynamic component is loaded on the target page, the dynamic resources corresponding to the Flutter dynamic component are queried from the cache; If the dynamic resource corresponding to the Flutter dynamic component is queried from the cache, the dynamic resource corresponding to the Flutter dynamic component is obtained from the cache; If the dynamic resource corresponding to the Flutter dynamic component is not found in the cache, the dynamic resource corresponding to the Flutter dynamic component is obtained from the server; Decoding the dynamic resource to obtain a plurality of expressions having a recursive hierarchical structure, wherein the expression is an abstract representation of a page view result, and each of the expressions includes at least one component configuration; Recursively parsing the multiple expressions according to the recursive hierarchical structure, and instantiating the component configuration in each expression to obtain multiple component configuration instances; According to the recursive hierarchical structure, the multiple component configuration instances are constructed into a Flutter component configuration tree corresponding to the Flutter dynamic component; The Flutter component configuration tree is called through the Flutter system to display the updated Flutter dynamic component on the target page.

2. The method according to claim 1, characterized in that Also includes: After the application to which the target page belongs is started, a local dynamic resource table of the target application is loaded, where the dynamic resource table includes a component identifier and resource configuration information of a Flutter dynamic component; According to the dynamic resource table, acquiring update configuration information corresponding to the component identifier from a server; Updating the resource configuration information corresponding to the component identifier in the dynamic resource table to the updated configuration information to obtain an updated dynamic resource table; If the dynamic resource corresponding to the component identifier in the dynamic resource table is a remote resource, the dynamic resource is preloaded from the resource address in the resource configuration information in the dynamic resource table through a background thread and persistently cached.

3. The method according to claim 1, characterized in that After obtaining the dynamic resources corresponding to the Flutter dynamic component from the server, the method further includes: The dynamic resources corresponding to the Flutter dynamic component are persistently cached.

4. The method according to claim 1, characterized in that Also includes: When the dynamic resources corresponding to the Flutter dynamic component are obtained from the server, the progress bar information is displayed on the target page.

5. The method according to claim 1, characterized in that Also includes: The validity of the dynamic resources in the cache is checked, and invalid dynamic resources are deleted.

6. The method according to any one of claims 1 to 5, characterized in that: Also includes: When instantiating the component configuration in each expression, check whether the Flutter dynamic component exists in scope; If the Flutter dynamic component has a scope, identify the variables configured by the component in each expression; The scope and the variable are bound to construct an observer for the variable, where the observer is used to observe changes in the value of the variable.

7. The method according to claim 6, characterized in that Also includes: The change of the value of the variable is observed by the observer, and when the variable changes, the component configuration and the changed value of the variable are bound, and a new component configuration instance is returned.

8. The method according to any one of claims 1 to 5, characterized in that: The decoding of the dynamic resource obtains a plurality of expressions having a recursive hierarchical structure, including: The dynamic resource is decoded, and a signature verification and an integrity check are performed on the dynamic resource to obtain a plurality of expressions having a recursive hierarchical structure.

9. A dynamic update device for a Flutter component, characterized in that: include: A dynamic resource query unit, used to query the dynamic resources corresponding to the Flutter dynamic component from the cache when the Flutter dynamic component is loaded on the target page; A first dynamic resource acquisition unit, configured to acquire the dynamic resource corresponding to the Flutter dynamic component from the cache if the dynamic resource corresponding to the Flutter dynamic component is queried from the cache; A second dynamic resource acquisition unit is used to acquire the dynamic resource corresponding to the Flutter dynamic component from the server if the dynamic resource corresponding to the Flutter dynamic component is not queried from the cache; A dynamic resource decoding module, used for decoding the dynamic resource to obtain multiple expressions with a recursive hierarchical structure, wherein the expression is an abstract representation of the page view result, and each expression includes at least one component configuration; A recursive parsing module, used to recursively parse the multiple expressions according to the recursive hierarchical structure, and instantiate the component configuration in each expression to obtain multiple component configuration instances; A Flutter component configuration tree construction module, used to construct the multiple component configuration instances into a Flutter component configuration tree corresponding to the Flutter dynamic component according to the recursive hierarchical structure; The page rendering module is used to call the Flutter component configuration tree through the Flutter system to display the updated Flutter dynamic component on the target page.

10. An electronic device, characterized in that: include: A processor, a memory, and a computer program stored in the memory and executable on the processor, wherein when the computer program is executed by the processor, the method for dynamically updating a Flutter component according to any one of claims 1 to 8 is implemented.

11. A computer-readable storage medium, characterized in that: A computer program is stored on the computer-readable storage medium, and when the computer program is executed by the processor, the dynamic update method of the Flutter component according to any one of claims 1 to 8 is implemented.

Images