Development page calling method, storage medium and terminal

By defining a local broadcast receiver on the APP side and receiving MQTT protocol broadcasts sent by ADB scripts, the problem of the native side being unable to call the development page is solved, realizing the function of efficiently calling Flutter pages from the native side, supporting complex parameter passing and improving interface development efficiency.

CN114968607BActive Publication Date: 2026-01-13SHANGHAI PATEO INTERNET TECH SERVICE CO LTD
View PDF 3 Cites 0 Cited by

Patent Information

Application Number
CN202110190323.1
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2021-02-18
Publication Date
2026-01-13
Estimated Expiration
2041-02-18

AI Technical Summary

Technical Problem

Existing technologies cannot call different development pages from the native client and are inefficient during interface debugging.

Method used

By defining a local broadcast receiver on the APP side to receive MQTT-related protocol broadcasts sent by ADB scripts, and using different methods to pass parameters in different lifecycle stages, including onCreate and onNewIntent, it is possible to call Flutter pages from the native side.

Benefits of technology

It improves interface development efficiency, enables front-end and back-end integration simulation, has the ability to launch any Flutter page from the native client, and supports the passing of complex parameters and page calls.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN114968607B_ABST
    Figure CN114968607B_ABST
Patent Text Reader

Abstract

The application provides a calling method of a development page, a storage medium and a terminal, and the calling method of the development page comprises the following steps: generating coding data according to parameter information; transmitting the coding data; decoding the coding data to generate a decoding result; calling a development page corresponding to the decoding result; and transmitting the parameter information in the decoding result to the development page. The application can simulate a front-end and back-end joint debugging scene in the front end, and realizes calling of the development page from a native end.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] This invention belongs to the technical field of system development, and relates to a development method, particularly a method for calling a development page, a storage medium, and a terminal. Background Technology

[0002] Currently, many applications have modules that integrate MQTT messaging. When debugging with the cloud, cloud engineers need to trigger push notifications, and the front-end app (application) receives the message before displaying the relevant Flutter interface. This is extremely inefficient during interface debugging. MQTT (Message Queuing Telemetry Transport) is an instant messaging protocol developed by IBM and can serve as a crucial component of the Internet of Things (IoT). Flutter is Google's mobile UI (User Interface) framework, enabling the rapid creation of high-quality native user interfaces on iOS and Android.

[0003] However, when a product developed using Flutter is integrated into a native project as a native SDK (Software Development Kit), it needs to support the ability to launch any Flutter page from the native side. The native Flutter framework has two problems: on the one hand, it does not support launching a page with complex parameters from the native side; on the other hand, if you are currently on a Flutter page, you cannot call the page from the native side again.

[0004] Therefore, how to provide a method for calling development pages, storage medium, and terminal to solve the shortcomings of existing technologies such as the inability to call different development pages from the native end has become a technical problem that urgently needs to be solved by those skilled in the art. Summary of the Invention

[0005] In view of the shortcomings of the prior art described above, the purpose of this invention is to provide a method for calling development pages, a storage medium and a terminal, the advantage of which is that different development pages can be called from the native client.

[0006] Another objective of this invention is to provide a method for calling a development page, a storage medium, and a terminal. Its advantage is that it allows for scenario simulation of front-end and back-end integration testing on the front end, thereby enabling the calling of the development page from the native end.

[0007] Another objective of this invention is to provide a method for calling a development page, a storage medium, and a terminal. Its advantage is that by defining a local broadcast receiver on the APP side and receiving MQTT-related protocol broadcasts sent by the ADB (Android Debug Bridge) script, the Flutter page can be invoked at any time, thereby improving the efficiency of interface development.

[0008] Another objective of this invention is to provide a method for calling a development page, a storage medium, and a terminal. Its advantage is that when the Flutter development product is integrated into the host project as a native SDK, it has the function of calling any Flutter page from the native side.

[0009] Another objective of this invention is to provide a method for calling a development page, a storage medium, and a terminal. Its advantage lies in the ability to pass parameters in different ways at different stages of the lifecycle. On one hand, when Flutter has just started and is not yet working properly, parameters are passed through `onCreate`; on the other hand, after Flutter is running normally, parameters are passed through `onNewIntent`.

[0010] To achieve the above and other related objectives, the present invention provides a method for invoking a development page, characterized in that the method includes the following steps: generating encoded data based on parameter information; transmitting the encoded data; decoding the encoded data to generate a decoding result; invoking the development page corresponding to the decoding result; and transmitting the parameter information in the decoding result to the development page.

[0011] To achieve the above and other related objectives, another aspect of the present invention provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the aforementioned method for invoking the development page.

[0012] To achieve the above and other related objectives, the present invention also provides a terminal, comprising: a processor and a memory; the memory stores a computer program, and the processor executes the computer program stored in the memory to cause the processor to execute the method for invoking the development page. Attached Figure Description

[0013] Figure 1 The diagram shown is a flowchart illustrating the principle of the method for calling the development page of this invention in one embodiment.

[0014] Figure 2 The flowchart shown is a decoding process diagram of the calling method of the development page of the present invention in one embodiment.

[0015] Figure 3 The diagram shown is a page invocation flowchart of one embodiment of the development page invocation method of the present invention.

[0016] Figure 4 The flowchart shown is a broadcast acquisition flowchart of the method for calling the development page of the present invention in one embodiment.

[0017] Figure 5 The diagram shown is a structural connection diagram of the terminal of the present invention in one embodiment.

[0018] Figure 6 The diagram shown illustrates the page invocation principle of a terminal according to an embodiment of the present invention.

[0019] Figure 7 The diagram shown illustrates the parameter transmission principle of the terminal in one embodiment of the present invention.

[0020] Component designation explanation

[0021] 5 terminals

[0022] 51 processor

[0023] 52 Memory

[0024] Steps S11 to S15

[0025] Steps S141~S143

[0026] S1A~S1B Steps Detailed Implementation

[0027] The following specific examples illustrate the implementation of the present invention. Those skilled in the art can easily understand other advantages and effects of the present invention from the content disclosed in this specification. The present invention can also be implemented or applied through other different specific embodiments, and various details in this specification can also be modified or changed based on different viewpoints and applications without departing from the spirit of the present invention. It should be noted that, unless otherwise specified, the following embodiments and features described therein can be combined with each other.

[0028] It should be noted that the illustrations provided in the following embodiments are only schematic representations of the basic concept of the present invention. Therefore, the illustrations only show the components related to the present invention and are not drawn according to the actual number, shape and size of the components in the actual implementation. In the actual implementation, the form, quantity and proportion of each component can be arbitrarily changed, and the layout of the components may also be more complex.

[0029] The development page invocation method, storage medium, and terminal described in this invention can simulate the scenario of front-end and back-end joint debugging on the front end, realizing the invocation of the development page from the native end.

[0030] The following will combine Figures 1 to 7 This embodiment details the principles and implementation of a method for invoking a development page, the storage medium, and the terminal, enabling those skilled in the art to understand the method for invoking a development page, the storage medium, and the terminal without creative effort.

[0031] Please see Figure 1 The diagram shows a flowchart illustrating the principle of calling the development page of this invention in one embodiment. Figure 1 As shown, the method for calling the development page includes the following steps:

[0032] S11, Generate encoded data based on parameter information.

[0033] In one embodiment, the encoded data is a JSON string.

[0034] Specifically, Flutter generates encoded data through the onCreate function when the app is not started or is not working properly after starting; and it generates encoded data through the onNewIntent function when the app is working properly.

[0035] S12, transmit the encoded data.

[0036] Specifically, based on whether the Flutter app is working properly, it is divided into a first cycle and a second cycle. The transmission paths for coded data transfer differ between the first cycle and the second cycle.

[0037] S13, decode the encoded data to generate a decoding result.

[0038] Please see Figure 2 The diagram shows a decoding flowchart of the development page invocation method of the present invention in one embodiment. Figure 2 As shown, the first cycle is defined as when Flutter has just started and is not yet working properly, while the second cycle is defined as when Flutter is running normally. The decoding process of the encoded data in each cycle is as follows:

[0039] (1) In the first cycle, start the application; decode the encoded data.

[0040] In practical applications, the parameters are encoded into a JSON string in the onCreate lifecycle (i.e., the first lifecycle) of the entry point and placed in the route field of the Flutter SDK and sent to the Flutter side. Flutter decodes this string when the APP starts and then calls the page corresponding to the route field.

[0041] In Android, OnCreate is a special function used to indicate that a window is being created. Specifically, OnCreate does not create the window; it only sets up the window before it is displayed.

[0042] (2) In the second cycle, the encoded data is adapted and managed; the adapted and managed encoded data is sent; and the adapted and managed encoded data is decoded.

[0043] Specifically, the adapted and managed encoded data is sent through the event receiver of the adapter plugin.

[0044] In practical applications, the parameters carried are encoded into a JSON string in the onNewIntent lifecycle (i.e., the second lifecycle) of the entry point, and sent to the Flutter side through the eventReceiver interface of the AdapterManager plugin. The Flutter side decodes this string and then calls the page corresponding to the route field.

[0045] S14, call the development page corresponding to the decoding result.

[0046] Please see Figure 3 The diagram shows a page invocation flowchart of one embodiment of the development page invocation method of the present invention. Figure 3 As shown, S14 includes the following steps:

[0047] S141, Identify the parameter information in the decoding result.

[0048] For example, the decoded JSON string is {'routeName':' / pay',"code":"xxxx","target":"xxxxx","data":{}}, from which the identified parameter information is routeName (route name), etc.

[0049] S142, Extract the route name from the parameter information.

[0050] Specifically, the routeName is found from the identified parameter information. The routeName is used as the name of the route field, and the corresponding route name information is extracted from the routeName.

[0051] S143, invoke the development page pointed to by the route name.

[0052] Specifically, the route name corresponds to the development page (i.e., the Flutter page), and the Flutter page is launched on the Flutter side through routeName.

[0053] S15, the parameter information in the decoding result is transmitted to the development page.

[0054] Specifically, the complete parameter information contained in the JSON string {'routeName':' / pay',"code":"xxxx","target":"xxxxx","data":{}} is passed to the Flutter page.

[0055] Please see Figure 4 The flowchart shown is a broadcast acquisition process of the calling method of the development page of the present invention in one embodiment. Figure 4 As shown, prior to step S11, the method for invoking the development page further includes the following steps:

[0056] S1A defines a broadcast receiver.

[0057] Specifically, a dedicated broadcast receiver is defined on the native Android client. When a broadcast with protocol data is sent using adb commands, the broadcast receiver receives the broadcast with protocol data, thereby simulating the process of receiving MQTT messages and calling related pages, which greatly improves development and debugging efficiency.

[0058] For example, a Broadcast Receiver specifies the action to listen to, and the action being listened to defines the broadcast as com.X1.X2.flutter.push.test. Here, X1 can be a company name, and X2 can be the application product name.

[0059] S1B, obtain the predefined broadcast; the predefined broadcast carries the parameter information.

[0060] Specifically, the predefined broadcast is com.X1.X2.flutter.push.test. When the predefined broadcast com.X1.X2.flutter.push.test is sent using the adb command, the predefined broadcast is obtained through the Broadcast Receiver.

[0061] The scope of protection for the method of calling the development page described in this invention is not limited to the execution order of the steps listed in this embodiment. Any solution implemented by adding, subtracting, or replacing steps in the prior art based on the principles of this invention is included within the scope of protection of this invention.

[0062] This embodiment provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the following... Figures 1 to 4The method for invoking the development page described in the steps includes: generating encoded data based on parameter information; transmitting the encoded data; decoding the encoded data to generate a decoding result; invoking the development page corresponding to the decoding result; and transmitting the parameter information from the decoding result to the development page.

[0063] Those skilled in the art will understand that all or part of the steps of the above-described method embodiments can be implemented using computer program-related hardware. The aforementioned computer program can be stored in a computer-readable storage medium. When executed, the program performs the steps of the above-described method embodiments; and the aforementioned computer-readable storage medium includes various computer storage media capable of storing program code, such as ROM, RAM, magnetic disks, or optical disks.

[0064] Please see Figure 5 The diagram shows a structural connection schematic of the terminal of the present invention in one embodiment. Figure 5 As shown, this embodiment provides a terminal 5, specifically including: a processor 51 and a memory 52; the memory 52 is used to store computer programs, and the processor 51 is used to execute the computer programs stored in the memory 52, so that the processor 51 executes each step of the calling method of the development page.

[0065] The processor 51 mentioned above can be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; it can also be a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components. The processor 51 is used to perform operations such as... Figures 1 to 4 The computer program corresponding to the method for calling the development page described in the steps. The steps of the method for calling the development page include: generating encoded data based on parameter information; transmitting the encoded data; decoding the encoded data to generate a decoding result; calling the development page corresponding to the decoding result; and transmitting the parameter information in the decoding result to the development page.

[0066] The aforementioned memory 52 may include random access memory (RAM) and may also include non-volatile memory, such as at least one disk storage device. The memory 52 is used to store, for example... Figures 1 to 4 The computer program corresponding to the method for calling the development page described in the steps. The steps of the method for calling the development page include: generating encoded data based on parameter information; transmitting the encoded data; decoding the encoded data to generate a decoding result; calling the development page corresponding to the decoding result; and transmitting the parameter information in the decoding result to the development page.

[0067] In practical applications, the terminal may be a computer including all or some of its components such as a memory, a memory controller, one or more processing units (CPUs), peripheral interfaces, RF circuits, audio circuits, speakers, microphones, input / output (I / O) subsystems, a display screen, other output or control devices, and external ports. The computer includes, but is not limited to, personal computers such as desktop computers, laptops, tablets, smartphones, smart TVs, and personal digital assistants (PDAs). The terminal may also be an in-vehicle infotainment system, smart glasses, smartwatches, or other wearable devices. In other embodiments, the terminal may also be a server, which may be deployed on one or more physical servers depending on factors such as functionality and load, or it may be a cloud server composed of distributed or centralized server clusters. This embodiment does not impose any limitations on this.

[0068] In one embodiment, the terminal includes: a native layer, a plugin layer, and a Flutter layer; the plugin layer is connected to the native layer and the Flutter layer respectively.

[0069] The native layer generates encoded data based on the parameter information and sends the generated encoded data to the plugin layer.

[0070] The plugin layer performs adaptation management on the encoded data and then passes the adapted encoded data to the Flutter layer.

[0071] The Flutter layer receives the encoded data from the plugin layer, decodes the encoded data, generates a decoding result, calls the development page corresponding to the decoding result, and passes the parameter information in the decoding result to the development page.

[0072] Please see Figure 6 This is a schematic diagram illustrating the page invocation principle of a terminal according to an embodiment of the present invention. Figure 6As shown, the terminal includes a native layer, a plugin layer, and a Flutter layer. The plugin layer sets up MethodChannels in both the native and Flutter layers, enabling bidirectional data interaction between them. The MethodChannel acts as a communication bridge between the native and Flutter layers, and a channel value needs to be registered when defining it. This channel value must be unique and correspond to each other in both the native and Flutter layers. Specifically, a MethodChannel object needs to be created on both ends simultaneously, registering the same string value. The plugin layer described in this invention includes MethodChannel objects created in the native layer and MethodChannel objects created in the Flutter layer.

[0073] The MethodChannel object created in the native layer is responsible for receiving the JSON string transmitted via `onNewIntent` from the native layer and assembling the JSON string. This assembly involves adding fields to the JSON string, such as a field indicating the screen display mode, which tells us whether the Flutter page is displayed in landscape or portrait mode. The MethodChannel object created in the Flutter layer is responsible for launching the Flutter page based on the decoded `routeName`. The channel established between the native and Flutter layers enables bidirectional communication and data transfer between them.

[0074] In another embodiment, the terminal includes a native layer and a Flutter layer.

[0075] When the Flutter layer starts, the native layer generates encoded data based on the parameter information and passes the generated encoded data to the Flutter layer.

[0076] The Flutter layer receives the encoded data from the plugin layer, decodes the encoded data, generates a decoding result, calls the development page corresponding to the decoding result, and passes the parameter information in the decoding result to the development page.

[0077] Please see Figure 7 The diagram shows the parameter transmission principle of the terminal in one embodiment of the present invention. Figure 7As shown, the test broadcast is initiated directly using the `adb am` command, thereby sending simulated data, which is MQTT protocol data from the test broadcast. The native application receives the test broadcast via `TestReceiver`. When the Flutter app is not running, `TestReceiver` sends the received test broadcast to `onCreate`. `onCreate` generates JSON parameters through encoding and sends these JSON parameters to the `runApp` side for starting and running the Flutter app. After the Flutter app is running normally, `TestReceiver` sends the received test broadcast to `onNewIntent`. `onNewIntent` generates JSON parameters through encoding and sends these JSON parameters to `onCreate` on the Flutter side via `onReceive` in `AdapterManager`. The JSON parameters are then decoded to obtain the route name (`routeName`), and the corresponding Flutter page is launched.

[0078] In the `onNewIntent` lifecycle (i.e., the second lifecycle), the bidirectional arrows between `onNewIntent` and `onReceive`, and between `onReceive` and `onCreate`, indicate that business data can be transmitted bidirectionally between the native and Flutter platforms. All business data includes JSON parameters. When business data is sent from the native platform to the Flutter platform, the native platform encodes and generates JSON parameters, and the Flutter platform decodes these JSON parameters. Conversely, when business data is sent from the Flutter platform to the native platform, the Flutter platform encodes and generates JSON parameters, and the native platform decodes these JSON parameters.

[0079] In the native implementation, `onCreate` is used when an Activity is first launched. It executes subsequent lifecycle functions in sequence: `onCreate()`, `onStart()`, `onResume()`, etc. This means that `onNewIntent` is not executed on the first Activity launch. Subsequent launches of the Activity are then initiated via `onNewIntent()`, which executes in sequence: `onNewIntent()`, `onResume()`, `onStart()`, and `onResume()`.

[0080] In summary, the method for calling development pages, the storage medium, and the terminal described in this invention can call different development pages from the native client. It allows for front-end and back-end integration simulation, thereby enabling the calling of development pages from the native client. By defining a local broadcast receiver on the APP side and receiving MQTT-related protocol broadcasts sent by the ADB (Android Debug Bridge) script, Flutter pages can be launched at any time, improving interface development efficiency. When the Flutter development product is integrated as a native SDK into the host project, it has the function of launching any Flutter page from the native client. Parameters can be passed in different ways at different lifecycle stages. On the one hand, when Flutter has just started and is not yet working properly, parameters are passed through onCreate; on the other hand, after Flutter is running normally, parameters are passed through onNewIntent. This invention effectively overcomes the various shortcomings of existing technologies and has high industrial application value.

[0081] The above embodiments are merely illustrative of the principles and effects of the present invention and are not intended to limit the invention. Any person skilled in the art can modify or alter the above embodiments without departing from the spirit and scope of the present invention. Therefore, all equivalent modifications or alterations made by those skilled in the art without departing from the spirit and technical concept disclosed in the present invention should still be covered by the claims of the present invention.

Claims

1. A method for calling a development page, characterized in that, The method for calling the development page includes the following steps: Generate encoded data based on parameter information; Transmit the encoded data; The encoded data is decoded to generate a decoding result; Call the development page corresponding to the decoding result; The parameter information in the decoding result is passed to the development page; Decoding the encoded data to generate a decoding result includes: In the first cycle, the application is launched; the encoded data is decoded; wherein, When the Flutter app is not running, TestReceiver sends the received test broadcast to onCreate. onCreate generates JSON input parameters through encoding and sends the JSON input parameters to runApp for the startup and running of the Flutter app. Decoding the encoded data to generate a decoding result further includes: In the second cycle, the encoded data is adapted and managed. Send the adapted and managed encoded data; Decode the adapted and managed encoded data; wherein, After the app runs normally on the Flutter side, TestReceiver sends the received test broadcast to onNewIntent. onNewIntent generates JSON parameters through encoding and sends the JSON parameters to onCreate on the Flutter side through onReceive in AdapterManager. The JSON parameters are then decoded to obtain the route name (routeName) and launch the Flutter page corresponding to the route name (routeName).

2. The method for calling the development page according to claim 1, before generating encoded data based on parameter information, further includes the following steps: Define a broadcast receiver; Obtain a predefined broadcast; the predefined broadcast carries the parameter information.

3. The method for calling the development page according to claim 1, wherein the encoded data is a JSON string.

4. The method for invoking the development page according to claim 1, wherein sending the adapted and managed encoded data includes the following steps: The adapted and managed encoded data is sent through the event receiver of the adapter plugin.

5. The method for invoking a development page according to claim 1, wherein invoking the development page corresponding to the decoding result includes the following steps: Identify the parameter information in the decoding result; Extract the route name from the parameter information; Call the development page pointed to by the route name.

6. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by the processor, it implements the method for invoking the development page as described in any one of claims 1 to 5.

7. A terminal, characterized in that, include: Processor and memory; The memory stores a computer program, and the processor executes the computer program stored in the memory to cause the processor to perform the method of calling the development page as described in any one of claims 1 to 5.

8. The terminal according to claim 7, comprising: Native layer, plugin layer, and Flutter layer; The plugin layer connects to the native layer and the Flutter layer respectively; The native layer generates encoded data based on the parameter information and sends the generated encoded data to the plugin layer; The plugin layer performs adaptation management on the encoded data; and passes the adapted encoded data to the Flutter layer. The Flutter layer receives the encoded data from the plugin layer, decodes the encoded data, generates a decoding result, calls the development page corresponding to the decoding result, and passes the parameter information in the decoding result to the development page.

9. The terminal according to claim 7, comprising: Native layer and Flutter layer; When the Flutter layer starts, the native layer generates encoded data based on the parameter information and passes the generated encoded data to the Flutter layer. The Flutter layer receives encoded data from the plugin layer, decodes the encoded data, generates a decoding result, calls the development page corresponding to the decoding result, and passes the parameter information in the decoding result to the development page.

Citation Information

Patent Citations

  • Webpage loading method and device, computer equipment and storage medium

    CN110162720A

  • Page management method and device, terminal equipment and storage medium

    CN111125604A

  • Global event notification method and device for application

    CN112241326A