Data processing method and apparatus, and device and storage medium

Abstract

The present application belongs to the technical field of data processing. Disclosed in the present application are a data processing method and apparatus, and a device and a storage medium. The method comprises: on the basis of a first instruction for indicating the display of a client page related to an application, creating, on a Flutter cross-platform side and by means of a Flutter framework, a placeholder foundational building block for describing configuration data of a user interface control of the client page; on the basis of the configuration data, creating a platform view at a native layer of the application; embedding a platform view instance of the platform view in a window layout of a first main window of the application, in order to obtain a second main window; and rendering the second main window by means of a native engine of the application, in order to display the client page in a user interface.

Description

Data processing methods, apparatus, equipment and storage media

[0001] Cross-reference to related applications

[0002] This application claims priority to Chinese Patent Application No. 202411188606.2, filed on August 27, 2024, entitled “Data Processing Method, Apparatus, Device and Storage Medium”, the entire contents of which are incorporated herein by reference. Technical Field

[0003] This application belongs to the field of data processing technology, and in particular relates to a data processing method, apparatus, device and storage medium. Background Technology

[0004] Native views refer to user interface (UI) controls provided by the host operating system in cross-platform applications. Examples include the web page view control (WKWebView) in macOS and the map view control (MapView) in Android. Native views can typically be integrated into cross-platform mobile application development frameworks (like Flutter) to add new features or views to native applications.

[0005] In related technologies, native views can be integrated into Flutter through independent windows and external textures. However, displaying multiple window contents in the aforementioned ways can easily cause a sense of fragmentation in the application interface, affecting the display effect of the user page. Summary of the Invention

[0006] This application provides a data processing method, apparatus, device, and storage medium that can solve the problem of poor user page display in related technologies.

[0007] In a first aspect, embodiments of this application provide a data processing method, which may include:

[0008] Obtain the first instruction, which is used to instruct the display of the application-related client page;

[0009] Based on the first instruction, placeholder basic building blocks corresponding to the Flutter view are created on the Flutter cross-platform side through the Flutter framework. The placeholder basic building blocks are used to describe the configuration data of the user interface controls on the client page.

[0010] Create a platform view in the application's native layer based on the configuration data;

[0011] Embed an instance of the platform view within the window layout of the application's first main window to create a second main window;

[0012] The second main window is rendered using the application's native engine, displaying the client page in the user interface.

[0013] Secondly, embodiments of this application provide a data processing apparatus, which may include:

[0014] The acquisition module is used to acquire the first instruction, which is used to instruct the display of the client page related to the application.

[0015] Create a module to create placeholder basic building blocks corresponding to Flutter views on the Flutter cross-platform side based on the first instruction. Placeholder basic building blocks are used to describe the configuration data of user interface controls on the client page.

[0016] The creation module is also used to create platform views in the application's native layer based on configuration data;

[0017] An embedding module is used to embed a platform view instance of the platform view in the window layout of the application's first main window to obtain a second main window;

[0018] The rendering module is used to render the second main window using the application's native engine, displaying the client page in the user interface.

[0019] Thirdly, embodiments of this application provide a computer device, which includes: a processor and a memory storing computer program instructions;

[0020] When the processor executes computer program instructions, it implements the data processing method as described in the first aspect.

[0021] Fourthly, embodiments of this application provide a computer storage medium storing computer program instructions, which, when executed by a processor, implement the data processing method as described in the first aspect.

[0022] Fifthly, embodiments of this application provide a chip, which includes a processor and a communication interface. The communication interface and the processor are coupled, and the processor is used to run programs or instructions to implement the data processing method as shown in the first aspect.

[0023] In a sixth aspect, embodiments of this application provide a computer program product stored in a storage medium, which is executed by at least one processor to implement the data processing method as described in the first aspect.

[0024] The data processing method, apparatus, device, and storage medium of this application embodiment can, according to a first instruction for indicating the display of a client page related to the application, create placeholder basic building blocks of configuration data for describing user interface controls of the client page on the Flutter cross-platform side through the Flutter framework; and create a platform view in the native layer of the application according to the configuration data; embed the platform view instance of the platform view in the window layout of the application's first main window to obtain a second main window; and then render the second main window through the application's native engine to display the client page in the user interface. In this way, after creating the platform view, it can be directly added to the application's first main window, thus embedding the content of the Flutter view into the application's main window without copying data from the native rendering engine to the graphics engine. This achieves the embedding function of native components with extremely low resource consumption, reducing the resource consumption of integrating native views. Furthermore, by rendering the second main window, which includes the content of the Flutter view, through the application's native engine, the rendering of native component content embedded between Flutter basic building blocks can be achieved, improving the display effect of the client page and thus improving the quality of integrated native views. Attached Figure Description

[0025] To more clearly illustrate the technical solutions of the embodiments of this application, the accompanying drawings used in the embodiments of this application will be briefly introduced below. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0026] Figure 1 is a flowchart illustrating a data processing method provided in an embodiment of this application;

[0027] Figure 2 is a flowchart illustrating the display client page of a data processing method provided in an embodiment of this application;

[0028] Figure 3 is a schematic diagram of the data interaction process of a data processing method provided in an embodiment of this application;

[0029] Figure 4 is a flowchart illustrating the rendering of a second main window in a data processing method according to an embodiment of this application.

[0030] Figure 5 is a schematic flowchart of the identity authentication process of a data processing method provided in an embodiment of this application;

[0031] Figure 6 is a flowchart illustrating the general operation of the editing component of a data processing method provided in an embodiment of this application;

[0032] Figure 7 is a schematic diagram of the structure of a data processing apparatus provided in an embodiment of this application;

[0033] Figure 8 is a schematic diagram of the structure of a computer device provided in one embodiment of this application. Detailed Implementation

[0034] The features and exemplary embodiments of various aspects of this application will be described in detail below. To make the objectives, technical solutions, and advantages of this application clearer, the application will be further described in detail below with reference to the accompanying drawings and specific embodiments. It should be understood that the specific embodiments described herein are only intended to explain this application and not to limit it. For those skilled in the art, this application can be implemented without some of these specific details. The following description of the embodiments is merely to provide a better understanding of this application by illustrating examples.

[0035] It should be noted that, in this document, relational terms such as "first" and "second" are used merely to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising..." does not exclude the presence of additional identical elements in the process, method, article, or apparatus that includes the element.

[0036] The acquisition, storage, use, and processing of data (including but not limited to features and information mentioned in this document) in the technical solution of this application all comply with the relevant provisions of national laws and regulations.

[0037] In related technologies, Flutter is an open-source, cross-platform UI development framework that is developed using the Dart language, supports desktop and client operating systems, uses the Skia graphics engine for rendering, and provides a Platform Channel for data communication between Flutter and the application's native layer.

[0038] The Flutter Framework provides a rich library of UI components, but it does not directly offer mature and complex components like WebView and MapView, which are already well-established in the native framework. While Flutter's rendering mechanism ensures consistent rendering across different operating systems for cross-platform applications, it also leads to a natural isolation between Flutter and native views, hindering deep integration with local controls.

[0039] Applications typically integrate numerous third-party services, implemented using internet technologies such as Hypertext Markup Language (HTML5, H5) and lightweight interpreted programming languages ​​(JavaScript, JS). Some applications, such as workspaces, email, and calendars, need to be displayed within the main window after clicking a tab. During the development of the desktop application, it was discovered that Flutter's UI library does not provide a WebView component, requiring the use of native views. However, existing solutions integrating native views cannot meet the business requirements, as detailed below.

[0040] In related technologies, native views can be integrated into Flutter using either independent windows or external textures. The independent window approach involves implementing a separate window within the application's native layer using native code. This window contains the native view's UI layout and handles gesture, mouse, and keyboard events. Data transfer occurs between Flutter and the native side via a platform channel. Third-party plugins like desktop_webview_window, mentioned above, are examples of third-party plugins using this approach. The external texture approach involves creating a native view instance within the application's native layer, establishing its UI layout, and creating an external texture for this instance. Data is continuously copied from the platform view's graphics processing unit (GPU) to the Skia engine at a rate of at least 30 frames per second. The entire texture data flow is GPU-CPU-GPU. Simultaneously, an event recognition mechanism needs to be established on the Flutter side to identify gesture, keyboard, and mouse events, passing event names, coordinates, and other relevant information to the application's native layer. The native view's Application Programming Interface (API) is then invoked to implement the corresponding event effects.

[0041] However, the independent window approach cannot embed platform views into the main window of the Flutter application, resulting in a fragmented application and low quality of integrating native views. Achieving a complete independent window UI across multiple platforms requires advanced native development skills, necessitating knowledge of menu bars, title bars, and UI layouts for various operating systems, leading to a high learning curve. External textures involve continuously copying texture data from the native rendering engine to Skia, consuming significant CPU / GPU resources and causing screen tearing on less powerful devices. All event detection and recognition must be developed on the Flutter side, resulting in a large development workload, and the accuracy cannot match that of directly using native views. Furthermore, the API capabilities provided by native components are incomplete, preventing the implementation of some events through calls to native view methods. For example, if a WebView loads an H5 page with an internal scrollbar, the scrolling method can only scroll the native control's scrollbar, not the H5 page's.

[0042] Therefore, the aforementioned method of integrating native views not only increases resource consumption but also reduces the quality of integrated native views, affecting application performance.

[0043] To address the aforementioned technical problems, embodiments of this application provide a data processing system, method, apparatus, computer equipment, and storage medium.

[0044] Based on this, the data processing system, method, apparatus, computer equipment, and storage medium of the present application embodiments will be described in detail below with reference to Figures 1 to 8. It should be noted that these embodiments are not intended to limit the scope of the disclosure of the present application.

[0045] Based on this, in order to better illustrate the content of the embodiments of this application, the data processing method provided by the embodiments of this application will be described below with reference to Figures 1 to 8, as follows.

[0046] Figure 1 is a flowchart illustrating a data processing method provided in an embodiment of this application.

[0047] As shown in Figure 1, this data processing method can be applied to electronic devices. This method can utilize the main window created by the application's native layer to achieve the embedded function of native components with extremely low resource consumption. By only passing data and not exchanging UI, the platform view is created and directly added to the application's main window. The platform view is rendered directly using the native engine, and the GPU data does not affect each other. This achieves embedding without copying data from different rendering engines, enabling efficient rendering with low resource consumption, thereby improving the display effect of the client page.

[0048] Based on this, the data processing method may specifically include the following steps:

[0049] Step 110: Obtain the first instruction, which is used to instruct the display of the client page related to the application; Step 120: Based on the first instruction, create a placeholder basic building block corresponding to the Flutter view on the Flutter cross-platform side through the Flutter framework. The placeholder basic building block is used to describe the configuration data of the user interface controls of the client page; Step 130: Create a platform view in the native layer of the application according to the configuration data; Step 140: Embed the platform view instance of the platform view in the window layout of the first main window of the application to obtain the second main window; Step 150: Render the second main window through the native engine of the application to display the client page in the user interface.

[0050] In this way, after creating the platform view, it can be directly added to the application's first main window. This allows the content of the Flutter view to be embedded in the application's main window without copying data from the native rendering engine to the graphics engine. This achieves the embedding function of native components with extremely low resource consumption, reducing the resource consumption of integrating native views. Furthermore, by rendering the content of the Flutter view in the second main window of the application through the application's native engine, the rendering of native component content embedded between Flutter's basic building blocks can be achieved, improving the user interface display effect and thus improving the quality of integrating native views.

[0051] The steps described above are explained in detail below.

[0052] First, regarding step 110, in some embodiments of this application, the data processing method may further include steps 1601 and 1602 before step 110.

[0053] Step 1601: Display the first interface of the application. The first interface includes Flutter view components on the cross-platform side of Flutter. Instances of the Flutter view components are in the first main window of the application.

[0054] Step 1602: Receive the first input to the Flutter view component.

[0055] Based on this, step 110 may specifically include:

[0056] In response to the first input, the first instruction is generated.

[0057] In some other embodiments of this application, the data processing method may further include steps 1701 and 1702 prior to step 110.

[0058] Step 1701: When the application is launched, create an initial window in the application's native layer using the Flutter framework.

[0059] Step 1702: If the initial window layout is a box layout, change the initial window layout from a box layout to a stacked layout to obtain the first main window.

[0060] For example, after the application starts, a main window and a FlutterView are automatically created, and the view is added to the main window layout. The process of this proposal begins when Flutter's event loop triggers the loading of the native view; here, we take the creation of a WebView component as an example. As shown in Figure 2, after the application starts, a main window and a FlutterView are automatically created, and the FlutterView is added to the main window layout. In the native layer code of the default application generated by Flutter, the initial window, i.e., the Linux window, uses a box layout. The child components of this layout can only be arranged from left to right, which does not meet the requirements. Therefore, the Linux box layout needs to be modified to a stack layout.

[0061] In some other embodiments of this application, the data processing method may further include steps 1801 and 1802 prior to step 110.

[0062] Step 1801: When the application is launched, create Flutter view components on the Flutter cross-platform side using the Flutter framework.

[0063] Step 1802: Embed an instance of the Flutter view component in the window layout of the first main window.

[0064] Secondly, regarding step 120, in some embodiments of this application, the configuration data includes the display coordinates of the client page in the user interface, the access location data of the content displayed on the client page, and the data volume of the displayed content. Based on this, step 120 may specifically include steps 1201 and 1202.

[0065] Step 1201: Based on the first instruction, create an initial placeholder basic building block corresponding to the Flutter view on the Flutter cross-platform side through the Flutter framework.

[0066] Step 1202: Based on the configuration data, initialize the initial placeholder basic building block to obtain the placeholder basic building block.

[0067] For example, as shown in Figure 2, when a client-side page, such as an H5 front-end page, needs to be displayed, the process of triggering the creation and display of a native component instance can specifically include the initState algorithm, which is an algorithm that is executed only once when each Flutter basic building block (Widget) is created. This algorithm is rewritten to obtain the coordinate data of the placeholder Widget, the amount of data of the displayed content, and the access location data of the displayed content in the client-side page, such as the loaded Uniform Resource Locator (URL), userAgent, and other information. This information is sent to the platform side using a channel. Each platform uses its own native code to create a WebView instance with the corresponding coordinates and size, sets parameters such as userAgent, and loads the corresponding URL. After the instance is created, the WebView instance is added to the main window.

[0068] Next, regarding step 130, in some embodiments of this application, the configuration data includes the display coordinates of the client page in the user interface, the access location data of the content displayed on the client page, and the data volume of the displayed content. Based on this, before step 130, the data processing method may also include step 190, which transmits the target data to the native layer of the application through the platform channel between the Flutter cross-platform side and the native layer of the application. The target data includes configuration data.

[0069] Based on this, step 130 may specifically include:

[0070] By using the application's native code and following the configuration data, a platform view is created in the application's native layer.

[0071] In some other embodiments of this application, prior to step 190, the data processing method may further include step 210, which involves obtaining the amount of configuration data.

[0072] Based on this, step 190 above may specifically include:

[0073] If the amount of configuration data is less than the preset amount of data, the configuration data is transferred to the application's native layer through the platform channel between the Flutter cross-platform side and the application's native layer.

[0074] In some other embodiments of this application, the target data includes storage location identification data. Based on this, after step 210, the data processing method may further include steps 2201 to 2203.

[0075] Step 2201: If the amount of configuration data is greater than or equal to the preset amount of data, store the configuration data in the shared space between the Flutter cross-platform side and the native layer of the application, and generate storage location identifier data.

[0076] Step 2202: Transfer the storage location identifier data to the application's native layer through the platform channel between the Flutter cross-platform side and the application's native layer.

[0077] Step 2203: Extract configuration data from the shared space by identifying the data according to the storage location through the application layer of the application.

[0078] For example, as shown in Figure 3, when the transmitted content is small and simple, the platform channel is used directly; when the transmitted content is large and complex, the transmitted data is stored in a shared space, and the location information is transmitted to the other side through the platform channel. After receiving the location information, the other side retrieves the data from the shared space. By using the shared space, the memory usage and transmission latency when transmitting large amounts of data through the platform channel can be effectively reduced, enabling rapid data exchange, avoiding lag, and improving application performance.

[0079] It should be noted that the process shown in Figure 3 only illustrates the case of data transmission from the Flutter side to the platform side; the transmission from the platform side to the Flutter side is also applicable.

[0080] Therefore, by designing a shared space mechanism to reduce data transmission latency and memory usage, this application optimizes the data transfer mechanism between the Flutter side and the platform side. When transmitting large and complex data, a shared space is used to store the data. When the transmitted data is large and complex, it is directly stored in the shared space, and the address of the data in the shared space is transmitted to the other side. The other side then uses this address to retrieve the data from the shared space. In this way, memory usage and transmission latency are effectively reduced.

[0081] In some embodiments of this application, after step 130, the data processing method may further include steps 2301 to 2303.

[0082] Step 2301: Based on the platform view, generate a platform view identifier corresponding to the platform view.

[0083] Step 2302: Transmit the platform view identifier to the placeholder base building block through the platform channel between the Flutter cross-platform side and the application's native layer.

[0084] Step 2303: Associate the placeholder basic building block with the platform view identifier to obtain association information. The association information is used to delete the placeholder basic building block indicated in the second instruction and the platform view identifier associated with the placeholder basic building block when the second instruction is obtained. The second instruction is used to instruct the deletion of the placeholder basic building block on the Flutter cross-platform side.

[0085] For example, referring to Figure 2, after creating the instance, the WebView instance is added to the main window; a unique ID is created, and the ID and WebView are recorded in a dictionary in the platform's memory. This ID is then returned to the Flutter side. Upon receiving this ID, the Flutter side also records the ID and the placeholder widget in a dictionary. Subsequently, this ID can be used as a bridge to ensure a one-to-one correspondence between the placeholder widget on the Flutter side and the WebView on the platform side.

[0086] Then, regarding step 150, in some embodiments of this application, the Flutter cross-platform side includes the Flutter cross-platform page; step 150 may specifically include steps 1501 to 1504.

[0087] Step 1501: Given that the configuration data described in the placeholder basic building block indicates that the native view of the application in the user interface is obscured by the Flutter cross-platform page, obtain a screenshot of the native components in the user interface through the native layer of the application.

[0088] Step 1502: Hide the native components in the user interface that correspond to the native layer.

[0089] Step 1503: Overlay the platform view layer on the layer containing the screenshot to obtain the Flutter cross-platform page.

[0090] Step 1504: Display the client page in the user interface.

[0091] For example, native component content is embedded between two Flutter widgets and rendered, as shown in Figure 4. The native view and FlutterView are at the same level and normally can only be displayed above all Flutter widget layers. If a widget within the display range of the native view has content, it will be obscured and cannot be displayed. The method in this proposal can visually display the content of the native view between the two widgets. When the placeholder widget detects obstruction, it triggers the getImageData method. This function calls the application's native layer method to obtain the component's screenshot data and displays the obtained screenshot data in the Image Widget. After 200 milliseconds, it notifies the application's native layer to hide the native component. The reason for the slight delay in hiding is to ensure that the screenshot view is already displayed on the user interface, preventing the flickering effect caused by the native view's content visually disappearing and then immediately reappearing. After the obstruction disappears, the platform view is redisplayed and the data of the Image Widget is set to null.

[0092] Therefore, by fully utilizing the screenshot data of native components and the show / hide methods of native views, the functionality of rendering native component content between two Flutter Widgets can be achieved. Native components and FlutterView are at the same level in the application's native UI layout; therefore, each Widget rendered within FlutterView can only appear as a whole on the user interface, and native components are always displayed above FlutterView. Widget content displayed within the native component's area will be obscured. Thus, this application provides a solution: when a Flutter Widget needs to be displayed above the native view, the platform side is notified via a Channel. The platform side then sends a screenshot of the currently displayed UI back to the Flutter side. The Flutter side displays the screenshot data using an Image Widget and then notifies the platform side to hide the component; after the obscuration disappears, the platform side is notified to display the platform view.

[0093] Furthermore, after step 150, the data processing method may also include steps 2401 to 2405.

[0094] Step 2401: Receive the user's second input on the client page. The second input is used for authentication on the client page.

[0095] Step 2402: In response to the second input, the business data corresponding to the identity authentication of the client page is transmitted to the Flutter cross-platform side through the platform channel between the Flutter cross-platform side and the native layer of the application.

[0096] Step 2403: Based on business data, perform business logic processing through placeholder basic building blocks on the Flutter cross-platform side to obtain the identity authentication processing result.

[0097] Step 2404: Transmit the identity authentication processing result to the application layer of the application through the platform channel.

[0098] Step 2405: Display the content corresponding to the identity authentication processing result through the application layer of the application.

[0099] For example, as shown in Figure 5, the main logic of the cross-platform application resides on the Flutter side, while the native side logic should be as simple as possible. When events in the native view require application-related data for logic processing, such as when an H5 page needs to perform authentication, the process shown in Figure 5 is triggered. That is, the WebView component implements nativeCallJs on the platform side and registers the jsCallNative method for the H5 page to call. When the H5 page calls the registered method, the jsCallNative method sends the relevant parameters to the Flutter side via a channel for logic processing. The processed result is then returned to the platform side via the channel by calling the nativeCallJs method. Finally, the WebView component instance returns the result to the front-end page by executing a JavaScript method.

[0100] Furthermore, the data processing method provided in this application embodiment can also include common operations for all components, such as showing, hiding, removing native components, and size changes. As shown in Figure 6, the `dispose` and `didChangeMetrics` methods are methods of the Flutter Widget base class, representing the destruction of the component and changes in its coordinates and size. These two methods can be directly overridden, and the corresponding WebView methods `removeNativeView` and `changeFrame` are called in the implementation. Flutter does not provide callback methods for showing or hiding components. For content that needs to reside in memory but not be displayed, this callback method needs to be developed and implemented, such as by clicking a tab, pushing and popping the navigation bar, etc. The corresponding WebView methods `showNativeView` and `HiddenNativeView` are called in the implemented `appear` and `disappear` methods. In addition to the methods that all native Views need to implement, such as showing, hiding, removing, and size changes, the WebView's forward, back, reload, clear cache, clear cookie, and execute JS functions also need to be implemented. The corresponding event methods are implemented in the placeholder widget class, and the corresponding APIs of the platform-side WebView instance are called using channels.

[0101] This application also provides a data processing apparatus, which will be described in detail with reference to FIG7.

[0102] Figure 7 is a schematic diagram of the structure of a data processing apparatus provided in an embodiment of this application.

[0103] In some embodiments of this application, the data processing device shown in FIG7 may be disposed in the computing device provided in the embodiments of this application.

[0104] As shown in Figure 7, the data processing device 70 may specifically include:

[0105] The acquisition module 701 is used to acquire a first instruction, which is used to instruct the display of a client page related to the application;

[0106] Create module 702, which is used to create placeholder basic building blocks corresponding to Flutter views on the Flutter cross-platform side based on the first instruction. The placeholder basic building blocks are used to describe the configuration data of the user interface controls on the client page.

[0107] The creation module 702 is also used to create a platform view in the application's native layer according to the configuration data;

[0108] Embedding module 703 is used to embed a platform view instance of the platform view in the window layout of the first main window of the application to obtain a second main window;

[0109] Rendering module 704 is used to render a second main window using the application's native engine, displaying the client page in the user interface.

[0110] The data processing device 70 in the embodiments of this application will be described in detail below.

[0111] In some embodiments of this application, the data processing apparatus 70 may further include a processing module; wherein,

[0112] Create module 702, which is used to create an initial placeholder basic building block corresponding to the Flutter view on the Flutter cross-platform side based on the first instruction, given that the configuration data includes the display coordinate data of the client page in the user interface, the access location data of the content displayed in the client page, and the data volume of the displayed content;

[0113] The processing module is used to initialize the initial placeholder basic building blocks based on the configuration data, so as to obtain the placeholder basic building blocks.

[0114] In some embodiments of this application, the data processing apparatus 70 may further include a transmission module; wherein,

[0115] The transmission module is used to transmit target data to the application's native layer through the platform channel between the Flutter cross-platform side and the application's native layer, when the configuration data includes the display coordinate data of the client page in the user interface, the access location data of the content displayed on the client page, and the data volume of the displayed content. The target data includes configuration data.

[0116] Create module 702 to create a platform view in the application's native layer using the application's native code, based on configuration data.

[0117] In some embodiments of this application, the data processing apparatus 70 may further include a transmission module; wherein,

[0118] The acquisition module 701 can also be used to acquire the amount of configuration data;

[0119] The transmission module is used to transmit configuration data to the application's native layer through the platform channel between the Flutter cross-platform side and the application's native layer when the amount of configuration data is less than the preset amount of data.

[0120] In some embodiments of this application, the data processing apparatus 70 may further include a processing module, a transmission module, and an extraction module; wherein,

[0121] The processing module is used to store the configuration data in a shared space between the Flutter cross-platform side and the application's native layer, and generate the storage location identifier data, when the target data includes storage location identifier data and the amount of configuration data is greater than or equal to the preset amount of data.

[0122] The transport module is used to transfer storage location identifier data to the application's native layer through the platform channel between the Flutter cross-platform side and the application's native layer;

[0123] The extraction module is used to extract configuration data from the shared space by identifying the data according to the storage location through the application layer of the application.

[0124] In some embodiments of this application, the Flutter cross-platform side includes a Flutter cross-platform page; the data processing device 70 may further include a processing module, an overlay module, and a display module; wherein,

[0125] The 701 module can also be used to obtain screenshots of native components in the user interface through the native layer of the application, when the configuration data described in the placeholder basic building block represents the Flutter cross-platform page obscuring the native view of the application in the user interface.

[0126] The processing module is used to hide the native components in the user interface that correspond to the native layer;

[0127] The overlay module is used to overlay a platform view layer on top of the layer containing the screenshot, resulting in a cross-platform Flutter page;

[0128] The Display module is used to display Flutter cross-platform pages in the user interface.

[0129] In some embodiments of this application, the data processing apparatus 70 may further include a display module, a receiving module, and a generating module; wherein,

[0130] The display module is used to display the application's first interface. The first interface includes Flutter view components on the cross-platform side of Flutter. Instances of the Flutter view components are in the application's first main window.

[0131] The receiving module is used to receive the first input to the Flutter view component;

[0132] The generation module is used to generate a first instruction in response to the first input.

[0133] In some embodiments of this application, the data processing apparatus 70 may further include a modification module; wherein,

[0134] Create module 702 to create an initial window in the application's native layer using the Flutter framework when the application is launched;

[0135] The modification module is used to change the layout of the initial window from a box layout to a stacked layout, thus obtaining the first main window, if the initial window layout is a box layout.

[0136] In some embodiments of this application, the data processing apparatus 70 may further include an embedded module; wherein,

[0137] Create module 702 to create Flutter view components on the Flutter cross-platform side using the Flutter framework when the application is launched;

[0138] An embedding module used to embed instances of Flutter view components in the window layout of the first main window.

[0139] In some embodiments of this application, the data processing apparatus 70 may further include a generation module, a transmission module, and an association module; wherein,

[0140] The generation module is used to generate a platform view identifier corresponding to the platform view based on the platform view.

[0141] The transport module is used to transmit platform view identifiers to placeholder base building blocks through the platform channel between the Flutter cross-platform side and the application's native layer;

[0142] The association module is used to associate placeholder basic building blocks with platform view identifiers to obtain association information. The association information is used to delete the placeholder basic building blocks indicated in the second instruction and the platform view identifiers associated with the placeholder basic building blocks when the second instruction is obtained. The second instruction is used to instruct the deletion of placeholder basic building blocks on the Flutter cross-platform side.

[0143] In some embodiments of this application, the data processing apparatus 70 may further include a receiving module, a transmitting module, a processing module, and a display module; wherein,

[0144] The receiving module is used to receive the user's second input to the client page, which is used for authentication on the client page.

[0145] The transmission module is used to respond to the second input by transmitting the business data corresponding to the identity authentication of the client page to the Flutter cross-platform side through the platform channel between the Flutter cross-platform side and the native layer of the application.

[0146] The processing module is used to perform business logic processing based on business data, through placeholder basic building blocks on the Flutter cross-platform side, to obtain the identity authentication processing result.

[0147] The transmission module can also be used to transmit the identity authentication processing results to the application layer of the application through the platform channel;

[0148] The display module is used to display the content corresponding to the identity authentication processing result through the application layer of the application.

[0149] Therefore, the data processing apparatus of this application embodiment can, according to a first instruction for indicating the display of a client page related to the application, create placeholder basic building blocks of configuration data for describing user interface controls of the client page on the Flutter cross-platform side through the Flutter framework; and create a platform view in the native layer of the application according to the configuration data; embed the platform view instance of the platform view in the window layout of the application's first main window to obtain a second main window; and then render the second main window through the application's native engine to display the client page in the user interface. In this way, after creating the platform view, it can be directly added to the application's first main window, which can realize the embedding of the Flutter view content into the application's main window without copying data from the native rendering engine to the graphics engine, achieving the embedding function of native components with extremely low resource consumption, reducing the resource consumption of integrating native views, and rendering the second main window, which includes the content of the Flutter view, through the application's native engine, can realize the rendering of native component content embedded between Flutter basic building blocks, improve the display effect of the user interface, and thus improve the quality of integrating native views.

[0150] Based on the same inventive concept, this application also provides a computer device. A detailed description is provided in conjunction with Figure 8.

[0151] Figure 8 is a schematic diagram of the structure of a computer device provided in one embodiment of this application.

[0152] As shown in Figure 8, the computer device may include at least one of the following as described in the embodiments of this application: an electronic device, a server. The computer device may include a processor 801 and a memory 802 storing computer program instructions.

[0153] Specifically, the processor 801 may include a central processing unit (CPU), an application-specific integrated circuit (ASTC), or one or more integrated circuits that can be configured to implement the embodiments of this application.

[0154] Memory 802 may include mass storage for data or instructions. For example, and not limitingly, memory 802 may include a hard disk drive (HDD), floppy disk drive, flash memory, optical disk, magneto-optical disk, magnetic tape, or Universal Serial Bus (USB) drive, or a combination of two or more of these. Where appropriate, memory 802 may include removable or non-removable (or fixed) media. Where appropriate, memory 802 may be internal or external to the integrated gateway disaster recovery device. In a particular embodiment, memory 802 is non-volatile solid-state memory. In a particular embodiment, memory 802 includes solid-state storage (ROM). Where appropriate, the ROM may be a mask-programmed ROM, a programmable ROM (PROM), an erasable PROM (EPROM), an electrically erasable PROM (EEPROM), an electrically rewritable ROM (EAROM), or flash memory, or a combination of two or more of these.

[0155] The processor 801 implements any of the data processing methods described in the above embodiments by reading and executing computer program instructions stored in the memory 802.

[0156] In one example, the computer device may also include a communication interface 803 and a bus 810. As shown in Figure 8, the processor 801, memory 802, and communication interface 803 are connected via the bus 810 and communicate with each other.

[0157] The communication interface 803 is mainly used to realize communication between various modules, devices, units and / or equipment in the embodiments of this application.

[0158] Bus 810 includes hardware, software, or both, that couples components of a flow control device together. For example, and not limitingly, the bus may include an Accelerated Graphics Port (AGP) or other graphics bus, an Enhanced Industry Standard System (ETSA) bus, a Front Side Bus (FSB), an HyperTransport (HT) interconnect, an Industry Standard System (TSA) bus, an Infinite Bandwidth Interconnect, a Low Pin Count (LPC) bus, a memory bus, a Microchannel System (MCA) bus, a Peripheral Component Interconnect (PCT) bus, a PCT-Express (PCT-X) bus, a Serial Advanced Technology Attachment (SATA) bus, a Video Electronics Standards Association Local (VLB) bus, or other suitable buses, or combinations of two or more of these. Where appropriate, bus 810 may include one or more buses. Although specific buses are described and illustrated in embodiments of this application, any suitable bus or interconnect is contemplated herein.

[0159] The data processing device can execute the data processing method in the embodiments of this application, thereby realizing the data processing method and apparatus described in conjunction with Figures 1 to 8.

[0160] Furthermore, in conjunction with the data processing methods in the above embodiments, this application embodiment can provide a computer-readable storage medium for implementation. This computer-readable storage medium stores computer program instructions; when executed by a processor, these computer program instructions implement any of the data processing methods in the above embodiments.

[0161] It should be clarified that this application is not limited to the specific configurations and processes described above and shown in the figures. For the sake of brevity, detailed descriptions of known methods are omitted here. In the above embodiments, several specific steps are described and shown as examples. However, the method process of this application is not limited to the specific steps described and shown. Those skilled in the art can make various changes, modifications, and additions, or change the order of steps, after understanding the spirit of this application.

[0162] The functional blocks shown in the above block diagram can be implemented as hardware, software, firmware, or a combination thereof. When implemented in hardware, they can be, for example, electronic circuits, application-specific integrated circuits (ASTCs), appropriate firmware, plug-ins, function cards, etc. When implemented in software, the elements of this application are programs or code segments used to perform the required tasks. Programs or code segments can be stored on a machine-readable medium or transmitted over a transmission medium or communication link via data signals carried on a carrier wave. "Machine-readable medium" can include any medium capable of storing or transmitting information. Examples of machine-readable media include electronic circuits, semiconductor memory devices, ROM, flash memory, erasable ROM (EROM), floppy disks, CD-ROMs, optical disks, hard disks, fiber optic media, radio frequency (RF) links, etc. Code segments can be downloaded via computer networks such as the Internet, intranets, etc.

[0163] It should also be noted that the exemplary embodiments mentioned in this application describe methods or systems based on a series of steps or apparatus. However, this application is not limited to the order of the above steps; that is, the steps can be performed in the order mentioned in the embodiments, or in a different order, or several steps can be performed simultaneously.

[0164] The above are merely specific embodiments of this application. Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working processes of the systems, modules, and units described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here. It should be understood that the protection scope of this application is not limited thereto. Any person skilled in the art can easily conceive of various equivalent modifications or substitutions within the technical scope disclosed in this application, and these modifications or substitutions should all be covered within the protection scope of this application.

Claims

1. A data processing method, comprising: Obtain a first instruction, which is used to instruct the display of a client page related to the application; Based on the first instruction, a placeholder basic building block corresponding to the Flutter view is created on the Flutter cross-platform side through the Flutter framework. The placeholder basic building block is used to describe the configuration data of the user interface controls of the client page. Based on the configuration data, create a platform view in the native layer of the application; A platform view instance of the platform view is embedded in the window layout of the first main window of the application to obtain a second main window; The second main window is rendered using the application's native engine, and the client page is displayed in the user interface.

2. The method according to claim 1, wherein, The configuration data includes the display coordinates of the client page in the user interface, the access location data of the content displayed on the client page, and the data volume of the displayed content; The step of creating a placeholder basic building block corresponding to a Flutter view on the Flutter cross-platform side based on the first instruction includes: Based on the first instruction, an initial placeholder basic building block corresponding to the Flutter view is created on the Flutter cross-platform side using the Flutter framework; Based on the configuration data, the initial placeholder basic building block is initialized to obtain the placeholder basic building block.

3. The method according to claim 1, wherein, The configuration data includes the display coordinates of the client page in the user interface, the access location data of the content displayed on the client page, and the data volume of the displayed content; Before creating the platform view in the native layer of the application according to the configuration data, the method further includes: The target data, including the configuration data, is transmitted to the native layer of the application through the platform channel between the Flutter cross-platform side and the native layer of the application. The step of creating a platform view in the native layer of the application according to the configuration data includes: Using the application's native code and the configuration data, a platform view is created in the application's native layer.

4. The method according to claim 3, wherein, Before transmitting the target data to the native layer of the application via the platform channel between the Flutter cross-platform side and the native layer of the application, the method further includes: Obtain the amount of data for the configuration data; The step of transmitting the target data to the native layer of the application through the platform channel between the Flutter cross-platform side and the native layer of the application includes: If the amount of configuration data is less than the preset amount of data, the configuration data is transmitted to the native layer of the application through the platform channel between the Flutter cross-platform side and the native layer of the application.

5. The method according to claim 4, wherein, The target data includes storage location identification data; the method further includes: If the amount of configuration data is greater than or equal to the preset amount of data, the configuration data is stored in a shared space between the Flutter cross-platform side and the native layer of the application, and storage location identification data is generated. The storage location identifier data is transmitted to the application's native layer via the platform channel between the Flutter cross-platform side and the application's native layer. The application layer of the application extracts the configuration data from the shared space according to the storage location identifier data.

6. The method according to claim 1, wherein, The Flutter cross-platform side includes a Flutter cross-platform page; the step of rendering the second main window through the application's native engine and displaying the client page in the user interface includes: When the configuration data described in the placeholder building block indicates that the Flutter cross-platform page obscures the native view of the application in the user interface, a screenshot of the native component in the user interface is obtained through the native layer of the application. Hide the native components in the user interface that correspond to the native layer; The platform view layer is overlaid on the layer containing the screenshot to obtain the Flutter cross-platform page; The Flutter cross-platform page is displayed in the user interface.

7. The method according to claim 1, wherein, Before obtaining the first instruction, the method further includes: The application displays a first interface, which includes a Flutter view component on the cross-platform side of the Flutter application, and an instance of the Flutter view component is in the first main window of the application. Receive the first input to the Flutter view component; The acquisition of the first instruction includes: In response to the first input, the first instruction is generated.

8. The method according to claim 7, wherein, Before obtaining the first instruction, the method further includes: When the application is launched, an initial window is created in the native layer of the application through the Flutter framework; If the initial window is laid out in a box layout, the layout of the initial window is changed from a box layout to a stacked layout to obtain the first main window.

9. The method according to claim 7 or 8, wherein, The method further includes: When the application is launched, the Flutter view component is created on the Flutter cross-platform side using the Flutter framework; Embed an instance of the Flutter view component in the window layout of the first main window.

10. The method according to claim 1, wherein, After creating a platform view in the native layer of the application according to the configuration data, the method further includes: Based on the platform view, generate a platform view identifier corresponding to the platform view; The platform view identifier is transmitted to the placeholder basic building block through the platform channel between the Flutter cross-platform side and the native layer of the application; The placeholder basic building block is associated with the platform view identifier to obtain association information. The association information is used to delete the placeholder basic building block indicated in the second instruction and the platform view identifier associated with the placeholder basic building block when a second instruction is obtained. The second instruction is used to instruct the deletion of the placeholder basic building block on the Flutter cross-platform side.

11. The method according to claim 1, wherein, The method further includes: Receive a second input from the user on the client page, the second input being used for authentication on the client page; In response to the second input, the business data corresponding to the identity authentication of the client page is transmitted to the Flutter cross-platform side through the platform channel between the Flutter cross-platform side and the native layer of the application; Based on the business data, business logic is processed through the placeholder basic building blocks of the Flutter cross-platform side to obtain the identity authentication processing result; The identity authentication processing result is transmitted to the application layer of the application through the platform channel; The application layer of the application displays the content corresponding to the identity authentication processing result.

12. A data processing apparatus, comprising: The acquisition module is used to acquire a first instruction, which is used to instruct the display of a client page related to the application; A module is created to create a placeholder basic building block corresponding to a Flutter view on the Flutter cross-platform side based on the first instruction. The placeholder basic building block is used to describe the configuration data of the user interface controls of the client page. The creation module is also used to create a platform view in the native layer of the application according to the configuration data; An embedding module is used to embed a platform view instance of the platform view in the window layout of the first main window of the application to obtain a second main window; The rendering module is used to render the second main window using the application's native engine and display the client page in the user interface.

13. A computer device, comprising: Processor and memory storing computer program instructions; When the processor executes the computer program instructions, it implements the data processing method as described in any one of claims 1-11.

14. A storage medium storing computer program instructions, which, when executed by a processor, implement the data processing method as described in any one of claims 1-11.

Images