CN112667263A - Dynamic updating method and device of Flutter component, electronic equipment and storage medium - Google Patents
Dynamic updating method and device of Flutter component, electronic equipment and storage medium Download PDFInfo
- Publication number
- CN112667263A CN112667263A CN202110010033.4A CN202110010033A CN112667263A CN 112667263 A CN112667263 A CN 112667263A CN 202110010033 A CN202110010033 A CN 202110010033A CN 112667263 A CN112667263 A CN 112667263A
- Authority
- CN
- China
- Prior art keywords
- dynamic
- component
- flutter
- resource
- configuration
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Landscapes
- Stored Programmes (AREA)
Abstract
The invention provides a dynamic updating method, a dynamic updating device, electronic equipment and a storage medium of a Flutter component, wherein the method comprises the following steps: acquiring dynamic resources corresponding to a Flutter dynamic component to be updated in a target page; decoding the dynamic resources to obtain a plurality of expressions with a recursive hierarchical structure, wherein each expression comprises at least one component configuration; according to the recursive hierarchical structure, carrying out recursive analysis on a plurality of expressions, and instantiating the component configuration in each expression to obtain a plurality of component configuration examples; constructing a plurality of component configuration instances as a Flutter component configuration tree; and calling the Flutter component configuration tree through the Flutter system to display the updated Flutter dynamic component on the target page. The invention reduces the volume of the application package, reduces the occupation of space, can be directly developed by a developer of the Flutter, and does not need extra learning cost.
Description
Technical Field
The present invention relates to the field of front-end technologies, and in particular, to a method and an apparatus for dynamically updating a Flutter component, an electronic device, and a storage medium.
Background
The dynamic update can expand the update mode of the software, reduce the cost of reaching the user, and does not need the user to upgrade the Application (Application) in the Application market. The dynamic update enables the change of software content to be simpler, and the requirement that part of content is rapidly put on the market can be met.
In the prior art, a Flutter component can be dynamically updated based on MXFlutter, however, MXFlutter is a dynamic framework based on JavaScript and needs to be developed by using JavaScript, and Flutter development is developed by using Dart language, and there is a non-uniformity between development population and language between them.
MXFlutter developed through JavaScript development language, certain degree has left away from Flutter ecology, need imitate Flutter simultaneously, set up the mirror frame of a set of JavaScript, the crowd that faces is the front end JavaScript developer, and to Flutter's developer need great study cost, still need the communication between JavaScript and the Dart in the use, communication link is longer, and when application program operates, still need to run extra JavaScript, lead to the volume of application package great, occupation space is more.
Disclosure of Invention
In view of the above problems, embodiments of the present invention are proposed to provide a method, an apparatus, an electronic device and a storage medium for dynamically updating a Flutter component that overcome or at least partially solve the above problems.
According to a first aspect of the present invention, there is provided a method for dynamically updating a Flutter component, including:
acquiring dynamic resources corresponding to a Flutter dynamic component to be updated in a target page;
decoding the dynamic resources to obtain a plurality of expressions with a recursive hierarchical structure, wherein each expression comprises at least one component configuration;
according to the recursive hierarchical structure, carrying out recursive analysis on the expressions, and instantiating the component configuration in each expression to obtain a plurality of component configuration examples;
constructing the multiple component configuration instances into a Flutter component configuration tree corresponding to the Flutter dynamic component according to the recursive hierarchical structure;
and calling the Flutter component configuration tree through a Flutter system so as to display the updated Flutter dynamic component on the target page.
According to a second aspect of the present invention, there is provided a dynamic update apparatus for a Flutter component, comprising:
the dynamic resource acquisition module is used for acquiring dynamic resources corresponding to a Flutter dynamic component to be updated in a target page;
a dynamic resource decoding module, configured to decode the dynamic resource to obtain multiple expressions with a recursive hierarchical structure, where each expression includes at least one component configuration;
the recursive analysis module is used for carrying out recursive analysis on the expressions according to the recursive hierarchical structure and instantiating the component configuration in each expression to obtain a plurality of component configuration examples;
a Flutter component configuration tree construction module, configured to construct, according to the recursive hierarchical structure, the multiple component configuration instances as a Flutter component configuration tree corresponding to the Flutter dynamic component;
and the page rendering module is used for calling the Flutter component configuration tree through a Flutter system so as to display the updated Flutter dynamic component on the target page.
According to a third aspect of the present invention, there is also provided an electronic device, a processor, a memory and a computer program stored on the memory and executable on the processor, wherein the computer program, when executed by the processor, implements the method for dynamically updating a Flutter component according to the first aspect.
According to a fourth aspect of the present invention, there is also provided a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, implements the dynamic update method of the Flutter component according to the first aspect.
The dynamic updating method, the device, the electronic equipment and the storage medium of the Flutter component provided by the invention have the advantages that the dynamic resource corresponding to the Flutter dynamic component to be updated in the target page is obtained, the dynamic resource is decoded to obtain a plurality of expressions with a recursive hierarchical structure, the expressions are recursively analyzed according to the recursive hierarchical structure, the component configuration in each expression is instantiated to obtain a plurality of component configuration examples, the component configuration examples are constructed into the 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, the dynamic updating of the Flutter dynamic component is realized, because the dynamic resource is developed by a Flutter frame, no extra JavaScript is required to be operated when an application program is operated, the volume of an application package is reduced, and the occupation of space is reduced, can be developed directly by the developer of Flutter without additional learning costs and without communication between JavaScript and Dart.
The foregoing description is only an overview of the technical solutions of the present invention, and the embodiments of the present invention are described below in order to make the technical means of the present invention more clearly understood and to make the above and other objects, features, and advantages of the present invention more clearly understandable.
Drawings
Various other advantages and benefits will become apparent to those of ordinary skill in the art upon reading the following detailed description of the preferred embodiments. The drawings are only for purposes of illustrating the preferred embodiments and are not to be construed as limiting the invention.
Fig. 1 is a flowchart illustrating steps of a method for dynamically updating a Flutter component according to an embodiment of the present invention;
fig. 2 is a flowchart of a dynamic update method for a Flutter component according to an embodiment of the present invention;
fig. 3 is a block diagram of a dynamic update apparatus of a Flutter component according to an embodiment of the present invention;
fig. 4 is a block diagram of an electronic device according to an embodiment of the present invention.
Detailed Description
Exemplary embodiments of the present invention will be described in more detail below with reference to the accompanying drawings. While exemplary embodiments of the invention are shown in the drawings, it should be understood that the invention can be embodied in various forms and should not be limited to the embodiments set forth herein. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the invention to those skilled in the art.
Fig. 1 is a flowchart illustrating steps of a method for dynamically updating a Flutter component according to an embodiment of the present invention, as shown in fig. 1, the method may include:
The Flutter is a cross-platform software development framework, and a program developed by the Flutter can run in Android, iOS and a browser. The Flutter dynamic component, namely the FairWidget, is a composite component, and can be displayed as a whole page or a part of the page. The Flutter component expresses elements of a page, is an abstract concept, can be atomic and can be composite, the atomic component cannot be separated from other components, and the composite component is a new component formed by splicing a plurality of components. The dynamic resource is a binary resource and is obtained by compiling a code written by a Dart language, the coding format can be json or flatbuffer, a file is arranged on a mobile phone or a server, the file is transmitted in a data byte stream mode during transmission, and the file format of the dynamic resource is' fair.
In the running process of an application program to which a target page belongs, when the target page is loaded, the content to be displayed by the page can be a system component or a Flutter dynamic component, the system component and the Flutter dynamic component in the target page are respectively loaded according to the Flutter component configuration tree structure of the target page, the system component can be directly loaded, the Flutter dynamic component can obtain corresponding dynamic resources from a cache, and if the dynamic resources corresponding to the Flutter dynamic component do not exist in the cache, the corresponding dynamic resources can be obtained from a server. The dynamic resource corresponding to the Flutter dynamic component to be updated exists in the cache, and is obtained by preloading after the application program is started, and when the dynamic resource corresponding to the Flutter dynamic component does not exist in the cache, the Flutter dynamic component is the Flutter dynamic component to be updated.
In an embodiment of the present invention, the acquiring a dynamic resource corresponding to a Flutter dynamic component to be updated in a target page includes: and when the target page loads the Flutter dynamic component, acquiring the dynamic resource corresponding to the Flutter dynamic component from a cache or a server.
When the target page loads the Flutter dynamic component, the dynamic resource is preferentially inquired from the cache according to the component identifier configured by the Flutter dynamic component, if the dynamic resource exists, the dynamic resource is hit, and if the dynamic resource does not exist, a cache management mechanism is triggered, and the dynamic resource is pulled from the remote server in real time. The dynamic resources in the cache are persistent cache, and can be maintained and managed according to the effectiveness of the dynamic resources.
Wherein the expression is an abstract representation of the page view result. The component configuration (Widget object) is configuration information of an interface element, and a Widget object finally represents a visible or invisible element on a screen and is a basic unit used in development.
After the dynamic resource corresponding to the Flutter dynamic component is obtained, the dynamic resource is decoded to obtain an expression list in an agreed format, and a plurality of expressions with a recursive hierarchical structure are obtained, wherein each expression comprises 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. For another example: one expression is as follows:
wherein Icon is the component configuration in the expression.
In an embodiment of the present invention, said decoding said dynamic resource to obtain a plurality of expressions having a recursive hierarchical structure includes: decoding the dynamic resources, and performing signature verification and integrity check on the dynamic resources to obtain a plurality of expressions with a recursive hierarchical structure.
After the dynamic resource corresponding to the Flutter dynamic component is obtained, the dynamic resource is decoded, in the decoding completion process, signature verification is performed on the dynamic resource to ensure legal security of the dynamic resource, and after the decoding completion, integrity check is performed on the decoded dynamic resource to determine the integrity of the dynamic resource. And after the signature check and the integrity check are passed, obtaining a plurality of expressions with a recursive hierarchical structure.
And 103, carrying out recursive analysis on the multiple expressions according to the recursive hierarchical structure, and instantiating the component configuration in each expression to obtain multiple component configuration examples.
The instance is a programming object in the memory, and the component configuration instance is a memory object corresponding to the component configuration.
According to the recursive hierarchical structure, performing recursive analysis on the expression through a decoder, instantiating the component configuration corresponding to the expression in each layer of recursion, and obtaining a plurality of component configuration examples after analyzing and instantiating each expression. When the component configuration in each expression is instantiated, the component configuration which needs to be instantiated can be inquired from the component configuration registry, and the component configuration in the expression is instantiated according to the inquiry result to obtain a component configuration example.
The component configuration registry is divided into two types: one is a system component configuration table generated based on the Flutter framework, and the other is a service component configuration table customized by a developer. When the component configuration in the expression is instantiated, firstly, the component configuration in the current expression is inquired from the service component configuration table, if yes, the component configuration in the current expression is instantiated according to the inquiry result, if not, the component configuration in the current expression is further inquired from the system component configuration table, if yes, the component configuration in the current expression is instantiated according to the inquiry result, and if not, the component configuration in the current expression is given to the bottom-pocketed component.
And 104, constructing the multiple component configuration instances into a Flutter component configuration tree corresponding to the Flutter dynamic component according to the recursive hierarchical structure.
And constructing the obtained multiple component configuration examples 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 Widget tree formed by organizing a plurality of component configurations (Widget objects).
And 105, calling the Flutter component configuration tree through the Flutter system to display the updated Flutter dynamic component on the target page.
After the Flutter component configuration Tree corresponding to the Flutter dynamic component is constructed and obtained, the Flutter component configuration Tree is handed to the Flutter system, namely the Flutter system calls the Flutter component configuration Tree, the Flutter system drives the subsequent component Tree (Element Tree) and the rendering Tree (RenderObject Tree) to be updated, and finally the updated visualized content information of the Flutter dynamic component is displayed on a target page.
The dynamic update method for the Flutter component provided in this embodiment obtains a plurality of expressions with a recursive hierarchical structure by obtaining a dynamic resource corresponding to a Flutter dynamic component to be updated in a target page, decodes the dynamic resource, performs recursive parsing on the plurality of expressions according to the recursive hierarchical structure, instantiates component configuration in each expression to obtain a plurality of component configuration examples, constructs the plurality of component configuration examples as a Flutter component configuration tree corresponding to the Flutter dynamic component, calls the Flutter component configuration tree through a Flutter system to display the updated Flutter dynamic component on the target page, realizes dynamic update of the Flutter dynamic component, because the dynamic resource is developed by a Flutter framework, no additional JavaScript needs to be run when an application runs, reduces the volume of an application package, reduces the occupation of space, and can be directly developed by a Flutter developer, no additional learning cost is required and no communication between JavaScript and Dart is required.
On the basis of the technical scheme, the method further comprises the following steps:
after the application program to which the target page belongs is started, loading a local dynamic resource table of the target application program, wherein the dynamic resource table comprises a component identifier and resource configuration information of a Flutter dynamic component; according to the dynamic resource table, obtaining updating configuration information corresponding to the component identification 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; and if the dynamic resource corresponding to the component identifier in the dynamic resource table is a remote resource, preloading the dynamic resource from a resource address in resource configuration information in the dynamic resource table through a background thread, and performing persistent caching.
The resource configuration information includes a resource address and other configuration information, and the other configuration information may be, for example, resource validity, version information, release time, and the like.
And after the application program to which the target page belongs is started, loading a local dynamic resource table of the target reference program, and asynchronously networking to obtain the updating configuration information corresponding to each component identifier from the server. When the update configuration information is acquired from the server, the resource configuration information corresponding to the component identifier can be sent to the server, the server compares the received resource configuration information corresponding to the component identifier with the local latest resource configuration information corresponding to the component identifier, determines the corresponding resource configuration information needing to be updated, obtains the update configuration information, and returns the update configuration information to the client. And updating the resource configuration information in the dynamic resource table according to the update configuration information corresponding to the component identifier to obtain an updated dynamic resource table. Preheating, namely preloading, dynamic resources (namely binary resources) of the Flutter dynamic component according to the updated dynamic resource table, wherein if the dynamic resources corresponding to the component identifiers in the dynamic resource table are built-in resources, the dynamic resources can be directly loaded; and if the dynamic resource corresponding to the component identifier in the dynamic resource table is a remote resource, downloading the dynamic resource to the local from a resource address in the resource configuration information in the dynamic resource table through the background thread, and after the downloading is finished, performing persistent caching according to a caching rule. The persistent cached dynamic resources can store configuration information such as a resource version number, release time, an effective version, a current software version number, whether to forcibly refresh the cache and the like corresponding to each dynamic resource.
After the application program to which the target page belongs is started, the dynamic resource to be updated is preloaded into the cache, so that the loading and dynamic updating speed of the subsequent target page can be improved.
On the basis of the above technical solution, when the Flutter dynamic component is loaded on the target page, acquiring the dynamic resource corresponding to the Flutter dynamic component from a cache or a server includes: when the target page loads the Flutter dynamic component, inquiring dynamic resources corresponding to the Flutter dynamic component from a cache; if the dynamic resource corresponding to the Flutter dynamic component is inquired from the cache, acquiring the dynamic resource corresponding to the Flutter dynamic component from the cache; and if the dynamic resource corresponding to the Flutter dynamic component is not inquired from the cache, acquiring the dynamic resource corresponding to the Flutter dynamic component from a server.
When a target page loads a Flutter dynamic component, firstly, according to a component identifier of the Flutter dynamic component, preferentially inquiring a dynamic resource corresponding to the Flutter dynamic component from a cache, if the dynamic resource exists in the cache, hitting the dynamic resource, namely, obtaining the dynamic resource corresponding to the Flutter dynamic component from the cache, and if the dynamic resource corresponding to the Flutter dynamic component does not exist in the cache, indicating that the Flutter dynamic component is the Flutter dynamic component to be updated, at this time, obtaining the dynamic resource corresponding to the Flutter dynamic component from a server in real time. When acquiring 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 acquired according to the attribute configuration information of the Flutter dynamic component in the target page, and the dynamic resource can be acquired from the corresponding server through the resource address; and if the attribute configuration information of the Flutter dynamic component in the target page does not contain the resource address of the Flutter dynamic component, acquiring the resource address of the Flutter dynamic component from the updated dynamic resource table, and acquiring the dynamic resource from the corresponding server through the resource address. When the target page loads the Flutter dynamic component, the dynamic resource is preferentially obtained from the cache, and when the dynamic resource does not exist in the cache, the dynamic resource is obtained from the server, so that the speed of obtaining the dynamic resource is accelerated.
On the basis of the above technical solution, after the obtaining the dynamic resource corresponding to the Flutter dynamic component from the server, the method further includes: and performing persistent caching on the dynamic resources corresponding to the Flutter dynamic component.
After the dynamic resources corresponding to the Flutter dynamic component are obtained from the server, persistent caching is carried out on the dynamic resources corresponding to the Flutter dynamic component, so that the dynamic resources are obtained from the cache when the Flutter dynamic component is loaded next time, and the loading speed of the Flutter dynamic component is improved.
On the basis of the technical scheme, the method further comprises the following steps: and when the dynamic resources corresponding to the Flutter dynamic component are obtained from the server, displaying progress bar information on the target page.
And when the dynamic resource corresponding to the Flutter dynamic component is pulled from the server, displaying progress bar information on a target page to display the loading progress of the Flutter dynamic component and give a visual prompt to a user.
On the basis of the technical scheme, the method further comprises the following steps: and carrying out validity detection on the dynamic resources in the cache, and deleting the invalid dynamic resources.
For example, when the resource version number of the dynamic resource is earlier than the resource version number of the latest dynamic resource, it is determined that the dynamic resource is the invalid dynamic resource, and the dynamic resource is deleted from the cache. By detecting the effectiveness of the dynamic resources in the cache, the invalid dynamic resources can be deleted in time, and the storage space is released, so that the effective dynamic resources can be stored.
On the basis of the technical scheme, the method further comprises the following steps: when the component configuration in each expression is instantiated, checking whether the Flutter dynamic component has a scope; if the Flatter dynamic component has a scope, identifying variables configured by the component in each expression; binding the scope and the variable to construct an observer of the variable, the observer to observe changes in the value of the variable.
When the component configuration (namely, the Widget object) in each expression is instantiated, whether a scope exists in a Flutter dynamic component is checked according to a binding relationship between a prestored component identifier and a scope function, if the Flutter dynamic component has the scope, the scope function corresponding to the Flutter dynamic component is called to obtain the scope corresponding to the Flutter dynamic component, a variable in the component configuration in each expression is identified, and if one component configuration is a variable, the variable and the scope are bound to construct an observer of the variable, wherein the observer is a monitor to observe the change of the value of the variable. By binding the scope and the variable, local refreshing can be supported, and the efficiency of page construction is improved.
On the basis of the technical scheme, the method further comprises the following steps: and observing the change of the variable value through the observer, binding the component configuration and the variable changed value when the variable is changed, and returning a new component configuration instance.
After an observer for a variable is constructed through an observer mode, in the process of displaying the target page, the change of the value of the variable can be observed through the observer, when the variable changes, the component configuration corresponding to the variable and the value after the variable change are bound, a new component configuration instance (namely, a Widget object) is returned, and then the Flutter component configuration tree can be updated according to the new component configuration instance, so that local refreshing is realized, and the efficiency of page construction is improved.
Fig. 2 is a flowchart of a dynamic update method for a Flutter component according to an embodiment of the present invention, and the following explains 7 links in fig. 2:
1. and after an application program based on the Flutter framework is started, loading a local dynamic resource table, wherein the dynamic resource table comprises the component identification and the resource configuration information of the Flutter dynamic component, asynchronously networking to obtain the update configuration information from the server, and updating the dynamic resource table according to the update configuration information. After the application program is started, the dynamic resource configuration information in the application program becomes the latest state.
2. And preheating the dynamic resources (namely 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 the built-in resource, directly loading the dynamic resource; if the dynamic resource corresponding to the Flutter dynamic component is a remote resource, preloading the dynamic resource from a resource address in the resource configuration information in the dynamic resource table through a background thread to download the dynamic resource to the local, and after downloading, the local is persisted according to a cache rule, and the cache validity combines the version number, release time, effective version, current software version number, whether to forcibly refresh the cache and the like of the resource to perform local cache management and maintenance, so that the invalid resource is deleted, and the valid resource is reserved.
3. In the page loading process, according to the actual service situation, the content to be displayed on the page may be a system component or a Flutter dynamic component; the corresponding components are loaded separately, wherein the system components can be loaded directly.
4. When a Flutter dynamic component is encountered, preferentially inquiring dynamic resources from a cache according to a component identifier configured by the Flutter dynamic component, if the dynamic resources exist, the dynamic resources are hit, and if the dynamic resources do not exist, a cache management mechanism is triggered, the dynamic resources are pulled from a remote server in real time and then cached, and in the pulling process, a page displays progress bar information; and starting to decode the resources after hitting the resources, including signature verification, ensuring the legal safety of the resources, and carrying out integrity check.
5. After the resource loading and verification are completed, a plurality of expressions with a recursive hierarchical structure in an agreed format are obtained, and the expressions are abstract representations of page view results. The decoder will recursively parse the expression, instantiating a corresponding component configuration in each layer of the recursive parsing. The component configuration is queried from a component configuration registry, which is divided into two categories: one is a system component configuration table generated based on the Flutter framework, and the other is a service component configuration table customized by a developer.
6. When the component configuration (namely, the Widget object) is instantiated, whether the scope exists in the current dynamic component is checked, for the scope, the current dynamic component and the scope are associated and bound, and the association relationship between the component identification of the flux dynamic component and the scope function can be stored in the form of key-value during the association and binding. And identifying variables in the component configuration, replacing and binding the variables from the scope, and performing accurate local refreshing after binding the scope and the variables. When the value of the variable in the application domain changes, the observer is notified, the observer is a listener, and after receiving the notification, the observer rebunds the component configuration and the value after the variable is updated, and returns a new component configuration instance (namely, the Widget object).
7. And after the component configuration Tree of the whole page is constructed (namely, the Widget Tree), dynamically updating the logic, handing the component configuration Tree to the Flutter system, driving the subsequent updating of the component Tree and the rendering Tree by the Flutter system, and finally displaying the visual content information on the screen.
According to the dynamic updating method of the Flutter component, provided by the embodiment of the invention, for the terminal user, a new page can be upgraded without perception, the process that the user goes to the market to install a new package is reduced, and the application program can pull new dynamic resources from the server according to the appeal and matching strategies, so that the whole or local content of the page is changed, and the terminal user can see the latest product page without re-issuing the application program; for a developer applying the Flutter, the development can be normally carried out (relative to MXflutter needing to use JavaScript) under the condition of not switching development languages, after the development is finished, a new resource packet is generated, and then the new resource packet is uploaded through a background; for a software development team, the appropriate dynamic updating capability directly improves the speed of a new product scheme for reaching a user, and the software development team does not need to wait for periodical application release.
It should be noted that, for simplicity of description, the method embodiments are described as a series of acts or combination of acts, but those skilled in the art will recognize that the present invention is not limited by the illustrated order of acts, as some steps may occur in other orders or concurrently in accordance with the embodiments of the present invention. Further, those skilled in the art will appreciate that the embodiments described in the specification are presently preferred and that no particular act is required to implement the invention.
Fig. 3 is a block diagram of a dynamic update apparatus of a Flutter component according to an embodiment of the present invention, and as shown in fig. 3, the dynamic update apparatus of the Flutter component may include:
a dynamic resource obtaining module 301, configured to obtain a dynamic resource corresponding to a Flutter dynamic component to be updated in a target page;
a dynamic resource decoding module 302, configured to decode the dynamic resource, so as to obtain a plurality of expressions with a recursive hierarchical structure, where each expression includes at least one component configuration;
a recursive analysis module 303, configured to perform recursive analysis on the multiple expressions according to the recursive hierarchical structure, and instantiate component configuration in each expression to obtain multiple component configuration instances;
a Flutter component configuration tree constructing module 304, configured to construct, according to the recursive hierarchical structure, the multiple component configuration instances as a Flutter component configuration tree corresponding to the Flutter dynamic component;
and a page rendering module 305, configured to invoke the Flutter component configuration tree through the Flutter system, so as to display the updated Flutter dynamic component on the target page.
Optionally, the dynamic resource obtaining module is specifically configured to:
and when the target page loads the Flutter dynamic component, acquiring the dynamic resource corresponding to the Flutter dynamic component from a cache or a server.
Optionally, the apparatus further comprises:
the dynamic resource table loading module is used for loading a local dynamic resource table of the target application program after the application program to which the target page belongs is started, wherein the dynamic resource table comprises a component identifier and resource configuration information of a Flutter dynamic component;
the updating configuration obtaining module is used for obtaining the updating configuration information corresponding to the component identification from a server according to the dynamic resource table;
a dynamic resource table updating module, configured to update the resource configuration information corresponding to the component identifier in the dynamic resource table to the updated configuration information, so as to obtain an updated dynamic resource table;
and the dynamic resource preloading module is used for preloading the dynamic resource from a resource address in the resource configuration information in the dynamic resource table through a background thread and performing persistent caching if the dynamic resource corresponding to the component identifier in the dynamic resource table is a remote resource.
Optionally, the dynamic resource obtaining module includes:
the dynamic resource query unit is used for querying a dynamic resource corresponding to the Flutter dynamic component from a cache when the Flutter dynamic component is loaded on the target page;
a first dynamic resource obtaining unit, configured to obtain, if a dynamic resource corresponding to the Flutter dynamic component is queried from the cache, the dynamic resource corresponding to the Flutter dynamic component from the cache;
and the second dynamic resource obtaining unit is used for obtaining the dynamic resource corresponding to the Flutter dynamic component from the server if the dynamic resource corresponding to the Flutter dynamic component is not inquired from the cache.
Optionally, the apparatus further comprises:
and the persistent cache module is used for persistently caching the dynamic resources corresponding to the Flutter dynamic component.
Optionally, the apparatus further comprises:
and the progress bar display module is used for displaying the progress bar information on the target page when the dynamic resources corresponding to the Flutter dynamic component are obtained from the server.
Optionally, the apparatus further comprises:
and the validity detection module is used for detecting the validity of the dynamic resources in the cache and deleting the invalid dynamic resources.
Optionally, the apparatus further comprises:
the scope checking module is used for checking whether the scope exists in the Flutter dynamic component when the component configuration in each expression is instantiated;
the variable identification module is used for identifying the configured variable of the component in each expression if the Flutter dynamic component has a scope;
a scope variable binding module for binding the scope and the variable to construct an observer of the variable, the observer for observing changes in the value of the variable.
Optionally, the apparatus further comprises:
and the component configuration updating module is used for observing the change of the variable value through the observer, binding the component configuration and the variable changed value when the variable is changed, and returning a new component configuration instance.
Optionally, the dynamic resource decoding module is specifically configured to:
decoding the dynamic resources, and performing signature verification and integrity check on the dynamic resources to obtain a plurality of expressions with a recursive hierarchical structure.
The dynamic updating apparatus for a Flutter component provided in this embodiment obtains a plurality of expressions having a recursive hierarchical structure by obtaining a dynamic resource corresponding to a Flutter dynamic component to be updated in a target page, decodes the dynamic resource, performs recursive parsing on the plurality of expressions according to the recursive hierarchical structure, instantiates component configuration in each expression to obtain a plurality of component configuration examples, constructs the plurality of component configuration examples as a Flutter component configuration tree corresponding to the Flutter dynamic component, calls the Flutter component configuration tree through a Flutter system to display the updated Flutter dynamic component on the target page, and implements dynamic updating of the Flutter dynamic component, because the dynamic resource is developed by a Flutter framework, no additional JavaScript needs to be run when an application runs, reduces the volume of an application package, reduces the occupation of space, and can be directly developed by a Flutter developer, no additional learning cost is required and no communication between JavaScript and Dart is required.
Fig. 4 is a block diagram of an electronic device according to an embodiment of the present invention. As shown in fig. 4, 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 apparatus or system. Program code executed by the CPU of processor 401 may be stored in memory 402.
The processor 401 in the electronic device 400 calls the program code stored in the memory 402 to perform the dynamic update method of the Flutter component in the above-described embodiment.
The above elements in the above electronic device may be connected to each other by a bus, such as one of a data bus, an address bus, a control bus, an expansion bus, and a local bus, or any combination thereof.
There is also provided, in accordance with an embodiment of the present invention, a computer-readable storage medium having a computer program stored thereon, where the storage medium may be a Read-Only Memory (ROM) or a Read-write medium, such as a hard disk or a flash Memory. The computer program, when executed by a processor, implements the dynamic update method of the Flutter component of the foregoing embodiments.
The embodiments in the present specification are described in a progressive manner, each embodiment focuses on differences from other embodiments, and the same and similar parts among the embodiments are referred to each other.
As will be appreciated by one skilled in the art, embodiments of the present invention may be provided as a method, apparatus, or computer program product. Accordingly, embodiments of the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, embodiments of the present invention may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
Embodiments of the present invention are described with reference to flowchart illustrations and/or block diagrams of methods, terminal devices (systems), and computer program products according to embodiments of the invention. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing terminal to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing terminal, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing terminal to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be loaded onto a computer or other programmable data processing terminal to cause a series of operational steps to be performed on the computer or other programmable terminal to produce a computer implemented process such that the instructions which execute on the computer or other programmable terminal provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
While preferred embodiments of the present invention have been described, additional variations and modifications of these embodiments may occur to those skilled in the art once they learn of the basic inventive concepts. Therefore, it is intended that the appended claims be interpreted as including preferred embodiments and all such alterations and modifications as fall within the scope of the embodiments of the invention.
Finally, it should also be noted that, herein, relational terms such as first and second, and the like may be used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Also, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or terminal that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or terminal. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other like elements in a process, method, article, or terminal that comprises the element.
The method, the apparatus, the electronic device and the storage medium for dynamically updating a Flutter component provided by the present invention are described in detail above, and a specific example is applied in the present document to explain the principle and the implementation of the present invention, and the description of the above embodiment is only used to help understanding the method and the core idea of the present invention; meanwhile, for a person skilled in the art, according to the idea of the present invention, there may be variations in the specific embodiments and the application scope, and in summary, the content of the present specification should not be construed as a limitation to the present invention.
Claims (13)
1. A dynamic update method for a Flutter component is characterized by comprising the following steps:
acquiring dynamic resources corresponding to a Flutter dynamic component to be updated in a target page;
decoding the dynamic resources to obtain a plurality of expressions with a recursive hierarchical structure, wherein each expression comprises at least one component configuration;
according to the recursive hierarchical structure, carrying out recursive analysis on the expressions, and instantiating the component configuration in each expression to obtain a plurality of component configuration examples;
constructing the multiple component configuration instances into a Flutter component configuration tree corresponding to the Flutter dynamic component according to the recursive hierarchical structure;
and calling the Flutter component configuration tree through a Flutter system so as to display the updated Flutter dynamic component on the target page.
2. The method according to claim 1, wherein the obtaining of the dynamic resource corresponding to the Flutter dynamic component to be updated in the target page includes:
and when the target page loads the Flutter dynamic component, acquiring the dynamic resource corresponding to the Flutter dynamic component from a cache or a server.
3. The method of claim 2, further comprising:
after the application program to which the target page belongs is started, loading a local dynamic resource table of the target application program, wherein the dynamic resource table comprises a component identifier and resource configuration information of a Flutter dynamic component;
according to the dynamic resource table, obtaining updating configuration information corresponding to the component identification 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;
and if the dynamic resource corresponding to the component identifier in the dynamic resource table is a remote resource, preloading the dynamic resource from a resource address in resource configuration information in the dynamic resource table through a background thread, and performing persistent caching.
4. The method according to claim 2, wherein the obtaining of the dynamic resource corresponding to the Flutter dynamic component from a cache or a server when the Flutter dynamic component is loaded on the target page includes:
when the target page loads the Flutter dynamic component, inquiring dynamic resources corresponding to the Flutter dynamic component from a cache;
if the dynamic resource corresponding to the Flutter dynamic component is inquired from the cache, acquiring the dynamic resource corresponding to the Flutter dynamic component from the cache;
and if the dynamic resource corresponding to the Flutter dynamic component is not inquired from the cache, acquiring the dynamic resource corresponding to the Flutter dynamic component from a server.
5. The method according to claim 4, wherein after the obtaining the dynamic resource corresponding to the Flutter dynamic component from the server, the method further comprises:
and performing persistent caching on the dynamic resources corresponding to the Flutter dynamic component.
6. The method of claim 4, further comprising:
and when the dynamic resources corresponding to the Flutter dynamic component are obtained from the server, displaying progress bar information on the target page.
7. The method of claim 2, further comprising:
and carrying out validity detection on the dynamic resources in the cache, and deleting the invalid dynamic resources.
8. The method of any one of claims 1-7, further comprising:
when the component configuration in each expression is instantiated, checking whether the Flutter dynamic component has a scope;
if the Flatter dynamic component has a scope, identifying variables configured by the component in each expression;
binding the scope and the variable to construct an observer of the variable, the observer to observe changes in the value of the variable.
9. The method of claim 8, further comprising:
and observing the change of the variable value through the observer, binding the component configuration and the variable changed value when the variable is changed, and returning a new component configuration instance.
10. The method according to any of claims 1-7, wherein said decoding said dynamic resource resulting in a plurality of expressions having a recursive hierarchy comprises:
decoding the dynamic resources, and performing signature verification and integrity check on the dynamic resources to obtain a plurality of expressions with a recursive hierarchical structure.
11. A dynamic update apparatus for a Flutter component, comprising:
the dynamic resource acquisition module is used for acquiring dynamic resources corresponding to a Flutter dynamic component to be updated in a target page;
a dynamic resource decoding module, configured to decode the dynamic resource to obtain multiple expressions with a recursive hierarchical structure, where each expression includes at least one component configuration;
the recursive analysis module is used for carrying out recursive analysis on the expressions according to the recursive hierarchical structure and instantiating the component configuration in each expression to obtain a plurality of component configuration examples;
a Flutter component configuration tree construction module, configured to construct, according to the recursive hierarchical structure, the multiple component configuration instances as a Flutter component configuration tree corresponding to the Flutter dynamic component;
and the page rendering module is used for calling the Flutter component configuration tree through a Flutter system so as to display the updated Flutter dynamic component on the target page.
12. An electronic device, comprising: processor, memory and a computer program stored on said memory and executable on said processor, said computer program, when executed by said processor, implementing a method for dynamic updating of a Flutter component according to any of claims 1-10.
13. A computer-readable storage medium, characterized in that the computer-readable storage medium has stored thereon a computer program which, when being executed by a processor, implements the method for dynamic update of a Flutter component according to any of the claims 1 to 10.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110010033.4A CN112667263A (en) | 2021-01-05 | 2021-01-05 | Dynamic updating method and device of Flutter component, electronic equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110010033.4A CN112667263A (en) | 2021-01-05 | 2021-01-05 | Dynamic updating method and device of Flutter component, electronic equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112667263A true CN112667263A (en) | 2021-04-16 |
Family
ID=75413127
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110010033.4A Pending CN112667263A (en) | 2021-01-05 | 2021-01-05 | Dynamic updating method and device of Flutter component, electronic equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112667263A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113885997A (en) * | 2021-10-19 | 2022-01-04 | 深圳市元征科技股份有限公司 | Dialog box display method and device, electronic equipment and storage medium |
| CN114077456A (en) * | 2021-08-18 | 2022-02-22 | 五八有限公司 | Component processing method and device, electronic equipment and storage medium |
-
2021
- 2021-01-05 CN CN202110010033.4A patent/CN112667263A/en active Pending
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114077456A (en) * | 2021-08-18 | 2022-02-22 | 五八有限公司 | Component processing method and device, electronic equipment and storage medium |
| CN113885997A (en) * | 2021-10-19 | 2022-01-04 | 深圳市元征科技股份有限公司 | Dialog box display method and device, electronic equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11755346B2 (en) | Method and apparatus for user interface modification | |
| AU2009260643B2 (en) | Presenting advertisements based on web-page interaction | |
| US6968539B1 (en) | Methods and apparatus for a web application processing system | |
| US7895571B2 (en) | Method and apparatus for resolving client-side logic | |
| US7921353B1 (en) | Method and system for providing client-server injection framework using asynchronous JavaScript and XML | |
| US10142399B2 (en) | Minimal download and simulated page navigation features | |
| WO2018133452A1 (en) | Webpage rendering method and related device | |
| US20190243866A1 (en) | Mobile enablement of existing web sites | |
| CN111639287A (en) | Page processing method and device, terminal equipment and readable storage medium | |
| US20140344664A1 (en) | Webpage Display System Leveraging OSGI | |
| US20110161840A1 (en) | Performance of template based javascript widgets | |
| CA2619313A1 (en) | Initial server-side content rendering for client-script web pages | |
| US20110307238A1 (en) | Methods for utilizing a javascript emulator in a web content proxy server and devices thereof | |
| US7509584B2 (en) | Dynamic ECMAScript class loading | |
| CN112667263A (en) | Dynamic updating method and device of Flutter component, electronic equipment and storage medium | |
| CN111880788A (en) | Page rendering method, device, client and computer readable storage medium | |
| CN111880790A (en) | Page rendering method, page rendering system, and computer-readable storage medium | |
| CN112905179A (en) | Mobile terminal H5 page generation method and device, electronic equipment and storage medium | |
| CN102981846A (en) | Method for treating password input box element and browser for treating the password input box element | |
| CN109033466A (en) | Page sharing method calculates equipment and computer storage medium | |
| CN112799663A (en) | Page display method and device, computer readable storage medium and electronic equipment | |
| CN110765746A (en) | Automatic form generation method and system based on event agent | |
| KR101851357B1 (en) | Code-caching system | |
| CN111880789A (en) | Page rendering method, device, server and computer-readable storage medium | |
| US10114617B2 (en) | Rapid visualization rendering package for statistical programming language |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |