Page component display method and device, storage medium and electronic device

Abstract

The application discloses a page component display method and device, a storage medium and an electronic device. The method comprises the following steps: obtaining a source code set of a page component set in a target application, and adding a preview identifier to a target source code of a target page component in the page component set; in a source code compiling process, based on the preview identifier, performing an interception operation on the remaining source codes in the source code set except the target source code, to obtain an enhanced bytecode carrying preview environment configuration information; recording the position information of the enhanced bytecode and the component identifier of the target page component to a component index table; in response to a received preview request, querying the component index table, and displaying the target page component in a simulation running environment generated based on the enhanced bytecode. The application solves the technical problem of low preview efficiency of the page component in the system development stage.

Description

Technical Field

[0001] This application relates to the field of computer technology, and more specifically, to a method and apparatus for displaying page components, a storage medium, and an electronic device. Background Technology

[0002] To ensure the proper display of UI components in an application, previewing these components is typically necessary. For example, with the advent of Jetpack Compose, more and more Android UIs are being developed using Compose. For this type of UI, developers require previews; although development tools provide UI previews, the final result may differ from the actual device display.

[0003] Therefore, typically during the development phase, once the code for all UI components in the main application has been written, a plugin tool is used to package the code of all UI components onto the terminal device, and the entire application is then launched and run on the terminal to achieve a real-device preview of the UI components. However, as the functionality of the application gradually increases, launching and running a complete application (such as a large APP) containing many modules and complex logic will consume a lot of time and resources, resulting in the technical problem of low preview efficiency of page components during the system development phase.

[0004] There is currently no effective solution to the above problems. Summary of the Invention

[0005] This application provides a method and apparatus for displaying page components, a storage medium, and an electronic device to at least solve the technical problem of low preview efficiency of page components during the system development stage.

[0006] According to one aspect of the embodiments of this application, a method for displaying a page component is provided, comprising: obtaining a source code set of a set of page components in a target application, and adding a preview identifier to the target source code of a target page component in the set of page components; during the source code compilation process, based on the preview identifier, performing an interception operation on the remaining source code in the set of source code excluding the target source code to obtain enhanced bytecode carrying preview environment configuration information; recording the location information of the enhanced bytecode and the component identifier of the target page component in a component index table; and responding to a received preview request, querying the component index table and displaying the target page component in a simulated running environment generated based on the enhanced bytecode.

[0007] Optionally, the above-mentioned interception operation on the remaining source code in the source code set, excluding the target source code, based on the preview identifier includes: identifying the target page component from the page component set based on the preview identifier; intercepting the remaining source code in the source code set, excluding the target source code; obtaining the metadata information and preview parameters of the pre-created target page component, wherein the preview environment configuration information includes the metadata information and the preview parameters; and compiling the target source code to obtain the enhanced bytecode.

[0008] Optionally, compiling the target source code to obtain the enhanced bytecode includes: compiling the target source code to obtain compiled target bytecode; performing bytecode analysis on the target bytecode and embedding the metadata information and the preview parameters into the target bytecode to obtain the enhanced bytecode that supports independent execution.

[0009] Optionally, before querying the component index table in response to the received preview request and displaying the target page component in the simulated runtime environment generated based on the enhanced bytecode, the above method further includes: scanning the application package of the target application and recording the application entry point for launching the target application on the target terminal; and performing an interception operation on the application entry point of the target application to prevent the launch of the target application in the simulated runtime environment.

[0010] Optionally, the above-mentioned response to the received preview request, querying the component index table, and displaying the target page component in a simulated runtime environment generated based on the enhanced bytecode includes: creating a lightweight application solely for displaying the target page component, wherein the lightweight application and the target application are isolated from each other; in response to the received preview request, obtaining the component identifier of the target page component in the lightweight application; and displaying the target page component based on the component identifier.

[0011] Optionally, displaying the target page component based on the component identifier includes: searching a component index table based on the component identifier to obtain the location information of the enhanced bytecode corresponding to the component identifier; obtaining the enhanced bytecode based on the location information, and obtaining the target class name of the target page component from the enhanced bytecode; creating a target component instance under the target class name, wherein one component instance corresponds to one page component; and displaying the target component instance corresponding to the target page component in the simulated running environment in response to a trigger operation performed on the target component instance.

[0012] Optionally, adding a preview identifier to the target source code of the target page component in the page component set includes at least one of the following: adding the preview identifier to the definition of the target class in the target source code; adding the preview identifier before the target method in the target class, wherein the target method is used to describe the component layout and control logic of the target page component.

[0013] Optionally, the above method further includes: displaying a runnable interface icon in response to adding the preview identifier to the target source code; and packaging an application package containing the enhanced bytecode to a target terminal in response to a trigger operation performed on the interface icon, and displaying the target page component on the target terminal, wherein the application package is a package of a lightweight application that displays the target page component in the simulated running environment.

[0014] According to another aspect of the embodiments of this application, a display device for page components is also provided, comprising: a first acquisition unit, configured to acquire a set of source code of a set of page components in a target application, and add a preview identifier to the target source code of a target page component in the set of page components; a first processing unit, configured to, during the source code compilation process, perform an interception operation on the target source code in the set of source code based on the preview identifier to obtain enhanced bytecode carrying preview environment configuration information; a recording unit, configured to record the position information of the enhanced bytecode and the component identifier of the target page component to a component index table; and a first display unit, configured to, in response to a received preview request, query the component index table and display the target page component in a simulated running environment generated based on the enhanced bytecode.

[0015] According to another aspect of the embodiments of this application, a computer-readable storage medium is also provided, wherein a computer program is stored in the computer program for executing the above-described page component display method when the electronic device is run.

[0016] According to another aspect of the embodiments of this application, a computer program product is also provided, including a computer program that, when executed by a processor, implements the steps of the above-described method.

[0017] According to another aspect of the embodiments of this application, an electronic device is also provided, including a memory and a processor, wherein the memory stores a computer program and the processor is configured to execute the display method of the page component through the computer program.

[0018] Using the embodiments provided in this application, by adding a preview identifier to the source code of the target page component, the remaining source code other than the target source code is intercepted during the compilation process. This means only the target source code is compiled, and the compiled bytecode is modified to obtain enhanced bytecode containing preview environment configuration information. When running a lightweight application containing only the target page component on a terminal device, the enhanced bytecode carrying preview environment configuration information is obtained by querying the component index table, and a real-device preview of the target page component is achieved in a simulated running environment generated based on the preview environment configuration information. In other words, by adding a preview identifier during the development phase and intercepting non-target source code during compilation, only the target source code is compiled, analyzed, and packaged, thereby previewing the target page component on the terminal device. This process avoids packaging, launching, and running the entire target application, simplifying the preview process of the page component, reducing processing time, and improving the preview efficiency of the page component in a real-device environment. Attached Figure Description

[0019] The accompanying drawings, which are provided to further illustrate this application and form part of this application, illustrate exemplary embodiments of this application and are used to explain this application, but do not constitute an undue limitation of this application.

[0020] Figure 1 This is a schematic diagram illustrating an application scenario of an optional page component display method according to an embodiment of this application;

[0021] Figure 2 This is a flowchart of an optional page component display method according to an embodiment of this application;

[0022] Figure 3 This is an overall architecture diagram of an optional page component display method according to an embodiment of this application;

[0023] Figure 4 This is an overall flowchart of an optional page component display method according to an embodiment of this application;

[0024] Figure 5 This is a concrete example of the visual interface in the IDEA integrated development environment;

[0025] Figure 6 This is a schematic diagram of the structure of a display device for an optional page component according to an embodiment of this application;

[0026] Figure 7 This is a schematic diagram of the structure of an optional electronic device according to an embodiment of this application. Detailed Implementation

[0027] To enable those skilled in the art to better understand the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present application, and not all embodiments. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art without creative effort should fall within the scope of protection of the present application.

[0028] It should be noted that the terms "first," "second," etc., in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0029] The technical solutions in this application will comply with legal regulations during implementation. When operating according to the technical solutions in the embodiments, the data used will not involve user privacy, ensuring that the operation process is compliant and legal while guaranteeing data security. In addition, when the above embodiments of this application are applied to specific products or technologies, user permission or consent is required, and the collection, use, and processing of related data must comply with the relevant regulations and standards of the relevant countries or regions.

[0030] According to one aspect of the embodiments of this application, a method for displaying a page component is provided. As an optional implementation, the above-described method for displaying a page component may be applied, but is not limited to, to applications such as... Figure 1 The application scenarios shown are as follows. In, for example... Figure 1In the application scenario shown, the target terminal 102 can communicate with the server 106 via network 104, but is not limited to this. The server 106 can perform operations on the database 108, such as write or read data operations. The target terminal 102 may include, but is not limited to, a human-computer interaction screen, a processor, and a memory. The human-computer interaction screen may include, but is not limited to, page components displayed on the target terminal 102 that use the technical solution of this application for previewing on the terminal device. The processor may include, but is not limited to, responding to the human-computer interaction operations, executing corresponding operations, or generating corresponding instructions and sending the generated instructions to the server 106. The memory is used to store relevant processing data, such as source code sets, enhanced bytecode, and component index tables.

[0031] Optionally, in this embodiment, the target terminal can be a terminal configured with a target client, which may include, but is not limited to, at least one of the following: mobile phone (such as Android phone, iOS phone, etc.), laptop computer, tablet computer, PDA, MID (Mobile Internet Devices), PAD, desktop computer, smart TV, etc. The target client may be a video client, instant messaging client, browser client, educational client, etc. The network may include, but is not limited to, wired network and wireless network, wherein the wired network includes: local area network, metropolitan area network and wide area network, and the wireless network includes: Bluetooth, WIFI and other networks that enable wireless communication. The server may be a single server, a server cluster composed of multiple servers, or a cloud server.

[0032] The technical solution of this application can be widely used in scenarios such as previewing independent page components in the modular development process of Android system applications, and real-time previewing of Jetpack Compose components during the development stage.

[0033] As described in the above embodiments, the traditional method of starting and running the entire application to preview UI components during the development phase is prone to technical problems such as excessive time cost and overly complex process.

[0034] To address the aforementioned problems, this application proposes a method for displaying page components. Figure 2 This is a flowchart of a method for displaying page components according to an embodiment of this application, which includes the following steps S202 to S208.

[0035] It should be noted that the display method of the page components shown in steps S202 to S208 can be, but is not limited to, executed by an electronic device. The electronic device can be, but is not limited to, a method such as... Figure 1The target terminal or server shown.

[0036] Step S202: Obtain the source code set of the page component set in the target application, and add a preview identifier to the target source code of the target page component in the page component set;

[0037] Step S204: During the source code compilation process, based on the preview identifier, an interception operation is performed on the remaining source code in the source code set except for the target source code to obtain enhanced bytecode carrying preview environment configuration information;

[0038] Step S206: Record the location information of the enhanced bytecode and the component identifier of the target page component into the component index table;

[0039] Step S208: In response to the received preview request, query the component index table and display the target page component in the simulated runtime environment generated based on the enhanced bytecode.

[0040] The page component can be, but is not limited to, a UI object; for example, it can be a complete page, a subpage within a page, a button, etc. This embodiment of the application does not impose such limitations.

[0041] To facilitate understanding, let's first combine... Figure 3 The overall architecture diagram shown provides a brief introduction to the display methods of the above page components.

[0042] like Figure 3 As shown, the technical solution of this application mainly relies on the IDEA (an integrated development environment) plugin, the Gradle plugin, the module-Preview preview module (or display module), and the module-anno annotation module.

[0043] The IDEA plugin primarily provides visual support during application development. This plugin is also used to inspect components marked with annotations, which can be, but are not limited to, `@Component`, and displays the component's class name as follows: Figure 5 The icon shown in (a) indicates the IDEA plugin. Clicking this icon automatically generates the runtime configuration, similar to debugging an application in a development tool. In other words, the IDEA plugin adds functionality to the Android development tool, that is, at the IDE level.

[0044] The Gradle plugin is a build plugin that primarily uses ASM bytecode analysis to automate compile-time processing. Its functions include, but are not limited to, ASM bytecode analysis, scanning compiled .class files to identify classes annotated with `@Application`, hooking the target application (Android Application), isolating the context environment, and avoiding conflicts with the main application. In other words, the Gradle plugin identifies components annotated with `@Component`, injects the necessary metadata for previewing during compilation, generates enhanced bytecode that supports independent execution, and maintains a component index table for subsequent runtime lookups.

[0045] The module-Preview module is primarily used to initialize a simulated Android Context (the context environment of the Android system), providing runtime independent environment support and handling the actual preview display of components. The entry point for the Android application's interface is the Activity. This module includes the preview entry Activity, resolves the component name to be previewed (annotated with @Component), and provides an Application context environment through a hooked Android Application to execute specific component display logic, such as previewing Compose components.

[0046] The `@Module-anno` annotation module is used to mark components or page components that need to be previewed. This module provides annotations: `@Component` is used to mark previewable component classes, allowing the IDEA plugin to identify the target page component that can be previewed; `@ModuleApplication` is used by the Gradle plugin to identify the application class of the module.

[0047] In this embodiment, the IDEA plugin primarily inspects target page components (which can be one or more) marked with the `@Module` annotation. The annotation in this case is `@Component`, and a green, runnable icon is displayed under the component's class name. When this icon is clicked, the IDEA plugin automatically generates a runtime configuration, similar to debugging an application in a development tool. Therefore, the IDEA plugin adds functionality to the Android development tool at the IDE level.

[0048] The `@module-anno` annotation module is used to annotate previewable component classes, allowing the IDEA plugin to identify previewable target page components. Specifically, the `@ModuleApplication` annotation is used by the Gradle component plugin to identify the application class of the module.

[0049] In practical applications, the interaction process between the above four modules (or plugins) includes: (1) the IDEA plugin and the Gradle plugin coordinate through the build task; (2) module-preview provides runtime support for the IDEA plugin; (3) the preview environment is completely isolated from the main application, so that the function of previewing a single component can be achieved without starting the full application.

[0050] During the build process using the Gradle plugin, the bytecode of target page components annotated with @Component is enhanced using the ASM bytecode analysis framework. This process includes injecting metadata required for preview (such as component type, parameter information, etc.) and preview environment configuration information, such as code simulating the Android Context environment, enabling the target page components to run in an independent preview environment.

[0051] For example, after compilation, the target class of a target page component marked with a preview identifier has its bytecode injected with pre-defined preview logic code and simulated runtime environment configuration information by the Gradle plugin to support subsequent real-device preview operations. Therefore, enhanced bytecode is the bytecode modified from the compiled target source code.

[0052] While performing bytecode enhancement operations, the index information of page components is also recorded, including component identifiers (such as class names) and the storage location of enhanced bytecode. This information will be stored in the component index table so that the target page components can be quickly located and loaded when running and previewing on a real device.

[0053] When a developer clicks the preview icon in IDEA, the IDEA plugin locates the enhanced bytecode of the target component by querying the component index table, and then runs the component in a simulated runtime environment (through the preview entry Activity provided by the "module-preview" module) to display its UI effects.

[0054] For example, when clicking as Figure 5 After the preview icon shown in (b), the plugin finds the enhanced bytecode of MyComposeComponent based on the @Component annotation and the component index table, and displays it in the simulated runtime environment.

[0055] It should be noted that during the build process, the Gradle plugin uses ASM bytecode analysis technology to enhance the bytecode of the tagged components and inject the metadata and environment configuration information required for previewing.

[0056] By adding preview identifiers to the source code of target page components through IDE plugins, and combining this with Gradle plugins to use ASM to intercept the identified components at compile time, preview environment configuration information is injected, enhanced bytecode is generated, and recorded in the component index table. This allows the UI components to be displayed in an independent runtime environment on a real device without launching the entire application when responding to preview requests; only the corresponding enhanced bytecode needs to be called according to the index table. This effectively isolates the preview environment from the main application, avoids the delays during the startup of large applications, improves the efficiency of UI development and testing, and ensures the accuracy of the preview effect. In particular, for the preview of Jetpack Compose components, it enables immediate real device feedback during the development phase.

[0057] Using the embodiments provided in this application, by adding a preview identifier to the source code of the target page component, the remaining source code other than the target source code is intercepted during the compilation process. This means only the target source code is compiled, and the compiled bytecode is modified to obtain enhanced bytecode containing preview environment configuration information. When running a lightweight application containing only the target page component on a terminal device, the enhanced bytecode carrying preview environment configuration information is obtained by querying the component index table, and a real-device preview of the target page component is achieved in a simulated running environment generated based on the preview environment configuration information. In other words, by adding a preview identifier during the development phase and intercepting non-target source code during compilation, only the target source code is compiled, analyzed, and packaged, thereby previewing the target page component on the terminal device. This process avoids packaging, launching, and running the entire target application, simplifying the preview process of the page component, reducing processing time, and improving the preview efficiency of the page component in a real-device environment.

[0058] As an optional example, the above-described interception operation, based on the preview identifier, on the remaining source code in the source code set excluding the target source code, includes:

[0059] Based on the preview identifier, the target page component is identified from the set of page components;

[0060] Intercept the remaining source code in the source code set, excluding the target source code;

[0061] Obtain the metadata information and preview parameters of the pre-created target page component, wherein the preview environment configuration information includes the metadata information and the preview parameters;

[0062] The target source code is compiled to obtain the enhanced bytecode.

[0063] As described in the above embodiments, after the developer adds the @Component annotation to the target page component (which can also be logically considered as the target UI component), the IDEA plugin will scan and identify the annotations (i.e., preview identifiers) added in the source code collection in real time and provide an entry point for the preview tool.

[0064] In other words, during the development phase, the IDEA plugin continuously monitors code changes. If it detects a page component annotated with `@Component`, it can quickly identify it as the target page component. For example, consider a Compose component named UserListCompose. When the developer adds the `@Component` annotation to its source code, the IDEA plugin immediately recognizes the component's existence and adds it to the collection of components to be previewed.

[0065] Obviously, the target page component can be a single page component or multiple page components; this embodiment does not limit this.

[0066] Then, during the build phase, the Gradle plugin is used to scan the source code collection in real time to identify target page components marked with the above annotations, while collecting metadata information and preview parameters that developers have pre-set for previewing the target page components.

[0067] During the compilation process that only involves the target source code, the aforementioned metadata information and preview parameters required for previewing are injected to generate enhanced bytecode that supports independent execution. Simultaneously, the location information of the enhanced bytecode and the component representation of the target page components are recorded in the component index table for easy lookup and use at runtime.

[0068] In other words, the Gradle plugin plays a crucial role in the build process. It is mainly used to hook the Android Application when a target page component with a preview identifier is identified, thus isolating the Context environment and avoiding conflicts with the main application.

[0069] When the target application is identified as the main application, multiple UI components may have been developed during the development phase. The component marked with a preview identifier may be one or a portion of all the developed UI components. Therefore, hooking the main application (i.e., the target application) essentially means hooking the remaining source code of the remaining page components in the main application that have not been marked with a preview identifier. The purpose is to ensure that only the target source code participates in the compilation process.

[0070] Furthermore, after the hook operation, the target source code can be wrapped in an Activity container, but not limited to, to create a lightweight application (which can also be understood as a simulated application) containing only the target page components. Due to the hook operation, this lightweight application is isolated from the main application. This is one of the main reasons why the target page components can be previewed independently during the development phase.

[0071] By identifying target page components, the Gradle plugin can make targeted modifications to the component's source code, injecting the necessary preview environment configuration information to generate enhanced bytecode during the compilation process. This enhanced bytecode carries metadata information and preview parameters, allowing for the rapid reproduction of various runtime states of the component during preview without needing to start the complex environment of the entire application.

[0072] As an optional implementation, the target source code is compiled to obtain the enhanced bytecode, including:

[0073] The target source code is compiled to obtain the compiled target bytecode;

[0074] The target bytecode is analyzed, and the metadata information and the preview parameters are embedded into the target bytecode to obtain the enhanced bytecode that supports independent execution.

[0075] During the build process using the Gradle plugin, the source code of the target page component with the preview identifier is first compiled normally to generate the raw target bytecode (which can also be understood as the target bytecode file). This process follows the standard Android development workflow, ensuring that the basic functionality and logic of the component are preserved. For example, after the developer completes the coding of the UserDetailsCompose component, the Gradle build task converts the source code file into a .class bytecode file; this step is a prerequisite for subsequent enhancement processing.

[0076] The ASM bytecode analysis framework is used to delve into the compiled target bytecode. During this process, the ASM framework can read and modify the internal structure of .class bytecode files, laying the foundation for further bytecode enhancement. For example, for the bytecode of UserDetailsCompose, ASM will parse its class structure, method signatures, and property definitions to accurately identify the parts needed for previewing.

[0077] By using ASM to analyze the bytecode of the UserDetailsCompose component, the code areas used for user information display and interaction logic processing, as well as key points such as parameter passing and data binding, can be accurately identified, providing a precise target range for subsequent bytecode enhancement operations.

[0078] The pre-acquired metadata and preview parameters are directly embedded into the target bytecode, forming enhanced bytecode. Specifically, the ASM framework modifies the .class file, adding necessary preview logic, such as simulating the context environment, storing preview parameters, and managing component lifecycle. This enhancement process allows the UserDetailsCompose component to run in an independent preview environment without launching the entire application, ensuring both improved preview efficiency and accuracy.

[0079] In other words, after analyzing the bytecode of the UserDetailsCompose component, ASM embeds code to initialize a simulated Android Context, as well as logic for passing preview parameters (such as preset user information). Furthermore, it adds code for component lifecycle management and state maintenance to ensure stable operation and correct display of the component in an independent preview environment.

[0080] As an optional example, before querying the component index table in response to a received preview request and displaying the target page component in a simulated runtime environment generated based on the enhanced bytecode, the method further includes:

[0081] Scan the application package of the target application and record the application entry point for launching the target application on the target terminal;

[0082] An interception operation is performed on the application entry point of the target application to prevent the target application from starting in the simulated running environment.

[0083] By clicking Figure 5 Before the "Run" icon shown in (b) runs on the terminal device (i.e., real device) and previews the target page components, an independent running environment is pre-created, namely, hooking the application entry of the target application (i.e., preventing the main application from starting) and initializing the simulated Android Context environment.

[0084] As can be seen from the above embodiments, after the hook operation is performed during the build phase, a lightweight application containing only the enhanced bytecode corresponding to the target source code is formed. The MyApplication class is defined as the entry point of the main module and marked with the @ModuleApplication annotation. During the build process, the plugin scans the entire application package, identifies the MyApplication class of MyApp (the main application) as its startup entry point, and records relevant information such as the fully qualified class name and package name, providing a clear target for subsequent operations.

[0085] To ensure complete isolation between the preview environment and the main application environment and avoid potential conflicts or errors, this application's technical solution employs a hook interception mechanism at the application entry point of the main module. This means that even in preview mode, the main application of MyApp cannot be directly launched, thus ensuring the security and independence of the preview process. For example, when a developer attempts to preview the UserListCompose component, the system automatically hooks MyApplication, preventing the normal startup process of MyApp and instead entering the initialization process of the preview container (i.e., the lightweight application).

[0086] For example, when a developer clicks the preview button next to the UserListCompose component in the IDEA plugin (such as...), Figure 5 When the icon shown is displayed, the Gradle plugin immediately begins working. It first locates the MyApplication entry point in the log, and then performs a hook operation on the onCreate method of that entry point at the bytecode level to prevent MyApp from starting normally in preview mode. Simultaneously, the plugin replaces the logic in the onCreate method to initialize the preview container's context, ensuring that the preview process is not affected by the main application environment.

[0087] By precisely controlling the startup process of the target application, the purity and security of the preview environment are ensured, unnecessary system resource consumption is avoided when previewing UI components, and the problem of inaccurate previews caused by interference from the main application environment is also eliminated.

[0088] As an optional example, the above response to a received preview request, querying the component index table, and displaying the target page component in a simulated runtime environment generated based on the enhanced bytecode includes:

[0089] Create a lightweight application that is used solely to display the target page components, wherein the lightweight application is isolated from the target application;

[0090] In response to the received preview request, obtain the component identifier of the target page component in the lightweight application;

[0091] The target page component is displayed based on the component identifier.

[0092] In this embodiment, the lightweight application is created dynamically during runtime, aiming to provide an environment completely isolated from the target application to display single-page components. Unlike a full application build, the lightweight application only contains the minimum environment required for component preview, such as a simulated Android Context and an entry Activity for previewing the component, avoiding the resource consumption and time delays associated with launching the entire application. For example, when previewing the ChatScreenCompose component, the system automatically generates a lightweight application environment specifically for displaying that component based on the @Component annotation.

[0093] In lightweight applications, when a developer initiates a preview request, a series of actions are triggered to locate and prepare the component instance for the target page component. This process first requires obtaining the component identifier carried in the preview request, i.e., information related to the `@Component` annotation, including the component's fully qualified name and preview parameters. For example, when previewing ChatScreenCompose, the IDEA plugin sends a preview request to the lightweight application, which includes the ChatScreenCompose component identifier.

[0094] Using the acquired component identifier, the location information of the enhanced bytecode is located, and a component instance is created using reflection. In the lightweight application, PreviewActivity is responsible for launching and rendering the target page component. This process involves creating a component instance via reflection and passing preview parameters to it to ensure that the component displays the expected UI and interactive state during preview. For example, PreviewActivity calls the constructor of ChatScreenCompose, passing in preview parameters such as preset user sessions and message lists, and then displays them on the screen.

[0095] In other words, during the running phase, as long as you click on... Figure 5 The icon in (b) indicates "Run", which allows you to launch the lightweight application with one click, thus achieving the effect of previewing the target page components on a real device.

[0096] By building lightweight applications and implementing a mechanism to respond to preview requests, the need for independent previewing of specific UI components on a real device is realized, improving the flexibility and efficiency of Android application development. This independent preview solution not only reduces the waiting time for developers when previewing the UI, but also ensures the accuracy and reliability of the preview results, especially when dealing with complex dynamic UIs and interactive components, where its advantages are particularly prominent.

[0097] As an optional implementation, the above-mentioned display of the target page component based on the component identifier includes:

[0098] Based on the component identifier, the component index table is searched to obtain the location information of the enhanced bytecode corresponding to the component identifier;

[0099] Based on the location information, the enhanced bytecode is obtained, and the target class name of the target page component is obtained from the enhanced bytecode;

[0100] Create a target component instance under the target class name, where one component instance corresponds to one page component;

[0101] In response to a trigger operation performed on the target component instance, the target component instance corresponding to the target page component is displayed in the simulated running environment.

[0102] When a user submits a preview request through the IDEA plugin, the location information of the enhanced bytecode is first looked up in the component index table generated during the build phase based on the component identifier (such as the preview identifier of UserDetailsCompose).

[0103] The component index table is a mapping database that associates each preview identifier, component identifier, and the location of its corresponding enhanced bytecode file (which can also be understood as enhanced bytecode). This lookup process ensures that the system can quickly locate the target component bytecode required for previewing. For example, when a developer selects to preview the UserDetailsCompose component, the plugin quickly searches the component index table to find the specific location of the enhanced UserDetailsCompose.class bytecode file.

[0104] The plugin loads a specific enhanced bytecode file based on location information. This process involves reading the bytecode file from the file system and parsing its class definitions to extract the target class name. For example, by reading the UserDetailsCompose.class bytecode file, the plugin can resolve the fully qualified name of the target class to com.example.modules.userdetails.UserDetailsCompose.

[0105] After obtaining the target class name, an instance of the target page component is dynamically created using reflection. This process allows the system to instantaneously generate component objects as needed at runtime, without rewriting or modifying any code. For example, based on com.example.modules.userdetails.UserDetailsCompose, the IDEA plugin calls the reflection API to create a component instance of UserDetailsCompose for previewing.

[0106] A target class includes multiple methods, each method corresponds to a component instance, and a component instance is essentially a page component.

[0107] Once the target component instance is successfully created, the system will respond with a preview trigger operation, which is the user's preview command in IDEA (click). Figure 5 The running icon shown places the component instance in a simulated runtime environment of a lightweight application for display. For example, PreviewActivity is launched, which contains a separate Application context for rendering and displaying the UserDetailsCompose instance, ensuring that the preview effect accurately reflects the real device environment.

[0108] A smooth preview process is achieved by locating the component identifier, obtaining the target class name, creating the component instance, and displaying it in a simulated runtime environment. Furthermore, reflection and bytecode enhancement techniques are utilized to make component previewing a declarative, low-intrusion operation, requiring no modification to the component source code or the restart of the entire application.

[0109] The above methods not only shorten the preview cycle and improve development efficiency, but also ensure the authenticity and consistency of the preview effect. They are especially suitable for previewing components with complex interactions and dynamic UIs, such as UserDetailsCompose, which greatly promotes the modular development of Android applications and the instant verification of UI components.

[0110] As an optional example, adding a preview identifier to the target source code of the target page component in the page component set as described above includes at least one of the following:

[0111] Add the preview identifier to the definition of the target class in the target source code;

[0112] Add the preview identifier before the target method in the target class, wherein the target method is used to describe the component layout and control logic of the target page component.

[0113] The process of explicitly adding a preview identifier to the source code of a target page component. This is typically achieved by adding the `@Component` annotation before the class definition, which provides the necessary information for previewing the component, such as the component's name and other preview parameters. For example, when working with the `ChatScreenCompose` component, developers would add the `@Component` annotation before its class definition to mark it as a previewable component.

[0114] After this annotation is introduced, the IDEA plugin will recognize it and generate a result like this. Figure 5As shown in (a), a working icon (usually green) is displayed on the IDEA development environment interface. Clicking the icon will automatically wrap this page component and use Gradle components to package (or install) it to the terminal device (such as a mobile phone). Only the target page component is displayed on the terminal, thus enabling a real-device preview of each module or UI component.

[0115] In addition to adding annotations (preview identifiers) at the class level, you can also add preview identifiers before specific methods of the target page component. This is primarily for components using declarative UI programming methods like Jetpack Compose, where the component's layout and control logic are typically described within a separate method. In the ChatScreenCompose component, assuming the layout and logic are implemented inside the Composable method composeChatScreen, you can add the @Preview annotation before that method to indicate that it is the main entry point for previewing.

[0116] This embodiment describes how to declare preview features of page components at the source code level for subsequent technical solutions to identify and process. By adding preview identifiers such as @Component or @Preview before class definitions or specific methods, it is possible to accurately determine which pages can be previewed on a real device. This process ensures that the IDEA plugin and Gradle plugin can automatically detect these identifiers during the build phase, laying the foundation for subsequent bytecode enhancement, component indexing, and other steps.

[0117] The use of preview identifiers as described above clearly defines which components and methods can be previewed, making the entire preview process more intuitive and controllable. Furthermore, by adding preview identifiers to the source code, developers can easily mark components as previewable without additional manual configuration. The IDEA and Gradle plugins will automatically recognize these identifiers and perform operations such as bytecode enhancement and generating standalone runtime environments.

[0118] As an optional example, the above method also includes:

[0119] In response to adding the preview identifier to the target source code, a runnable interface icon is displayed;

[0120] In response to a trigger operation performed on the interface icon, an application package containing the enhanced bytecode is packaged to a target terminal, and the target page component is displayed on the target terminal, wherein the application package is a lightweight application package that displays the target page component in the simulated running environment.

[0121] In real-world applications, when developers are editing the source code of page components in an IDE (Integrated Development Environment), if they decide to mark a page component for previewing, they simply add a preview identifier before the class or method definition. If the IDEA plugin (i.e., smart components in the IDE) detects the addition of these preview identifiers, it will react immediately. For example, it will display a working interface icon next to these components on the IDE's screen, which can be referenced... Figure 5 As shown in (a). This icon is usually represented by an arrow or a green arrow. This icon actually represents a preview action, allowing developers to quickly start the component preview process with a simple click. For example, after marking the UserDetailsScreen component, the IDEA plugin will immediately add a green run icon next to its class definition, class UserDetailsScreen.

[0122] When a developer clicks the preview icon, a series of complex background operations are triggered. First, the IDEA plugin sends a command to the Gradle plugin, triggering the build process to enhance the bytecode of the component with the preview identifier. Second, the enhanced target page component is packaged into a lightweight application package specifically designed to display the page component in a simulated runtime environment, completely isolated from the main application. Finally, this package is sent to the developer's target device and executed there, displaying only the previewed component without affecting the main application's state. For example, after clicking the preview icon, the system automatically builds and packages a lightweight application containing enhanced bytecode, then deploys it to a device (such as a mobile phone) to display a preview of the UserDetailsScreen component without launching the entire application.

[0123] For example, when a developer clicks the green run icon next to the UserDetailsScreen component in IDEA, the preview process is triggered. The IDEA plugin instructs the Gradle plugin to perform bytecode enhancement, building a dedicated application package containing the enhanced UserDetailsScreen.class and other resources necessary for the preview. This package is then sent to the developer's phone. When the lightweight application is run on the phone, the preview of the UserDetailsScreen component is displayed independently in the simulated runtime environment, allowing the developer to clearly see how the component behaves on a real device without loading or launching other parts of the main application.

[0124] By integrating intelligent preview identifier management, as well as lightweight application building and component display technologies into IDEA, an efficient and intuitive UI preview mechanism is provided for Android developers, improving development efficiency and preview accuracy.

[0125] To better understand the display device of the above page components, the following will be combined with... Figure 4 The overall flowchart shown further describes it.

[0126] like Figure 4 As shown, the process includes the development phase, the build phase, and the runtime phase. The following is an explanation of each phase.

[0127] (1) Development phase (mainly using plugins and annotations);

[0128] 1) Developers add the @Component annotation or preview identifier to the target page component (such as the Compose component);

[0129] 2) The IDEA plugin will scan and identify the annotations added to the source code in the source code collection in real time, and provide an entry point for the preview tool.

[0130] (2) Construction phase;

[0131] 1) Scan source code files in real time, identify components marked with the @Component annotation, and collect metadata information and preview parameters of the preview components;

[0132] 2) Use the ASM framework to perform bytecode analysis on the target bytecode after compiling the target source code of the target page component, inject necessary metadata information and preview parameters, and obtain enhanced bytecode;

[0133] It's important to note that in Java development, source code files (.java) are compiled into bytecode files (.class). These bytecode files are binary code that the Java Virtual Machine (JVM) can understand and execute. Therefore, when referring to target page components, such as the Android UI components mentioned above, these components exist as Java or Kotlin source code during the development phase, but they are converted into bytecode during the build or compilation phase.

[0134] 3) Record the component index table for easy and quick lookup and instantiation;

[0135] 4) Scanning @ModuleApplication is used to record the application entry point, which facilitates hooking during runtime.

[0136] Clearly, during the build phase, by identifying the target source code of the target page component marked with the preview identifier, a hook operation is used to compile only the target code. During the compilation process, metadata information and preview parameters pre-set by the developers are added after modification, resulting in enhanced bytecode.

[0137] Meanwhile, due to the hook operation, only the enhanced bytecode of the target page component is packaged, such as packaging it to the terminal device, laying the foundation for subsequent running and preview display.

[0138] (3) Operation phase.

[0139] 1) Used to create an independent runtime environment, hook the application entry point, and initialize a simulated Android Context environment;

[0140] 2) When a user clicks "Preview," the component is located through the component index table, and a component instance is created using reflection technology;

[0141] 3) Launch the template Activity (this Activity runs in a simulated runtime environment after the hook, and is an independent container) to finally display the created component instance.

[0142] The aforementioned independent container is used to wrap the target source code of the target page component with the preview identifier after performing a hook operation on the target application, and to package the transformed enhanced bytecode to the terminal device through the container during the build phase.

[0143] Based on the above analysis, it can be seen that the technical solution of this application has at least the following beneficial effects:

[0144] (1) Implement declarative component configuration combined with compile-time automated processing to form a low-intrusion solution (only annotations need to be configured) to achieve UI preview of annotations on real devices, especially UI preview related to Compose, thereby improving development efficiency.

[0145] (2) Packaged into IDEA and Gradle plugins, which can be used for component previews in other Android project development stages.

[0146] (3) By utilizing the clever combination and flexible collaboration between the Gradle plugin, IDEA plugin, module-preview preview module and module-anno annotation module, operations such as adding annotations, recognizing annotations, hooking the main application startup, compiling and enhancing the source code of the target page component only are implemented. Finally, only a lightweight application is packaged to the terminal device to preview the target page component on the device, thus realizing the real device preview of the independent page component.

[0147] It should be noted that, for the sake of simplicity, the foregoing method embodiments are all described as a series of actions. However, those skilled in the art should understand that this application is not limited to the described order of actions, as some steps may be performed in other orders or simultaneously according to this application. Furthermore, those skilled in the art should also understand that the embodiments described in the specification are preferred embodiments, and the actions and modules involved are not necessarily essential to this application.

[0148] According to another aspect of the embodiments of this application, as follows is also provided Figure 6 A display device for a page component is shown, the device comprising:

[0149] The first acquisition unit 602 is used to acquire the source code set of the page component set in the target application, and add a preview identifier to the target source code of the target page component in the page component set;

[0150] The first processing unit 604 is used to perform an interception operation on the target source code in the source code set based on the preview identifier during the source code compilation process, so as to obtain enhanced bytecode carrying preview environment configuration information;

[0151] Recording unit 606 is used to record the location information of the enhanced bytecode and the component identifier of the target page component into the component index table;

[0152] The first display unit 608 is configured to, in response to a received preview request, query the component index table and display the target page component in a simulated runtime environment generated based on the enhanced bytecode.

[0153] Optionally, the first processing unit 604 includes:

[0154] The first identification module is used to identify the target page component from the set of page components based on the preview identifier;

[0155] The first interception module is used to intercept the remaining source code in the source code set, excluding the target source code;

[0156] The first acquisition module is used to acquire metadata information and preview parameters of the pre-created target page component, wherein the preview environment configuration information includes the metadata information and the preview parameters;

[0157] The compilation module is used to compile the target source code to obtain the enhanced bytecode.

[0158] Optionally, the above-mentioned compilation module includes:

[0159] The compilation submodule is used to compile the target source code to obtain the compiled target bytecode;

[0160] The analysis submodule is used to perform bytecode analysis on the target bytecode and embed the metadata information and the preview parameters into the target bytecode to obtain the enhanced bytecode that supports independent execution.

[0161] Optionally, the above-mentioned device further includes:

[0162] The scanning unit is used to query the component index table in response to the received preview request, and before displaying the target page component in the simulated running environment generated based on the enhanced bytecode, scan the application package of the target application and record the application entry point for launching the target application on the target terminal.

[0163] The interception unit is used to perform an interception operation on the application entry of the target application to prevent the target application from starting in the simulated running environment.

[0164] Optionally, the first display unit 608 includes:

[0165] A creation module is used to create a lightweight application that is only used to display the target page components, wherein the lightweight application is isolated from the target application;

[0166] The second acquisition module is used to acquire the component identifier of the target page component in the lightweight application in response to the received preview request;

[0167] The first display module is used to display the target page component based on the component identifier.

[0168] Optionally, the first display module mentioned above includes:

[0169] The lookup submodule is used to look up the component index table based on the component identifier to obtain the location information of the enhanced bytecode corresponding to the component identifier;

[0170] The first acquisition submodule is used to acquire the enhanced bytecode based on the location information, and to acquire the target class name of the target page component from the enhanced bytecode;

[0171] Create a submodule to create instances of the target component under the target class name, where one component instance corresponds to one page component;

[0172] The first display submodule is used to display the target component instance corresponding to the target page component in the simulated running environment in response to a trigger operation performed on the target component instance.

[0173] Optionally, the first acquisition unit 602 mentioned above includes:

[0174] A first processing module is configured to perform at least one of the following: adding the preview identifier to the definition of the target class in the target source code; adding the preview identifier before the target method in the target class, wherein the target method is used to describe the component layout and control logic of the target page component.

[0175] Optionally, the above-mentioned device further includes:

[0176] The second display unit is configured to display a runnable interface icon in response to adding the preview identifier to the target source code;

[0177] The second processing unit is configured to, in response to a trigger operation performed on the interface icon, package an application package containing the enhanced bytecode to a target terminal and display the target page component on the target terminal, wherein the application package is a lightweight application package that displays the target page component in the simulated running environment.

[0178] It should be noted that the embodiments of the display device for the page components here can refer to the embodiments of the display method for the page components described above, and will not be repeated here.

[0179] According to another aspect of the embodiments of this application, an electronic device for implementing the above-described method for displaying page components is also provided. This electronic device may be... Figure 1 The target terminal or server is shown. This embodiment uses the electronic device as an example to illustrate the concept. Figure 7 As shown, the electronic device includes a memory 702 and a processor 704. The memory 702 stores a computer program, and the processor 704 is configured to execute the steps in any of the above method embodiments via the computer program.

[0180] Optionally, the aforementioned electronic device may be located in at least one of a plurality of network devices of the computer.

[0181] Optionally, the processor described above can be configured to perform the following steps via a computer program:

[0182] S1, obtain the source code set of the page component set in the target application, and add a preview identifier to the target source code of the target page component in the page component set;

[0183] S2, During the source code compilation process, based on the preview identifier, an interception operation is performed on the target source code in the source code set to obtain enhanced bytecode carrying preview environment configuration information;

[0184] S3, record the location information of the enhanced bytecode and the component identifier of the target page component into the component index table;

[0185] S4. In response to the received preview request, query the component index table and display the target page component in the simulated runtime environment generated based on the enhanced bytecode.

[0186] Alternatively, as those skilled in the art will understand, Figure 7 The structure shown is for illustrative purposes only. Figure 7 This does not limit the structure of the aforementioned electronic devices or electronic equipment. For example, electronic devices or electronic equipment may also include components that are more... Figure 7 The more or fewer components shown (such as network interfaces, etc.), or having the same Figure 7 The different configurations shown.

[0187] The memory 702 can be used to store software programs and modules, such as the program instructions / modules corresponding to the page component display method and apparatus in this embodiment. The processor 704 executes various functional applications and data processing by running the software programs and modules stored in the memory 702, thereby implementing the aforementioned page component display method. The memory 702 may include high-speed random access memory, and may also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some instances, the memory 702 may further include memory remotely located relative to the processor 704, and these remote memories can be connected to the terminal via a network. Examples of such networks include, but are not limited to, the Internet, corporate intranets, local area networks, mobile communication networks, and combinations thereof. Specifically, the memory 702 may be used, but is not limited to, to store target source code, enhanced bytecode, and component index tables, etc. As an example, such as... Figure 7 As shown, the memory 802 may include, but is not limited to, the first acquisition unit 602, the first processing unit 604, the recording unit 606, and the first display unit 608 in the display device containing the page component. Furthermore, it may include, but is not limited to, other module units in the display device containing the page component, which will not be elaborated upon in this example.

[0188] Optionally, the transmission device 706 described above is used to receive or send data via a network. Specific examples of the network described above may include wired networks and wireless networks. In one example, the transmission device 706 includes a Network Interface Controller (NIC), which can be connected to other network devices and a router via a network cable to communicate with the Internet or a local area network. In another example, the transmission device 706 is a Radio Frequency (RF) module, used for wireless communication with the Internet.

[0189] In addition, the aforementioned electronic device also includes: a display 708 for displaying a target page component for previewing on a terminal device; and a connection bus 710 for connecting various module components in the aforementioned electronic device.

[0190] In other embodiments, the target terminal or server described above can be a node in a distributed system. This distributed system can be a blockchain system, formed by connecting multiple nodes through network communication. The nodes can form a point-to-point network, and any type of computing device, such as a server or target terminal, can become a node in the blockchain system by joining this point-to-point network.

[0191] According to another aspect of this application, a computer program product or computer program is provided, comprising computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the page component display method provided in various optional implementations of the above-described server verification processing, etc., wherein the computer program is configured to execute the steps in any of the above-described method embodiments at runtime.

[0192] Optionally, in this embodiment, the computer-readable storage medium described above may be configured to store a computer program for performing the following steps:

[0193] S1, obtain the source code set of the page component set in the target application, and add a preview identifier to the target source code of the target page component in the page component set;

[0194] S2, During the source code compilation process, based on the preview identifier, an interception operation is performed on the target source code in the source code set to obtain enhanced bytecode carrying preview environment configuration information;

[0195] S3, record the location information of the enhanced bytecode and the component identifier of the target page component into the component index table;

[0196] S4. In response to the received preview request, query the component index table and display the target page component in the simulated runtime environment generated based on the enhanced bytecode.

[0197] Optionally, in embodiments of this application, the terms "module" or "unit" refer to a computer program or part of a computer program that has a predetermined function and works with other related parts to achieve a predetermined goal, and can be implemented wholly or partially using software, hardware (such as processing circuitry or memory), or a combination thereof. Similarly, a processor (or multiple processors or memory) can be used to implement one or more modules or units. Furthermore, each module or unit can be part of an overall module or unit that includes the functionality of that module or unit.

[0198] Optionally, in this embodiment, those skilled in the art will understand that all or part of the steps in the various methods of the above embodiments can be implemented by a program instructing the hardware related to the target terminal. The program can be stored in a computer-readable storage medium, which may include: flash drive, read-only memory (ROM), random access memory (RAM), disk or optical disk, etc.

[0199] The sequence numbers of the embodiments in this application are merely for description and do not represent the superiority or inferiority of the embodiments. If the integrated units in the above embodiments are implemented as software functional units and sold or used as independent products, they can be stored in the aforementioned computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause one or more computer devices (which may be personal computers, servers, or network devices, etc.) to execute all or part of the steps of the methods in the various embodiments of this application.

[0200] In the above embodiments of this application, the descriptions of each embodiment have their own emphasis. Parts not described in detail in a certain embodiment can be referred to in the relevant descriptions of other embodiments. It should be understood that the disclosed client can be implemented in other ways in the several embodiments provided in this application. The device embodiments described above are merely illustrative; for example, the division of units is only a logical functional division. In actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the displayed or discussed mutual coupling or direct coupling or communication connection may be through some interfaces; the indirect coupling or communication connection of units or modules may be electrical or other forms.

[0201] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs. Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated units described above can be implemented in hardware or as software functional units.

[0202] The above are merely preferred embodiments of this application. It should be noted that those skilled in the art can make various improvements and modifications without departing from the principles of this application, and these improvements and modifications should also be considered within the scope of protection of this application.

Claims

1. A method for displaying a page component, characterized in that, include: Obtain the source code set of the page component set in the target application, and add a preview identifier to the target source code of the target page component in the page component set; During the source code compilation process, based on the preview identifier, an interception operation is performed on the remaining source code in the source code set other than the target source code to obtain enhanced bytecode carrying preview environment configuration information; Record the location information of the enhanced bytecode and the component identifier of the target page component into the component index table; In response to the received preview request, the component index table is queried, and the target page component is displayed in a simulated runtime environment generated based on the enhanced bytecode.

2. The method according to claim 1, characterized in that, The step of intercepting the remaining source code in the source code set, excluding the target source code, based on the preview identifier includes: Based on the preview identifier, the target page component is identified from the set of page components; Intercept the remaining source code in the source code set, excluding the target source code; Obtain the metadata information and preview parameters of the pre-created target page component, wherein the preview environment configuration information includes the metadata information and the preview parameters; The target source code is compiled to obtain the enhanced bytecode.

3. The method according to claim 2, characterized in that, The process of compiling the target source code to obtain the enhanced bytecode includes: The target source code is compiled to obtain the compiled target bytecode; The target bytecode is analyzed, and the metadata information and the preview parameters are embedded into the target bytecode to obtain the enhanced bytecode that supports independent execution.

4. The method according to claim 1, characterized in that, Before responding to a received preview request, querying the component index table, and displaying the target page component in a simulated runtime environment generated based on the enhanced bytecode, the method further includes: Scan the application package of the target application and record the application entry point for launching the target application on the target terminal; An interception operation is performed on the application entry point of the target application to prevent the target application from starting in the simulated running environment.

5. The method according to claim 1, characterized in that, The step of responding to a received preview request, querying the component index table, and displaying the target page component in a simulated runtime environment generated based on the enhanced bytecode includes: Create a lightweight application that is used solely to display the target page components, wherein the lightweight application is isolated from the target application; In response to the received preview request, obtain the component identifier of the target page component in the lightweight application; The target page component is displayed based on the component identifier.

6. The method according to claim 5, characterized in that, The step of displaying the target page component based on the component identifier includes: Based on the component identifier, the component index table is searched to obtain the location information of the enhanced bytecode corresponding to the component identifier; Based on the location information, the enhanced bytecode is obtained, and the target class name of the target page component is obtained from the enhanced bytecode; Create a target component instance under the target class name, where one component instance corresponds to one page component; In response to a trigger operation performed on the target component instance, the target component instance corresponding to the target page component is displayed in the simulated running environment.

7. The method according to any one of claims 1 to 6, characterized in that, Adding a preview identifier to the target source code of the target page component in the page component set includes at least one of the following: Add the preview identifier to the definition of the target class in the target source code; Add the preview identifier before the target method in the target class, wherein the target method is used to describe the component layout and control logic of the target page component.

8. The method according to any one of claims 1 to 6, characterized in that, The method further includes: In response to adding the preview identifier to the target source code, a runnable interface icon is displayed; In response to a trigger operation performed on the interface icon, an application package containing the enhanced bytecode is packaged to a target terminal, and the target page component is displayed on the target terminal, wherein the application package is a lightweight application package that displays the target page component in the simulated running environment.

9. A display device for page components, characterized in that, include: The first acquisition unit is used to acquire the source code set of the page component set in the target application, and add a preview identifier to the target source code of the target page component in the page component set; The first processing unit is configured to perform an interception operation on the target source code in the source code set based on the preview identifier during the source code compilation process, so as to obtain enhanced bytecode carrying preview environment configuration information; A recording unit is used to record the location information of the enhanced bytecode and the component identifier of the target page component into a component index table; The first display unit is configured to, in response to a received preview request, query the component index table and display the target page component in a simulated runtime environment generated based on the enhanced bytecode.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium includes a stored program, wherein the program can be executed by a terminal device or computer at runtime as described in any one of claims 1 to 8.

11. An electronic device comprising a memory and a processor, characterized in that, The memory stores a computer program, and the processor is configured to perform the method as described in any one of claims 1 to 8 through the computer program.

Images