CN112052000A - Component multiplexing and rendering method and device - Google Patents
Component multiplexing and rendering method and device Download PDFInfo
- Publication number
- CN112052000A CN112052000A CN201910491774.1A CN201910491774A CN112052000A CN 112052000 A CN112052000 A CN 112052000A CN 201910491774 A CN201910491774 A CN 201910491774A CN 112052000 A CN112052000 A CN 112052000A
- Authority
- CN
- China
- Prior art keywords
- target
- attribute
- style
- source
- component
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Stored Programmes (AREA)
Abstract
The invention discloses a component rendering method, which comprises the following steps: acquiring a user interface component to be rendered; when the user interface component is determined to need conversion, converting the attribute of the user interface component into a target attribute; rendering the user interface component according to the target attribute. The invention also discloses a corresponding component multiplexing method and a computing device.
Description
Technical Field
The invention relates to the technical field of front-end development and application, in particular to a component multiplexing and rendering method and device.
Background
In application software, a User Interface (UI) includes a plurality of UI components, such as buttons (buttons), textboxes (textboxes), check boxes (checkboxes), and the like, and each UI component includes one or more code segments having a specific function. The combination of multiple UI components forms a user interface that enables presentation of information and interaction with a user.
At present, mainstream technology stacks for developing a front-end user interface comprise Rax, React, Vue, AngularJS and the like, each technology stack has an independent technical specification system, code grammar, rendering principle, life cycle function and the like are different, and codes written by adopting a certain technology stack cannot be applied to other technology stacks. Therefore, if the user interface is applied to different technology stacks, UI component code needs to be written separately for each technology stack, which greatly increases the workload and maintenance cost of developers. In addition, the UI components of the technology stacks are respectively developed, so that the display effects of the UI components in different technology stacks are difficult to unify, when a user uses a client of some specific technology stacks, the display effect of the UI components is poor, the UI components are not suitable for the size of a screen of a user terminal, and the user experience is poor.
Disclosure of Invention
To this end, the present invention provides a component multiplexing, rendering method and apparatus in an attempt to solve or at least alleviate the above-identified problems.
According to a first aspect of the present invention, there is provided a component rendering method comprising: acquiring a user interface component to be rendered; when the user interface component is determined to need to be converted, converting the attribute of the user interface component into a target attribute; rendering the user interface component according to the target attribute.
Optionally, in the component rendering method according to the present invention, when the user interface component has a target style attribute, it is determined that the user interface component needs to be converted; the converting the property of the user interface component to a target property includes: and converting the attribute value of the target style attribute into the attribute value of the target unit.
Optionally, in the component rendering method according to the present invention, the target style attribute is a size-dependent style attribute.
Optionally, in the component rendering method according to the present invention, the converting the attribute value of the target style attribute into an attribute value of a target unit includes: and converting the attribute value of the target style attribute from a source numerical value of a source unit to a target numerical value of a target unit, wherein the target numerical value is the ratio of the source numerical value to a conversion constant, and the conversion constant is the ratio of a numerical value corresponding to the full screen size in the source unit to a numerical value corresponding to the full screen size in the target unit.
Optionally, in the component rendering method according to the present invention, the source unit is rem, the target unit is vw, and the conversion constant is 7.5.
Optionally, in the component rendering method according to the present invention, the target style attribute is determined according to the following steps: forming a one-dimensional attribute array by using a plurality of style attributes of the user interface component; and respectively judging whether each style attribute in the array is the target style attribute.
Optionally, in the component rendering method according to the present invention, the respectively determining whether each style attribute in the array is a target style attribute includes: respectively judging whether each style attribute in the array belongs to a target style attribute set, wherein the target style attribute set comprises a plurality of target style attributes; and when the style attribute belongs to the target style attribute set, determining the style attribute as the target style attribute.
According to a second aspect of the present invention, there is provided a component multiplexing method comprising: replacing a source dependent packet in the source code with a target dependent packet according to the corresponding relation between the source code type and the dependent packet of the target code type; replacing a source interface in the source code with a target interface according to the corresponding relation between the source code type and the interface of the target code type to obtain a new source code after the interface is replaced; and setting a conversion function in the new source code to obtain code multiplexing conversion codes so as to integrate the code multiplexing conversion codes at an application end.
According to a third aspect of the invention, there is provided a computing device comprising: at least one processor; and a memory storing program instructions that, when read and executed by the processor, cause the computing device to perform a component multiplexing method or a component rendering method as described above.
According to a fourth aspect of the present invention, there is provided a readable storage medium storing program instructions which, when read and executed by a computing device, cause the computing device to perform a component multiplexing method or a component rendering method as described above.
The component multiplexing method of the invention converts the source code of the user interface component written by adopting the source language into a new source code written by adopting the target language by replacing the dependency package and the interface; subsequently, a transformation function is inserted in the new source code to obtain code multiplexed transformation code, the transformation function being adapted to transform the properties of the user interface component into target properties. The conversion function can adaptively adjust the attribute value of the style attribute of the user interface component, so that the user interface component is ensured to have consistent display effect in different technical stacks. The component multiplexing method can convert the source code of the user interface component written by adopting the source language into the code multiplexing conversion code written by adopting the target language, and realizes the automatic conversion of the component code, thereby realizing the cross-technology stack multiplexing of the user interface component and greatly reducing the workload and the maintenance cost of developers.
Corresponding to the component multiplexing method, when the component rendering method of the invention is used for rendering the user interface component, firstly, the attribute of the user interface component is converted into the target attribute, and then, the user interface component is rendered according to the target attribute. The component rendering method can automatically adjust the attribute of the user interface component, thereby ensuring that the display size of the user interface component is adaptive to the size of a screen of a user terminal, having good display effect and improving user experience.
The foregoing description is only an overview of the technical solutions of the present invention, and the embodiments of the present invention are described below in order to make the technical means of the present invention more clearly understood and to make the above and other objects, features, and advantages of the present invention more clearly understandable.
Drawings
To the accomplishment of the foregoing and related ends, certain illustrative aspects are described herein in connection with the following description and the annexed drawings, which are indicative of various ways in which the principles disclosed herein may be practiced, and all aspects and equivalents thereof are intended to be within the scope of the claimed subject matter. The above and other objects, features and advantages of the present disclosure will become more apparent from the following detailed description read in conjunction with the accompanying drawings. Throughout this disclosure, like reference numerals generally refer to like parts or elements.
FIG. 1 shows a schematic diagram of a user interface and user interface components according to one embodiment of the invention;
FIG. 2 shows a schematic diagram of a component multiplexing system 200 according to one embodiment of the invention;
FIG. 3 shows a flow diagram of a component reuse method 300 according to one embodiment of the invention;
FIG. 4 illustrates a flow diagram of a component rendering method 400 according to one embodiment of the invention;
FIG. 5 shows a schematic diagram of a computing device 500, according to one embodiment of the invention.
Detailed Description
Exemplary embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. While exemplary embodiments of the present disclosure are shown in the drawings, it should be understood that the present disclosure may be embodied in various forms and should not be limited to the embodiments set forth herein. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the disclosure to those skilled in the art.
A technology stack refers to the underlying technical facilities used to develop a certain class of products. At present, mainstream technology stacks for developing a front-end user interface include Rax, React, Vue, AngularJS and the like, each technology stack has an independent technical specification system, code syntax, rendering principle, life cycle function and the like are different, and a user interface component (UI component for short) code written by a certain technology stack cannot be applied to other technology stacks.
For example, FIG. 1 illustrates a shopping cart interface in a typical shopping application. As shown in fig. 1, the interface includes a plurality of UI components such as check boxes (checkboxes) 110, links (links) 120, number selectors (numberpickers) 130, buttons (buttons) 140, and the like. The shopping application in fig. 1 is a Native application developed by Rax language, and accordingly, UI components in the shopping cart interface are also developed by Rax language, which cannot be directly applied to the Web front-end technology stacks such as fact and Vue. For example, a shopping application developed in the Rax language can only be operated as an independent application in a user terminal, but cannot be directly transplanted as a Web applet to an environment such as WeChat. If the mobile terminal needs to operate in the WeChat environment, technology stack conversion is needed, and secondary development is performed on the UI component of the Rax language and even the whole shopping application by adopting Web development tools such as React and Vue, so that the workload and the maintenance cost of a developer are increased. In addition, since the raw application of the Rax language and the Web application of the read, Vue, and other languages are developed separately, the display effects of the UI components of the Rax language and the Web application of the Vue and other languages are difficult to keep consistent (for example, the check boxes 110 have different diameters, the buttons 140 have different widths and heights, and the like), so that the UI components have poor display effects in some environments and are not adapted to the size of the screen of the user terminal, and the user experience is reduced.
In order to solve the problems, the invention provides a component multiplexing and rendering scheme, which is used for realizing multiplexing of cross-technology stack UI components, ensuring that the UI components have uniform display effect under each technology stack and improving user experience.
FIG. 2 shows a schematic diagram of a component multiplexing system 200 according to one embodiment of the invention. As shown in fig. 2, the system 200 includes a development terminal 210, a user terminal 220, a server 230, and a data storage 240.
The development terminal 210 is a terminal device used by a developer, and the user terminal 220 is a terminal device used by a user. The development terminal 210 and the user terminal 220 may be, for example, personal computers such as desktop computers and notebook computers, mobile terminals such as mobile phones, tablet computers and smart wearable devices, and smart home devices such as smart televisions and smart speakers, but are not limited thereto.
The server 230 has functions of calculation, storage, and the like, and is configured to provide an application service to the user terminal 220. The server 230 may be implemented as one or more physical servers, or as one or more computing instances deployed in a cloud server, for example, and the specific configuration of the server 230 is not limited in the present invention.
A developer develops an Application (App for short) on the development terminal 210, deploys the server 230 correspondingly, and stores data resources required for supporting the Application to run in the data storage device 240. When a user uses an application on the user terminal 220, the user terminal 220 initiates a request to the server 230, and the server 230 receives the user request and responds to provide a service to the user.
For example, for a Web application, a developer writes source code of UI components and the like in languages such as fact and Vue on the development terminal 210, and completes development of the Web application. Data resources required by the Web application, such as Web page source code, text, picture resources, etc., are stored in the data storage 240, and the server 230 is configured to respond to an application request sent from the user terminal 220. When the user uses the Web application on the user terminal 220, the user terminal 220 requests and acquires the corresponding resource from the server 230, and renders each UI component on the screen of the user terminal 220 according to the acquired resource, thereby displaying a Web page.
The invention provides a scheme for multiplexing and rendering components. In the embodiment of the present invention, a developer executes the component multiplexing method 300 of the present invention on the development terminal 210, and converts the source code of the UI component written in the source language into a code multiplexing conversion code (or called target code) written in the target language, thereby implementing cross-technology stack multiplexing of the UI component. Based on the converted code multiplexing conversion code, the user terminal 220 may execute the component rendering method 400 of the present invention, automatically adjust the target style attributes of each UI component, thereby ensuring that the display size of the user interface component is adapted to the screen size of the user terminal 220, having a better display effect, and improving the user experience.
FIG. 3 shows a flow diagram of a component reuse method 300 according to one embodiment of the invention. The method 300 is performed in a development terminal 210 adapted to convert source code of a user interface element written in a source language to code multiplexed translation code written in a target language. It should be noted that the source language and the target language are two different programming languages, and belong to two different technology stacks respectively. The specific types of the source language and the target language are not limited, and in one embodiment, the source language is Rax and the target language is fact.
As shown in fig. 3, the method 300 begins at step S310.
In step S310, the source dependency package in the source code is replaced with the target dependency package according to the corresponding relationship between the source code type and the dependency package in the target code type.
The source code type is the type of programming language used by the source code (i.e., the source language), and the target code type is the type of programming language used by the code conversion code (i.e., the target language). For example, the source code is written in a Rax language, the code multiplexing conversion code is written in an React language, the type of the source code is a Rax type, and the type of the target code is an React type.
A dependency package is an underlying library used by a technology stack, which is a collection of code used to implement some specific functionality. The dependency package includes one or more predefined interfaces (APIs), each Interface includes one or more methods (methods), and a developer may call the interfaces and the methods to implement corresponding functions.
For example, the Rax technology stack includes, but is not limited to, the following dependent packages:
1. rax bag: the core rendering library is a core rendering library of a Rax technology stack, comprises a plurality of top-layer APIs (application programming interfaces), such as createElement, Component, PropType, render and the like, and is used for realizing functions of Component creation, variable type detection, Component rendering and the like.
2. rax-Components Package: is an auxiliary component library of a Rax technology stack and is used for creating cross-platform components which can run on Native and Web simultaneously.
The reach technology stack includes, but is not limited to, the following dependency packages:
1. act: the method is a core library of a React technology stack, comprises a plurality of top-layer APIs such as createElement and Component, and is used for realizing functions such as Component creation.
2. The prop-types package: is a type detection library, comprises API such as PropType and the like, and is used for detecting the data type of the variable.
3. Act-dom package: the method is a class library for DOM (document Object model) operation, comprises APIs such as findDOMNode and render, and is used for realizing functions such as node searching and component rendering.
The functions provided by the different dependency packages are different, and according to one embodiment, the correspondence between the dependency packages of the source code type and the target code type can be established according to the functions provided by the dependency packages. It should be noted that, the method used for establishing the corresponding relationship of the dependency package and the storage mode of the corresponding relationship are not limited in the present invention. For example, the correspondence of the dependency packages may be manually established by those skilled in the art, and the correspondence may be stored in a Map structure. The Map structure is used for storing data with mapping relationship, wherein the data comprises two groups of data of key (key) and value (value), and the corresponding value can be taken out through the designated key. According to the established corresponding relation between the source code type and the dependency package of the target code type, the source dependency package appearing in the source code can be replaced by the target dependency package in the target code type.
According to one embodiment, a Node Package Manager (NPM) may be used to introduce the dependent Package, so as to complete the replacement of the source dependent Package to the target dependent Package.
For example, the source code type is a Rax type and the object code type is a fact type. Rax packages are referenced in the source code. By searching the corresponding relation between the ray and the dependent packet of the fact, it is determined that Rax packets in the ray correspond to the act, prop-types and act-dom packets in the fact, and therefore the ray packets in the source code need to be replaced by the act, prop-types and act-dom packets in the fact. The replacement process of the dependent packet can be realized by a packet manager, for example, the act, the prop-types and the act-dom packets in the act are installed by running an npm instant act prop-types act-dom-save-dev command, so that the replacement of the dependent packet is completed:
in step S320, the source interface in the source code is replaced with the target interface according to the corresponding relationship between the source code type and the interface of the target code type, so as to obtain a new source code after replacing the interface.
According to one embodiment, a source interface in source code may be determined as follows: analyzing an abstract syntax tree of a source code; the source interface included by the source code is determined from the abstract syntax tree.
An Abstract Syntax Tree (AST) is a Tree representation of the Abstract Syntax structure of the source code, with each node on the Tree representing a structure in the source code. According to the abstract syntax tree, the codes can be accurately positioned, and the operations of analyzing, changing, optimizing and the like of the codes are realized. In the embodiment of the invention, the structures such as API, method, style attribute and the like in the source code can be conveniently positioned according to the abstract syntax tree of the source code.
After the source interface included by the source code is positioned, replacing the source interface in the source code with the target interface according to the corresponding relation between the interface of the predefined source code type and the interface of the target code type.
The functions provided by the different interfaces are different, and according to one embodiment, the correspondence between the interfaces of the source code type and the target code type can be established according to the functions provided by the interfaces. The correspondence between the source code type and the interface of the target code type may be stored in a Map structure, for example.
For example, the source code type is a Rax type and the object code type is a fact type. style { [ { width: "40rem", height: "20rem" }, tempStyle ] } source code introduces createElement, Component, PropTypes, render four source APIs from rax packets. By searching the corresponding relation between the RAx and the API of the React, the source API of the four RAx respectively corresponds to createElement and Component in the React package of the React, and the PropType in the prop-types package and the render four target API in the React-dom package. And replacing the source API of the Rax with the target API of the React based on the corresponding relation.
It should be noted that, in the above embodiment, the source API of Rax and the target API of act have the same name, and only the dependent packages to which Rax belongs are different. However, those skilled in the art will appreciate that in other embodiments, the source API and the target API may have different names, and whether the source API and the target API have the same name may depend on the syntax specifications of the source language and the target language and the settings of the dependency package API. In the embodiment of the invention, the corresponding relation of the source code type and the target code type is established according to the function of the interface and is not related to whether the names of the interfaces are the same or not.
It should be noted that there is no strict execution order between step S310 and step S320. According to an embodiment, step S310 may be performed first to complete the replacement of the dependent packet; step S320 is executed again to complete the replacement of the interface. According to another embodiment, step S320 may be performed first, the target interface corresponding to the source interface and the dependency package to which the target interface belongs are determined, and then steps S310 and S320 are performed, and the replacement of the dependency package and the interface is completed at the same time.
After the interface replacement is completed in step S320 and the replaced new source code is obtained, step S330 is executed.
In step S330, a conversion function is set in the new source code to obtain code multiplexing conversion code, so as to integrate the code multiplexing conversion code at the application end.
According to one embodiment, a conversion function may be set in the new source code according to the following steps: firstly, determining Style (Style) attributes included by source code according to an abstract syntax tree of the source code; subsequently, a transformation function is inserted at each style attribute separately.
The transformation function is adapted to transform the property of the user interface component into a target property when the user interface component requires transformation. The target attribute comprises an attribute name and an attribute value. In particular, the transformation function is adapted to determine that a user interface component requires transformation when the user interface component has a target style property, and to transform the property value of the target style property to the property value of the target unit.
The target Style property is a size-dependent Style (Style) property, such as the properties of width, height, distance, font size, etc. of the component; size-independent style attributes, such as background color, linetype, font color, etc. of the component, are not target style attributes. The attribute value of the target style attribute is composed of two parts of a numeric value and a size unit, for example, the attribute value of the target style attribute, which is the component width (width), is 750rem, and among the attribute values, 750 is a numeric value and rem is a size unit. Common size units include, but are not limited to, rem, vw, px, em, and the like. The target unit is a size unit used in code multiplexing conversion code, and correspondingly, the size unit used in the source code is regarded as a source unit.
Since the source code type and the size unit supported by the object code type or the set default size unit are not necessarily the same, after the source code is converted into a new source code in step S320, the attribute values of the object style attributes of the user interface components may be abnormal, which may cause the display of the user interface components to be abnormal and not be adapted to the screen size of the user terminal. Therefore, in step S330, a conversion function is inserted into the new source code, and the conversion function can automatically adjust the attribute value of the target style attribute, so that the display size of the user interface component can be adapted to the screen size of the user terminal, thereby presenting a good display effect.
The conversion function is further adapted to combine the plurality of style attributes of the user interface element into a one-dimensional attribute array; then, it is determined whether each style attribute in the array is a target style attribute, i.e., a size-dependent style attribute. For example, a target style attribute set including a plurality of target style attributes may be established in advance, and whether each style attribute in the array belongs to the target style attribute set is respectively determined; when a style attribute belongs to the target style attribute set, the style attribute is determined to be the target style attribute. After the target style property of the user interface component is determined, the conversion function is adapted to convert the property value of the target style property to a property value of the target unit.
According to an embodiment, the conversion function is further adapted to convert the attribute value of the target style attribute from a source value in source units to a target value in target units, wherein the target value is a ratio of the source value to a conversion constant, the conversion constant being a ratio of a value in source units corresponding to a full screen size to a value in target units corresponding to a full screen size. For example, the source code type is a Rax type, the source unit is rem, in Rax, the full-screen width is 750rem, and accordingly, 1rem is 1/750 of the full-screen width. The target code type is reach type, the target unit is vw, in reach, 1vw is 1/100 full screen width, and the full screen width is 100 vw. Accordingly, in this embodiment, the conversion constant is 750/100 ═ 7.5, and the target value is source value/7.5.
Specifically, the process of inserting a transformation function into new source code includes two parts: the first part is to insert a conversion function at each style attribute separately; the second part is to define the transfer function to global. Taking the new source code of the fact language as an example, the code includes a Button (Button) component, and the component has two Style (Style) attributes, namely, the width and height of the component, and the attribute values of the width and height are 40rem and 20rem, respectively, namely, for the Button component, there is Style ═ { width: "40rem", height: "20rem" }. Then, the conversion function f (style) needs to be inserted at the style attributes width and height. Specifically, in this example, the transfer function has two insertion modes. One is to take the style attributes width and height as an array, and insert a conversion function for the array, i.e., style ═ { f ({ width: "40rem", height: "20rem" }). Another method is to insert a conversion function for the style attribute width and height, respectively, i.e., style ═ { f (width: "40rem"), f (height: "20rem") }.
Inserting a transformation function at the Style attribute amounts to a call to the transformation function. In addition to this, it is also necessary to define the conversion function to global, i.e. to define the specific code logic in the conversion function f (style).
By inserting a conversion function at each Style attribute and defining the conversion function to the whole, the target Style attributes width and height can be determined from the four Style attributes of the user interface component, such as width, height, background color and color of the Button component, and the values of the target Style attributes width and height are converted from 40rem and 20rem to 5.333vw and 2.667vw according to the conversion formula of the target value being the source value/7.5, thereby realizing the self-adaptive conversion of the values of the width and height attributes, ensuring that the display size of the Button component is adaptive to the screen size of the user terminal, and presenting a good display effect.
Through the method 300, source code of a user interface component written in a source language may be converted to code multiplex translation code written in a target language, and the code multiplex translation code may be packaged into a target application so that it may be run at an application side (i.e., the user terminal 220). The user may then use the target application on the user terminal 220, i.e., run the transcoding to perform the component rendering method 400 of the present invention.
FIG. 4 shows a flow diagram of a component rendering method 400 according to one embodiment of the invention. The method 400 is performed in the user terminal 220 and is adapted to adaptively adjust the attributes of the user interface components, thereby ensuring the rendering effect of the components.
As shown in fig. 4, the method 400 begins at step S410.
In step S410, a user interface component to be rendered is acquired.
And acquiring a user interface component to be rendered, namely acquiring a code corresponding to the user interface component. The user interface component may be, for example, a Button (Button), a text box (TextBox), a check box (CheckBox), etc., but is not limited thereto.
Subsequently, in step S420, when it is determined that the user interface component requires conversion, the attribute of the user interface component is converted into the target attribute.
According to one embodiment, the target attribute includes an attribute name and an attribute value, and the attribute value includes a numerical value and a unit. When the user interface component has the target style attribute, determining that the user interface component needs to be converted, and converting the attribute value of the target style attribute into the attribute value of the target unit.
The target Style property is a size-dependent Style (Style) property, such as the properties of width, height, distance, font size, etc. of the component; size-independent style attributes, such as background color, linetype, font color, etc. of the component, are not target style attributes.
According to one embodiment, a target style property in a user interface component may be determined by: forming a one-dimensional attribute array by using a plurality of style attributes of the user interface component; then, it is determined whether each style attribute in the array is a target style attribute, i.e., a size-dependent style attribute. For example, a target style attribute set including a plurality of target style attributes may be established in advance, and whether each style attribute in the array belongs to the target style attribute set is respectively determined; when a style attribute belongs to the target style attribute set, the style attribute is determined to be the target style attribute. After the target style property of the user interface component is determined, the property value of the target style property is converted from the source numerical value of the source unit to the target numerical value of the target unit.
According to one embodiment, the attribute value of the target style attribute is converted from a source value in source units to a target value in target units, thereby converting the attribute value of the target style attribute to an attribute value in target units, wherein the target value is a ratio of the source value to a conversion constant, and the conversion constant is a ratio of a value in source units corresponding to a full screen size to a value in target units corresponding to the full screen size. For example, the source language is the Rax language, the source unit is rem, in Rax language, full screen width is 750rem, correspondingly, 1rem is 1/750 of full screen width. The target language is the React language, the target unit is vw, and in the React language, 1vw is 1/100 of full-screen width, and the full-screen width is 100 vw. Accordingly, in this embodiment, the conversion constant is 750/100 ═ 7.5, and the target value is source value/7.5.
Subsequently, in step S430, the user interface component is rendered according to the target attribute.
Specifically, a user interface component is rendered on the screen of the user terminal 220 according to the attribute value of the target attribute, so that the display size of the user interface component can be adapted to the screen size of the user terminal 220, thereby presenting a good display effect.
When rendering the user interface component, the method 400 first converts the attributes of the user interface component to target attributes, and then renders the user interface component according to the target attributes. The method 400 can automatically adjust the attributes of the user interface component, thereby ensuring that the user interface component has a good display effect and improving user experience.
The following takes the user interface component as a Button (Button) as an example to illustrate the implementation process of the method 400:
in step S410, a code of the button component is obtained, where the code of the button includes a conversion function f (style) for converting the attribute of the button component into the target attribute.
Subsequently, in step S420, a conversion function f (style) in the code is executed to convert the attribute of the button component into the target attribute. Specifically, the attribute value of the target style attribute of the button component is converted from the source numerical value in rem to the target numerical value in vw.
For example, the button component includes three Style attributes of width, height, background color background, where a conversion function is inserted, i.e., Style ═ f ([ { width: "40rem", height: "20rem" }, background color: "blue' ]). For three Style attributes of width, height and background, the execution process of the conversion function f (Style) is as follows:
firstly, a conversion function f (Style) converts a multidimensional style attribute array with a nested structure, namely [ { width: "40rem", height: "20rem" }, background color: 'blue' ], into a one-dimensional array [ width; height; backsgroundcolor ].
And then, respectively judging whether each style attribute in the one-dimensional array is a target style attribute related to the size, if so, converting the source numerical value in rem into the target numerical value in vw according to a conversion formula of the target numerical value being the source numerical value/7.5. And after judgment, determining that the width and height are the target style attributes, and if the background color is not the target style attributes, converting the values of the target style attributes width and height from 40rem and 20rem to 5.333vw and 2.667vw according to a conversion formula of the target value being the source value/7.5.
Subsequently, in step S430, a button having a width (width) of 5.333vw and a height (height) of 2.667vw is rendered on the screen of the user terminal 220 in accordance with the attribute values 5.333vw, 2.667vw in vw units.
FIG. 5 shows a schematic diagram of a computing device 500, according to one embodiment of the invention.
As shown in fig. 5, computing device 500 includes a processor 510 and a memory 520. Stored in the memory 520 are program instructions for performing the component multiplexing method 300 or the component rendering method 400 of the present invention, which when read and executed by the processor 510, cause the computing device 500 to perform the component multiplexing method 300 or the component rendering method 400 of the present invention. In particular, when instructions for performing the component reuse method 300 of the present invention are deployed in the computing device 500, the computing device 500 may be implemented as the aforementioned development terminal 210; when instructions for performing the component rendering method 400 of the present invention are deployed in the computing device 500, the computing device 500 may be implemented as the aforementioned user terminal 220.
The various techniques described herein may be implemented in connection with hardware or software or, alternatively, with a combination of both. Thus, the methods and apparatus of the present invention, or certain aspects or portions thereof, may take the form of program code (i.e., instructions) embodied in tangible media, such as removable hard drives, U.S. disks, floppy disks, CD-ROMs, or any other machine-readable storage medium, wherein, when the program is loaded into and executed by a machine, such as a computer, the machine becomes an apparatus for practicing the invention.
In the case of program code execution on programmable computers, the computing device will generally include a processor, a storage medium readable by the processor (including volatile and non-volatile memory and/or storage elements), at least one input device, and at least one output device. Wherein the memory is configured to store program code; the processor is configured to execute the component multiplexing method or the component rendering method of the present invention according to instructions in the program code stored in the memory.
By way of example, and not limitation, readable media may comprise readable storage media and communication media. Readable storage media store information such as computer readable instructions, data structures, program modules or other data. Communication media typically embodies computer readable instructions, data structures, program modules or other data in a modulated data signal such as a carrier wave or other transport mechanism and includes any information delivery media. Combinations of any of the above are also included within the scope of readable media.
In the description provided herein, algorithms and displays are not inherently related to any particular computer, virtual system, or other apparatus. Various general purpose systems may also be used with examples of this invention. The required structure for constructing such a system will be apparent from the description above. Moreover, the present invention is not directed to any particular programming language. It is appreciated that a variety of programming languages may be used to implement the teachings of the present invention as described herein, and any descriptions of specific languages are provided above to disclose the best mode of the invention.
In the description provided herein, numerous specific details are set forth. It is understood, however, that embodiments of the invention may be practiced without these specific details. In some instances, well-known methods, structures and techniques have not been shown in detail in order not to obscure an understanding of this description.
Similarly, it should be appreciated that in the foregoing description of exemplary embodiments of the invention, various features of the invention are sometimes grouped together in a single embodiment, figure, or description thereof for the purpose of streamlining the disclosure and aiding in the understanding of one or more of the various inventive aspects. However, the disclosed method should not be interpreted as reflecting an intention that: that the invention as claimed requires more features than are expressly recited in each claim. Rather, as the following claims reflect, inventive aspects lie in less than all features of a single foregoing disclosed embodiment. Thus, the claims following the detailed description are hereby expressly incorporated into this detailed description, with each claim standing on its own as a separate embodiment of this invention.
Those skilled in the art will appreciate that the modules or units or components of the devices in the examples disclosed herein may be arranged in a device as described in this embodiment or alternatively may be located in one or more devices different from the devices in this example. The modules in the foregoing examples may be combined into one module or may be further divided into multiple sub-modules.
Those skilled in the art will appreciate that the modules in the device in an embodiment may be adaptively changed and disposed in one or more devices different from the embodiment. The modules or units or components of the embodiments may be combined into one module or unit or component, and furthermore they may be divided into a plurality of sub-modules or sub-units or sub-components. All of the features disclosed in this specification (including any accompanying claims, abstract and drawings), and all of the processes or elements of any method or apparatus so disclosed, may be combined in any combination, except combinations where at least some of such features and/or processes or elements are mutually exclusive. Each feature disclosed in this specification (including any accompanying claims, abstract and drawings) may be replaced by alternative features serving the same, equivalent or similar purpose, unless expressly stated otherwise.
Furthermore, those skilled in the art will appreciate that while some embodiments described herein include some features included in other embodiments, rather than other features, combinations of features of different embodiments are meant to be within the scope of the invention and form different embodiments. For example, in the following claims, any of the claimed embodiments may be used in any combination.
Furthermore, some of the described embodiments are described herein as a method or combination of method elements that can be performed by a processor of a computer system or by other means of performing the described functions. A processor having the necessary instructions for carrying out the method or method elements thus forms a means for carrying out the method or method elements. Further, the elements of the apparatus embodiments described herein are examples of the following apparatus: the apparatus is used to implement the functions performed by the elements for the purpose of carrying out the invention.
As used herein, unless otherwise specified the use of the ordinal adjectives "first", "second", "third", etc., to describe a common object, merely indicate that different instances of like objects are being referred to, and are not intended to imply that the objects so described must be in a given sequence, either temporally, spatially, in ranking, or in any other manner.
While the invention has been described with respect to a limited number of embodiments, those skilled in the art, having benefit of this description, will appreciate that other embodiments can be devised which do not depart from the scope of the invention as described herein. Furthermore, it should be noted that the language used in the specification has been principally selected for readability and instructional purposes, and may not have been selected to delineate or circumscribe the inventive subject matter. Accordingly, many modifications and variations will be apparent to those of ordinary skill in the art without departing from the scope and spirit of the appended claims. The present invention has been disclosed in an illustrative rather than a restrictive sense with respect to the scope of the invention, as defined in the appended claims.
Claims (19)
1. A component rendering method, comprising:
acquiring a user interface component to be rendered;
when the user interface component is determined to need to be converted, converting the attribute of the user interface component into a target attribute;
rendering the user interface component based on the target attribute.
2. The method of claim 1, wherein when the user interface component has a target style property, determining that the user interface component requires conversion;
the converting the property of the user interface component to a target property includes:
and converting the attribute value of the target style attribute into the attribute value of the target unit.
3. The method of claim 2, wherein the target style attribute is a size-dependent style attribute.
4. The method of claim 2, wherein said converting the attribute value of the target style attribute to the attribute value of the target unit comprises:
and converting the attribute value of the target style attribute from a source numerical value of a source unit to a target numerical value of a target unit, wherein the target numerical value is the ratio of the source numerical value to a conversion constant, and the conversion constant is the ratio of a numerical value corresponding to the full screen size in the source unit to a numerical value corresponding to the full screen size in the target unit.
5. The method of claim 4, wherein the source unit is rem, the target unit is vw, and the conversion constant is 7.5.
6. The method of claim 2, wherein the target style property is determined according to the following steps:
forming a one-dimensional attribute array by using a plurality of style attributes of the user interface component;
and respectively judging whether each style attribute in the array is the target style attribute.
7. The method of claim 6, wherein said separately determining whether each style attribute in the array is a target style attribute comprises:
respectively judging whether each style attribute in the array belongs to a target style attribute set, wherein the target style attribute set comprises a plurality of target style attributes;
and when the style attribute belongs to the target style attribute set, determining the style attribute as the target style attribute.
8. A component multiplexing method, comprising:
replacing a source dependent packet in the source code with a target dependent packet according to the corresponding relation between the source code type and the dependent packet of the target code type;
replacing a source interface in the source code with a target interface according to the corresponding relation between the source code type and the interface of the target code type to obtain a new source code after the interface is replaced;
and setting a conversion function in the new source code to obtain code multiplexing conversion codes so as to integrate the code multiplexing conversion codes at an application end.
9. The method of claim 8, wherein prior to the step of replacing the source interface in the source code with the target interface, further comprising the step of:
analyzing an abstract syntax tree of the source code;
and determining a source interface included by the source code according to the abstract syntax tree.
10. The method of claim 9, wherein said setting a conversion function in said new source code comprises:
determining style attributes included by the source code according to the abstract syntax tree;
the transformation function is inserted at each style attribute separately.
11. The method of claim 8, wherein the conversion function is adapted to convert the property of the user interface component to the target property when the user interface component requires conversion.
12. The method of claim 11, wherein the transfer function is further adapted to:
determining that a user interface component needs to be converted when the user interface component has a target style attribute;
and converting the attribute value of the target style attribute into the attribute value of the target unit.
13. The method of claim 12, wherein the target style attribute is a size-dependent style attribute.
14. The method of claim 12, wherein the conversion function is further adapted to convert the attribute value of the target style attribute from a source value in source units to a target value in target units, wherein the target value is a ratio of the source value to a conversion constant, the conversion constant being a ratio of a value in source units corresponding to a full screen size to a value in target units corresponding to a full screen size.
15. The method of claim 14, wherein the source unit is rem, the target unit is vw, and the conversion constant is 7.5.
16. The method of claim 12, wherein the transfer function is further adapted to:
forming a one-dimensional attribute array by using a plurality of style attributes of the user interface component;
and respectively judging whether each style attribute in the array is the target style attribute.
17. The method of claim 16, wherein the transfer function is adapted to separately determine whether each style attribute in the array is a target style attribute by:
respectively judging whether each style attribute in the array belongs to a target style attribute set, wherein the target style attribute set comprises a plurality of target style attributes;
and when the style attribute belongs to the target style attribute set, determining the style attribute as the target style attribute.
18. A computing device, comprising:
at least one processor; and
a memory storing program instructions that, when read and executed by the processor, cause the computing device to perform the component rendering method of any of claims 1-7 or the component multiplexing method of any of claims 8-17.
19. A readable storage medium storing program instructions that, when read and executed by a computing device, cause the computing device to perform the component rendering method of any of claims 1-7 or the component multiplexing method of any of claims 8-17.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910491774.1A CN112052000A (en) | 2019-06-06 | 2019-06-06 | Component multiplexing and rendering method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910491774.1A CN112052000A (en) | 2019-06-06 | 2019-06-06 | Component multiplexing and rendering method and device |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112052000A true CN112052000A (en) | 2020-12-08 |
Family
ID=73609694
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910491774.1A Pending CN112052000A (en) | 2019-06-06 | 2019-06-06 | Component multiplexing and rendering method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112052000A (en) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113805881A (en) * | 2021-09-18 | 2021-12-17 | 上海仪电（集团）有限公司中央研究院 | Method and device for converting front end components between different frames |
| CN114625444A (en) * | 2022-03-30 | 2022-06-14 | 北京有竹居网络技术有限公司 | Data processing method and device based on components |
| CN115982374A (en) * | 2022-12-02 | 2023-04-18 | 河海大学 | Dam emergency response knowledge base linkage multi-view learning entity alignment method and system |
-
2019
- 2019-06-06 CN CN201910491774.1A patent/CN112052000A/en active Pending
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113805881A (en) * | 2021-09-18 | 2021-12-17 | 上海仪电（集团）有限公司中央研究院 | Method and device for converting front end components between different frames |
| CN113805881B (en) * | 2021-09-18 | 2024-02-23 | 上海仪电（集团）有限公司中央研究院 | Conversion method and device for front-end components among different frames |
| CN114625444A (en) * | 2022-03-30 | 2022-06-14 | 北京有竹居网络技术有限公司 | Data processing method and device based on components |
| CN115982374A (en) * | 2022-12-02 | 2023-04-18 | 河海大学 | Dam emergency response knowledge base linkage multi-view learning entity alignment method and system |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| WO2020006910A1 (en) | Business componentization development method and apparatus, computer device, and storage medium | |
| US8601449B2 (en) | Cross-platform application framework | |
| US9836284B2 (en) | HTML5 graph layout for application topology | |
| US20170069297A1 (en) | Screen adaptation method and apparatus | |
| CN112052000A (en) | Component multiplexing and rendering method and device | |
| CN112363794B (en) | Rendering method of front-end list component and electronic equipment | |
| CN107729083A (en) | The method and embedded device of a kind of load driver program | |
| CN113126990B (en) | Page development method, device, equipment and storage medium | |
| US20180349004A1 (en) | Methods for extracting and adapting information to generate custom widgets and devices thereof | |
| CN110286917A (en) | File packing method, device, equipment and storage medium | |
| CN107077379A (en) | A kind of virtual machine creation method and device | |
| CN103605502A (en) | Form page display method and server | |
| US10387124B2 (en) | System and method for creating domain specific language | |
| WO2018226349A1 (en) | Vector graphics handling processes for user applications | |
| CN114416056A (en) | Page generation method, system, computer equipment and readable storage medium | |
| US20220334853A1 (en) | System and method for accelerating modernization of user interfaces in a computing environment | |
| CN111142863B (en) | Page generation method and device | |
| CN110599112B (en) | Network page development and maintenance method and device | |
| CN115543324A (en) | Method, device, equipment and medium for generating interactive interface | |
| US20090037890A1 (en) | Method and system for generating an application | |
| CN109343772A (en) | A kind of poster generation method, system, device and storage medium based on the H5 page | |
| CN107402749A (en) | Realize the method and device in picture loading storehouse | |
| US10509638B1 (en) | Method and system for deploying third party device services through an enclosed appliance interface using containers | |
| JP5702265B2 (en) | Program automatic generation apparatus and program automatic generation method | |
| CN108287697B (en) | Html escape character replacing method, device and terminal |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |