Page layout method and device, storage medium and electronic equipment
By bridging the self-rendering engine ArkUI-X in the RN engine, automatic adaptation and rendering of page layouts across terminal devices is achieved, solving the problems of poor visual experience and high development and maintenance costs of cross-device page display, and improving iteration efficiency and user experience.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- HANGZHOU NETEASE CLOUD MUSIC TECH CO LTD
- Filing Date
- 2024-12-18
- Publication Date
- 2026-06-19
Smart Images
Figure CN122240102A_ABST
Abstract
Description
Technical Field
[0001] This disclosure relates to the field of page rendering technology, specifically to a page layout method, page layout device, storage medium, and electronic device. Background Technology
[0002] Different terminal devices require page displays adapted to their respective screen sizes. Two common solutions exist in the prior art.
[0003] One approach is to scale mobile apps to other screen sizes, such as running an iPhone app directly on an iPad. This results in a poorer visual experience and flawed interaction. For example, touch interactions on a mobile phone become difficult to operate or even unusable when scaled to a TV.
[0004] Another approach is to develop separate apps for different devices, such as an iPhone app and an iPad app. This approach has higher development costs and requires maintaining product lines across different devices, resulting in high manpower costs for development and maintenance. Furthermore, since the code cannot be reused across platforms, it can lead to inconsistent iteration cycles and schedules, resulting in significant differences in the user experience of the same product across different platforms.
[0005] It should be noted that the information disclosed in the background section above is only used to enhance the understanding of the background of this disclosure, and therefore may include information that does not constitute prior art known to those skilled in the art. Summary of the Invention
[0006] The purpose of this disclosure is to provide a page layout method, page layout device, storage medium, and electronic device, which aim to improve the reusability of UI layout data and thereby improve the iteration efficiency of multi-terminal business.
[0007] Other features and advantages of this disclosure will become apparent from the following detailed description, or may be learned in part from practice of this disclosure.
[0008] According to one aspect of this disclosure, a page layout method is provided, applied to an RN engine, comprising: acquiring UI layout data created by a user based on an RN layout component of the RN engine, and deploying the UI layout data to at least one terminal device; in response to a UI layout request sent by one of the terminal devices, invoking a target interface of a self-rendering engine to render a page using the self-rendering engine based on the UI layout data.
[0009] Optionally, before obtaining the UI layout data created by the user based on the RN layout component, the method further includes: extending the RN layout component, wherein the RN layout component includes one or more of the following: grid layout component, adaptive stretch layout, adaptive scaling layout, adaptive extension layout, and adaptive wrap layout component.
[0010] Optionally, extending the RN layout component includes: defining basic properties of the RN layout component; configuring glue code for bridging the RN engine and the self-rendering engine corresponding to the RN layout component based on the basic properties; and executing the glue code to construct a component instance of the RN layout component.
[0011] Optionally, the basic properties include event methods. When the RN layout component is a grid layout component, defining the basic properties of the RN layout component includes: configuring the grid parameters corresponding to the grids of each size level of the display interface; and configuring the positioning parameters of the UI elements in the grid.
[0012] Optionally, the UI layout data includes configuration information of the same UI element in each of the terminal devices, and the method further includes: in response to a UI layout request sent by one of the terminal devices, calling the target interface of the self-rendering engine to render the UI element using the self-rendering engine according to the configuration information matched with the terminal device.
[0013] Optionally, the UI layout data also includes event handling logic for the same page event in each of the terminal devices, and the method further includes: in response to a UI layout request sent by one of the terminal devices, calling the target interface of the self-rendering engine to utilize the self-rendering engine to execute page events according to the event handling logic matched with the terminal device.
[0014] Optionally, before calling the target interface of the self-rendering engine, the method further includes: bridging the UI component layer in the RN engine with the self-rendering engine through the target interface; the self-rendering engine is ArkUI-X, and the target interface is the C-API interface of ArkUI-X.
[0015] According to a second aspect of this disclosure, a page layout apparatus is provided, applied to an RN engine, comprising: a development module for acquiring UI layout data created by a user based on an RN layout component of the RN engine, and deploying the UI layout data to at least one terminal device; and a rendering module for, in response to a UI layout request sent by one of the terminal devices, calling a target interface of a self-rendering engine to render a page using the self-rendering engine based on the UI layout data.
[0016] According to a third aspect of this disclosure, a computer-readable storage medium is provided having a computer program stored thereon, which, when executed by a processor, implements the page layout method as described in the above embodiments.
[0017] According to a fourth aspect of the present disclosure, an electronic device is provided, characterized in that it includes: one or more processors; and a storage device for storing one or more programs, which, when executed by the one or more processors, cause the one or more processors to implement the page layout method as described in the above embodiments.
[0018] The exemplary embodiments disclosed herein may have some or all of the following beneficial effects:
[0019] In the technical solutions provided by some embodiments of this disclosure, by bridging the RN engine and the self-rendering engine, the one-to-many (one-time development for multiple deployments, meaning that the same UI code can be deployed to multiple types of devices) capability of the self-rendering engine is ported to the RN framework, thereby improving the coverage scenarios of the RN framework. This enables users to create a UI layout data based on the RN layout component of the RN engine and deploy it to different terminal devices. The layout of each device can be automatically adapted to complete the page rendering, thereby improving the iteration efficiency of multi-terminal business and user experience.
[0020] It should be understood that the above general description and the following detailed description are exemplary and explanatory only, and are not intended to limit this disclosure. Attached Figure Description
[0021] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this disclosure and, together with the description, serve to explain the principles of this disclosure. It is obvious that the drawings described below are merely some embodiments of this disclosure, and those skilled in the art can obtain other drawings based on these drawings without any inventive effort. In the drawings:
[0022] Figure 1 The illustration is a flowchart of a page layout method according to an exemplary embodiment of the present disclosure;
[0023] Figure 2 This schematic diagram illustrates an interface showing an adaptive grid layout effect in an exemplary embodiment of the present disclosure.
[0024] Figure 3 This is a schematic diagram of an interface illustrating an adaptive stretchable layout effect in an exemplary embodiment of the present disclosure;
[0025] Figure 4 This is a schematic diagram of an interface showing an adaptive scaling layout effect in an exemplary embodiment of the present disclosure;
[0026] Figure 5 This is a schematic diagram of an interface illustrating an adaptive extended layout effect in an exemplary embodiment of the present disclosure.
[0027] Figure 6 This is a schematic diagram of an interface showing an adaptive line-wrap layout effect in an exemplary embodiment of the present disclosure;
[0028] Figure 7 This is a schematic diagram illustrating the effect of a polymorphic component layout in an exemplary embodiment of the present disclosure;
[0029] Figure 8 This illustration is a schematic diagram of an event comparison after interaction normalization in an exemplary embodiment of the present disclosure;
[0030] Figure 9 This schematic diagram illustrates the composition of a page layout apparatus according to an exemplary embodiment of the present disclosure;
[0031] Figure 10 This schematic diagram illustrates a computer-readable storage medium according to an exemplary embodiment of the present disclosure;
[0032] Figure 11 The schematic diagram illustrates the structure of a computer system of an electronic device according to an exemplary embodiment of the present disclosure. Detailed Implementation
[0033] Exemplary embodiments will now be described more fully with reference to the accompanying drawings. However, these exemplary embodiments can be implemented in many forms and should not be construed as limited to the examples set forth herein; rather, these embodiments are provided so that this disclosure will be more thorough and complete, and will fully convey the concept of the exemplary embodiments to those skilled in the art.
[0034] Furthermore, the described features, structures, or characteristics can be combined in any suitable manner in one or more embodiments. Numerous specific details are provided in the following description to give a thorough understanding of embodiments of this disclosure. However, those skilled in the art will recognize that the technical solutions of this disclosure can be practiced without one or more of the specific details, or other methods, components, apparatuses, steps, etc., can be employed. In other instances, well-known methods, apparatuses, implementations, or operations are not shown or described in detail to avoid obscuring various aspects of this disclosure.
[0035] The block diagrams shown in the accompanying drawings are merely functional entities and do not necessarily correspond to physically independent entities. That is, these functional entities can be implemented in software, in one or more hardware modules or integrated circuits, or in different network and / or processor devices and / or microcontroller devices.
[0036] The flowcharts shown in the accompanying drawings are merely illustrative and do not necessarily include all content and operations / steps, nor do they necessarily have to be performed in the described order. For example, some operations / steps can be broken down, while others can be combined or partially combined; therefore, the actual execution order may change depending on the specific circumstances.
[0037] Different terminal devices require page displays adapted to their respective screen sizes. Two common solutions exist in the prior art.
[0038] One approach is to scale mobile apps to other screen sizes, such as running an iPhone app directly on an iPad. This results in a poorer visual experience and flawed interaction. For example, touch interactions on a mobile phone become difficult to operate or even unusable when scaled to a TV.
[0039] Another approach is to develop separate apps for different devices, such as an iPhone app and an iPad app. This approach has higher development costs and requires maintaining product lines across different devices, resulting in high manpower costs for development and maintenance. Furthermore, since the code cannot be reused across platforms, it can lead to inconsistent iteration cycles and schedules, resulting in significant differences in the user experience of the same product across different platforms.
[0040] Therefore, this disclosure provides a page layout method that portes the "develop once, adapt to multiple platforms" solution in ArkUI to the RN framework, thereby enabling a single code program to automatically adapt to the layout of each device after being deployed to various platforms.
[0041] The implementation details of the technical solutions of the embodiments of this disclosure are described in detail below.
[0042] Figure 1 This schematically illustrates a flowchart of a page layout method according to an exemplary embodiment of this disclosure. Figure 1 As shown, the page layout method includes steps S101 to S103:
[0043] Step S101: Obtain UI layout data created by the user based on the RN layout component of the RN engine, and deploy the UI layout data to at least one terminal device;
[0044] Step S102: In response to a UI layout request sent by one of the terminal devices, the target interface of the self-rendering engine is invoked to render the page using the self-rendering engine based on the UI layout data.
[0045] In the technical solutions provided by some embodiments of this disclosure, by bridging the RN engine and the self-rendering engine, the one-to-many (one-time development for multiple deployments, meaning that the same UI code can be deployed to multiple types of devices) capability of the self-rendering engine is ported to the RN framework, thereby improving the coverage scenarios of the RN framework. This enables users to create a UI layout data based on the RN layout component of the RN engine and deploy it to different terminal devices. The layout of each device can be automatically adapted to complete the page rendering, thereby improving the iteration efficiency of multi-terminal business and user experience.
[0046] The following will describe in more detail each step of the page layout method in this example embodiment with reference to the accompanying drawings and embodiments.
[0047] In step S101, UI layout data created by the user based on the RN layout component of the RN engine is obtained, and the UI layout data is deployed to at least one terminal device.
[0048] Specifically, the RN engine includes pre-defined RN layout components, which users can use to create UI layout data.
[0049] In one embodiment of this disclosure, before obtaining UI layout data created by the user based on the RN layout component, the method further includes: extending the RN layout component, wherein the RN layout component includes one or more of the following: a grid layout component, an adaptive stretch layout, an adaptive scale layout, an adaptive extend layout, and an adaptive wrap layout component.
[0050] RN, or React Native, is an open-source framework developed by Facebook for building mobile applications. It allows developers to write mobile applications using JavaScript and React, and these applications can run on multiple platforms, such as iOS and Android. React Native uses a component-based approach similar to web development, making it easier for developers to create mobile applications across platforms.
[0051] The process of extending the RN layout component includes: defining basic properties of the RN layout component; configuring glue code that bridges the RN engine and the self-rendering engine corresponding to the RN layout component based on the basic properties; and executing the glue code to construct a component instance of the RN layout component.
[0052] Specifically, first define the basic properties of the RN layout component. The basic properties include one or more of the following: component name, tag (unique ID), attributes, and event methods.
[0053] Next, configure the glue code. First, write the configuration file needed to generate the component's glue code based on its basic properties. Then, use a codegen tool as input to input the configuration file and output the glue code for the RN layout component. Glue code refers to the code that bridges the gap between JavaScript and native code. After the RN engine executes the glue code (primarily building a C++ abstract component instance), the JavaScript layer can directly call the C++ abstract component's interface and properties using JSI, achieving communication between JavaScript and native code. Integrating the glue code and the JavaScript-side component interface enables cross-engine communication, implements the C++ component interface for the glue code, and binds it to the actual native UI component object.
[0054] In one embodiment of this disclosure, the RN layout component includes one or more of the following: a grid layout component, an adaptive stretch layout, an adaptive scaling layout, an adaptive extension layout, and an adaptive wrapping layout component.
[0055] The basic attributes include event methods. When the RN layout component is a grid layout component, the definition of the basic attributes of the RN layout component includes: configuring the grid parameters corresponding to the grid for each size level of the display interface; and configuring the positioning parameters of the UI elements in the grid.
[0056] Specifically, the first step is to define the grid. The display interface is then categorized, for example, into mini screen, small screen, medium screen, large screen, and extra-large screen. Then, corresponding grid parameters are set for different display levels, such as the number of columns, spacing, and arrangement direction (horizontal or vertical). This results in a grid divided according to these parameters.
[0057] After defining the grid, define the positioning data of the UI elements within the grid. For example, this could be the number of grid cells occupied by the width of the UI element, the offset from the previous UI element, and the sequence number of the UI element.
[0058] In addition, RN layout components can also be adaptive stretch layouts and adaptive scale layouts, meaning that UI elements can be proportionally enlarged or shrunk to stretch or scale the layout based on the size of the display screen. RN layout components can also be adaptive extend layouts and adaptive wrap layouts, meaning that the size of the UI elements remains constant, but the size of the visible area changes with the screen size, allowing for horizontal list extension or line wrapping.
[0059] In step S102, in response to a UI layout request sent by one of the terminal devices, the target interface of the self-rendering engine is invoked to render the page using the self-rendering engine based on the UI layout data.
[0060] Specifically, before calling the target interface of the self-rendering engine, the method further includes: bridging the UI component layer in the RN engine with the self-rendering engine through the target interface; the self-rendering engine is ArkUI-X, and the target interface is the C-API interface of ArkUI-X.
[0061] ArkUI is the UI framework for the HarmonyOS system, based on a self-rendering engine, with its core written in C++. ArkUI-X is a solution that extends the HarmonyOS ArkUI framework to run on multiple platforms, enabling HarmonyOS programs to run across platforms.
[0062] The UI component layer in the React Native engine is called Fabric, which aims to share the logic implementation of UI components such as layout, UI events, and interface refresh across different platforms.
[0063] By bridging the React Native (RN) engine with the self-rendering engine ArkUI, the cross-platform rendering capabilities of ArkUI can be ported to the RN framework. This improves the RN framework's coverage, thereby enhancing the iteration efficiency and user experience of multi-platform applications. It enables a single codebase to automatically adapt to the layout of each device after deployment. Specifically, based on UI layout data and using specific calculation rules, the appropriate position and size of UI elements on the viewport are calculated.
[0064] Figure 2 This schematic diagram illustrates an interface showing an adaptive grid layout effect in an exemplary embodiment of this disclosure. Figure 2 The image shows the layout of a weather app on different screen sizes, including small-screen phones, medium-screen tablets, and large-screen laptops.
[0065] Figure 3 This is a schematic diagram of an interface illustrating an adaptive stretchable layout effect in an exemplary embodiment of this disclosure. For example... Figure 3 As shown, UI elements on a small screen are scaled proportionally to the size and spacing of the larger screen.
[0066] Figure 4 This is a schematic diagram illustrating an adaptive scaling layout effect in an exemplary embodiment of the present disclosure. Figure 4 As shown, in the "large image browsing" scenario, UI elements are scaled proportionally to the appropriate size based on the screen's width and height.
[0067] Figure 5 This is a schematic diagram illustrating an adaptive extended layout effect in an exemplary embodiment of the present disclosure. Figure 5 As shown, in the "horizontal list" scenario, the size of the UI elements remains unchanged, while the width of the container changes the size of the visible area as the screen size changes.
[0068] Figure 6 This is a schematic diagram illustrating an adaptive line-wrap layout effect in an exemplary embodiment of the present disclosure. Figure 6 As shown, in a "waterfall" layout, UI elements are automatically arranged to wrap lines based on the screen width.
[0069] In one embodiment of this disclosure, the UI layout data includes configuration information of the same UI element in each of the terminal devices, and the method further includes: in response to a UI layout request sent by one of the terminal devices, calling the target interface of the self-rendering engine to render the UI element using the self-rendering engine according to the configuration information matched with the terminal device.
[0070] Specifically, different attribute resources can be configured for different terminal devices. The configuration information corresponding to the device is consumed in the ArkUI-X and RN bridging part and connected to the polymorphic component interface of ArkUI, so that RN components can present different forms on different devices.
[0071] Figure 7 This is a schematic diagram illustrating the effect of a polymorphic component layout in an exemplary embodiment of this disclosure. (See reference...) Figure 7 As shown, taking the button component as an example, different button parameters can be configured on mobile phones, TVs, and watches, such as rounded corners, style type, margins, and fonts, so that the same component can meet the style requirements of multiple devices.
[0072] In this way, the same UI information can have different configuration information on different terminal devices, thus presenting different rendering effects and improving the diversity of page rendering.
[0073] In one embodiment of this disclosure, the UI layout data further includes event handling logic for the same page event in each of the terminal devices, and the method further includes: in response to a UI layout request sent by one of the terminal devices, calling the target interface of the self-rendering engine to utilize the self-rendering engine to execute page events according to the event handling logic matched with the terminal device.
[0074] Figure 8 This illustration schematically depicts an event mapping diagram after interaction normalization in an exemplary embodiment of this disclosure. For example... Figure 8 As shown, keyboard, mouse, and touchscreen events are normalized, so the business layer only needs to focus on events such as click, long press, pinch, and drag, without needing to pay attention to device information such as keyboard, mouse, and touchscreen, thus smoothing out the differences between event objects and event processing logic under different devices.
[0075] Based on the above methods, normalizing the interaction of events can improve the consistency of functions across multiple platforms, thereby enhancing the user experience.
[0076] The page layout method disclosed herein can port the one-to-many capabilities in ArkUI to the RN framework, thereby improving the coverage scenarios of the RN framework. On the one hand, it can realize the ability to deploy to multiple platforms with a single code, improve code reusability, improve the iteration efficiency of multiple platforms and improve human efficiency. On the other hand, it can improve the consistency of functions across multiple platforms and improve the user experience.
[0077] Figure 9 This schematic diagram illustrates the composition of a page layout apparatus in an exemplary embodiment of the present disclosure, such as... Figure 9 As shown, the page layout device 900 may include a development module 901 and a rendering module 902. Wherein:
[0078] Development module 901 is used to obtain UI layout data created by the user based on the RN layout component of the RN engine, and to deploy the UI layout data to at least one terminal device;
[0079] The rendering module 902 is configured to respond to a UI layout request sent by the terminal device by calling the target interface of the self-rendering engine to render the page using the self-rendering engine based on the UI layout data.
[0080] According to an exemplary embodiment of this disclosure, the development module 901 further includes an extension module, which is used to extend the RN layout component before obtaining UI layout data created by the user based on the RN layout component. The RN layout component includes one or more of the following: grid layout component, adaptive stretch layout, adaptive scaling layout, adaptive extension layout, and adaptive wrapping layout component.
[0081] According to an exemplary embodiment of this disclosure, the extension module is further configured to define basic properties of the RN layout component; configure glue code for bridging the RN engine and the self-rendering engine corresponding to the RN layout component based on the basic properties; and execute the glue code to construct a component instance of the RN layout component.
[0082] According to an exemplary embodiment of this disclosure, the basic attributes include an event method. When the RN layout component is a grid layout component, the extension module is further configured to configure the grid parameters of the grid corresponding to each size level of the display interface; and configure the positioning parameters of the UI elements in the grid.
[0083] According to an exemplary embodiment of this disclosure, the UI layout data includes configuration information of the same UI element in each of the terminal devices. The rendering module 902 is further configured to respond to a UI layout request sent by one of the terminal devices by calling the target interface of the self-rendering engine to render the UI element using the self-rendering engine based on the configuration information matched with the terminal device.
[0084] According to an exemplary embodiment of this disclosure, the UI layout data further includes event handling logic for the same page event in each of the terminal devices, and the rendering module 902 is further configured to, in response to a UI layout request sent by one of the terminal devices, call the target interface of the self-rendering engine to utilize the self-rendering engine to execute page events according to the event handling logic matched with the terminal device.
[0085] According to an exemplary embodiment of this disclosure, before calling the target interface of the self-rendering engine, the development module 901 is further configured to bridge the UI component layer in the RN engine with the self-rendering engine through the target interface; the self-rendering engine is ArkUI-X, and the target interface is the C-API interface of ArkUI-X.
[0086] The specific details of each module in the page layout device 900 described above have been described in detail in the corresponding page layout method, so they will not be repeated here.
[0087] It should be noted that although several modules or units for the device used to perform actions have been mentioned in the detailed description above, this division is not mandatory. In fact, according to embodiments of this disclosure, the features and functions of two or more modules or units described above can be embodied in one module or unit. Conversely, the features and functions of one module or unit described above can be further divided and embodied by multiple modules or units.
[0088] In an exemplary embodiment of this disclosure, a storage medium capable of implementing the above-described method is also provided. Figure 10 This schematic diagram illustrates a computer-readable storage medium according to an exemplary embodiment of the present disclosure, such as... Figure 10 As shown, a program product 1000 for implementing the above-described method according to an embodiment of the present disclosure is described. This product may employ a portable compact disc read-only memory (CD-ROM) and include program code, and may run on a terminal device, such as a mobile phone. However, the program product of the present disclosure is not limited thereto. In this document, the readable storage medium may be any tangible medium containing or storing a program that may be used by or in conjunction with an instruction execution system, apparatus, or device.
[0089] In an exemplary embodiment of this disclosure, an electronic device capable of implementing the above-described method is also provided. Figure 11 The schematic diagram illustrates the structure of a computer system of an electronic device according to an exemplary embodiment of the present disclosure.
[0090] It should be noted that, Figure 11The computer system 1100 of the electronic device shown is merely an example and should not impose any limitation on the functionality and scope of use of the embodiments disclosed herein.
[0091] like Figure 11 As shown, the computer system 1100 includes a Central Processing Unit (CPU) 1101, which can perform various appropriate actions and processes based on programs stored in Read-Only Memory (ROM) 1102 or programs loaded from storage section 1108 into Random Access Memory (RAM) 1103. The RAM 1103 also stores various programs and data required for system operation. The CPU 1101, ROM 1102, and RAM 1103 are interconnected via a bus 1104. An Input / Output (I / O) interface 1105 is also connected to the bus 1104.
[0092] The following components are connected to I / O interface 1105: an input section 1106 including a keyboard, mouse, etc.; an output section 1107 including a cathode ray tube (CRT), liquid crystal display (LCD), etc., and speakers, etc.; a storage section 1108 including a hard disk, etc.; and a communication section 1109 including a network interface card such as a LAN (Local Area Network) card, modem, etc. The communication section 1109 performs communication processing via a network such as the Internet. A drive 1110 is also connected to I / O interface 1105 as needed. Removable media 1111, such as a disk, optical disk, magneto-optical disk, semiconductor memory, etc., are installed on drive 1110 as needed so that computer programs read from them can be installed into storage section 1108 as needed.
[0093] In particular, according to embodiments of this disclosure, the processes described below with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of this disclosure include a computer program product comprising a computer program carried on a computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via communication section 1109, and / or installed from removable medium 1111. When the computer program is executed by central processing unit (CPU) 1101, it performs various functions defined in the system of this disclosure.
[0094] It should be noted that the computer-readable medium shown in the embodiments of this disclosure can be a computer-readable signal medium or a computer-readable storage medium, or any combination of the two. A computer-readable storage medium can be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of a computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM), flash memory, optical fiber, portable compact disc read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In this disclosure, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. In this disclosure, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such transmitted data signals can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. The computer-readable signal medium can also be any computer-readable medium other than a computer-readable storage medium, which can send, propagate, or transmit a program for use by or in connection with an instruction execution system, apparatus, or device. The program code contained on the computer-readable medium can be transmitted using any suitable medium, including but not limited to wireless, wired, etc., or any suitable combination thereof.
[0095] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this disclosure. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in a block diagram or flowchart, and combinations of blocks in a block diagram or flowchart, may be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.
[0096] The units described in the embodiments of this disclosure can be implemented in software or hardware, and the described units can also be located in a processor. The names of these units do not necessarily limit the unit itself.
[0097] In another aspect, this disclosure also provides a computer-readable medium, which may be included in the electronic device described in the above embodiments; or it may exist independently and not assembled into the electronic device. The computer-readable medium carries one or more programs that, when executed by the electronic device, cause the electronic device to perform the methods described in the above embodiments.
[0098] It should be noted that although several modules or units for the device used to perform actions have been mentioned in the detailed description above, this division is not mandatory. In fact, according to embodiments of this disclosure, the features and functions of two or more modules or units described above can be embodied in one module or unit. Conversely, the features and functions of one module or unit described above can be further divided and embodied by multiple modules or units.
[0099] From the above description of the embodiments, those skilled in the art will readily understand that the exemplary embodiments described herein can be implemented by software or by combining software with necessary hardware. Therefore, the technical solutions according to the embodiments of this disclosure can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (such as a CD-ROM, USB flash drive, external hard drive, etc.) or on a network, including several instructions to cause a computing device (such as a personal computer, server, touch terminal, or network device, etc.) to execute the method according to the embodiments of this disclosure.
[0100] Other embodiments of this disclosure will readily occur to those skilled in the art upon consideration of the specification and practice of the invention disclosed herein. This disclosure is intended to cover any variations, uses, or adaptations of this disclosure that follow the general principles of this disclosure and include common knowledge or customary techniques in the art not disclosed herein.
[0101] It should be understood that this disclosure is not limited to the precise structures described above and shown in the accompanying drawings, and various modifications and changes can be made without departing from its scope. The scope of this disclosure is limited only by the appended claims.
Claims
1. A method of page layout, characterized by, Applied to the RN engine, including: Obtain UI layout data created by the user based on the RN layout component of the RN engine, and deploy the UI layout data to at least one terminal device; In response to a UI layout request sent by one of the terminal devices, the target interface of the self-rendering engine is invoked to render the page using the self-rendering engine based on the UI layout data.
2. The page layout method of claim 1, wherein, Before obtaining UI layout data created by the user based on the RN layout component, the method further includes: extending the RN layout component, wherein the RN layout component includes one or more of the following: grid layout component, adaptive stretch layout, adaptive scaling layout, adaptive extension layout, and adaptive wrap layout component.
3. The page layout method of claim 2, wherein, The extended RN layout component includes: Define the basic properties of RN layout components; Configure the glue code that bridges the RN engine and the self-rendering engine corresponding to the RN layout component according to the basic attributes; Execute the glue code to construct a component instance of the RN layout component.
4. The page layout method of claim 3, wherein, The basic properties include event methods. When the RN layout component is a grid layout component, the basic properties of the defined RN layout component include: Configure the display interface for each size level to correspond to the grid parameters of the grid; Configure the positioning parameters of UI elements within the grid.
5. The page layout method of claim 1, wherein, The UI layout data includes configuration information of the same UI element in each of the terminal devices, and the method further includes: In response to a UI layout request sent by one of the terminal devices, the target interface of the self-rendering engine is invoked to render UI elements using the self-rendering engine based on configuration information matching the terminal device.
6. The page layout method of claim 1, wherein, The UI layout data also includes event handling logic for the same page event on each of the terminal devices, and the method further includes: In response to a UI layout request sent by one of the terminal devices, the target interface of the self-rendering engine is invoked to utilize the self-rendering engine to execute page events according to the event handling logic matched with the terminal device.
7. The page layout method of claim 1, wherein, Before invoking the target interface of the self-rendering engine, the method further includes: The UI component layer in the React Native engine is bridged with the self-rendering engine through the target interface; the self-rendering engine is ArkUI-X, and the target interface is the C-API interface of ArkUI-X.
8. A page layout apparatus characterized by comprising: Applied to the RN engine, including: The development module is used to obtain UI layout data created by the user based on the RN layout component of the RN engine, and to deploy the UI layout data to at least one terminal device; The rendering module is used to respond to a UI layout request sent by the terminal device by calling the target interface of the self-rendering engine to render the page according to the UI layout data using the self-rendering engine.
9. A computer-readable storage medium having a computer program stored thereon, the program being executed by a processor to implement the page layout method as described in any one of claims 1 to 7.
10. An electronic device, comprising: include: One or more processors; A storage device for storing one or more programs, which, when executed by one or more processors, cause the one or more processors to implement the page layout method as described in any one of claims 1 to 7.