A code generation method, a display method, a device and an electronic equipment

Abstract

The application discloses a code generation method, a display method, a code generation device, a display device and electronic equipment. The code generation method comprises the following steps: obtaining design data of a to-be-displayed element in a design draft of an application; setting a design size and a source size unit of the to-be-displayed element according to development specification corresponding to unit conversion logic of the design data, and obtaining application code containing the to-be-displayed element; in a compilation stage, performing unit conversion on layer style code and interface logic code through a first screen adaptation plug-in and a second screen adaptation plug-in respectively, converting a design size of a second type element into a display size corresponding to a first relative unit, and converting a design size of a third type element into a display size corresponding to a second relative unit; and after the unit conversion, obtaining executable code by packaging; wherein the executable code executes a runtime adaptation plug-in when being run. By using the method, the application can be presented with a display effect that is adaptive to different screen sizes.

Description

Technical Field

[0001] This application relates to the field of front-end technology, specifically to a code generation method, display method, device, and electronic device. Background Technology

[0002] Currently, devices used to display applications have a wide variety of screen sizes, and the same application can be displayed on screens of different sizes. Furthermore, the screen size of the same application may change during use, such as with foldable screens. Achieving display effects that adapt to different screen sizes is a challenge for application development.

[0003] In existing technologies, developers write and maintain style sheets for each screen size to adapt to the size information of the elements to be displayed in the application. However, this makes development inefficient. Alternatively, the device adaptation function can be used to adapt the application for display, but some elements such as buttons and text may not be able to be flexibly adjusted according to the screen size, resulting in a poor user experience.

[0004] Therefore, how to adapt the application to different screen sizes is a problem that needs to be solved.

[0005] The information disclosed in the background section is only intended to enhance the understanding of the background of this application, and therefore may include information that does not constitute prior art known to those skilled in the art. Summary of the Invention

[0006] This application provides a code generation method, display method, apparatus, and electronic device that can adapt applications to different screen sizes, adjust the display effect of application elements according to screen size, and improve adaptation efficiency and flexibility. The specific solution is as follows:

[0007] In a first aspect, this application provides a code generation method, the method comprising: obtaining design data of elements to be displayed in the design draft of an application; setting the design size and corresponding source size unit of each element to be displayed according to the design data and the development specifications corresponding to the unit conversion logic; and obtaining application code containing the elements to be displayed; wherein, the source size unit corresponding to the design size of the first type of elements among the elements to be displayed is characterized by a first unit identifier, the source size unit corresponding to the design size of the second type of elements among the elements to be displayed is characterized by a second unit identifier, and the source size unit corresponding to the design size of the third type of elements among the elements to be displayed is characterized by a third unit identifier; for the elements to be displayed contained in the cascading style code in the application code, during the compilation stage of the cascading style code, a first screen adaptation plugin converts the design size of the second type of elements into a display size corresponding to the first relative unit according to the first unit conversion logic, and converts the design size of the third type of elements into a display size corresponding to the second relative unit; for the elements to be displayed contained in the interface logic code in the application code, during the compilation stage of the interface logic code, a second screen adaptation plugin converts the design size of the second type of elements into a display size corresponding to the first relative unit according to the second unit conversion logic, and converts the design size of the third type of elements into a display size corresponding to the first relative unit. The dimensions are converted to display sizes corresponding to the second relative unit; after converting the design dimensions of the elements to be displayed to the corresponding display sizes, executable code is packaged; wherein, when the executable code is run, a runtime adaptation plugin is executed, which is used to: set responsive breakpoints for different screen size types, monitor screen size change events, obtain breakpoint updates triggered by screen size change events, determine the specific responsive breakpoint matched by the current breakpoint based on the current screen size, and set the font size of the root element in the processing of the specific responsive breakpoint; wherein, when the executable code runs, the first type of elements among the elements to be displayed are displayed in a constant manner. The second type of elements to be displayed are displayed in a scaled manner; the third type of elements to be displayed are displayed in a scaled manner when the target screen size is smaller than the screen size threshold, and in a constant manner when the target screen size is larger than the screen size threshold; wherein, the constant manner is an element display method in which the display size does not change with the screen size; the scaled manner is an element display method in which the display size changes with the screen size; wherein, the first type of elements are any of the following types of elements: text type, image type, control type contained in a specific function page; the second type of elements are the outer container that wraps the specific function page.

[0008] Optionally, when displaying the second and third types of elements in the elements to be displayed in a scaled manner, the following steps are taken: when the second and third types of elements are an outer container that wraps a specific function page and the specific function page contains multiple first type elements; determining the scaled runtime display size of the outer container, and determining the number of multiple first type elements to be displayed and / or their layout within the specific function page based on the runtime display size.

[0009] Optionally, the semantics of the first unit identifier represent a fixed element size, and the runtime size unit corresponding to the display size of the first type of element is the logical pixel unit of the target screen; the semantics of the second unit identifier represent that as the screen size scales and stretches, the first relative unit corresponding to the display size of the second type of element after conversion is the runtime size unit relative to the viewport width; the semantics of the third unit identifier represent that the element display method is determined according to whether the screen size of the target screen is less than the screen size threshold, and the second relative unit corresponding to the display size of the third type of element after conversion is the runtime size unit relative to the root element.

[0010] Optionally, the first unit conversion logic includes conversion logic defined by any of the following parameters: a predefined attribute that needs to be converted, a selector that needs to be forced to convert the unit, and the conversion target unit for forced unit conversion of third-party modules.

[0011] Optionally, the second unit conversion logic includes: performing an abstract syntax tree operation on the interface logic code to determine the elements to be displayed that require unit conversion; and converting the design size of the second type of elements to a display size corresponding to the first relative unit based on the design baseline width, and / or converting the design size of the third type of elements to a display size corresponding to the second relative unit based on the design baseline width.

[0012] Optionally, the abstract syntax tree operation for the interface logic code to determine the element to be displayed that needs unit conversion includes: traversing each node of the abstract syntax tree; when the node is any of the following types of nodes: string literal node, template string literal node, template string element type node, determining whether the node has an event handler corresponding to the second screen adaptation plugin; if so, determining that the node is the element to be displayed that needs unit conversion; the second unit conversion logic further includes: updating the abstract syntax tree after converting the element to be displayed that needs unit conversion.

[0013] Optionally, the design data of the element to be displayed in the design draft includes the scaling attribute of the element, wherein the scaling attribute indicates that the element to be displayed is an element of any of the following types: first type element, second type element, and third type element.

[0014] Secondly, this application also provides a display method, the method comprising: obtaining the screen size of a target screen and information about elements to be displayed on the target screen; loading a runtime adaptation plugin, setting responsive breakpoints for different screen size types through the runtime adaptation plugin, monitoring screen size change events, obtaining breakpoint updates triggered by screen size change events, determining a specific responsive breakpoint matched by the current breakpoint based on the current screen size, and setting the font size of the root element in the processing of the specific responsive breakpoint; displaying a first type of element among the elements to be displayed in a constant manner on the target screen, and displaying a second type of element among the elements to be displayed in a scaled manner; and responding to the screen size of the target screen... If the size is smaller than the screen size threshold, the third type of element among the elements to be displayed is displayed in a scaled manner on the target screen; and, in response to the screen size of the target screen being larger than the screen size threshold, the third type of element among the elements to be displayed is displayed in a constant manner on the target screen; wherein, the constant manner is a display method in which the display size does not change with the screen size; the scaled manner is a display method in which the display size changes with the screen size; wherein, the display size of the second and third type of elements among the elements to be displayed is obtained by performing unit conversion on the design size of the element based on unit conversion logic during the compilation phase of the application code corresponding to the element to be displayed, including: when the When the element to be displayed is an element contained in the Cascading Style Code (CSS) of the application code, during the compilation phase of the CSS code, a first screen adaptation plugin converts the design size of the second type of element to a display size corresponding to the first relative unit according to the first unit conversion logic, and converts the design size of the third type of element to a display size corresponding to the second relative unit. When the element to be displayed is an element contained in the interface logic code of the application code, during the compilation phase of the interface logic code, a second screen adaptation plugin converts the design size of the second type of element to a display size corresponding to the first relative unit according to the second unit conversion logic, and converts the design size of the third type of element to a display size corresponding to the second relative unit. The design dimensions of the elements are set during the application code generation stage according to the development specifications corresponding to the design data of the elements to be displayed in the application's design draft and the unit conversion logic. The source size unit corresponding to the design dimensions of the first type of elements to be displayed is represented by a first unit identifier; the source size unit corresponding to the design dimensions of the second type of elements to be displayed is represented by a second unit identifier; and the source size unit corresponding to the design dimensions of the third type of elements to be displayed is represented by a third unit identifier. The first type of elements can be any of the following types: text, image, or control types contained within a specific functional page. The second type of elements is an outer container that wraps around a specific functional page.

[0015] Thirdly, this application also provides a code generation apparatus, the apparatus comprising: an encoding unit, configured to acquire design data of elements to be displayed in the design draft of an application, set the design size and corresponding source size unit of each element to be displayed according to the design data and the development specifications corresponding to the unit conversion logic, and obtain application code containing the elements to be displayed; wherein, the source size unit corresponding to the design size of the first type of elements to be displayed is characterized by a first unit identifier, the source size unit corresponding to the design size of the second type of elements to be displayed is characterized by a second unit identifier, and the source size unit corresponding to the design size of the third type of elements to be displayed is characterized by a third unit identifier; A compilation unit is used to, during the compilation phase of the cascading style code in the application code, convert the design size of the second type of elements to a display size corresponding to the first relative unit using a first screen adaptation plugin according to a first unit conversion logic, and convert the design size of the third type of elements to a display size corresponding to the second relative unit. A second compilation unit is used to, during the compilation phase of the interface logic code in the application code, convert the design size of the second type of elements to a display size corresponding to the first relative unit using a second screen adaptation plugin according to a second unit conversion logic, and convert the design size of the third type of elements to a display size corresponding to the second relative unit. The design size of the element is converted to the display size corresponding to the second relative unit; the executable code generation unit is used to package the executable code after converting the design size of the element to be displayed to the corresponding display size; wherein, when the executable code is run, a runtime adaptation plugin is executed, the runtime adaptation plugin is used to: set responsive breakpoints for different screen size types, monitor screen size change events, obtain breakpoint updates triggered by screen size change events, determine the specific responsive breakpoint matched by the current breakpoint according to the current screen size, and set the font size of the root element in the processing of the specific responsive breakpoint; wherein, when the executable code runs, the first element in the element to be displayed... One type of element is displayed in a constant manner, while the second type of element is displayed in a scaled manner. A third type of element is displayed in a scaled manner when the target screen size is smaller than a screen size threshold, and in a constant manner when the target screen size is larger than the screen size threshold. The constant manner refers to an element display method where the display size does not change with the screen size. The scaled manner refers to an element display method where the display size changes with the screen size. The first type of element can be any of the following types: text, image, or control type contained within a specific function page. The second type of element is an outer container that wraps around a specific function page.

[0016] Fourthly, this application also provides an electronic device, comprising: a processor, a memory, and computer program instructions stored in the memory and executable on the processor; wherein the processor, when executing the computer program instructions, implements the method as described in any one of the first and / or second aspects.

[0017] Fifthly, this application provides a computer-readable storage medium storing computer-executable instructions, which, when executed by a processor, are used to implement the method described in any one of the first and / or second aspects.

[0018] Sixthly, embodiments of this application provide a computer program product, including a computer program that, when executed by a processor, implements the method as described in any one of the first and / or second aspects.

[0019] Compared with the prior art, this application has the following advantages:

[0020] This application provides a code generation method, display method, device, electronic device, storage medium, and program product. By acquiring design data of elements to be displayed in the application's design draft, and setting the design size and corresponding source size unit of each element to be displayed according to the design data and the development specifications corresponding to the unit conversion logic, application code containing the elements to be displayed is obtained. Specifically, the source size unit corresponding to the design size of the first type of elements to be displayed is represented by a first unit identifier; the source size unit corresponding to the design size of the second type of elements to be displayed is represented by a second unit identifier; and the source size unit corresponding to the design size of the third type of elements to be displayed is represented by a third unit identifier. For the elements to be displayed contained in the cascading style code in the application code, during the compilation stage of the cascading style code, a first screen adaptation plugin converts the design size of the second type of elements to a display size corresponding to the first relative unit according to the first unit conversion logic, and converts the design size of the third type of elements to a display size corresponding to the second relative unit. For the elements to be displayed contained in the interface logic code in the application code, during the compilation stage of the interface logic code, a second screen adaptation plugin converts the design size of the second type of elements to a display size corresponding to the first relative unit according to the second unit conversion logic, and converts the design size of the third type of elements to a display size corresponding to the second relative unit. The design size of the element is converted to the display size corresponding to the second relative unit; after the design size of the element to be displayed is converted to the display size, the executable code is packaged; wherein, when the executable code is run, a runtime adaptation plugin is executed, the runtime adaptation plugin is used to: set responsive breakpoints for different screen size types, monitor screen size change events, obtain breakpoint updates triggered by screen size change events, determine the specific responsive breakpoint matched by the current breakpoint according to the current screen size, and set the font size of the root element in the processing of the specific responsive breakpoint; wherein, when the executable code is run, the first type of element among the elements to be displayed is displayed in a constant manner. The display method is as follows: the second type of elements to be displayed are displayed in a scaled manner; the third type of elements to be displayed are displayed in a scaled manner when the target screen size is smaller than the screen size threshold, and in a constant manner when the target screen size is larger than the screen size threshold; wherein, the constant manner is an element display method in which the display size does not change with the screen size; the scaled manner is an element display method in which the display size changes with the screen size; wherein, the first type of elements are any of the following types of elements: text type, image type, control type contained in a specific function page; the second type of elements are the outer container that wraps the specific function page.During the coding phase, the design size and source size units are set according to the development specifications corresponding to the unit conversion logic. During the compilation phase, unit conversion is performed according to the unit conversion logic applicable to different types of elements to be displayed. This avoids runtime calculations related to unit conversion, saving runtime resources and computation time, and improving application efficiency. Furthermore, provided the code adheres to development specifications, the source design size can be set according to the presentation requirements of different elements on different screen sizes, and corresponding semantic size units can be assigned during coding. This allows the element's display size to remain constant or change with the screen size when the screen size is adjusted at runtime, or to remain constant when the screen size is within a certain threshold, and change with the screen size when the screen size exceeds the threshold, achieving the goal of flexibly adjusting the display effect of the elements to be displayed.

[0021] Ideally, when screen changes are detected and scaling is enabled, if the screen size is smaller than a screen size threshold (e.g., less than 480px), proportional scaling is enabled, calculating the font size based on the current screen width, the source design size of the elements in the design draft, and the rem baseline size. If the screen size is larger than the screen size threshold (e.g., greater than 480px), scaling is disabled, and a fixed display size for the font is determined based on the source design size of the elements in the design draft and the rem baseline size, preventing excessively large fonts on large screens. This allows for adaptive design to various screen sizes, automatically scaling on small screens without disrupting the original layout, while allowing users to see more content on large screens, improving screen display efficiency. Furthermore, unit conversion is performed during the compilation phase and automatically converted at runtime for screen size adaptation, providing a more flexible adaptive responsive layout solution. Attached Figure Description

[0022] Figure 1 This is a flowchart of the code generation method provided in the first embodiment of this application.

[0023] Figure 2 This is an example of elements being displayed in a constant manner under different screen sizes, as provided in the first embodiment of this application.

[0024] Figure 3 This is an example of elements displayed in a scaled manner at different screen sizes, as provided in the first embodiment of this application.

[0025] Figure 4 This is a flowchart illustrating the processing of the second screen adaptation plugin provided in the first embodiment of this application.

[0026] Figure 5 This is a flowchart of the runtime processing in the display method provided in the first embodiment of this application.

[0027] Figure 6 This is a flowchart of the display method provided in the second embodiment of this application.

[0028] Figure 7 This is a schematic diagram of the code generation device provided in the third embodiment of this application.

[0029] Figure 8 This is a schematic diagram of the display device provided in the fourth embodiment of this application.

[0030] Figure 9 This is a structural block diagram of the electronic device provided in this application. Detailed Implementation

[0031] To enable those skilled in the art to better understand the technical solutions of this application, the application will be clearly and completely described below with reference to the accompanying drawings of the embodiments. However, this application can be implemented in many other ways different from those described below. Therefore, based on the embodiments provided in this application, all other embodiments obtained by those skilled in the art without creative effort should fall within the scope of protection of this application.

[0032] It should be noted that the terms "first," "second," "third," etc., in the claims, specification, and drawings of this application are used to distinguish similar objects and are not used to describe a specific order or sequence. Such data are interchangeable where appropriate so that the embodiments of this application described herein can be implemented in a sequence other than that shown or described herein. Furthermore, the terms "comprising," "having," and their variations are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or apparatus that includes 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 these processes, methods, products, or apparatuses.

[0033] To facilitate understanding of the various embodiments of this application, the application background of the embodiments will be explained.

[0034] An application, or application program, refers to a software program designed for specific needs, aiming to help users complete specific tasks or provide specific services. In this embodiment, an application refers to an application with a visual interface. Applications can run on different types of electronic devices and present their visual interface through the electronic device or a screen controlled by the device. Electronic devices include, but are not limited to, smart vehicle devices, computers, laptops, smartphones, tablets, smart home devices, smart wearable devices, PDAs, gaming devices, or any combination of the aforementioned devices.

[0035] Before application coding development, a design draft needs to be created based on the application requirements. The application design draft includes UI (User Interface) annotation parameters, such as the dimensions of each element in the UI layout, the dimensions of the surrounding space, and the unit of measurement for each annotation parameter (in this application, "unit of measurement" can also be simply referred to as "unit"). For example, the unit of annotation parameters can be the logical pixel unit 'px'. If the annotation parameter of an element is 100px, it means that its width is 100 logical pixels. During coding development, developers implement the design based on the design draft to create an application that can run on electronic devices. The same application developed based on the same design draft may run on multiple different types of devices, and different types of devices can display the application on screens of different screen sizes. For example, the same application may run on a smartphone or a tablet. Furthermore, the screen size of the device displaying the application may change during application operation. For example, folding or unfolding a foldable screen causes the screen size (especially the screen width) to shrink or increase; similarly, when an application is displayed in a browser window, adjusting the browser window (stretching or shrinking the window) will cause the screen size of the application to increase or decrease accordingly. Therefore, adaptation features are needed to ensure that the application displays in a way that suits the screen size.

[0036] It should be noted that the information disclosed above is only for the purpose of helping to understand this application and does not constitute prior art known to those skilled in the art.

[0037] This application provides a code generation method, display method, apparatus, electronic device, computer-readable storage medium, and program product. The aim is to enable flexible adjustment of the display effect of elements by setting the source design size and assigning corresponding size units during coding according to the presentation requirements of different elements on different screen sizes, while adhering to development specifications; converting the source design size of elements according to the unit conversion logic corresponding to various elements during the compilation phase; and monitoring screen size change events at runtime and controlling different types of elements to maintain a constant display size or change with screen size. It also allows for maintaining a constant display size when the screen size does not exceed a screen size threshold, and changing with screen size when the screen size exceeds the threshold. This achieves a more flexible adaptive responsive layout.

[0038] Example 1

[0039] The first embodiment of this application provides a code generation method, which is described below in conjunction with... Figures 1 to 5 The code generation method is described below. Figure 1 The code generation method shown includes steps S101 to S104.

[0040] Step S101: Obtain the design data of the elements to be displayed in the application's design draft; set the design size and corresponding source size unit of each element to be displayed according to the design data and the development specifications corresponding to the unit conversion logic; and obtain application code containing the elements to be displayed. Wherein, the source size unit corresponding to the design size of the first type of elements to be displayed is represented by a first unit identifier; the source size unit corresponding to the design size of the second type of elements to be displayed is represented by a second unit identifier; and the source size unit corresponding to the design size of the third type of elements to be displayed is represented by a third unit identifier.

[0041] Step S102: For the elements to be displayed contained in the cascading style code in the application code, during the compilation stage of the cascading style code, the design size of the second type of element is converted into the display size corresponding to the first relative unit by the first screen adaptation plugin according to the first unit conversion logic, and the design size of the third type of element is converted into the display size corresponding to the second relative unit.

[0042] Step S103: For the elements to be displayed contained in the interface logic code in the application code, during the compilation stage of the interface logic code, the design size of the second type of elements is converted into the display size corresponding to the first relative unit by the second screen adaptation plugin according to the second unit conversion logic, and the design size of the third type of elements is converted into the display size corresponding to the second relative unit.

[0043] Step S104: After converting the design size of the element to be displayed into the corresponding display size, the executable code is packaged. When the executable code is run, a runtime adaptation plugin is executed. The runtime adaptation plugin is used to: set responsive breakpoints for different screen size types, monitor screen size change events, obtain breakpoint updates triggered by screen size change events, determine the specific responsive breakpoint matched by the current breakpoint based on the current screen size, and set the font size of the root element in the processing of the specific responsive breakpoint.

[0044] Specifically, during the execution of the executable code, the first type of elements to be displayed are displayed in a constant manner, while the second type of elements are displayed in a scaled manner. The third type of elements are displayed in a scaled manner when the target screen size is smaller than a screen size threshold, and in a constant manner when the target screen size is larger than the screen size threshold. The constant manner refers to an element display method where the display size does not change with the screen size; the scaled manner refers to an element display method where the display size changes with the screen size.

[0045] The first type of element can be any of the following types: text, image, or control contained within a specific function page; the second type of element is the outer container that wraps the specific function page.

[0046] In this embodiment, "screen" can refer to the display area on a display device where the application is presented. For example, "screen" can refer to the visible area in a browser used to render a page, such as the CSS (Cascading Style Sheets) viewport. Alternatively, "screen" can refer to the full-screen area where the application is presented. "Target screen" refers to the target display area where the element to be displayed is shown.

[0047] Specifically, the elements to be displayed refer to the application's interface elements. After the application code is compiled, built, and packaged, an application program (i.e., the application) that can actually run on electronic devices is generated. During the formation phase (such as the coding phase), the application code follows a series of development specifications, which define specifications corresponding to unit conversion logic. Development specifications are standards and / or rules used to guide the development process. Unit conversion logic refers to the processing logic that converts the source design size of elements into the display size. That is, during the coding phase of the application code, according to the development specifications corresponding to the unit conversion logic, the values ​​and units of the source design sizes of each element to be displayed on the screen are set according to the requirements of the design draft; during the compilation phase of the application code, the source design sizes are converted into display sizes according to the unit conversion logic to obtain the values ​​and units of the display sizes.

[0048] Specifically, whether an element is implemented as a first-class, second-class, or third-class element can be determined based on the application's interface presentation and interaction requirements. The scaling attribute of an element can be identified in the design draft using annotations, which characterize whether an element is designed as a first-class, second-class, or third-class element. Therefore, during the coding phase, the size of an element and its corresponding unit can be set according to the element's scaling attribute and the development specifications corresponding to the unit conversion logic. When generating application code during the coding phase, semantic unit sizes can be used to represent the source unit sizes corresponding to different types of elements. Specifically, the scaling attribute of the first-class element does not change with screen size (the unit size for this type of element can be identified by px); the scaling attribute of the second-class element changes with screen size (the unit size for this type of element can be identified by RPX); and the scaling attribute of the third-class element changes with screen size depending on whether the current screen size is less than a screen size threshold (the unit size for this type of element can be identified by rpx). In implementation, the first-class element can be any of the following types of elements: text, image (such as icons), or controls contained within a specific functional page. Taking shopping applications as an example, the first type of element (control type) can be controls within the shopping cart component, such as a "checkout" control. Similarly, for shopping applications, the first type of element (text type) can be text information recommending products; the first type of element (image type) can be images of recommended products. Designing recommended product images and / or text information as the first type of element allows for the display of more recommended products on larger screens, fully utilizing screen space and improving display efficiency. The second type of element can be an outer container enclosing a specific functional page, such as an outer div container or view component enclosing the structure and content of the shopping cart page. Where there is no conflict, the above features can be combined. Through the flexible selection of these various size units, developers can freely control how the layout size should adapt to the screen.

[0049] As described in step S101, based on the design data of the elements to be displayed in the application's design draft and the development specifications related to / corresponding to the unit conversion logic, the design size and corresponding source size unit of each element to be displayed are set, thereby forming application code containing the elements to be displayed.

[0050] Specifically, the design data in the design draft includes the baseline width of the design draft and the design data of each element to be displayed within that baseline width. The design data of each element to be displayed includes, but is not limited to: the dimensions of each element (such as width, height, etc.), scaling attributes, spacing between elements, and element position coordinates. The design data of each element to be displayed also includes: color, font color, graphic attributes (such as shape, size, etc.), image resources (such as size, format, resolution, etc.), interaction parameters, page layout, hierarchical structure between elements, and overlapping methods. The design data can be reflected in the annotation information of each element in the design draft. The design dimensions and corresponding source size units of each element to be displayed in the application code are set according to the dimensions and scaling attributes contained in the annotation information of the elements to be displayed in the design draft. For example, the baseline width of the design draft is 750px.

[0051] During the encoding phase, semantically defined size units can be used to identify the source size units corresponding to the design sizes of various elements to be displayed. In the subsequent compilation phase, corresponding unit conversions are performed according to the semantics of these size unit identifiers. Specifically, the semantics of the first unit identifier indicate a fixed element size; therefore, after unit conversion in the subsequent compilation phase, the runtime size unit corresponding to the display size of the first type of element is the logical pixel unit of the target screen. The semantics of the second unit identifier indicate that as the screen size scales and stretches, the first relative unit corresponding to the display size of the second type of element after conversion is the runtime size unit relative to the viewport width. The semantics of the third unit identifier indicate that the element display method is determined based on whether the target screen size is less than a screen size threshold; therefore, the second relative unit corresponding to the display size of the third type of element after conversion is the runtime size unit relative to the root element.

[0052] For example, if 'px' is used as the first unit identifier in CSS or JSX code, the compiler does not need to perform unit conversion for the first type of element and still uses 'px' as the runtime size unit, which is the actual size in fixed pixels, such as a 1px border. As another example, using 'RPX' as the second unit identifier indicates that "the display size always changes with the screen size (e.g., scaling / stretching)," so the unit is converted to 'vw'. Furthermore, using 'rpx' as the third unit identifier indicates that "the display size is fixed when the screen size is greater than a certain threshold, and changes with the screen size when the screen size is less than a certain threshold" (i.e., scaling on small screens and fixing on large screens), so the unit is converted to 'rem'.

[0053] Furthermore, when displaying the second and / or third types of elements among the elements to be displayed in a scaled manner, this includes: when the second and / or third types of elements are an outer container enclosing a specific functional page and the specific functional page contains multiple first-type elements; determining the scaled runtime display size of the outer container, and determining the number of multiple first-type elements to be displayed and / or their layout within the specific functional page based on the runtime display size. The runtime display size is the actual display size determined at runtime based on the screen size, based on the display size obtained after conversion. The outer container can be a full-screen background, a toolbar, etc., or other types of outer containers, such as the shopping cart component at the bottom of a store page.

[0054] By flexibly designing the scaling attributes of elements, it's possible to control the display effect of interface elements on different screen sizes more precisely, thereby providing an interface that better matches the screen size and improving operational efficiency. For example, keeping the interface elements inside the shopping cart component at a constant size allows users to click and operate more accurately, reducing the possibility of accidental operations. Scaling the outer container of the shopping cart component proportionally maintains visual consistency across different screens, avoiding inconsistencies in interface style caused by changes in screen size.

[0055] An example of the development specification corresponding to the aforementioned unit conversion logic is as follows:

[0056] For elements whose size does not change with the screen width, the unit of the source design size is identified using the first unit identifier, and the value of the source design size is not converted during the compilation stage; for example, the absolute value of the corresponding element in the design draft can be used as the value of the source design size, and the first unit identifier is 'px'; this type of element is the first type of element;

[0057] For elements whose screen size specifications always change with the screen width, the unit of the source design size is identified using a second unit identifier. During the compilation stage, the unit is converted for elements with the second unit identifier, such as converting to 'vw'. The value of the source design size can be calculated based on the absolute value of the corresponding element in the design draft. This type of element is the second type of element. The second unit identifier can be represented by 'RPX', 'Rpx', etc.

[0058] For elements that adhere to screen adaptation principles, the source design size is identified using a third-unit identifier. When the screen size is smaller than a screen size threshold (e.g., 480px), proportional scaling is applied; when the screen size is larger than the screen size threshold (e.g., 480px), no scaling or stretching occurs. For example, fonts undergo unit conversion during the compilation phase for elements with a third-unit identifier, specifically converting to 'rem'. The third-unit identifier can be represented as 'rpx' to distinguish it from the second-unit identifier; these elements are classified as third-category elements. Here, px stands for CSS Logical Pixel (Logical Pixel) unit. In actual rendering, the browser maps it to multiple physical pixels using the Device Pixel Ratio (DPR). The number of physical pixels = CSS Logical Pixel value × Device Pixel Ratio (DPR). For example, if the current device's DPR is 3, then using 100px (100 CSS Logical pixels) in the code will actually occupy 100 × 3 = 300 physical pixels (in the width direction). DPR refers to Device Pixel Ratio.

[0059] Please refer to Figure 2 The diagram illustrates how elements are displayed in a constant manner across different screen sizes, including exemplary comparison interfaces for target screens of small and large sizes. In this comparison, the product cards displayed in the recommended product list component—Product 1 card, Product 2 card, etc.—are displayed at a fixed size, independent of screen size. It can be seen that a larger screen size allows for the display of more product cards, improving screen display efficiency. Screen display efficiency is a measure of the amount of content that can be displayed within a given display area.

[0060] Please refer to this again. Figure 3The diagram illustrates the scaling of elements across different screen sizes, including exemplary comparison interfaces for small and large target screens. In this comparison, the product cards displayed in the product list component of the store page remain constant, while the "shopping cart element" component displays using a combination of constant and scaling methods. The outer container of the "shopping cart element" component, which encloses other controls within it, is scaled: on small screens, the width of the outer container is the screen width or the screen width minus any gaps; on large screens, the width remains the screen width or the screen width minus any gaps. In other words, the width of the outer container changes with the screen size; on large screens, the outer container is wider. Other controls within the outer container, such as the "shopping cart entry control," "checkout trigger control," and "shopping cart product summary information," are displayed constant, meaning their width remains consistent across both small and large screens. This ensures that the "shopping cart element" is clearly displayed on the overall page even on large screens, maintaining a beautiful interface and making it convenient for users to browse and operate.

[0061] Preferably, the scaling method specifically refers to the fact that the width scaling ratio and height scaling ratio of an element are equal before and after scaling, i.e., proportional scaling. Specifically, displaying the third type of elements among the elements to be displayed in a scaling mode on the target screen includes: when the third type of elements are displayed in a scaling mode, the width scaling ratio and height scaling ratio of the third type of elements are equal before and after scaling; displaying the second type of elements among the elements to be displayed in a scaling mode includes: the width scaling ratio and height scaling ratio of the second type of elements are equal before and after scaling. Proportional scaling ensures the rationality of the size and layout of interface elements, allowing users to obtain a comfortable visual and operational experience on screens of different sizes. For example, users may access shopping websites on screens of various sizes, and proportional scaling ensures that at least some elements of the page can be displayed well on different devices such as mobile phones, tablets, laptops, or desktops, without problems such as layout chaos or incomplete element display. The scaling method can also be a stretching method, which does not lock the proportional relationship between the width scaling ratio and the height scaling ratio.

[0062] This embodiment also provides a screen adaptation plugin to perform conversion processing on the source design size of the element based on unit conversion logic during the compilation phase of the application code corresponding to the element to be displayed. Furthermore, the display size of the root element is dynamically adjusted during application runtime; this processing can be specifically performed through a runtime adaptation plugin.

[0063] During the compilation phase, unit conversion processing is performed on the source design size of elements based on unit conversion logic. This includes: the source design size unit corresponding to the design size of the first type of elements to be displayed is represented by a first unit identifier (e.g., logical pixel unit 'px'), and the runtime size unit corresponding to the display size of the first type of elements is the logical pixel unit of the target screen (e.g., px); and / or, the source design size unit corresponding to the design size of the second type of elements to be displayed is represented by a second unit identifier (e.g., RPX), and the runtime size unit corresponding to the display size of the second type of elements is a first relative unit relative to the viewport width (e.g., vw, i.e., a percentage relative to the viewport width); and / or, the source design size unit corresponding to the design size of the third type of elements to be displayed is represented by a third unit identifier (e.g., rpx), and the runtime size unit corresponding to the display size of the third type of elements is a second relative unit relative to the root element (e.g., rem). In this context, 'px' stands for logical pixels; 'vw' is a percentage of the viewport width, enabling responsive webpage layout. The viewport width is the width of the page content display area, and logical pixels can be used as the unit for the viewport width; 'rem' represents the unit relative to the size of the HTML root element. The HTML root element is the `<html>` tag, the top-level element of the HTML document, with other elements located within it. For example, on small screens (i.e., smaller than the screen size threshold), some fonts and images scale proportionally with the screen width, while on large or widescreen screens, their size is not further increased. Therefore, the size of these elements (the third type of element) is encoded using `rpx`, which is converted to a 'rem' unit by the screen adaptation plugin during compilation. Furthermore, at runtime, the plugin's script dynamically sets the root element's font size to remain unchanged when it exceeds the screen size threshold (e.g., 480px). Similarly, if the outer container of a shopping cart needs to scale with screen size, it uses 750RPX during encoding, which the screen adaptation plugin converts to 750vw.

[0064] In this embodiment, corresponding screen adaptation plugins are provided for different types of code to implement the above-mentioned unit conversion processing during the compilation stage in subsequent steps S102 and / or S103. Cascading style code (CSS style files) is converted by the first screen adaptation plugin; JavaScript / JSX-based interface logic code is converted by the second screen adaptation plugin.

[0065] As described in step S102, during the compilation phase of cascading style code (such as CSS style code), the first unit conversion logic is executed through the first screen adaptation plugin to achieve unit conversion.

[0066] Specifically, the first-screen adaptation plugin can be executed in the build tool that processes CSS files to run the first-unit conversion logic. The first-screen adaptation plugin includes the following processing: iterating and parsing the CSS style code, and if 'rpx' is matched, converting it to 'rem' using the following formula:

[0067] rem count = pixels / rootValue; where rem count is the conversion result, pixels is the source design size, and rootValue is the base value of rem units.

[0068] If 'RPX' is matched, it will be converted to 'vw' according to the following formula:

[0069] vw quantity = (pixels / 750) * 100; where vw quantity is the conversion result, pixels is the source design size, and 750 is the design width reference of the design draft.

[0070] If a specific style matches the selector blacklist, that specific style is skipped and not converted. If the file path is used to determine whether the CSS style code comes from a dependent library, and if so, the style code is determined to come from a third-party library, and the unit conversion is performed according to the independent conversion strategy set for the third-party library.

[0071] Specifically, one implementation includes: the element to be displayed is an element in Cascading Style Sheets (CSS style file); during the compilation of the Cascading Style Sheets or after compilation but before packaging, the design size of the second type of element is converted to a display size corresponding to a first relative unit by a first screen adaptation plugin according to a first unit conversion logic, and / or, the design size of the third type of element is converted to a display size corresponding to a second relative unit by the first screen adaptation plugin according to the first unit conversion logic. The first unit conversion logic includes conversion logic defined by any of the following parameters: a predefined attribute that needs unit conversion, a selector that needs forced unit conversion, and the conversion target unit for forced unit conversion of third-party modules. The conversion target unit refers to the size unit corresponding to the conversion result, for example, it can be specified as 'vw', 'vh', or 'rem'. The above parameters enable fine-grained unit conversion control at the module level. Furthermore, it can also include using other relevant parameters to define the first unit conversion logic: specifying conversion precision, specifying the base parameter of the conversion destination unit, defining a selector for not converting, specifying the design base width, marking differential processing for dependency packages (node_modules, npm packages and related dependencies), marking direct replacement of original values, setting unit conversion flags for elements in media queries, etc.

[0072] This first-screen adaptation plugin uses regular expression matching and multi-layered filtering mechanisms to filter out elements that require unit conversion, ensuring that only the target content is converted. For example, it can define specific rules for regular expression matching and multi-layered filtering using predefined properties such as `propList` (requiring unit conversion), CSS selector blacklists and whitelists (e.g., whitelists for selectors requiring forced unit conversion and blacklists for selectors not requiring conversion), and `node_modules` (module-level) blacklists and whitelists (e.g., whitelists for dependencies requiring forced unit conversion and blacklists for dependencies not requiring conversion). Furthermore, the first-screen unit conversion logic includes: it can perform unit conversion based on the design draft width (i.e., the element layout dimensions on the design draft obtained during coding) according to a preset formula to calculate the proportion of various elements relative to the design draft. Through selector-level and module-level blacklist and whitelist mechanisms, a fine-grained unit conversion strategy can be achieved to manage the unit conversion of CSS styles from different sources.

[0073] Specifically, you can set the unit precision to retain after conversion. For example, the conversion formula from rpx to rem is:

[0074] fixedVal = toFixed(pixels / rootValue, unitPrecision);

[0075] Here, fixedVal is the conversion result, pixels is the corresponding CSS logical pixel value in the application code, rootValue is the base size that determines the rem unit, i.e. how many pixels 1rem =, this base value can be configured; unitPrecision is the unit precision retained after conversion.

[0076] For example, the conversion formula from 'RPX' to vw is:

[0077] fixedVal = toFixed((pixels / defaultClientWidth) * 100,unitPrecision);

[0078] Here, `fixedVal` represents the conversion result, and `defaultClientWidth` corresponds to the width of the design draft, which can be configured. The conversion formula follows a specially agreed-upon rule, including directly converting 750px to 100vw.

[0079] The unit conversion process during compilation also includes alerts for any exceptions that occur during the conversion, such as style unit conversion failures, unsupported styles, or invalid configurations. The converted code then enters the packaging process to generate executable code.

[0080] As described in step S103, during the compilation stage of the interface logic code (such as JavaScript / JSX code), the second unit conversion logic is executed through the second screen adaptation plugin to achieve unit conversion.

[0081] Specifically, during the compilation phase, JSX / JS files are parsed to generate an AST (Abstract Syntax Tree). The second-screen adaptation plugin then operates on this AST to perform unit conversions.

[0082] Specifically, one embodiment further includes: the element to be displayed is an element in the interface logic code (JavaScript / JSX code); during the compilation of the interface logic code or after compilation but before packaging, the design size of the second type of element is converted to a display size corresponding to the first relative unit by a second screen adaptation plugin according to the second unit conversion logic, and / or, the design size of the third type of element is converted to a display size corresponding to the second relative unit by the second screen adaptation plugin according to the second unit conversion logic. The second unit conversion logic includes: abstract syntax tree operations on the interface logic code to determine the elements to be displayed that require unit conversion; and converting the design size of the second type of element to a display size corresponding to the first relative unit according to the design baseline width, and / or, converting the design size of the third type of element to a display size corresponding to the second relative unit according to the design baseline width. The abstract syntax tree operation for the interface logic code, used to determine the element to be displayed that requires unit conversion, includes: traversing each node of the abstract syntax tree; when the node is any of the following types: string literal node, template string literal node, or template string element type node, determining whether the node has an event handler corresponding to the second screen adaptation plugin; if so, determining that the node is the element to be displayed that requires unit conversion; furthermore, the second unit conversion logic also includes: updating the abstract syntax tree after converting the element to be displayed that requires unit conversion.

[0083] In this implementation, the conversion goal of the second-screen adaptation plugin is to automatically convert rpx, Rpx, and RPX units in strings to rem or vw during the JavaScript / JSX compilation process for mobile responsive layout adaptation. The application's source code (JavaScript / JSX) undergoes lexical analysis (executed by the Tokenizer) to generate tokens; an AST (Abstract Syntax Tree) is generated through parsing; after generating the AST, it undergoes traversal and transformation, allowing the second-screen adaptation plugin to execute; then, a code generator is generated, outputting the unit-converted JS code. During the AST traversal and transformation process, the second-screen adaptation plugin monitors specific types of nodes by defining AST node visitors, and performs unit conversion processing upon a match. The conversion process includes: for static strings, direct string replacement (i.e., direct assignment); and / or, for dynamic expressions: constructing a new AST node, where the new unit 'vw' is a stringLiteral node, and replacing the currently converted node with the new node. The new code obtained after unit conversion enters the code generator / packaging process, whereby the code generator generates the executable code based on the modified AST. For example, for the second type of element using the dynamic expression `${width}Rpx`, its size conversion formula can be: width / 750*100+'vw', where 'vw' is the unit of the converted display size, and width is the current screen size. Another example is replacing the static string '100rpx' with '1rem'. All modifications are written back to the AST via path.replaceWith(), generating the new code after unit conversion. In subsequent step S104, the new code enters the packaging process to generate executable code.

[0084] Please refer to Figure 4 The processing flow of the second screen adaptation plugin shown in the diagram includes: S401, performing lexical and syntactic analysis on the source code to generate an AST. S402, traversing each node of the AST. S403, for nodes of string literals, template string literals, and template string element types, checking if any plugin has registered a listener for that node. If so, proceed to S404. S404, executing the second unit conversion logic to perform unit conversion. This continues until all nodes have been processed. S405, generating new code that includes the unit-converted nodes.

[0085] As described in step S104, after converting the design size of the element to be displayed into the corresponding display size, executable code is packaged. Specifically, it also includes a runtime adaptation plugin to dynamically adjust the baseline size, thereby controlling the scaling baseline. The runtime adaptation plugin is automatically executed after the page loads or the viewport (i.e., the screen) changes.

[0086] For example, after the browser loads the HTML, it automatically executes the runtime adapter plugin remAdaptor.ts, which can... <script> 引入或模块化导入。该插件可以进行初始化配置与断点定义，包括读取配置参数（如 designWidth=750, remBase=100），并预设多级断点。例如设计三级断点：mobile（≤480px）：启用缩放；tablet（481–720px）：禁用缩放，固定字体；desktop（>720px）：保持小屏基准。该插件中还包括：可以调用 window.innerWidth 获取当前视口宽度；根据视口宽度查找匹配的断点区间，确定是否启用缩放策略；动态设置根元素字体大小；注入CSS自定义属性，以同步设置CSS变量供其他样式使用；触发样式重计算，包括：浏览器自动根据新的 font-size 重新计算所有 rem 单位的实际尺寸，完成布局适配。其中，动态设置根元素字体大小的处理包括：若启用缩放，则字体设置为：fontSize = (clientWidth / 750) * 100；若禁用缩放，则字体值设置为：fontSize = (375 / 750) * 100 = 50px（固定小屏基准）；设置根元素字体大小包括指定单位为CSS逻辑像素单位，如 document.documentElement.style.fontSize = fontSize + 'px'。

[0087] 不冲突的情况下各步骤提供的实施方式可以相互结合。通过屏幕适配插件在编译阶段对CSS样式中元素的尺寸单位和 / 或基于jsx的行内样式进行转换处理，能够降低屏幕适配成本，避免编码阶段修改可能引入的代码漏改和误改的风险。通过运行时适配插件可以避免对不同屏幕尺寸编写多套样式，大幅提升不同屏幕尺寸之间的适配开发效率。

[0088] 请参考图5，图中示出了运行时的一个处理流程例子，该流程在应用页面首次加载时窗口加载完成后执行一次，并且，在监测到事件对应的当前断点回调中再次执行。图中具体包括：S501，页面加载时触发流程，注册事件回调，监测到视口尺寸变化事件时再次执行该流程。S502，获取当前视口宽度。S503，针对不同视口尺寸定义断点，匹配当前断点。S504，判断当前断点是否启用缩放。若是，执行S505,否则执行S506。S505，若启用则进行等比缩放。S506，若未启用，则恒定字体尺寸显示。S507，设置CSS样式自定义属性，包括CSS环境变量，也就是运行时适配插件根据当前屏幕宽度计算出的响应式状态输出，其他代码可直接消费环境变量。例如，CSS环境变量包括：--rem-base，当前rem对应的像素值；--screen-width，当前视口宽度；--breakpoint，当前设备类型（如 'tablet'）。S508，当前是否为视口尺寸变化事件。若是，执行S509，否则转S510。S509，使用防抖延迟执行，避免频繁重排布局。S510，首次加载，窗口加载完成后执行一次，以确保图片加载完成。其中，视口可以理解为呈现应用的目标屏幕，视口宽度为屏幕尺寸。

[0089] 所述方法可以应用于但不限于：购物类应用、其他提供可视界面的应用等场景。需要说明的是，在不冲突的情况下，在本实施例和本申请的其他实施例中给出的特征可以相互组合，并且步骤S101和S102或类似用语不限定步骤必须先后执行。

[0090] 实施例二

[0091] 以上述实施例为基础，本申请第二实施例提供一种显示方法，以下结合图6对所述显示方法进行说明。图6所示的显示方法，包括：步骤S601至步骤S603。

[0092] 步骤S601，获取目标屏幕的屏幕尺寸和需在所述目标屏幕显示的待显示元素的信息；

[0093] 步骤S602，加载运行时适配插件，通过所述运行时适配插件针对不同屏幕尺寸类型设置响应式断点，监测屏幕尺寸变化事件，获取屏幕尺寸变化事件触发的断点更新，根据当前屏幕尺寸确定当前断点匹配到的特定响应式断点，在特定响应式断点的处理中设置根元素的字体尺寸；

[0094] 步骤S603，在所述目标屏幕以恒定方式显示所述待显示元素中的第一类元素，以缩放方式显示所述待显示元素中的第二类元素；并且，响应于所述目标屏幕的屏幕尺寸小于屏幕尺寸阈值，在所述目标屏幕以缩放方式显示所述待显示元素中的第三类元素；以及，响应于所述目标屏幕的屏幕尺寸大于所述屏幕尺寸阈值，在所述目标屏幕以恒定方式显示所述待显示元素的第三类元素；

[0095] 其中，所述恒定方式为展示尺寸不跟随屏幕尺寸变化而变化的元素显示方式；所述缩放方式为展示尺寸跟随屏幕尺寸变化而变化的元素显示方式；

[0096] 其中，所述待显示元素中的第二类元素以及第三类元素的展示尺寸，在所述待显示元素对应的应用代码的编译阶段基于单位转换逻辑针对元素的设计尺寸进行单位转换得到，包括：当所述待显示元素为应用代码中层叠样式代码包含的元素，在所述层叠样式代码的编译阶段通过第一屏幕适配插件根据第一单位转换逻辑，将所述第二类元素的设计尺寸转换为对应于第一相对单位的展示尺寸，并将所述第三类元素的设计尺寸转换为对应于第二相对单位的展示尺寸；当所述待显示元素为应用代码中界面逻辑代码包含的元素，在所述界面逻辑代码的编译阶段通过第二屏幕适配插件根据第二单位转换逻辑将所述第二类元素的设计尺寸转换为对应于第一相对单位的展示尺寸，将所述第三类元素的设计尺寸转换为对应于第二相对单位的展示尺寸；

[0097] 其中，所述元素的设计尺寸在所述应用代码形成阶段根据应用的设计稿中待显示元素的设计数据与所述单位转换逻辑对应的开发规范设置；其中，所述待显示元素中第一类元素的设计尺寸对应的源尺寸单位由第一单位标识表征，所述待显示元素中第二类元素的设计尺寸对应的源尺寸单位由第二单位标识表征；所述待显示元素中第三类元素的设计尺寸对应的源尺寸单位由第三单位标识表征；

[0098] 其中，所述第一类元素为以下任意类型的元素：文字类型、图片类型、包含于特定功能页面内的控件类型；所述第二类元素为包裹特定功能页面的外层容器。

[0099] 根据不同待显示元素在不同屏幕尺寸下的呈现需求设置源设计尺寸及编码时赋予相应的语义化尺寸单位，结合运行时适配插件，实现了运行时屏幕尺寸调整的情况下保持元素的展示尺寸恒定不变或随屏幕尺寸变化而变化，或者在屏幕尺寸未超出屏幕尺寸阈值时展示尺寸恒定不变，而在屏幕尺寸超出屏幕尺寸阈值时随屏幕尺寸变化而变化，能够自适应各种屏幕尺寸，防止大屏尺寸下字体过大；并且，在小屏尺寸下能自动缩放，不打乱原本布局，同时在大屏尺寸下用户能看到更多内容，提升屏幕显示效率，达到灵活调整待显示元素的显示效果的目的。

[0100] 实施例三

[0101] 本申请第三实施例还提供与第一实施例相对应的代码生成装置。以下结合图7对所述装置进行说明，由于装置实施例基本相似于方法实施例，所以描述得比较简单，相关的技术特征的细节部分以及实现的效果请参见上述提供的方法实施例的对应说明即可。图7所示的代码生成装置包括：

[0102] 编码单元701，用于获取应用的设计稿中待显示元素的设计数据，根据所述设计数据以及单位转换逻辑对应的开发规范设置各待显示元素的设计尺寸及对应的源尺寸单位，得到包含所述待显示元素的应用代码；其中，所述待显示元素中第一类元素的设计尺寸对应的源尺寸单位由第一单位标识表征，所述待显示元素中第二类元素的设计尺寸对应的源尺寸单位由第二单位标识表征；所述待显示元素中第三类元素的设计尺寸对应的源尺寸单位由第三单位标识表征；

[0103] 第一编译单元702，用于针对所述应用代码中层叠样式代码包含的待显示元素，在所述层叠样式代码的编译阶段通过第一屏幕适配插件根据第一单位转换逻辑，将所述第二类元素的设计尺寸转换为对应于第一相对单位的展示尺寸，并将所述第三类元素的设计尺寸转换为对应于第二相对单位的展示尺寸；

[0104] 第二编译单元703，用于针对所述应用代码中界面逻辑代码包含的待显示元素，在所述界面逻辑代码的编译阶段通过第二屏幕适配插件根据第二单位转换逻辑将所述第二类元素的设计尺寸转换为对应于第一相对单位的展示尺寸，将所述第三类元素的设计尺寸转换为对应于第二相对单位的展示尺寸；

[0105] 可执行代码生成单元704，用于在将所述待显示元素的设计尺寸对应转换为展示尺寸之后，打包得到可执行代码；其中，所述可执行代码在被运行时，执行运行时适配插件，所述运行时适配插件用于：

[0106] 针对不同屏幕尺寸类型设置响应式断点，监测屏幕尺寸变化事件，获取屏幕尺寸变化事件触发的断点更新，根据当前屏幕尺寸确定当前断点匹配到的特定响应式断点，在特定响应式断点的处理中设置根元素的字体尺寸；

[0107] 其中，在所述可执行代码运行时所述待显示元素中第一类元素以恒定方式显示，所述待显示元素中第二类元素以缩放方式显示；所述待显示元素中第三类元素当目标屏幕的屏幕尺寸小于屏幕尺寸阈值以缩放方式，当目标屏幕的屏幕尺寸大于所述屏幕尺寸阈值则以恒定方式显示；其中，所述恒定方式为展示尺寸不跟随屏幕尺寸变化而变化的元素显示方式；所述缩放方式为展示尺寸跟随屏幕尺寸变化而变化的元素显示方式；

[0108] 其中，所述第一类元素为以下任意类型的元素：文字类型、图片类型、包含于特定功能页面内的控件类型；所述第二类元素为包裹特定功能页面的外层容器。

[0109] 可选的，所述装置还包括显示单元，所述显示单元用于：当所述第二类元素和第三类为包裹特定功能页面的外层容器并且所述特定功能页面包含多个第一类元素；确定所述外层容器缩放后的运行时展示尺寸，根据所述运行时展示尺寸确定显示的多个第一类元素的数量和 / 或在所述特定功能页面内的布局。

[0110] 可选的，所述第一单位标识的语义表示固定元素尺寸，所述第一类元素的展示尺寸对应的运行时尺寸单位为所述目标屏幕的逻辑像素单位；所述第二单位标识的语义表示随着屏幕尺寸缩放及拉伸，转换后所述第二类元素的展示尺寸对应的第一相对单位为相对于视口宽度的运行时尺寸单位；所述第三单位标识的语义表示根据目标屏幕的屏幕尺寸是否小于屏幕尺寸阈值确定元素显示方式，转换后所述第三类元素的展示尺寸对应的第二相对单位为相对于根元素的运行时尺寸单位。

[0111] 可选的，所述第一单位转换逻辑，包括通过以下任意参数定义的转换逻辑：需要进行单位转换的预定义属性，需要进行强制单位转换的选择器，对第三方模块进行强制单位转换的转换目的单位。

[0112] 可选的，所述第二单位转换逻辑，包括：针对所述界面逻辑代码的抽象语法树操作，以确定需要单位转换的待显示元素；以及，根据设计基准宽度将第二类元素的设计尺寸转换为对应于第一相对单位的展示尺寸，将第三类元素的设计尺寸转换为对应于第二相对单位的展示尺寸。

[0113] 可选的，所述第二单位转换逻辑，具体包括：遍历所述抽象语法树的每个节点，当所述节点为以下任意类型的节点：字符串字面量节点、模板字符串字面量节点、模板字符串元素类型节点，判断所述节点是否存在与第二屏幕适配插件对应的事件处理器，若是，则确定所述节点为需要单位转换的待显示元素；将需要单位转换的待显示元素进行单位转换之后更新所述抽象语法树。

[0114] 可选的，设计稿中所述待显示元素的设计数据，包括元素的缩放属性，所述缩放属性表征所述待显示元素为以下任一类型的元素：第一类元素、第二类元素、第三类元素。

[0115] 实施例四

[0116] 本申请第四实施例还提供与第二实施例相对应的显示装置。以下结合图8对所述装置进行说明，由于装置实施例基本相似于方法实施例，所以描述得比较简单，相关的技术特征的细节部分以及实现的效果请参见上述提供的方法实施例的对应说明即可。图8所示的显示装置包括：

[0117] 获取单元801，用于获取目标屏幕的屏幕尺寸和需在所述目标屏幕显示的待显示元素的信息；

[0118] 插件运行单元802，用于加载运行时适配插件，通过所述运行时适配插件针对不同屏幕尺寸类型设置响应式断点，监测屏幕尺寸变化事件，获取屏幕尺寸变化事件触发的断点更新，根据当前屏幕尺寸确定当前断点匹配到的特定响应式断点，在特定响应式断点的处理中设置根元素的字体尺寸；

[0119] 显示单元803，用于在所述目标屏幕以恒定方式显示所述待显示元素中的第一类元素，以缩放方式显示所述待显示元素中的第二类元素；并且，响应于所述目标屏幕的屏幕尺寸小于屏幕尺寸阈值，在所述目标屏幕以缩放方式显示所述待显示元素中的第三类元素；以及，响应于所述目标屏幕的屏幕尺寸大于所述屏幕尺寸阈值，在所述目标屏幕以恒定方式显示所述待显示元素的第三类元素；

[0120] 其中，所述恒定方式为展示尺寸不跟随屏幕尺寸变化而变化的元素显示方式；所述缩放方式为展示尺寸跟随屏幕尺寸变化而变化的元素显示方式；

[0121] 其中，所述待显示元素中的第二类元素以及第三类元素的展示尺寸，在所述待显示元素对应的应用代码的编译阶段基于单位转换逻辑针对元素的设计尺寸进行单位转换得到，包括：当所述待显示元素为应用代码中层叠样式代码包含的元素，在所述层叠样式代码的编译阶段通过第一屏幕适配插件根据第一单位转换逻辑，将所述第二类元素的设计尺寸转换为对应于第一相对单位的展示尺寸，并将所述第三类元素的设计尺寸转换为对应于第二相对单位的展示尺寸；当所述待显示元素为应用代码中界面逻辑代码包含的元素，在所述界面逻辑代码的编译阶段通过第二屏幕适配插件根据第二单位转换逻辑将所述第二类元素的设计尺寸转换为对应于第一相对单位的展示尺寸，将所述第三类元素的设计尺寸转换为对应于第二相对单位的展示尺寸；

[0122] 其中，所述元素的设计尺寸在所述应用代码形成阶段根据应用的设计稿中待显示元素的设计数据与所述单位转换逻辑对应的开发规范设置；其中，所述待显示元素中第一类元素的设计尺寸对应的源尺寸单位由第一单位标识表征，所述待显示元素中第二类元素的设计尺寸对应的源尺寸单位由第二单位标识表征；所述待显示元素中第三类元素的设计尺寸对应的源尺寸单位由第三单位标识表征；

[0123] 其中，所述第一类元素为以下任意类型的元素：文字类型、图片类型、包含于特定功能页面内的控件类型；所述第二类元素为包裹特定功能页面的外层容器。

[0124] 以上述实施例为基础，本申请其一实施例提供一种电子设备，相关的部分请参见上述实施例的对应说明即可。请参考图9电子设备示意图，图中所示的电子设备包括：存储器，以及处理器；所述存储器用于存储数据处理的计算机指令，该计算机指令在被处理器读取执行时，执行本申请实施例提供的所述方法。

[0125] 以上述实施例为基础，本申请其一实施例提供一种计算机可读存储介质，相关的部分请参见上述实施例的对应说明即可。所述计算机可读存储介质的示意图类似电子设备示意图，图中的存储器可以理解为所述可读存储介质。所述计算机可读存储介质存储有计算机指令，该计算机指令被处理器执行时用于实现本申请实施例提供的所述方法。

[0126] 本发明的技术方案可应用于即时电商平台的交易、配送服务中，例如淘宝闪购、淘鲜达、饿了么外卖和零售等。

[0127] 本申请实施例中可能会涉及到对用户数据的使用，在实际应用中，应当在符合所在国的适用法律法规要求的情况下（例如，用户明确同意，对用户切实通知，等），在适用法律法规允许的范围内在本文描述的方案中使用用户特定的个人数据。

[0128] 在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入 / 输出接口、网络接口和内存。内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和 / 或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

[0129] 1、计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、 程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存 (PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器 (DRAM)、 其他类型的随机存取存储器 (RAM)、只读存储器(ROM)、电可擦除可编程只读存储器 (EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器 (CD-ROM)、数字多功能光盘 (DVD) 或其他光学存储、磁盒式磁带，磁带磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括非暂存电脑可读媒体 (transitory media)，如调制的数据信号和载波。

[0130] 2、本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质（包括但不限于磁盘存储器、CD-ROM、光学存储器等）上实施的计算机程序产品的形式。

[0131] 本申请虽然以较佳实施例公开如上，但其并不是用来限定本申请，任何本领域技术人员在不脱离本申请的精神和范围内，都可以做出可能的变动和修改，因此本申请的保护范围应当以本申请权利要求所界定的范围为准。< / script>

Claims

1. A code generation method characterized by, The method comprises: In the coding stage, design data of to-be-displayed elements in a design draft of an application is acquired, and design sizes and corresponding source size units of the to-be-displayed elements are set according to the design data and development specification corresponding to unit conversion logic, to obtain application code containing the to-be-displayed elements; wherein a source size unit corresponding to a design size of a first type of element in the to-be-displayed elements is represented by a first unit identifier, a source size unit corresponding to a design size of a second type of element in the to-be-displayed elements is represented by a second unit identifier, and a source size unit corresponding to a design size of a third type of element in the to-be-displayed elements is represented by a third unit identifier; For to-be-displayed elements contained in layer style code in the application code, in a compiling stage of the layer style code, the design size of the second type of element is converted into a display size corresponding to a first relative unit and the design size of the third type of element is converted into a display size corresponding to a second relative unit by a first screen adaptation plug-in according to first unit conversion logic; For to-be-displayed elements contained in interface logic code in the application code, in a compiling stage of the interface logic code, the design size of the second type of element is converted into a display size corresponding to the first relative unit and the design size of the third type of element is converted into a display size corresponding to the second relative unit by a second screen adaptation plug-in according to second unit conversion logic; After the design sizes of the to-be-displayed elements are converted into display sizes, executable code is packaged; When the executable code is run, a runtime adaptation plug-in is executed, and the runtime adaptation plug-in is used to: Set responsive breakpoints for different screen size types, monitor screen size change events, acquire breakpoint updates triggered by screen size change events, determine a specific responsive breakpoint matched by a current breakpoint according to a current screen size, and set a font size of a root element in processing of the specific responsive breakpoint; In the executable code, the first type of element in the to-be-displayed elements is displayed in a constant manner, the second type of element in the to-be-displayed elements is displayed in a scaling manner, and the third type of element in the to-be-displayed elements is displayed in the scaling manner when a screen size of a target screen is smaller than a screen size threshold and is displayed in the constant manner when the screen size of the target screen is larger than the screen size threshold; wherein the constant manner is a display manner of an element whose display size does not change with a screen size, and the scaling manner is a display manner of an element whose display size changes with the screen size; The first type of element is any type of element of the following types: a text type, a picture type, and a control type contained in a specific function page; and the second type of element is an outer container wrapping a specific function page; Whether an element is implemented as the first type of element or the second or third type of element is set according to interface presentation and interaction requirements of the application; for a shopping application, picture and / or text information of recommended goods is designed as the first type of element, and more recommended goods can be displayed when the screen size is a large screen size.

2. The method of claim 1, wherein, When displaying the second type of elements and the third type of elements in the elements to be displayed in a zooming manner, comprising: When the second type of elements and the third type of elements are outer containers wrapping a specific function page, and the specific function page contains a plurality of first type of elements; Determining a runtime display size of the outer container after zooming, and determining the number of displayed first type of elements and the layout in the specific function page according to the runtime display size.

3. The method of claim 1, wherein, The semantic representation of the first unit identifier indicates a fixed element size, and the runtime size unit corresponding to the display size of the first type of elements is a logical pixel unit of the target screen; The semantic representation of the second unit identifier indicates that the first relative unit corresponding to the display size of the second type of elements after conversion is a runtime size unit relative to the viewport width after scaling and stretching with the screen size; The semantic representation of the third unit identifier indicates that the display mode of the element is determined according to whether the screen size of the target screen is smaller than a screen size threshold, and the second relative unit corresponding to the display size of the third type of elements after conversion is a runtime size unit relative to the root element.

4. The method of claim 1, wherein, The first unit conversion logic comprises conversion logic defined by any of the following parameters: Predefined attributes that need to be converted, selectors that need to be forcibly converted, and conversion destination units of third-party modules that need to be forcibly converted.

5. The method of claim 1, wherein, The second unit conversion logic comprises: Abstract syntax tree operations on the interface logic code to determine the elements to be displayed that need unit conversion; and Converting the design size of the second type of elements into a display size corresponding to the first relative unit according to the design reference width, and converting the design size of the third type of elements into a display size corresponding to the second relative unit.

6. The method of claim 5, wherein, The abstract syntax tree operations on the interface logic code to determine the elements to be displayed that need unit conversion, comprising: Traversing each node of the abstract syntax tree, and when the node is any of the following types of nodes: string literal node, template string literal node, and template string element type node, determining whether the node has an event handler corresponding to the second screen adaptation plug-in, and if so, determining that the node is an element to be displayed that needs unit conversion; The second unit conversion logic further comprises updating the abstract syntax tree after unit conversion of the elements to be displayed that need unit conversion.

7. The method of claim 5, wherein, The design data of the elements to be displayed in the design draft comprises a scaling attribute of the element, and the scaling attribute represents that the element to be displayed is any of the following types of elements: first type of element, second type of element, and third type of element.

8. A display method characterized by comprising: The method comprises: Obtaining the screen size of a target screen and information of elements to be displayed on the target screen; Loading a runtime adaptation plug-in, setting responsive breakpoints for different screen size types through the runtime adaptation plug-in, monitoring screen size change events, obtaining breakpoint updates triggered by screen size change events, determining a specific responsive breakpoint matched by the current breakpoint according to the current screen size, and setting the font size of the root element in the processing of the specific responsive breakpoint; displaying a first type of element in the to-be-displayed elements on the target screen in a constant manner, and displaying a second type of element in the to-be-displayed elements on the target screen in a scaling manner; and displaying a third type of element in the to-be-displayed elements on the target screen in a scaling manner in response to the screen size of the target screen being less than a screen size threshold, and displaying the third type of element in the to-be-displayed elements on the target screen in a constant manner in response to the screen size of the target screen being greater than the screen size threshold; wherein the constant manner is a display manner of an element whose display size does not change with a change in screen size, and the scaling manner is a display manner of an element whose display size changes with a change in screen size; wherein the display size of the second type of element and the third type of element in the to-be-displayed elements is obtained by unit conversion based on unit conversion logic for a design size of the element in a compilation stage of application code corresponding to the to-be-displayed elements, including: when the to-be-displayed element is an element contained in layer style code in the application code, converting the design size of the second type of element into a display size corresponding to a first relative unit and converting the design size of the third type of element into a display size corresponding to a second relative unit according to first unit conversion logic through a first screen adaptation plug-in in a compilation stage of the layer style code; when the to-be-displayed element is an element contained in interface logic code in the application code, converting the design size of the second type of element into a display size corresponding to the first relative unit and converting the design size of the third type of element into a display size corresponding to the second relative unit according to second unit conversion logic through a second screen adaptation plug-in in a compilation stage of the interface logic code; wherein the design size of the element is set according to development specifications corresponding to the unit conversion logic and design data of the to-be-displayed element in a design draft of the application in a formation stage of the application code; wherein a source size unit corresponding to the design size of the first type of element in the to-be-displayed element is represented by a first unit identifier, a source size unit corresponding to the design size of the second type of element in the to-be-displayed element is represented by a second unit identifier, and a source size unit corresponding to the design size of the third type of element in the to-be-displayed element is represented by a third unit identifier; wherein the first type of element is any type of element of the following types: a text type, a picture type, and a control type contained in a specific function page; and the second type of element is an outer container wrapping a specific function page; wherein whether an element is implemented as the first type of element or the second or third type of element is set according to interface presentation and interaction requirements of the application; for a shopping application, picture and / or text information of recommended goods is designed as the first type of element, and when the screen size is a large screen size, more recommended goods can be displayed.

9. A code generation apparatus characterized by comprising: including: The coding unit is configured to obtain design data of to-be-displayed elements in a design draft of an application, set design sizes and corresponding source size units of the to-be-displayed elements according to the design data and development specification corresponding to unit conversion logic, and obtain application code containing the to-be-displayed elements; wherein the source size unit corresponding to the design size of a first type of element in the to-be-displayed elements is represented by a first unit identifier, the source size unit corresponding to the design size of a second type of element in the to-be-displayed elements is represented by a second unit identifier, and the source size unit corresponding to the design size of a third type of element in the to-be-displayed elements is represented by a third unit identifier. The first compiling unit is configured to, for a to-be-displayed element contained in a layer style code in the application code, convert, in a compiling stage of the layer style code, the design size of the second type of element into a display size corresponding to a first relative unit and the design size of the third type of element into a display size corresponding to a second relative unit according to a first unit conversion logic through a first screen adaptation plug-in. The second compiling unit is configured to, for a to-be-displayed element contained in an interface logic code in the application code, convert, in a compiling stage of the interface logic code, the design size of the second type of element into a display size corresponding to the first relative unit and the design size of the third type of element into a display size corresponding to the second relative unit according to a second unit conversion logic through a second screen adaptation plug-in. The executable code generation unit is configured to, after converting the design sizes of the to-be-displayed elements into display sizes, package executable code; wherein the executable code, when executed, executes a runtime adaptation plug-in, and the runtime adaptation plug-in is configured to: set responsive breakpoints for different screen size types, monitor screen size change events, obtain breakpoint updates triggered by screen size change events, determine a specific responsive breakpoint matched by a current breakpoint according to a current screen size, and set a font size of a root element in processing of the specific responsive breakpoint. In the executable code, the first type of element in the to-be-displayed elements is displayed in a constant manner, the second type of element in the to-be-displayed elements is displayed in a scaling manner, and the third type of element in the to-be-displayed elements is displayed in the scaling manner when a screen size of a target screen is smaller than a screen size threshold and is displayed in the constant manner when the screen size of the target screen is larger than the screen size threshold; wherein the constant manner is a display manner of an element whose display size does not change with a screen size, and the scaling manner is a display manner of an element whose display size changes with the screen size. The first type of element is any of the following types of elements: a text type, a picture type, and a control type contained in a specific function page; and the second type of element is an outer container wrapping the specific function page. Whether an element is implemented as the first type of element or the second or third type of element is set according to interface presentation and interaction requirements of the application; for a shopping application, pictures and / or text information of recommended goods are designed as the first type of element, and more recommended goods can be displayed when the screen size is a large screen size.

10. An electronic device, comprising: comprising: a processor, a memory, and computer program instructions stored on the memory and executable on the processor; the processor implements the method of any of claims 1-8 when executing the computer program instructions.

Images