CN113342447A - Page generation method, device, equipment and storage medium based on Flutter - Google Patents
Page generation method, device, equipment and storage medium based on Flutter Download PDFInfo
- Publication number
- CN113342447A CN113342447A CN202110718097.XA CN202110718097A CN113342447A CN 113342447 A CN113342447 A CN 113342447A CN 202110718097 A CN202110718097 A CN 202110718097A CN 113342447 A CN113342447 A CN 113342447A
- Authority
- CN
- China
- Prior art keywords
- function
- flutter
- native
- message
- result data
- 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.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 56
- 238000009877 rendering Methods 0.000 claims abstract description 30
- 230000006870 function Effects 0.000 claims description 251
- 238000004590 computer program Methods 0.000 claims description 12
- 238000006243 chemical reaction Methods 0.000 claims description 7
- 238000005457 optimization Methods 0.000 abstract description 2
- 238000011161 development Methods 0.000 description 13
- 238000012795 verification Methods 0.000 description 13
- 238000004891 communication Methods 0.000 description 7
- 238000010586 diagram Methods 0.000 description 4
- 238000005516 engineering process Methods 0.000 description 3
- 238000012545 processing Methods 0.000 description 3
- 230000000694 effects Effects 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 230000007246 mechanism Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 230000003213 activating effect Effects 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 230000007812 deficiency Effects 0.000 description 1
- 230000006698 induction Effects 0.000 description 1
- 230000010365 information processing Effects 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 230000008569 process Effects 0.000 description 1
- 238000012546 transfer Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/448—Execution paradigms, e.g. implementations of programming paradigms
- G06F9/4482—Procedural
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/46—Multiprogramming arrangements
- G06F9/54—Interprogram communication
- G06F9/546—Message passing systems or structures, e.g. queues
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/46—Multiprogramming arrangements
- G06F9/54—Interprogram communication
- G06F9/547—Remote procedure calls [RPC]; Web services
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
- Stored Programmes (AREA)
Abstract
The invention discloses a method, a device, equipment and a storage medium for generating a page based on Flutter, and belongs to the field of mobile terminal operation experience optimization. The method comprises the following steps: the Flutter end determines the type of a first function calling message generated corresponding to the trigger event of the front end; when the type representation of the first function calling message needs to call the native function module, the Flutter end converts the first function calling message into a second function calling message which can be identified by the native end; the Flutter terminal sends the second function calling message to the native terminal, so that the native terminal calls and executes the corresponding native function module according to the second function calling message to obtain first result data; and after the Flutter end receives the first result data fed back by the original end, rendering the first result data to generate a page, wherein the page is used for displaying an execution result corresponding to the trigger event of the front end. By introducing the FLUTTER end, the display of the application program on different platforms and different devices is kept highly consistent, and the user experience is improved.
Description
Technical Field
The invention relates to the field of mobile terminal operation experience optimization, in particular to a Flutter-based page generation method, an electronic device, computer equipment and a storage medium.
Background
With the development of mobile internet technology and the popularization of intelligent mobile terminals, the importance of mobile internet in life is more and more obvious, and the development of Application programs (APP for short) of mobile terminals is more and more important. At present, most of APPs adopt a hybrid development mode, and the hybrid development mode is a development mode for making up for deficiencies, and relates to a cross-platform technical scheme for APP development. At the present stage, the evolution of the cross-platform technology is more than that of hundreds of families, the development of the cross-platform technology is greatly promoted by the schemes such as Web APP, Hybrid App, Cordova, Ionic and read Native, and the development efficiency of the APP is improved.
There are two common hybrid development modes for APP: the first hybrid development mode is mainly a native + H5 mode, represents Cordova, Ionic, small programs and the like, and is realized by loading WebView through a native webpage; however, the APP developed by adopting the mode has the defects of poor performance, incapability of achieving the expected experience effect on a complex user interface or animation WebView and the like when in use. The second hybrid development mode mainly takes a Native + JavaScript mode as a main mode, and represents real Native, Weex, fast application and the like; however, when the APP developed by the mode is used, communication between JavaScript and native is required for rendering, some scenes can cause unsmooth clamping, and because rendering depends on a native space, different platform controls need to be maintained independently, so that the maintenance workload is increased.
Disclosure of Invention
The invention provides a method, a device, equipment and a storage medium for generating a page based on Flutter, aiming at overcoming the problems in the prior art.
The invention solves the technical problems through the following technical scheme:
a method for generating a page based on Flutter, the method comprising:
the method comprises the steps that a Flutter terminal determines the type of a first function calling message generated corresponding to a trigger event of a front end, wherein the type is used for representing whether a native function module needs to be called or not;
when the type representation of the first function calling message needs to call the native function module, the Flutter end converts the first function calling message into a second function calling message which can be identified by the native end;
the Flutter end sends the second function calling message to the native end, so that the native end calls and executes a corresponding native function module according to the second function calling message to obtain first result data, and sends the first result data to the Flutter end;
and after the Flutter end receives the first result data fed back by the native end, rendering the first result data to generate a page, wherein the page is used for displaying an execution result corresponding to the trigger event of the front end.
Preferably, before the Flutter side determines the type of the first function call message generated corresponding to the trigger event of the front end, the method further includes:
the front end identifies at least one functional module corresponding to the trigger event according to a preset module division rule;
and generating first function calling messages corresponding to the function modules one to one according to the identified function modules.
Preferably, after the Flutter terminal determines a type of the first function call message generated corresponding to the trigger event of the front end, where the type is used to characterize whether the native function module needs to be called, the method further includes:
when the type representation of the first function calling message does not need to call the native function module, the Flutter end calls and executes the function module corresponding to the first function calling message from the Flutter end according to the first function calling message to obtain second result data;
and rendering the second result data by the Flutter end to generate a page, wherein the page is used for displaying an execution result corresponding to the trigger event of the front end.
Preferably, when the first function call message generated by the front end includes at least two pieces, where the type of at least one first function call message indicates that the module of the native end needs to be called, and the type of at least one other first function call message indicates that the module of the native end does not need to be called; the Flutter terminal determines the type of a first function call message generated corresponding to a trigger event of the front terminal, where the type is used to characterize whether a native function module needs to be called, and the method further includes:
the Flutter end also calls and executes a function module corresponding to the first function calling message from the Flutter end according to the first function calling message to obtain second result data;
and after the Flutter end receives the first result data of the execution fed back by the native end, rendering the first result data and the second result data together to generate a page, wherein the page is used for displaying the execution result corresponding to the trigger event of the front end.
Preferably, when the type representation of the first function call message requires to call the native function module, the converting, by the Flutter end, the first function call message into a second function call message that can be recognized by the native end includes:
determining a corresponding channel and an identifier according to a preset conversion rule and the first function call message, wherein the identifier comprises a packaged task method;
and calling a preset encoder to carry out binary coding on the identifier so as to obtain the second function calling message.
Preferably, the sending, by the Flutter side, the second function call message to the native side includes:
calling a target channel preset between the Flutter end and the native end according to the determined channel identifier of the channel;
sending the second function calling message to the native terminal through the target channel;
and after the native terminal executes the corresponding function module according to the second function call message and obtains the first result data, feeding the first result data back to the Flutter terminal through a callback function pre-registered in the target channel.
Preferably, the invoking a target channel preset between the Flutter end and the native end according to the determined channel identifier of the channel includes:
the Flutter terminal initiates a method calling request through an invokeMethod, wherein the method calling request comprises the second function calling message and a Key matched with the callback;
the calling and executing the corresponding native function module by the native terminal according to the second function calling message to obtain the first result data comprises:
matching the Key through an onMethodCall after the native terminal monitors the method calling request;
and when the matching is successful, the native terminal calls the corresponding native function module according to the second function calling message and executes the native function module to obtain the first result data.
The invention also discloses a device for generating the page based on the Flutter, which comprises the following components:
the type identification module is used for determining the type of a first function calling message generated corresponding to a trigger event of a front end, and the type is used for representing whether a native function module needs to be called or not;
the message conversion module is used for converting the first function calling message into a second function calling message which can be identified by the primitive end when the type representation of the first function calling message needs to call the primitive function module;
the message sending module is used for sending the second function calling message to the native terminal so that the native terminal calls and executes the corresponding native function module according to the second function calling message;
and the rendering module is used for rendering the first result data to generate a page after receiving the first result data of the execution fed back by the primary end, wherein the page is used for displaying the execution result corresponding to the trigger event of the front end.
The invention also discloses a computer device, comprising a memory and a processor, wherein the memory stores a computer program, and the computer program realizes the steps of the Flutter-based page generation method according to any one of the preceding claims when being executed by the processor.
The invention also discloses a computer-readable storage medium, in which a computer program is stored, the computer program being executable by at least one processor to implement the steps of the Flutter-based page generation method according to any of the preceding claims.
The positive progress effects of the invention are as follows: through introducing the flute end as the intermediate level, encapsulate the functional module of business aspect at the flute end to peel apart with the primary functional module of basic service aspect, realize the rendering of each functional module at the flute end simultaneously, so that the display of application on different platforms, different equipment keeps highly unanimous, promotes user experience.
Drawings
FIG. 1 is a flowchart illustrating a first embodiment of a method for generating a page based on Flutter according to the present invention;
FIG. 2 is a flowchart illustrating a second embodiment of a method for generating a page based on Flutter according to the present invention;
FIG. 3 is a block diagram of an embodiment of a Flutter-based page generation apparatus according to the present invention;
fig. 4 shows a hardware architecture diagram of an embodiment of the computer device of the present invention.
Detailed Description
The invention is further illustrated by the following examples, which are not intended to limit the scope of the invention.
Firstly, the invention provides a method for generating a page based on Flutter.
In an embodiment, as shown in fig. 1, the method for generating a page based on Flutter includes the following steps:
step 110: the Flutter terminal determines the type of a first function calling message generated corresponding to the trigger event of the front terminal, wherein the type is used for representing whether the native function module needs to be called or not.
The method realizes the generation of the page through the interaction of the Flutter end and the native end, wherein the Flutter is a User Interface (UI) toolkit for constructing Google open source, helps developers to efficiently construct multi-platform exquisite application through a set of code base, and supports mobile, Web, desktop and embedded platforms.
The method comprises the steps of firstly dividing functional modules based on service requirements, and then combining different functional modules at a Flutter end. During development, the calling of the native function is reduced as much as possible, and only part of the function modules relate to the calling of the native function, so that when the Flutter receives a first function calling message from the front end, whether the message relates to the calling of the native function needs to be judged first, and specifically, whether the native function modules need to be called is judged according to the type of the first function calling message.
In this implementation, the front end can be understood as a general name of a script code of a page of an application program developed by adopting a JavaScript script or TypeScript script language; the native side can be understood as a generic term of native code of an IOS system application developed by adopting Objective-C language, or a generic term of native code of an Android system application developed by adopting Java language.
The trigger event can be that a user clicks a specific button, opens a certain local folder, activates a gyroscope, activates air pressure induction, activates a camera, activates a microphone and other hardware, and can also realize a slider verification login function and the like by activating a native terminal.
Some functions corresponding to the trigger event mainly relate to a service function module, and can be realized at the flute end, such as a pull-down refreshing function, a message prompting function, a layer popping function and the like. And some functions corresponding to the trigger event need to be realized by a native terminal, such as a slider verification function in a login and registration link. Therefore, after receiving the first function call message, the type of the message needs to be determined.
Generally, there may be a plurality of functional modules corresponding to a trigger event, for example, a login and registration link, which includes a slider verification function, a popup layer function, and the like. Therefore, if the front end identifies the trigger event, it first needs to identify the function module corresponding to the trigger event, and then generates a one-to-one corresponding first function call message according to the identified function module, which specifically includes: the front end identifies at least one functional module corresponding to the trigger event according to a preset module division rule; and then generating first function calling messages corresponding to the function modules one by one according to the identified function modules.
The front end generates a first function calling message and then sends the first function calling message to the Flutter end, and then the Flutter end judges the type of the first function calling message.
Step 120: identifying a type of the first function call message; when the type representation of the first function call message needs to call the native function module, executing step 130; step 160 is performed when the type representation of the first function call message does not require a call to the native function module.
In this embodiment, the first function call message is a piece of code, the piece of code is divided into a plurality of sections, each section of code represents a preset meaning, and one section of code represents a type of the first function call message. Thus, the type of the first function call message can be identified by intercepting a piece of code at a specific location, and then the jump performs different steps according to the identified different types.
Step 130: and the Flutter terminal converts the first function calling message into a second function calling message which can be identified by the original terminal.
When the type shows that the first function call message relates to the calling of the native function module, the Flutter terminal plays the role of a transfer station and needs to convert the first function call message into a second function call message which can be recognized by the native terminal. Because the API of the native function module cannot be directly accessed according to the first function call message, the Flutter terminal can perform the operation of the network request, that is, convert the first function call message into the native network request http policy (i.e., the second function call message) for calling the native function module, and then implement the call of the Flutter terminal to the native function module according to the native network request.
Specifically, the converting the first function call message into the second function call message includes: determining a corresponding channel and an identifier according to a preset conversion rule and a first function call message, wherein the identifier comprises a packaged task method; and calling a preset encoder to carry out binary coding on the identifier so as to obtain a second function calling message.
Step 140: and the Flutter terminal sends the second function calling message to the native terminal, so that the native terminal calls and executes the corresponding native function module to obtain first result data according to the second function calling message, and sends the first result data to the Flutter terminal.
The Flutter end and the native end need to communicate, a communication channel is established firstly, then matching is carried out through the identification of the channel, only after matching, the Flutter end can initiate a request to the native end, and the native end can also feed back result data to the Flutter end. However, more than one channel is usually established between the Flutter end and the native end, so that when a channel is established, a pair of unique and same channel identifiers needs to be configured for each matched channel, in colloquial, a unique name is configured for the channel, and it can be known through the channel name which channel the Flutter end and the native end need to interact through.
Therefore, when code development is carried out, a native terminal needs to package plug-ins for communication and stores programs in a warehouse, and the plug-ins for communication are packaged into a class by taking android programs as an example and then registered in onCreate in the MainActivity, so that the plug-ins of the native terminal are constructed. Then, the plug-in needs to be registered in the corresponding channel created by the Flutter end, and the association between the plug-in of the native end and the corresponding channel created by the Flutter end is realized through the registration.
Therefore, the sending, by the Flutter side, the second function call message to the originating side specifically includes: and calling a target channel preset between the Flutter end and the native end according to the determined channel identifier of the channel. And sending the second function calling message to the native terminal through the target channel. When the Flutter terminal and the native terminal communicate with each other, the Flutter terminal initiates a method invocation request through the invokeMethod, where the request includes a channel identifier (where the channel identifier is included in the second function invocation message) and a key matching the callback.
And after the native terminal executes the corresponding function module according to the second function call message and obtains the first result data, feeding the first result data back to the Flutter terminal through a callback function which is registered in the target channel in advance.
After the native terminal monitors that a request comes, matching the key of the request through the onMethodcall; and when the matching is successful, calling and executing the corresponding native function module. In short, it specifically includes: matching Key through onMethodCall after the native terminal monitors the method calling request; and when the matching is successful, the native terminal calls the corresponding native function module according to the second function calling message and executes the native function module to obtain first result data.
Step 150: and after the Flutter end receives the first result data fed back by the original end, rendering the first result data to generate a page, wherein the page is used for displaying an execution result corresponding to the trigger event of the front end.
After the execution of the corresponding native function module is completed and the first result data is obtained, the native end feeds the first result data back to the Flutter end through a callback function pre-registered in the target channel, then the Flutter end renders the first result data through a rendering mechanism carried by the Flutter end, and finally generates a page for displaying an execution result corresponding to the trigger event of the front end.
Step 160: and the Flutter end calls and executes the function module corresponding to the first function calling message from the Flutter end according to the first function calling message to obtain second result data.
When the type of the first function call message shows that the call of the native function module is not involved, only the function module at the Flutter end needs to be called, and the function module here generally refers to calling the corresponding component.
Firstly, a Flutter interface component library needs to be constructed in advance, the preset classification method can be a classification method defined by developers according to the needs and preferences of the developers, the developers can call all interface components of a basic component library carried by the Flutter, and then the interface components are classified according to the preset classification method, so that the Flutter interface component library is constructed. It should be noted that, the Flutter interface component library may be pre-constructed and may be used repeatedly.
The method comprises the steps that a user operates (namely, triggers) on a front-end page, a page to be generated and applied is designed in advance by a developer, namely, a demand page, the demand page belongs to a manuscript recording file and cannot be directly applied to a program, the demand page exists in a Flutter interface component library in an interface component mode, the demand page is usually disassembled according to functions to obtain a plurality of interface components, and then the disassembled interface components are classified according to a preset classification method for constructing the Flutter interface component library to obtain a first interface component. In addition, a configuration parameter file is written for the first interface component obtained by classification, so that the first interface component can correspond to a Flutter interface component library defined by a developer, and a second interface component corresponding to the first interface component can be called from the Flutter interface component library according to the configuration parameter file.
Step 170: rendering the second result data of the Flutter end to generate a page, wherein the page is used for displaying an execution result corresponding to the trigger event of the front end.
The second result data is equivalent to the second interface component, after the Flutter end obtains the second interface component, the Flutter end renders the second interface component through a rendering mechanism carried in the Flutter end, and finally generates a page for displaying an execution result corresponding to the trigger event at the front end, which is equivalent to the requirement page mentioned in the foregoing step.
In this embodiment, the native function module is only used for executing and outputting result data, and the data are finally converged to the flute end for rendering, so that rendering does not depend on the native control of the system, the consistency of display of the same application program on different platforms and different devices is ensured to the greatest extent, and the user experience is greatly improved.
Since there may be a plurality of function modules corresponding to one trigger event, and the types of the first function call messages generated corresponding to each function module are different. Therefore, when a plurality of function modules correspond to a trigger event, the step 20 of the first embodiment of determining the type of the first function call message refers to determining the type of each first function call message, and each first function call message correspondingly executes a subsequent step, which specifically refers to the second embodiment.
In the second embodiment, based on the first embodiment, as shown in fig. 2, the method for generating a page based on Flutter includes the following steps:
step 210: the Flutter terminal determines the type of a first function calling message generated corresponding to the trigger event of the front terminal, wherein the type is used for representing whether the native function module needs to be called or not. Step 210 is the same as step 110 in the first embodiment, and is not described herein.
Step 220: respectively identifying the type of each first function calling message; when the type representation of the first function call message needs to call the native function module, executing step 230; step 250 is performed when the type representation of the first function call message does not require a call to the native function module.
And calling the function modules with the matched number according to the number of the first function calling messages, wherein the calling of each function module can be in sequence at the same time, and the calling is not limited here.
Step 230: and the Flutter terminal converts the first function calling message into a second function calling message which can be identified by the original terminal. Step 230 is the same as step 130 in the first embodiment, and is not described herein.
Step 240: and the Flutter terminal sends the second function calling message to the native terminal, so that the native terminal calls and executes the corresponding native function module according to the second function calling message to obtain the first result data. Step 240 is the same as step 140 in the first embodiment, and is not described herein.
Step 250: and the Flutter end calls and executes the function module corresponding to the first function calling message from the Flutter end according to the first function calling message to obtain second result data. Step 250 is the same as step 160 in the first embodiment, and is not described herein.
Step 260: and after the Flutter end receives the first result data of the execution fed back by the native end, rendering the first result data and the second result data together to generate a page, wherein the page is used for displaying the execution result corresponding to the trigger event of the front end.
The second result data is originally at the Flutter end, and therefore after the Flutter end is confirmed to receive the first result data, the two types of result data (the first result data and the second result data) are rendered together to generate a page of an execution result corresponding to the trigger event at the front end.
Taking the slider login verification as an example, when a user clicks the login on the APP interface to perform the slider verification, since the Flutter end has no related function module, the native function module needs to be called for verification, but only the verification itself involves calling the native end, and a component generating an interface (for example, a UI interface) for the slider verification is still at the Flutter end. Therefore, the front end divides the function corresponding to the trigger event of the slider login verification into a plurality of functional modules according to a preset module division rule, wherein the type representation of the first function calling message generated by the corresponding slider verification functional module only needs to call the module of the original end, and other functional modules only call related components at the Flutter end. Therefore, after the primary end completes the slider verification, the verification result (first result data) is fed back to the Flutter end, the verification result is equivalent to a parameter file, the corresponding interface component (function module) is called from the Flutter end interface component library according to the parameter file and other first function calling messages, and finally, a page for displaying the execution result corresponding to the trigger event of the front end is generated.
In this embodiment, the native function module is only used for executing and outputting result data, and the data are finally converged to the flute end for rendering, so that rendering does not depend on the native control of the system, the consistency of display of the same application program on different platforms and different devices is ensured to the greatest extent, and the user experience is greatly improved.
Secondly, the invention proposes a Flutter-based page generation apparatus, said apparatus 20 being divisible into one or more modules.
For example, fig. 3 shows a block diagram of an embodiment of the Flutter-based page generation apparatus 20, in which the apparatus 20 may be divided into a type identification module 201, a message conversion module 202, a message sending module 203, and a rendering module 204. The following description will specifically describe the specific functions of the module 201 and 204.
The type identification module 201 is configured to determine a type of a first function call message generated corresponding to a trigger event of a front end, where the type is used to characterize whether a native function module needs to be called;
the message conversion module 202 is configured to convert the first function call message into a second function call message that can be recognized by the native terminal when the type representation of the first function call message requires to call the native function module;
the message sending module 203 is configured to send the second function calling message to the native terminal, so that the native terminal calls and executes the corresponding native function module according to the second function calling message;
the rendering module 204 is configured to, after receiving the first result data of the execution fed back by the native end, render the first result data to generate a page, where the page is used to display an execution result corresponding to the trigger event at the front end.
In this embodiment, the native function module is only used for executing and outputting result data, and the data are finally converged to the flute end for rendering, so that rendering does not depend on the native control of the system, the consistency of display of the same application program on different platforms and different devices is ensured to the greatest extent, and the user experience is greatly improved.
In other embodiments, the apparatus 20 may further include a function execution module, configured to, when the type of the first function call message indicates that the module of the originating terminal does not need to be called, the Flutter terminal, according to the first function call message, calls and executes the function module corresponding to the first function call message from the Flutter terminal to obtain the second result data. Meanwhile, the rendering module 204 is further configured to render the second result data to generate a page, where the page is used to display an execution result corresponding to the trigger event of the front end.
The invention further provides computer equipment.
Fig. 4 is a schematic diagram of a hardware architecture of an embodiment of the computer device according to the present invention. In the present embodiment, the computer device 2 is a device capable of automatically performing numerical calculation and/or information processing in accordance with a preset or stored instruction. For example, the server may be a smart phone, a tablet computer, a notebook computer, a desktop computer, a rack server, a blade server, a tower server, or a rack server (including an independent server or a server cluster composed of a plurality of servers). As shown, the computer device 2 includes, but is not limited to, at least a memory 21, a processor 22, and a network interface 23 communicatively coupled to each other via a system bus. Wherein:
the memory 21 includes at least one type of computer-readable storage medium including a flash memory, a hard disk, a multimedia card, a card type memory (e.g., SD or DX memory, etc.), a Random Access Memory (RAM), a Static Random Access Memory (SRAM), a Read Only Memory (ROM), an Electrically Erasable Programmable Read Only Memory (EEPROM), a Programmable Read Only Memory (PROM), a magnetic memory, a magnetic disk, an optical disk, etc. In some embodiments, the memory 21 may be an internal storage unit of the computer device 2, such as a hard disk or a memory of the computer device 2. In other embodiments, the memory 21 may also be an external storage device of the computer device 2, such as a plug-in hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash memory Card (Flash Card), and the like provided on the computer device 2. Of course, the memory 21 may also comprise both an internal storage unit of the computer device 2 and an external storage device thereof. In this embodiment, the memory 21 is generally used for storing an operating system and various application software installed in the computer device 2, for example, a computer program for implementing the Flutter-based page generation method. Further, the memory 21 may also be used to temporarily store various types of data that have been output or are to be output.
The processor 22 may be a Central Processing Unit (CPU), controller, microcontroller, microprocessor, or other data Processing chip in some embodiments. The processor 22 is generally configured to control the overall operation of the computer device 2, such as performing control and processing related to data interaction or communication with the computer device 2. In this embodiment, the processor 22 is configured to run a program code stored in the memory 21 or process data, for example, run a computer program for implementing the Flutter-based page generation method.
The network interface 23 may comprise a wireless network interface or a wired network interface, and the network interface 23 is typically used to establish a communication connection between the computer device 2 and other computer devices. For example, the network interface 23 is used to connect the computer device 2 to an external terminal through a network, establish a data transmission channel and a communication connection between the computer device 2 and the external terminal, and the like. The network may be a wireless or wired network such as an Intranet (Intranet), the Internet (Internet), a Global System of Mobile communication (GSM), Wideband Code Division Multiple Access (WCDMA), a 4G network, a 5G network, Bluetooth (Bluetooth), Wi-Fi, and the like.
It is noted that fig. 4 only shows the computer device 2 with components 21-23, but it is to be understood that not all shown components are required to be implemented, and that more or less components may be implemented instead.
In this embodiment, the computer program stored in the memory 21 for implementing the Flutter-based page generation method may be executed by one or more processors (in this embodiment, the processor 22) to perform the following steps:
step 110: the Flutter end determines the type of a first function calling message generated corresponding to a trigger event of the front end, wherein the type is used for representing whether a native function module needs to be called or not;
step 120: identifying a type of the first function call message; when the type representation of the first function call message needs to call the native function module, executing step 130; when the type representation of the first function call message does not need to call the native function module, performing step 160;
step 130: the Flutter end converts the first function calling message into a second function calling message which can be identified by the original end;
step 140: the Flutter terminal sends the second function calling message to the native terminal, so that the native terminal calls and executes the corresponding native function module according to the second function calling message to obtain first result data;
step 150: after the Flutter end receives the first result data fed back by the original end, rendering the first result data to generate a page, wherein the page is used for displaying an execution result corresponding to a trigger event of the front end;
step 160: the Flutter end calls and executes the function module corresponding to the first function calling message from the Flutter end according to the first function calling message to obtain second result data;
step 170: rendering the second result data of the Flutter end to generate a page, wherein the page is used for displaying an execution result corresponding to the trigger event of the front end.
Furthermore, the present invention relates to a computer-readable storage medium, which is a non-volatile readable storage medium, and in which a computer program is stored, where the computer program is executable by at least one processor to implement the operation of the foregoing Flutter-based page generation method or apparatus.
The computer-readable storage medium includes, among others, a flash memory, a hard disk, a multimedia card, a card-type memory (e.g., SD or DX memory, etc.), a Random Access Memory (RAM), a Static Random Access Memory (SRAM), a read-only memory (ROM), an electrically erasable programmable read-only memory (EEPROM), a programmable read-only memory (PROM), a magnetic memory, a magnetic disk, an optical disk, and the like. In some embodiments, the computer readable storage medium may be an internal storage unit of the computer device, such as a hard disk or a memory of the computer device. In other embodiments, the computer readable storage medium may be an external storage device of the computer device, such as a plug-in hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash memory Card (Flash Card), etc. provided on the computer device. Of course, the computer-readable storage medium may also include both internal and external storage devices of the computer device. In this embodiment, the computer-readable storage medium is generally used for storing an operating system and various types of application software installed in the computer device, for example, the aforementioned computer program for implementing the Flutter-based page generation method, and the like. Further, the computer-readable storage medium may also be used to temporarily store various types of data that have been output or are to be output.
While specific embodiments of the invention have been described above, it will be appreciated by those skilled in the art that this is by way of example only, and that the scope of the invention is defined by the appended claims. Various changes and modifications to these embodiments may be made by those skilled in the art without departing from the spirit and scope of the invention, and these changes and modifications are within the scope of the invention.
Claims (10)
1. A method for generating a page based on Flutter is characterized by comprising the following steps:
the method comprises the steps that a Flutter terminal determines the type of a first function calling message generated corresponding to a trigger event of a front end, wherein the type is used for representing whether a native function module needs to be called or not;
when the type representation of the first function calling message needs to call the native function module, the Flutter end converts the first function calling message into a second function calling message which can be identified by the native end;
the Flutter end sends the second function calling message to the native end, so that the native end calls and executes a corresponding native function module according to the second function calling message to obtain first result data, and sends the first result data to the Flutter end;
and after the Flutter end receives the first result data fed back by the native end, rendering the first result data to generate a page, wherein the page is used for displaying an execution result corresponding to the trigger event of the front end.
2. The Flutter-based page generation method according to claim 1, wherein before the Flutter terminal determines the type of the first function call message generated corresponding to the trigger event of the front end, the method further comprises:
the front end identifies at least one functional module corresponding to the trigger event according to a preset module division rule;
and generating first function calling messages corresponding to the function modules one to one according to the identified function modules.
3. The Flutter-based page generation method according to claim 1, wherein the Flutter terminal determines a type of the first function call message generated corresponding to the trigger event of the front end, and after the type is used to characterize whether the native function module needs to be called, the method further comprises:
when the type representation of the first function calling message does not need to call the native function module, the Flutter end calls and executes the function module corresponding to the first function calling message from the Flutter end according to the first function calling message to obtain second result data;
and rendering the second result data by the Flutter end to generate a page, wherein the page is used for displaying an execution result corresponding to the trigger event of the front end.
4. The Flutter-based page generation method according to claim 2,
when the first function call message generated by the front end comprises at least two first function call messages, the type representation of at least one first function call message needs to call the native function module, and the type representation of at least one other first function call message does not need to call the native function module; the Flutter terminal determines the type of a first function call message generated corresponding to a trigger event of the front terminal, where the type is used to characterize whether a native function module needs to be called, and the method further includes:
the Flutter end also calls and executes a function module corresponding to the first function calling message from the Flutter end according to the first function calling message to obtain second result data;
and after the Flutter end receives the first result data of the execution fed back by the native end, rendering the first result data and the second result data together to generate a page, wherein the page is used for displaying the execution result corresponding to the trigger event of the front end.
5. The Flutter-based page generation method according to any one of claims 1 to 4, wherein, when the type representation of the first function call message requires to call the native function module, the Flutter end converting the first function call message into a second function call message recognizable by the native end includes:
determining a corresponding channel and an identifier according to a preset conversion rule and the first function call message, wherein the identifier comprises a packaged task method;
and calling a preset encoder to carry out binary coding on the identifier so as to obtain the second function calling message.
6. The Flutter-based page generation method according to claim 5, wherein the Flutter terminal sending the second function call message to the native terminal includes:
calling a target channel preset between the Flutter end and the native end according to the determined channel identifier of the channel;
sending the second function calling message to the native terminal through the target channel;
and after the native terminal executes the corresponding function module according to the second function call message and obtains the first result data, feeding the first result data back to the Flutter terminal through a callback function pre-registered in the target channel.
7. The Flutter-based page generation method according to claim 6, wherein the invoking a target channel preset between the Flutter terminal and the native terminal according to the determined channel identifier comprises:
the Flutter terminal initiates a method calling request through an invokeMethod, wherein the method calling request comprises the second function calling message and a Key matched with the callback;
the calling and executing the corresponding native function module by the native terminal according to the second function calling message to obtain the first result data comprises:
matching the Key through an onMethodCall after the native terminal monitors the method calling request;
and when the matching is successful, the native terminal calls the corresponding native function module according to the second function calling message and executes the native function module to obtain the first result data.
8. A device for generating a page based on Flutter, comprising:
the type identification module is used for determining the type of a first function calling message generated corresponding to a trigger event of a front end, and the type is used for representing whether a native function module needs to be called or not;
the message conversion module is used for converting the first function calling message into a second function calling message which can be identified by the primitive end when the type representation of the first function calling message needs to call the primitive function module;
the message sending module is used for sending the second function calling message to the native terminal so that the native terminal calls and executes the corresponding native function module according to the second function calling message;
and the rendering module is used for rendering the first result data to generate a page after receiving the first result data of the execution fed back by the primary end, wherein the page is used for displaying the execution result corresponding to the trigger event of the front end.
9. Computer device comprising a memory and a processor, characterized in that the memory has stored thereon a computer program which, when being executed by the processor, carries out the steps of the Flutter-based page generation method according to any of the claims 1-7.
10. A computer-readable storage medium, in which a computer program is stored which is executable by at least one processor for implementing the steps of the Flutter-based page generation method as claimed in any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110718097.XA CN113342447B (en) | 2021-06-28 | 2021-06-28 | Page generation method, device, equipment and storage medium based on Flutter |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110718097.XA CN113342447B (en) | 2021-06-28 | 2021-06-28 | Page generation method, device, equipment and storage medium based on Flutter |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113342447A true CN113342447A (en) | 2021-09-03 |
| CN113342447B CN113342447B (en) | 2024-04-02 |
Family
ID=77479209
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110718097.XA Active CN113342447B (en) | 2021-06-28 | 2021-06-28 | Page generation method, device, equipment and storage medium based on Flutter |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113342447B (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115080267A (en) * | 2022-06-06 | 2022-09-20 | 北京金堤科技有限公司 | Communication method, apparatus, medium, and device |
| WO2024131521A1 (en) * | 2022-12-23 | 2024-06-27 | 博泰车联网科技(上海)股份有限公司 | Method and system for forming flutter page on the basis of flutter framework components, and electronic device |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111045675A (en) * | 2019-12-20 | 2020-04-21 | 深圳乐信软件技术有限公司 | Page generation method, device, equipment and storage medium based on Flutter |
| CN111176960A (en) * | 2019-10-22 | 2020-05-19 | 腾讯科技（深圳）有限公司 | User operation behavior tracking method, device, equipment and storage medium |
| CN111722935A (en) * | 2019-03-20 | 2020-09-29 | 阿里巴巴集团控股有限公司 | Communication method and device of page end and native end, electronic equipment and readable medium |
| WO2020238277A1 (en) * | 2019-05-24 | 2020-12-03 | 中国银联股份有限公司 | Access method based on h5 access mode, access assembly thereof and mobile terminal |
| CN112965731A (en) * | 2021-02-26 | 2021-06-15 | 平安壹钱包电子商务有限公司 | Method, device, equipment and storage medium for Flutter hot update based on Tinker |
-
2021
- 2021-06-28 CN CN202110718097.XA patent/CN113342447B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111722935A (en) * | 2019-03-20 | 2020-09-29 | 阿里巴巴集团控股有限公司 | Communication method and device of page end and native end, electronic equipment and readable medium |
| WO2020238277A1 (en) * | 2019-05-24 | 2020-12-03 | 中国银联股份有限公司 | Access method based on h5 access mode, access assembly thereof and mobile terminal |
| CN111176960A (en) * | 2019-10-22 | 2020-05-19 | 腾讯科技（深圳）有限公司 | User operation behavior tracking method, device, equipment and storage medium |
| CN111045675A (en) * | 2019-12-20 | 2020-04-21 | 深圳乐信软件技术有限公司 | Page generation method, device, equipment and storage medium based on Flutter |
| CN112965731A (en) * | 2021-02-26 | 2021-06-15 | 平安壹钱包电子商务有限公司 | Method, device, equipment and storage medium for Flutter hot update based on Tinker |
Non-Patent Citations (1)
| Title |
|---|
| FLUTTERDEVELOPER: "如何实现 Flutter 与原生的混合开发方式？详解Flutter混合开发的路由栈管理（深度好文）", pages 1 - 12, Retrieved from the Internet <URL:https://zhuanlan.zhihu.com/p/106106939?utm_id=0> * |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115080267A (en) * | 2022-06-06 | 2022-09-20 | 北京金堤科技有限公司 | Communication method, apparatus, medium, and device |
| WO2024131521A1 (en) * | 2022-12-23 | 2024-06-27 | 博泰车联网科技(上海)股份有限公司 | Method and system for forming flutter page on the basis of flutter framework components, and electronic device |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113342447B (en) | 2024-04-02 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN113342447B (en) | Page generation method, device, equipment and storage medium based on Flutter | |
| CN113990354B (en) | Audio control method, device, equipment and storage medium based on Linux | |
| CN107193609B (en) | Function module calling method and device in application and electronic equipment | |
| CN114138372B (en) | Front-end component loading method and device | |
| CN111290806A (en) | Calling method and device of application program interface, computer equipment and storage medium | |
| CN111026439B (en) | Application program compatibility method, device, equipment and computer storage medium | |
| CN111858376A (en) | Request message generation method and interface test method | |
| CN115065652B (en) | Message reply method and device, storage medium and computer equipment | |
| WO2019029451A1 (en) | Method for publishing mobile applications and electronic apparatus | |
| CN108804120B (en) | Page construction method, device, equipment and storage medium | |
| CN108595178B (en) | Hook-based data acquisition method, device and equipment | |
| CN108845800B (en) | Method, device, equipment and storage medium for realizing component extension function | |
| CN115658042A (en) | Hybrid application component type development method, system, device and storage medium | |
| CN112818270B (en) | Data cross-domain transfer method and device and computer equipment | |
| CN112214250A (en) | Application program assembly loading method and device | |
| CN108345508B (en) | Interface call testing method and device | |
| CN114721740B (en) | Message triggering method, device, equipment and storage medium | |
| CN113791809B (en) | Application exception handling method and device and computer readable storage medium | |
| CN116112457A (en) | Method, device, computer equipment and storage medium for notifying message | |
| CN109669715A (en) | application program dynamic updating method, device and storage medium | |
| CN107704279B (en) | Data loading method and device | |
| US20240031166A1 (en) | Web-side data signature method and apparatus and computer device | |
| CN110661852B (en) | Service processing method and device in cloud environment | |
| CN114327742A (en) | Cloud platform and program code processing method based on cloud platform | |
| CN110286956B (en) | Plug-in operation method and device and electronic equipment |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |