Code generation method and device, code display method and device and electronic equipment

Abstract

The invention discloses a code generation method and device, a display method and device and electronic equipment, and the code generation method comprises the 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 the design data and a development specification corresponding to unit conversion logic, obtaining an application code containing the to-be-displayed element; unit conversion is carried out on the cascading style code and the interface logic code through the first screen adaptation plug-in and the second screen adaptation plug-in in the compiling stage, and the design size of the second class of elements is converted into the display size corresponding to the first relative unit; converting the design size of the third class of elements into a display size corresponding to the second relative unit; after unit conversion, packaging to obtain an executable code; wherein when the executable code is run, the run-time adaptive plug-in is executed. By adopting the method, the application can be presented in a display effect adapted to different screen sizes.

Description

Technical Field

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

[0002] Currently, the screen sizes of devices used to present applications vary. The same application can be displayed on screens of different specifications. Moreover, even when the same application is displayed on the same device, the screen size may change during use, such as with foldable screens. Achieving display effects that adapt to different screen sizes is a challenge facing application development.

[0003] In the prior art, developers write and maintain style sheets for each screen size to adapt the size information of the application's display elements. However, this results in low development efficiency. Alternatively, developers use the device's adaptation function to adapt the application for display, but the display effects of some elements, such as buttons and text, may not be flexibly adjusted according to the screen size, resulting in a poor user experience.

[0004] Therefore, how to present the application in a manner that adapts to display effects of different screen sizes is a problem that needs to be solved.

[0005] The above information disclosed in this Background section is only for enhancement of understanding of the background of the application and therefore it may contain information that does not form the prior art that is already known to a person of ordinary skill in the art. Summary of the Invention

[0006] This application provides a code generation method, display method, device, and electronic device that can present an application with display effects adapted to different screen sizes, adjust the presentation effects of the application's elements to be displayed according to the screen size, and improve adaptation efficiency and flexibility. The specific solution is as follows: In a first aspect, the present application provides a code generation method, the method comprising: obtaining design data of elements to be displayed in a 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 an application code containing the elements to be displayed; wherein the source size unit corresponding to the design size of the first type of elements in the elements to be displayed is represented by a first unit identifier, and the source size unit corresponding to the design size of the second type of elements in the elements to be displayed is represented by a second unit identifier; the source size unit corresponding to the design size of the third type of elements in the 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, the design size of the second type of elements is converted into a display size corresponding to the first relative unit by a first screen adaptation plug-in according to the first unit conversion logic, and the design size of the third type of elements is converted into a display size corresponding to the second relative unit by a second screen adaptation plug-in according to the second unit conversion logic. inch is converted into a display size corresponding to a second relative unit; after the design size of the element to be displayed is converted into the display size, an executable code is packaged; wherein, 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, obtain breakpoint updates triggered by screen size change events, determine a specific responsive breakpoint matched to 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 elements in the elements to be displayed are displayed in a constant manner It is shown that the second type of elements in the elements to be displayed are displayed in a scaled manner; the third type of elements in the elements to be displayed are displayed in a scaled manner when the screen size of the target screen is smaller than the screen size threshold, and are displayed in a 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 elements whose display size does not change with the change of the screen size; the scaled manner is a display manner of elements whose display size changes with the change of the screen size; wherein, the first type of elements are any of the following types of elements: text type, picture type, control type contained in a specific function page; the second type of elements are outer containers that wrap the specific function page.

[0007] Optionally, when the second-category elements and the third-category elements among the elements to be displayed are displayed in a scaled manner, including: when the second-category elements and the third-category elements are outer containers that wrap a specific function page and the specific function page contains multiple first-category elements; determining the runtime display size of the outer container after scaling, and determining the number of the multiple first-category elements displayed and / or the layout within the specific function page based on the runtime display size.

[0008] Optionally, the semantics of the first unit identifier represents 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 represents that as the screen size is scaled and stretched, 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 represents that the element display mode is determined according to whether the screen size of the target screen is smaller 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.

[0009] Optionally, the first unit conversion logic includes conversion logic defined by any of the following parameters: a predefined attribute that requires unit conversion, a selector that requires forced unit conversion, and a conversion destination unit for forced unit conversion of a third-party module.

[0010] 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 into a display size corresponding to the first relative unit based on the design reference width, and / or converting the design size of the third type of elements into a display size corresponding to the second relative unit based on the design reference width.

[0011] Optionally, the abstract syntax tree operation on the interface logic code to determine the elements to be displayed that require unit conversion includes: 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, template string element type node, judging 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 requires unit conversion; the second unit conversion logic also includes: updating the abstract syntax tree after performing unit conversion on the elements to be displayed that require unit conversion.

[0012] Optionally, the design data of the element to be displayed in the design draft includes a scaling attribute of the element, and the scaling attribute indicates that the element to be displayed is any of the following types of elements: first-category elements, second-category elements, and third-category elements.

[0013] In a second aspect, the present 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 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 to 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 elements to be displayed in a constant manner on the target screen, and displaying a second type of element in the elements to be displayed in a scaled manner; and, in response to the screen size of the target screen, The size of the second and third elements of the elements to be displayed is smaller than the screen size threshold, and the third type of elements in the elements to be displayed are 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 elements in the elements to be displayed are displayed in a constant manner on the target screen; wherein, the constant manner is an element display manner in which the display size does not change with the change of the screen size; and the scaled manner is an element display manner in which the display size changes with the change of the screen size; wherein, the display sizes of the second and third types of elements in the elements to be displayed are obtained by performing unit conversion on the design size of the elements based on the unit conversion logic during the compilation stage of the application code corresponding to the elements to be displayed, including: when the The element to be displayed is an element included in the cascading style code in the application code. During the compilation phase of the cascading style code, the first screen adaptation plug-in is used to convert the design size of the second-category element into a display size corresponding to the first relative unit according to the first unit conversion logic, and the design size of the third-category element is converted into a display size corresponding to the second relative unit; when the element to be displayed is an element included in the interface logic code in the application code, the second screen adaptation plug-in is used to convert the design size of the second-category element into a display size corresponding to the first relative unit according to the second unit conversion logic during the compilation phase of the interface logic code, and the design size of the third-category element is converted into a display size corresponding to the second relative unit. ; Wherein, the design size of the element is set in the application code formation stage according to the design data of the element to be displayed in the design draft of the application and the development specifications corresponding to the unit conversion logic; wherein, the source size unit corresponding to the design size of the first type of elements among the elements to be displayed is represented by a first unit identifier, and the source size unit corresponding to the design size of the second type of elements among the elements to be displayed is represented by a second unit identifier; the source size unit corresponding to the design size of the third type of elements among the elements to be displayed is represented by a third unit identifier; wherein, the first type of element is any of the following types of elements: text type, picture type, control type contained in a specific function page; the second type of element is an outer container that wraps a specific function page.

[0014] In a third aspect, the present application also provides a code generation device, which includes: an encoding unit for obtaining design data of elements to be displayed in a 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 an application code containing the elements to be displayed; wherein the source size unit corresponding to the design size of the first type of elements in the elements to be displayed is represented by a first unit identifier, and the source size unit corresponding to the design size of the second type of elements in the elements to be displayed is represented by a second unit identifier; the source size unit corresponding to the design size of the third type of elements in the elements to be displayed is represented by a third unit identifier; the first A compilation unit for converting 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 by a first screen adaptation plug-in during the compilation phase of the cascading style code for the elements to be displayed contained in the cascading style code in the application code, and converting the design size of the third type of elements into a display size corresponding to the second relative unit; a second compilation unit for converting 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 by a second screen adaptation plug-in during the compilation phase of the interface logic code for the elements to be displayed contained in the application code, and converting the design size of the third type of elements into a display size corresponding to the second relative unit according to the second unit conversion logic The design size of the class element is converted into a display size corresponding to the second relative unit; an executable code generation unit is used to package the executable code after converting the design size of the element to be displayed into the display size; wherein, when the executable code is run, the 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, obtain breakpoint updates triggered by screen size change events, determine the specific responsive breakpoint matched to 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 A first type of element is displayed in a constant manner, and a second type of element among the elements to be displayed is displayed in a scaled manner; a third type of element among the elements to be displayed is displayed in a scaled manner when the screen size of the target screen is smaller than a screen size threshold, and is displayed in a 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 elements whose display size does not change with changes in the screen size; the scaled manner is a display manner of elements whose display size changes with changes in the screen size; wherein, the first type of element is any of the following types of elements: text type, picture type, control type contained in a specific function page; the second type of element is an outer container that wraps a specific function page.

[0015] In a fourth aspect, the present application also provides an electronic device comprising: a processor, a memory, and computer program instructions stored on the memory and executable on the processor; when the processor executes the computer program instructions, it implements the method as described in any one of the first aspect and / or the second aspect.

[0016] In a fifth aspect, the present application provides a computer-readable storage medium, in which computer-executable instructions are stored. When the computer-executable instructions are executed by a processor, they are used to implement the method described in any one of the first aspect and / or the second aspect.

[0017] In a sixth aspect, an embodiment of the present application provides a computer program product, comprising a computer program, which, when executed by a processor, implements the method as described in any one of the first aspect and / or the second aspect.

[0018] Compared with the prior art, this application has the following advantages: The embodiment of the application provides a code generation method, a display method, a device, an electronic device, a storage medium and a program product, which comprises the following steps: obtaining design data of to-be-displayed elements in a design draft of an application; setting 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 obtaining 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; for to-be-displayed elements contained in layer style code in the application code, converting the design size of the second type of element into display size corresponding to a first relative unit and converting the design size of the third type of element into display size corresponding to a second relative unit according to the first unit conversion logic through a first screen adaptation plug-in in a compilation stage of the layer style code; for to-be-displayed elements contained in interface logic code in the application code, converting the design size of the second type of element into display size corresponding to the first relative unit and converting the design size of the third type of element into display size corresponding to the second relative unit according to the second unit conversion logic through a second screen adaptation plug-in in a compilation stage of the interface logic code; after converting the design size of the to-be-displayed elements into display size, obtaining executable code by packaging; wherein the executable code is used for executing a runtime adaptation plug-in when being run, and the runtime adaptation plug-in is used for setting responsive breakpoints for different screen size types, monitoring a screen size change event, obtaining breakpoint updates triggered by the screen size change event, determining a specific responsive breakpoint matched by a current breakpoint according to a current screen size, and setting font size of a root element in processing of the specific responsive breakpoint; wherein 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 the screen size of a target screen is smaller than a screen size threshold value and is displayed in the constant manner when the screen size of the target screen is larger than the screen size threshold value; wherein the constant manner is a display manner of an element whose display size does not change with the screen size, and the scaling manner is a display manner of an element whose display size changes with the screen size; 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 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 can avoid unit conversion-related calculations at runtime, save runtime resources and computing time, and improve the operating efficiency of the application. Moreover, under the premise that the code follows the development specifications, the source design size can be set according to the presentation requirements of different elements to be displayed under different screen sizes, and the corresponding semantic size units can be assigned during coding. This can achieve the goal of keeping the display size of the element constant or changing with the screen size when the screen size is adjusted at runtime, or keeping the display size constant when the screen size does not exceed the screen size threshold, and changing with the screen size when the screen size exceeds the screen size threshold, so as to achieve the purpose of flexibly adjusting the display effect of the elements to be displayed.

[0019] Preferably, when screen changes are detected and scaling is enabled, if the screen size is less than the screen size threshold (such as less than 480px), proportional scaling is enabled, and the font size is calculated based on the current screen width, the source design size of the elements in the design draft, and the rem reference size; if the screen size is greater than the screen size threshold (such as greater than 480px), scaling is disabled, and the fixed display size of the font is determined based on the source design size of the elements in the design draft and the rem reference size to prevent the font from being too large on large screens (larger screens). This makes it possible to adapt to various screen sizes, and automatically scale at small screen sizes without disrupting the original layout. At the same time, users can see more content at large screen sizes, improving screen display efficiency. Furthermore, by performing unit conversion during the compilation phase and automatically converting units at runtime for screen size adaptation, a more flexible adaptive responsive layout solution is provided. BRIEF DESCRIPTION OF THE DRAWINGS

[0020] Figure 1 This is a processing flow chart of the code generation method provided in the first embodiment of the present application.

[0021] Figure 2 This is a schematic diagram of an example of elements being displayed in a constant manner under different screen sizes provided by the first embodiment of the present application.

[0022] Figure 3 This is a schematic diagram of an example of displaying elements in a scaled manner under different screen sizes provided by the first embodiment of the present application.

[0023] Figure 4 This is a processing flow chart of the second screen adaptation plug-in provided in the first embodiment of the present application.

[0024] Figure 5 This is a flowchart of the processing during operation in the display method provided in the first embodiment of the present application.

[0025] Figure 6 This is a processing flow chart of the display method provided in the second embodiment of the present application.

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

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

[0028] Figure 9 This is a structural block diagram of the electronic device provided in this application. DETAILED DESCRIPTION

[0029] In order to enable those skilled in the art to better understand the technical solutions of this application, the following clearly and completely describes this application in conjunction with the drawings in the embodiments of this application. However, this application can be implemented in many other ways different from the following description. Therefore, based on the embodiments provided in this application, all other embodiments obtained by those skilled in the art without creative work should fall within the scope of protection of this application.

[0030] It should be noted that the terms "first", "second", "third", etc. in the claims, description and drawings of the present application are used to distinguish similar objects and are not used to describe a specific order or sequence. The data used in this way are interchangeable where appropriate, so that the embodiments of the present application described herein can be implemented in a sequence other than that illustrated or described herein. In addition, the terms "including", "having" and their variations are intended to cover non-exclusive inclusions. For example, a process, method, system, product or device that includes a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0031] In order to facilitate understanding of the various embodiments of the present application, the application background of the embodiments is described.

[0032] An application, or application program, is a software program designed for specific needs, intended to help users complete specific tasks or provide specific services. In this embodiment, an application refers to an application with a visual interface. The application can run on different types of electronic devices and present the application's visual interface through the electronic device or the screen it controls. Electronic devices include, but are not limited to, smart car devices, computers, laptops, smartphones, tablets, smart home devices, smart wearable devices, PDAs, gaming devices, etc., or any combination of the foregoing devices.

[0033] Before developing an application, a design draft must be created based on the application's requirements. This draft includes UI (User Interface) parameters, such as the dimensions of each element in the UI layout and the size of the front, back, left, and right margins, as well as the units used for each dimension (hereinafter referred to as "units"). For example, the units for a dimension parameter might be logical pixels ('px'). If an element's dimension parameter is 100px, it means its width is 100 logical pixels. During development, developers implement the design based on the draft to create an application that runs on electronic devices. The same application, developed based on the same design, may run on multiple different device types, each of which can display the application on different screen sizes. For example, the same application may run on both a smartphone and a tablet. Furthermore, the screen size of the device displaying the application may change during the application's operation. For example, folding or unfolding a foldable screen may cause the screen size (especially the screen width) to shrink or expand. Similarly, adjusting the browser window (stretching or shrinking) may cause the screen size of the application to expand or shrink accordingly. Therefore, it is necessary to provide an adaptation function so that the application can be presented with a display effect suitable for the screen size.

[0034] It should be noted that the information disclosed above is only used to help understand the present application and is not intended to constitute prior art known to ordinary technicians in this field.

[0035] The embodiments of the present application provide a code generation method, a display method, an apparatus, an electronic device, a computer-readable storage medium, and a program product. The purpose is to be able to set the source design size according to the presentation requirements of different elements to be displayed under different screen sizes and assign corresponding size units during encoding, under the premise that the code complies with development specifications, and to convert the source design size of the elements according to the unit conversion logic corresponding to each type of element during the compilation phase; and to monitor screen size change events at runtime and control different types of elements to be displayed to maintain a constant display size or change with the screen size. The display size can also be kept constant when the screen size does not exceed the screen size threshold, and change with the screen size when the screen size exceeds the screen size threshold; thereby achieving the purpose of flexibly adjusting the display effect of the elements to be displayed and realizing a more flexible adaptive responsive layout.

[0036] Example 1 The first embodiment of the present application provides a code generation method, which is as follows: Figures 1 to 5 The code generation method is described. Figure 1 The code generation method shown includes: steps S101 to S104.

[0037] Step S101: obtaining design data of elements to be displayed in a design draft of an application, setting design dimensions and corresponding source dimension units of each element to be displayed according to the design data and development specifications corresponding to unit conversion logic, and obtaining application code containing the elements to be displayed; wherein the source dimension units corresponding to the design dimensions of a first category of elements to be displayed are represented by a first unit identifier, the source dimension units corresponding to the design dimensions of a second category of elements to be displayed are represented by a second unit identifier, and the source dimension units corresponding to the design dimensions of a third category of elements to be displayed are represented by a third unit identifier; Step S102: For the elements to be displayed included in the cascading style sheet code in the application code, during the compilation phase of the cascading style sheet code, a first screen adaptation plug-in is used to convert the design size of the second-category elements into a display size corresponding to the first relative unit, and the design size of the third-category elements into a display size corresponding to the second relative unit according to a first unit conversion logic. Step S103: For the elements to be displayed included in the interface logic code in the application code, during the compilation phase of the interface logic code, using a second screen adaptation plug-in, according to a second unit conversion logic, converts the design size of the second-category elements into a display size corresponding to the first relative unit, and converts the design size of the third-category elements into a display size corresponding to the second relative unit; Step S104: After converting the design size of the element to be displayed into the display size, the executable code is packaged and obtained; wherein, when the executable code is run, the 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, obtain breakpoint updates triggered by screen size change events, determine a specific responsive breakpoint that the current breakpoint matches based on the current screen size, and set the font size of the root element when processing the specific responsive breakpoint; When the executable code is executed, the first type of elements among the elements to be displayed are displayed in a constant manner, and the second type of elements among the elements to be displayed are displayed in a scaled manner; the third type of elements among the elements to be displayed are displayed in a scaled manner when the screen size of the target screen is smaller than a screen size threshold, and are displayed in a 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 in which the display size of the elements does not change with the change of the screen size; and the scaled manner is a display manner in which the display size of the elements changes with the change of the screen size; Among them, the first type of elements are any of the following types of elements: text type, image type, control type included in a specific function page; the second type of elements are outer containers that wrap the specific function page.

[0038] In this embodiment, the screen can refer to a display area on a display device where an application is presented. For example, the screen can refer to a visual area in a browser for rendering a page, such as a CSS (Cascading Style Sheets) viewport. For another example, the screen can be a full screen area of a screen where an application is presented. The target screen refers to a target display area where the element to be displayed is displayed.

[0039] Specifically, the element to be displayed refers to an interface element of an application. After the application code is compiled and built / packaged, an application program (i.e., an application) that can actually run on an electronic device is generated. The application code follows a series of development specifications in the formation stage (e.g., the coding stage). The development specifications define specifications corresponding to the unit conversion logic. The development specification refers to a standard and / or rule for guiding the development process. The unit conversion logic refers to processing logic for converting a source design size of an element into a display size. That is, in the coding stage of the application code, according to the development specification corresponding to the unit conversion logic, the value and unit of the source design size of each element to be displayed on the screen are set according to the requirements of the design draft. In the compilation stage of the application code, the source design size is converted into the display size according to the unit conversion logic, and the value and unit of the display size are obtained.

[0040] Specifically, whether an element is implemented as a first-category element, a second-category element, or a third-category element can be determined based on the application's interface presentation and interaction requirements. The element's scaling properties can be identified in the design draft through annotations, indicating whether the element is designed as a first-category element, a second-category element, or a third-category element. Therefore, during the coding phase, the element's size and corresponding size units can be set based on the element's scaling properties and development specifications corresponding to the unit conversion logic. When generating application code during the coding phase, semantic size units can be used to represent the source size units corresponding to different types of elements. The scaling properties of first-category elements are invariant to screen size (the size units for these elements can be identified by px), the scaling properties of second-category elements are variable with screen size (the size units for these elements can be identified by RPX), and the scaling properties of third-category elements are determined based on whether the current screen size is less than a screen size threshold (the size units for these elements can be identified by rpx). In implementation, the first-category elements can be any of the following: text, images (such as icons), or controls contained within a specific functional page. Taking shopping applications as an example, the first type of element of the control type can be a control in the shopping cart component, such as a "checkout" control. For another example, for shopping applications, the first type of element of the text type can be the text information of the recommended product; the first type of element of the image type can be the image of the recommended product. Designing the image and / or text information of the recommended product as the first type of element, when used on a large screen size, can display more recommended products, make full use of the screen display space, and improve screen display efficiency. The second type of element can be an outer container that wraps a specific function page, for example, an outer div container or view component that wraps the structure and content of the shopping cart page. The above features can be combined with each other if there is no conflict. Through the flexible selection of the above-mentioned multiple size units, developers can freely control how the layout size should adapt to the screen.

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

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

[0043] In the encoding stage, semantic size units can be used to identify the source size units corresponding to the design sizes of various elements to be displayed, and in the subsequent compilation stage, corresponding unit conversions can be performed according to the semantics corresponding to the size unit identifiers. Specifically, the semantics of the first unit identifier represents a fixed element size, so after the unit conversion in the subsequent compilation stage, 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 represents that as the screen size is scaled and stretched, 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 represents that the element display mode 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.

[0044] For example, if 'px' is used as the first unit identifier in CSS or JSX code, unit conversion is not performed on the first type of element during compilation. 'px' is still used as the runtime size unit, indicating a fixed pixel unit for actual dimensions, such as a 1px border. For another example, if 'RPX' is used as the second unit identifier to indicate that "the display size always changes with screen size (e.g., zooming / stretching)", the unit is converted to 'vw'. For another example, if 'rpx' is used as the third unit identifier to indicate that "the display size is fixed when the screen size is above a threshold, and changes with screen size when the screen size is below a threshold" (i.e., zooming for small screens and fixed for large screens), the unit is converted to 'rem'.

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

[0046] By flexibly designing the scaling properties of elements, we can flexibly and more finely control the display effects of interface elements on different screen sizes, thereby providing an interface that better matches the screen size and improving operational efficiency. For example, the interface elements within the shopping cart component maintain a constant size, allowing users to click and operate more accurately and reducing the possibility of incorrect operation. The outer container of the shopping cart component is proportionally scaled, which maintains the visual consistency of the shopping cart interface on different screens and avoids the problem of inconsistent interface style caused by changes in screen size.

[0047] An example of a development specification corresponding to the unit conversion logic is as follows: For elements whose size does not change with the screen width, the unit of the source design size is identified by the first unit identifier, and the value of the source design size is not converted during the compilation phase. Specifically, 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'; such elements are the first type of elements; For elements whose specifications are not limited to screen size and always change with the screen width, the unit of the source design size is identified by the second unit identifier. During the compilation phase, unit conversion is performed for elements with the second unit identifier, specifically, conversion 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. Such elements belong to the second type of elements. The second unit identifier can be represented by 'RPX', 'Rpx', etc. For elements that adhere to screen adaptation principles, the source design dimensions are identified with a third-unit identifier. When the screen size is smaller than a threshold (such as 480px), the design is scaled proportionally. When the screen size is larger than the threshold (such as 480px), no scaling or stretching is performed. For example, during the compilation phase, elements with third-unit identifiers undergo unit conversion, specifically to 'rem'. Third-unit identifiers can be represented by symbols such as 'rpx' to distinguish them from second-unit identifiers. These elements are considered third-category elements. px represents the CSS logical pixel unit symbol. During actual rendering, the browser maps this to multiple physical pixels based on the device pixel ratio (DPR). The number of physical pixels is calculated as 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 actually occupies 100 × 3 = 300 physical pixels (widthwise). DPR stands for device pixel ratio.

[0048] Please refer to Figure 2 The figure shows a schematic diagram of elements displayed in a constant manner at different screen sizes, including example comparison interfaces for small and large target screen sizes. The recommended product list component displays product cards (Product 1, Product 2, and so on) at a fixed size, independent of screen size. Large screen sizes allow for more product cards to be displayed, improving screen display efficiency. Screen display efficiency measures the amount of content that can be displayed within a given display area.

[0049] Please refer to Figure 3The figure shows a schematic diagram of elements displayed in scaled mode at different screen sizes, including an exemplary comparison interface for a small screen size and a large screen size. The product cards displayed in the product list component of the store page are still displayed in a constant mode, while the "shopping cart element" component is displayed in a combination of constant and scaled modes. The outer container of the "shopping cart element" component, which encloses other controls within the component, is displayed in a scaled mode: when the screen size is small, the width of the outer container of the "shopping cart element" component is the screen width or the screen width minus the gap. When the screen size is large, the width of the outer container of the "shopping cart element" component remains the screen width or the screen width minus the gap. In other words, the width of the outer container of the component changes with the screen size. When the screen size is large, the width of the outer container of the component is wider. Other controls enclosed in the outer container of the component, such as the "shopping cart entry control," the "checkout trigger control," and the "shopping cart product summary information," are displayed in a constant mode, that is, the width of these controls remains the same for both large and small screen sizes. As a result, the "shopping cart elements" can be clearly displayed on the overall page on large screen sizes, keeping the interface beautiful and convenient for users to browse and operate.

[0050] Preferably, the scaling method includes: the width scaling ratio and height scaling ratio of the element before and after scaling are equal, i.e., proportional scaling. Specifically, displaying a third category of elements among the elements to be displayed on the target screen in a scaled manner includes: when the third category of elements are displayed in a scaled manner, the width scaling ratio and height scaling ratio of the third category of elements before and after scaling are equal; and displaying a second category of elements among the elements to be displayed in a scaled manner includes: the width scaling ratio and height scaling ratio of the second category of elements before and after scaling are equal. Proportional scaling ensures the appropriate size and layout of interface elements, allowing users to enjoy a comfortable visual and operational experience on screens of varying sizes. For example, users may visit a shopping website on screens of various sizes, and proportional scaling ensures that at least some elements of the page are displayed well on different devices, such as mobile phones, tablets, laptops, or desktop computers, without causing layout confusion 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.

[0051] This embodiment also provides a screen adaptation plug-in to convert the original 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 can be dynamically adjusted during the application runtime, specifically by using the runtime adaptation plug-in.

[0052] Among them, during the compilation stage, unit conversion processing is performed on the source design size of the element based on the unit conversion logic, including: the source design size unit corresponding to the design size of the first type of elements among the elements to be displayed is represented by a first unit identifier (such as 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 (such as px); and / or, the source design size unit corresponding to the design size of the second type of elements among the elements to be displayed is represented by a second unit identifier (such as 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 (such as vw, that is, 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 among the elements to be displayed is represented by a third unit identifier (such as 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 (such as rem). 'px' is a logical pixel; 'vw' is a percentage of the viewport width, enabling responsive web page layouts. The viewport width is the width of the page content display area, and device logical pixels can be used as the width unit for the viewport width. 'rem' represents sizes relative to the HTML root element. The HTML root element is the tag, the top-level element of the HTML document, and other elements reside within it. For example, at small screen sizes (i.e., below a threshold screen size), certain fonts and images scale proportionally with the screen width, while at large or widescreen sizes, these fonts and images are not further scaled. Therefore, these elements (i.e., third-category elements) are coded using rpx. The screen adaptation plugin converts these sizes to 'rem' during compilation. Furthermore, the font size of the root element can be dynamically set in the runtime adaptation plugin script to remain unchanged when the screen size exceeds a threshold, such as 480px. For another example, if the outer container of a shopping cart needs to scale with screen size, it can be coded as 750RPX, which the screen adaptation plugin converts to 750vw.

[0053] In this embodiment, corresponding screen adaptation plug-ins are provided for different types of code to perform the above-mentioned unit conversion process during the compilation phase in subsequent steps S102 and / or S103. The first screen adaptation plug-in performs the conversion for Cascading Style Sheets (CSS style files); the second screen adaptation plug-in performs the conversion for JavaScript / JSX-based interface logic code.

[0054] As described in step S102 , during the compilation phase of the cascading style code (such as the CSS style code), the first unit conversion logic is executed by the first screen adaptation plug-in to implement unit conversion.

[0055] Specifically, a first screen adaptation plug-in can be executed by a build tool processing the CSS file to run the first unit conversion logic. The first screen adaptation plug-in includes performing the following processing to traverse and parse the CSS style code, and if 'rpx' is matched, the'rem' can be converted according to the following formula: rem quantity = pixels / rootValue; where rem quantity is the conversion result, pixels is the source design size, and rootValue is the reference value of the rem unit.

[0056] If 'RPX' is matched, the 'vw' is converted according to the following formula: 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.

[0057] If a specific style matches the selector blacklist, the specific style is skipped and not converted. If it is determined that the CSS style code is from a dependent library according to the file path, it is determined that the style code is from a third-party library, and the unit conversion is performed according to the independent conversion strategy set for the third-party library.

[0058] Specifically, one embodiment includes: the element to be displayed is an element in the Cascading Style Code (CSS style file); in the compilation process of the Cascading Style Code or after compilation and before packaging, the design size of the second type of element is converted into a display size corresponding to a first relative unit by a first screen adaptation plug-in according to a first unit conversion logic, and / or 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 a first unit conversion logic. Wherein, the first unit conversion logic includes conversion logic defined by any of the following parameters: pre-defined properties that need to be converted, selectors that need to be forcibly converted, conversion destination units for third-party modules that need to be forcibly converted, and conversion destination units refer to the size units corresponding to the conversion result, such as 'vw', 'vh', and'rem'. Through the above parameters, fine-grained unit conversion control at the module level can be achieved. Further, other related parameters can be used to define the first unit conversion logic, including specifying conversion accuracy, specifying reference parameters for conversion destination units, defining non-conversion selectors, specifying design reference width, marking differential treatment of dependent packages (node_modules, npm packages and related dependencies), directly replacing original values, setting unit conversion marks for elements in media queries, etc.

[0059] The first screen adaptation plug-in can filter out elements that need unit conversion through regular matching and multi-layer filtering mechanisms to ensure that only target content is converted. For example, it uses predefined properties that need unit conversion, propList, CSS selector blacklists (for example, selectors that need to be forced to convert units are whitelisted, and selectors that do not convert are blacklisted), node_modules (module level) blacklists (for example, related dependency packages that need to be forced to convert units are whitelisted, and dependency packages that do not convert are blacklisted) and other arbitrary parameters to define specific rules for regular matching and multi-layer filtering. Furthermore, the first unit conversion logic includes: based on the width of the design draft (that is, the element layout size on the design draft obtained during encoding), the unit conversion can be performed according to a preset formula to calculate the proportion of various elements relative to the design draft. Through the selector-level blacklist and whitelist mechanism at the module level, a refined unit conversion strategy can be implemented to manage the unit conversion of CSS styles from different sources.

[0060] Specifically, you can set the unit precision to be retained after the conversion. For example, the conversion formula of rpx → rem is: fixedVal = toFixed(pixels / rootValue, unitPrecision); Where fixedVal is the conversion result, pixels is the CSS logical pixel value in the corresponding application code, rootValue is the base size that determines the rem unit, that is, 1rem = how many pixels. This base value is configurable; unitPrecision is the unit precision retained after the conversion.

[0061] For example, the conversion formula of 'RPX' → vw is: fixedVal = toFixed((pixels / defaultClientWidth) * 100,unitPrecision); Where fixedVal is the conversion result, and defaultClientWidth corresponds to the design width and is configurable. This conversion formula is a special agreed-upon rule, including converting 750px directly to 100vw.

[0062] The unit conversion process during the compilation phase also includes outputting warnings for exceptions generated during the conversion process, such as style unit conversion failure, unsupported style, and invalid configuration detection. The converted code enters the packaging process to generate executable code.

[0063] As described in step S103, the second unit conversion logic is executed by the second screen adaptation plug-in in the interface logic code (such as JavaScript / JSX code) compilation stage to realize unit conversion.

[0064] Specifically, the JSX / JS file parses the JSX / JS code in the compilation stage to generate an AST (Abstract Syntax Tree). The second screen adaptation plug-in operates on the AST to realize unit conversion.

[0065] Specifically, one embodiment further includes that the element to be displayed is an element in interface logic code (JavaScript / JSX code); in the compilation process of the interface logic code or after compilation and before packaging, the design size of the second type of element is converted into a display size corresponding to the first relative unit according to the second unit conversion logic through the second screen adaptation plug-in, and / or the design size of the third type of element is converted into a display size corresponding to the second relative unit according to the second unit conversion logic through the second screen adaptation plug-in. Wherein, the second unit conversion logic includes: operating on the abstract syntax tree of the interface logic code to determine the element to be displayed that needs unit conversion; and converting the design size of the second type of element into a display size corresponding to the first relative unit according to the design reference width, and / or converting the design size of the third type of element into a display size corresponding to the second relative unit according to the design reference width. Wherein, the operation on the abstract syntax tree of 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: StringLiteral (string literal node), TemplateLiteral (template string literal node), TemplateElement (template string element type node), judging whether the node exists an event handler corresponding to the second screen adaptation plug-in, if yes, determining that the node is the element to be displayed that needs unit conversion; further, the second unit conversion logic further includes updating the abstract syntax tree after unit conversion of the element to be displayed that needs unit conversion.

[0066] In this implementation, the second screen adapter plugin's conversion goal is to automatically convert rpx, Rpx, and RPX units in strings to rem or vw during JavaScript / JSX compilation for mobile responsive layout adaptation. The application's source code (JavaScript / JSX) undergoes lexical analysis (performed by the Tokenizer) and generates tokens. Syntax analysis (performed by the Parser) generates an AST (Abstract Syntax Tree). After the syntax tree is generated, the AST undergoes traversal and transformation (Traversal & Transform) to execute the second screen adapter plugin. Finally, code is generated (Code Generator) and outputs the converted JS code. During this AST traversal and transformation process, the second screen adapter plugin defines an AST node visitor to monitor specific node types and performs unit conversion upon matching any matches. The conversion process includes: direct string replacement (i.e., direct assignment) for static strings; and / or, for dynamic expressions: constructing a new AST node, where the new unit 'vw' is a stringLiteral node, replacing the node currently undergoing unit conversion. The resulting new code enters the code generator / packaging process, where the code generator generates the executable code based on the modified AST. For example, for the second-category element using the dynamic expression `${width}Rpx`, the 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. For another example, the static string '100rpx' is replaced with '1rem'. All modifications are written back to the AST via path.replaceWith(), generating the new code after unit conversion. In the subsequent step S104, the new code enters the packaging process to generate the executable code.

[0067] Please refer to Figure 4 The processing flow of the second screen adaptation plug-in shown in the figure includes: S401, performing lexical analysis and syntax analysis on the source code to generate AST. S402, traversing each node of the AST. S403, for nodes of string literals, template string literals, and template string element types, checking whether a plug-in has registered a node listener. If so, execute S404. S404, execute the second unit conversion logic to perform unit conversion. Until all nodes are processed. S405, generate new code, including the node after unit conversion.

[0068] As described in step S104, after converting the design size of the element to be displayed to the display size, executable code is packaged. Specifically, a runtime adaptation plug-in is included to dynamically adjust the reference size to control the scaling basis. The runtime adaptation plug-in is automatically executed upon page load or viewport (i.e., screen) changes.

[0069] For example, after the browser loads HTML, it automatically executes the runtime adapter plug-in remAdaptor.ts, which can be used <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'。

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

[0071] 请参考图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，首次加载，窗口加载完成后执行一次，以确保图片加载完成。其中，视口可以理解为呈现应用的目标屏幕，视口宽度为屏幕尺寸。

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

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

[0074] 步骤S601，获取目标屏幕的屏幕尺寸和需在所述目标屏幕显示的待显示元素的信息；步骤S602，加载运行时适配插件，通过所述运行时适配插件针对不同屏幕尺寸类型设置响应式断点，监测屏幕尺寸变化事件，获取屏幕尺寸变化事件触发的断点更新，根据当前屏幕尺寸确定当前断点匹配到的特定响应式断点，在特定响应式断点的处理中设置根元素的字体尺寸；步骤S603，在所述目标屏幕以恒定方式显示所述待显示元素中的第一类元素，以缩放方式显示所述待显示元素中的第二类元素；并且，响应于所述目标屏幕的屏幕尺寸小于屏幕尺寸阈值，在所述目标屏幕以缩放方式显示所述待显示元素中的第三类元素；以及，响应于所述目标屏幕的屏幕尺寸大于所述屏幕尺寸阈值，在所述目标屏幕以恒定方式显示所述待显示元素的第三类元素；其中，所述恒定方式为展示尺寸不跟随屏幕尺寸变化而变化的元素显示方式；所述缩放方式为展示尺寸跟随屏幕尺寸变化而变化的元素显示方式；其中，所述待显示元素中的第二类元素以及第三类元素的展示尺寸，在所述待显示元素对应的应用代码的编译阶段基于单位转换逻辑针对元素的设计尺寸进行单位转换得到，包括：当所述待显示元素为应用代码中层叠样式代码包含的元素，在所述层叠样式代码的编译阶段通过第一屏幕适配插件根据第一单位转换逻辑，将所述第二类元素的设计尺寸转换为对应于第一相对单位的展示尺寸，并将所述第三类元素的设计尺寸转换为对应于第二相对单位的展示尺寸；当所述待显示元素为应用代码中界面逻辑代码包含的元素，在所述界面逻辑代码的编译阶段通过第二屏幕适配插件根据第二单位转换逻辑将所述第二类元素的设计尺寸转换为对应于第一相对单位的展示尺寸，将所述第三类元素的设计尺寸转换为对应于第二相对单位的展示尺寸；其中，所述元素的设计尺寸在所述应用代码形成阶段根据应用的设计稿中待显示元素的设计数据与所述单位转换逻辑对应的开发规范设置；其中，所述待显示元素中第一类元素的设计尺寸对应的源尺寸单位由第一单位标识表征，所述待显示元素中第二类元素的设计尺寸对应的源尺寸单位由第二单位标识表征；所述待显示元素中第三类元素的设计尺寸对应的源尺寸单位由第三单位标识表征；其中，所述第一类元素为以下任意类型的元素：文字类型、图片类型、包含于特定功能页面内的控件类型；所述第二类元素为包裹特定功能页面的外层容器。

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

[0076] 实施例三本申请第三实施例还提供与第一实施例相对应的代码生成装置。以下结合图7对所述装置进行说明，由于装置实施例基本相似于方法实施例，所以描述得比较简单，相关的技术特征的细节部分以及实现的效果请参见上述提供的方法实施例的对应说明即可。图7所示的代码生成装置包括：编码单元701，用于获取应用的设计稿中待显示元素的设计数据，根据所述设计数据以及单位转换逻辑对应的开发规范设置各待显示元素的设计尺寸及对应的源尺寸单位，得到包含所述待显示元素的应用代码；其中，所述待显示元素中第一类元素的设计尺寸对应的源尺寸单位由第一单位标识表征，所述待显示元素中第二类元素的设计尺寸对应的源尺寸单位由第二单位标识表征；所述待显示元素中第三类元素的设计尺寸对应的源尺寸单位由第三单位标识表征；第一编译单元702，用于针对所述应用代码中层叠样式代码包含的待显示元素，在所述层叠样式代码的编译阶段通过第一屏幕适配插件根据第一单位转换逻辑，将所述第二类元素的设计尺寸转换为对应于第一相对单位的展示尺寸，并将所述第三类元素的设计尺寸转换为对应于第二相对单位的展示尺寸；第二编译单元703，用于针对所述应用代码中界面逻辑代码包含的待显示元素，在所述界面逻辑代码的编译阶段通过第二屏幕适配插件根据第二单位转换逻辑将所述第二类元素的设计尺寸转换为对应于第一相对单位的展示尺寸，将所述第三类元素的设计尺寸转换为对应于第二相对单位的展示尺寸；可执行代码生成单元704，用于在将所述待显示元素的设计尺寸对应转换为展示尺寸之后，打包得到可执行代码；其中，所述可执行代码在被运行时，执行运行时适配插件，所述运行时适配插件用于：针对不同屏幕尺寸类型设置响应式断点，监测屏幕尺寸变化事件，获取屏幕尺寸变化事件触发的断点更新，根据当前屏幕尺寸确定当前断点匹配到的特定响应式断点，在特定响应式断点的处理中设置根元素的字体尺寸；其中，在所述可执行代码运行时所述待显示元素中第一类元素以恒定方式显示，所述待显示元素中第二类元素以缩放方式显示；所述待显示元素中第三类元素当目标屏幕的屏幕尺寸小于屏幕尺寸阈值以缩放方式，当目标屏幕的屏幕尺寸大于所述屏幕尺寸阈值则以恒定方式显示；其中，所述恒定方式为展示尺寸不跟随屏幕尺寸变化而变化的元素显示方式；所述缩放方式为展示尺寸跟随屏幕尺寸变化而变化的元素显示方式；其中，所述第一类元素为以下任意类型的元素：文字类型、图片类型、包含于特定功能页面内的控件类型；所述第二类元素为包裹特定功能页面的外层容器。

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

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

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

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

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

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

[0083] 实施例四本申请第四实施例还提供与第二实施例相对应的显示装置。以下结合图8对所述装置进行说明，由于装置实施例基本相似于方法实施例，所以描述得比较简单，相关的技术特征的细节部分以及实现的效果请参见上述提供的方法实施例的对应说明即可。图8所示的显示装置包括：获取单元801，用于获取目标屏幕的屏幕尺寸和需在所述目标屏幕显示的待显示元素的信息；插件运行单元802，用于加载运行时适配插件，通过所述运行时适配插件针对不同屏幕尺寸类型设置响应式断点，监测屏幕尺寸变化事件，获取屏幕尺寸变化事件触发的断点更新，根据当前屏幕尺寸确定当前断点匹配到的特定响应式断点，在特定响应式断点的处理中设置根元素的字体尺寸；显示单元803，用于在所述目标屏幕以恒定方式显示所述待显示元素中的第一类元素，以缩放方式显示所述待显示元素中的第二类元素；并且，响应于所述目标屏幕的屏幕尺寸小于屏幕尺寸阈值，在所述目标屏幕以缩放方式显示所述待显示元素中的第三类元素；以及，响应于所述目标屏幕的屏幕尺寸大于所述屏幕尺寸阈值，在所述目标屏幕以恒定方式显示所述待显示元素的第三类元素；其中，所述恒定方式为展示尺寸不跟随屏幕尺寸变化而变化的元素显示方式；所述缩放方式为展示尺寸跟随屏幕尺寸变化而变化的元素显示方式；其中，所述待显示元素中的第二类元素以及第三类元素的展示尺寸，在所述待显示元素对应的应用代码的编译阶段基于单位转换逻辑针对元素的设计尺寸进行单位转换得到，包括：当所述待显示元素为应用代码中层叠样式代码包含的元素，在所述层叠样式代码的编译阶段通过第一屏幕适配插件根据第一单位转换逻辑，将所述第二类元素的设计尺寸转换为对应于第一相对单位的展示尺寸，并将所述第三类元素的设计尺寸转换为对应于第二相对单位的展示尺寸；当所述待显示元素为应用代码中界面逻辑代码包含的元素，在所述界面逻辑代码的编译阶段通过第二屏幕适配插件根据第二单位转换逻辑将所述第二类元素的设计尺寸转换为对应于第一相对单位的展示尺寸，将所述第三类元素的设计尺寸转换为对应于第二相对单位的展示尺寸；其中，所述元素的设计尺寸在所述应用代码形成阶段根据应用的设计稿中待显示元素的设计数据与所述单位转换逻辑对应的开发规范设置；其中，所述待显示元素中第一类元素的设计尺寸对应的源尺寸单位由第一单位标识表征，所述待显示元素中第二类元素的设计尺寸对应的源尺寸单位由第二单位标识表征；所述待显示元素中第三类元素的设计尺寸对应的源尺寸单位由第三单位标识表征；其中，所述第一类元素为以下任意类型的元素：文字类型、图片类型、包含于特定功能页面内的控件类型；所述第二类元素为包裹特定功能页面的外层容器。

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

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

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

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

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

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

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

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

Claims

1. A code generation method, characterized in that: The method comprises: Obtaining design data of elements to be displayed in a design draft of an application, setting design dimensions and corresponding source dimension units of each element to be displayed according to the design data and development specifications corresponding to unit conversion logic, and obtaining application code containing the elements to be displayed; wherein the source dimension units corresponding to the design dimensions of a first category of elements to be displayed are represented by a first unit identifier, the source dimension units corresponding to the design dimensions of a second category of elements to be displayed are represented by a second unit identifier, and the source dimension units corresponding to the design dimensions of a third category of elements to be displayed are represented by a third unit identifier; For the elements to be displayed included in the cascading style code in the application code, during the compilation phase of the cascading style code, the first screen adaptation plug-in converts the design size of the second-category elements into a display size corresponding to the first relative unit, and converts the design size of the third-category elements into a display size corresponding to the second relative unit according to the first unit conversion logic; For the elements to be displayed included in the interface logic code in the application code, during the compilation phase of the interface logic code, using a second screen adaptation plug-in, according to a second unit conversion logic, the design size of the second-category elements is converted into a display size corresponding to the first relative unit, and the design size of the third-category elements is converted into a display size corresponding to the second relative unit; After converting the design size of the element to be displayed into the display size, packaging the code to obtain executable code; The executable code, when being run, executes a runtime adaptation plug-in, and the runtime adaptation plug-in 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 that the current breakpoint matches based on the current screen size, and set the font size of the root element when processing a specific responsive breakpoint; When the executable code is executed, the first type of elements among the elements to be displayed are displayed in a constant manner, and the second type of elements among the elements to be displayed are displayed in a scaled manner; the third type of elements among the elements to be displayed are displayed in a scaled manner when the screen size of the target screen is smaller than a screen size threshold, and are displayed in a 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 in which the display size of the elements does not change with the change of the screen size; and the scaled manner is a display manner in which the display size of the elements changes with the change of the screen size; Among them, the first type of elements are any of the following types of elements: text type, image type, control type included in a specific function page; the second type of elements are outer containers that wrap the specific function page.

2. The method according to claim 1, characterized in that When displaying the second category elements and the third category elements in the elements to be displayed in a zoomed manner, the method includes: When the second-category elements and the third-category elements are outer containers that wrap a specific function page and the specific function page contains multiple first-category elements; The runtime display size of the outer container after scaling is determined, and the number of the plurality of first-category elements to be displayed and their layout within the specific function page are determined according to the runtime display size.

3. The method according to claim 1, characterized in that The semantics of the first unit identifier represents 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 indicates that as the screen size is scaled and stretched, the first relative unit corresponding to the display size of the second type element after conversion is a runtime size unit relative to the viewport width; The semantics of the third unit identifier indicates that the element display mode is determined according to whether the screen size of the target screen is smaller than the screen size threshold. After conversion, the second relative unit corresponding to the display size of the third type element is the runtime size unit relative to the root element.

4. The method according to claim 1, wherein The first unit conversion logic includes conversion logic defined by any of the following parameters: Predefined properties that require unit conversion, selectors that require forced unit conversion, and conversion destination units for forced unit conversion of third-party modules.

5. The method according to claim 1, wherein The second unit conversion logic includes: An abstract syntax tree operation is performed on the interface logic code to determine elements to be displayed that require unit conversion; and The design size of the second type of element is converted into a display size corresponding to the first relative unit according to the design reference width, and the design size of the third type of element is converted into a display size corresponding to the second relative unit.

6. The method according to claim 5, characterized in that The abstract syntax tree operation on the interface logic code to determine the elements to be displayed that require unit conversion includes: Traversing each node of the abstract syntax tree, when the node is any of the following types of nodes: a string literal node, a template string literal node, or a 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 requires unit conversion; The second unit conversion logic further includes: updating the abstract syntax tree after performing unit conversion on the to-be-displayed elements that require unit conversion.

7. The method according to claim 5, characterized in that The design data of the element to be displayed in the design draft includes a scaling attribute of the element, where the scaling attribute indicates that the element to be displayed is any of the following types of elements: first-category elements, second-category elements, and third-category elements.

8. A display method, characterized in that: The method comprises: Obtaining the screen size of a target screen and information about elements to be displayed on the target screen; Loading a runtime adapter plug-in, setting responsive breakpoints for different screen size types through the runtime adapter plug-in, monitoring screen size change events, obtaining breakpoint updates triggered by the screen size change events, determining a specific responsive breakpoint that the current breakpoint matches based on the current screen size, and setting the font size of the root element during the processing of the specific responsive breakpoint; Displaying the first type of elements among the elements to be displayed on the target screen in a constant manner, and displaying the second type of elements among the elements to be displayed in a zoomed manner; and In response to the screen size of the target screen being smaller than a screen size threshold, displaying the third category of elements among the elements to be displayed on the target screen in a scaled manner; and in response to the screen size of the target screen being larger than the screen size threshold, displaying the third category of elements among the elements to be displayed on the target screen in a constant manner; The constant mode is an element display mode in which the display size does not change with the screen size; the scaling mode is an element display mode in which the display size changes with the screen size; Among them, the display sizes of the second and third category elements in the elements to be displayed are obtained by performing unit conversion on the design sizes of the elements based on the unit conversion logic during the compilation stage of the application code corresponding to the elements to be displayed, including: when the elements to be displayed are elements included in the cascading style code in the application code, during the compilation stage of the cascading style code, the design sizes of the second category elements are converted into display sizes corresponding to the first relative unit through the first screen adaptation plug-in according to the first unit conversion logic, and the design sizes of the third category elements are converted into display sizes corresponding to the second relative unit; when the elements to be displayed are elements included in the interface logic code in the application code, during the compilation stage of the interface logic code, the design sizes of the second category elements are converted into display sizes corresponding to the first relative unit through the second screen adaptation plug-in according to the second unit conversion logic, and the design sizes of the third category elements are converted into display sizes corresponding to the second relative unit; The design size of the element is set in the application code formation stage according to the development specifications corresponding to the design data of the element to be displayed in the design draft of the application and the unit conversion logic; wherein the source size unit corresponding to the design size of the first type of elements in the 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 in the 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 in the elements to be displayed is represented by a third unit identifier; Among them, the first type of elements are any of the following types of elements: text type, image type, control type included in a specific function page; the second type of elements are outer containers that wrap the specific function page.

9. A code generating device, characterized in that: include: an encoding unit configured to obtain design data of elements to be displayed in a design draft of an application, set design dimensions and corresponding source dimension units of each element to be displayed according to the design data and a development specification corresponding to a unit conversion logic, and obtain application code including the elements to be displayed; wherein the source dimension units corresponding to the design dimensions of a first category of elements to be displayed are represented by a first unit identifier, the source dimension units corresponding to the design dimensions of a second category of elements to be displayed are represented by a second unit identifier, and the source dimension units corresponding to the design dimensions of a third category of elements to be displayed are represented by a third unit identifier; a first compilation unit configured to, for elements to be displayed included in the cascading style sheet code in the application code, convert, using a first screen adaptation plug-in and according to a first unit conversion logic, the design size of the second-category elements into a display size corresponding to the first relative unit, and convert the design size of the third-category elements into a display size corresponding to the second relative unit during the compilation phase of the cascading style sheet code; a second compilation unit, configured to, for the elements to be displayed included in the interface logic code in the application code, convert, using a second screen adaptation plug-in according to a second unit conversion logic, the design size of the second-category elements into a display size corresponding to the first relative unit, and convert the design size of the third-category elements into a display size corresponding to the second relative unit during the compilation phase of the interface logic code; An executable code generation unit is configured to convert the design size of the element to be displayed into a display size and then package the resulting executable code; wherein when the executable code is executed, a runtime adaptation plug-in is executed, 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 the specific responsive breakpoint that the current breakpoint matches based on the current screen size, and set the font size of the root element when processing a specific responsive breakpoint; When the executable code is executed, the first type of elements among the elements to be displayed are displayed in a constant manner, and the second type of elements among the elements to be displayed are displayed in a scaled manner; the third type of elements among the elements to be displayed are displayed in a scaled manner when the screen size of the target screen is smaller than a screen size threshold, and in a 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 in which the display size of the elements does not change with the change of the screen size; and the scaled manner is a display manner in which the display size of the elements changes with the change of the screen size; Among them, the first type of elements are any of the following types of elements: text type, image type, control type included in a specific function page; the second type of elements are outer containers that wrap the specific function page.

10. An electronic device, characterized in that: include: a processor, a memory, and computer program instructions stored on the memory and executable on the processor; When the processor executes the computer program instructions, the method according to any one of claims 1 to 8 is implemented.

Images