View adaptation processing method and device, storage medium and electronic equipment

Abstract

The invention relates to a view adaptation processing method and device, a storage medium and electronic equipment. The method comprises the steps of obtaining a standard component, wherein the standard component is obtained based on a preset grammar rule; based on a target application end corresponding to the to-be-displayed view interface, determining an attribute mapping rule of the standard component and the target application end; converting the standard component into a target component of a target application end according to an attribute mapping rule; and generating a view interface of the target application end by rendering the target component. According to the scheme provided by the invention, adaptive display of the same view on different platforms can be realized without repeatedly writing view codes, so that developers can conveniently carry out application development on different platforms.

Description

Technical Field

[0001] This application relates to the field of mobile Internet, and particularly to a view adaptation processing method, apparatus, storage medium, and electronic device. Background Art

[0002] In related technologies, in the case of cross-platform mobile application development, the same set of UI interfaces and business logics need to be implemented separately on different platforms, which is time-consuming and laborious and lacks innovation. Although existing cross-platform application development technologies can achieve cross-platform development, they still need to write platform-specific components for different platforms and cannot directly apply the code written only once to the displays of different platforms.

[0003] Therefore, regarding the adaptation display of the same view on different platforms, how to facilitate developers to develop applications on different platforms, thereby reducing the learning cost and development cycle for developers across platforms and improving development efficiency is an urgent problem to be solved. Summary of the Invention

[0004] To solve or partially solve the problems existing in related technologies, this application provides a view adaptation processing method, apparatus, storage medium, and electronic device, which can adaptively display the same view on different platforms without repeatedly writing view code and only through a single standard component, thereby facilitating developers to develop applications on different platforms.

[0005] The first aspect of this application provides a view adaptation processing method, including:

[0006] Obtain a standard component, where the standard component is obtained based on a preset syntax rule;

[0007] Based on the target application end corresponding to the view interface to be displayed, determine the attribute mapping rule between the standard component and the target application end;

[0008] Convert the standard component into a target component of the target application end according to the attribute mapping rule;

[0009] Generate a view interface of the target application end by rendering the target component.

[0010] Optionally, obtaining the standard component includes:

[0011] Obtain the label elements of the view interface to be displayed;

[0012] Generate a standard component based on the preset syntax rule and the label elements, and the standard component stores the attribute information corresponding to the standard component.

[0013] Optionally, the standard component includes at least a graphic label component and a text label component.

[0014] Optionally, the attribute information at least includes: keywords and corresponding standard values for the keywords. The keywords are used to describe the characteristics of the label elements, and the standard values are used to represent the characteristic values corresponding to the characteristics.

[0015] Optionally, based on the target application terminal corresponding to the view interface to be displayed, determining the attribute mapping rules between the standard component and the target application terminal includes:

[0016] Determining the page style attributes of the target application terminal;

[0017] According to the page style attributes, determining the keyword mapping rule and the standard value mapping rule.

[0018] Optionally, converting the standard component into the target component of the target application terminal according to the attribute mapping rule includes:

[0019] Based on the attribute mapping rule, converting the keywords of the standard component into the keywords of the target component;

[0020] Converting the standard values of the standard component into the standard values of the target component.

[0021] Optionally, generating the view interface of the target application terminal by rendering the target component includes:

[0022] Generating a preset component package according to the target component, and introducing target page data from a preset code repository based on the preset component package;

[0023] Generating the view interface of the target application terminal according to the target page data.

[0024] A second aspect of the present application provides a view adaptation processing device, including:

[0025] An acquisition module, configured to acquire a standard component, where the standard component is obtained based on a preset syntax rule;

[0026] A mapping module, configured to determine the attribute mapping rules between the standard component and the target application terminal based on the target application terminal corresponding to the view interface to be displayed;

[0027] A replacement module, configured to convert the standard component into the target component of the target application terminal according to the attribute mapping rule;

[0028] A rendering module, configured to generate the view interface of the target application terminal by rendering the target component.

[0029] A third aspect of the present application provides an electronic device, including:

[0030] A processor; and

[0031] A memory stores executable code which, when executed by a processor, causes the processor to execute the method as described above.

[0032] The fourth aspect of the present application provides a computer-readable storage medium storing executable code which, when executed by a processor of an electronic device, causes the processor to execute the method as described above.

[0033] The technical solution provided by the present application may include the following beneficial effects:

[0034] For the same view in the present application, there is no need to repeatedly write code for application ends on different platforms; when writing components related to the view to be displayed, only standard components need to be used to determine the relevant viewing distance elements of the view to be displayed, and the standard components are obtained based on preset syntax rules. Subsequently, based on the target application end corresponding to the interface of the view to be displayed, the attribute mapping rules between the standard components and the target application end are determined. According to the attribute mapping rules, the standard components can be converted into target components of the target application end, and by rendering the target components, the view interface of the target application end is generated. Thus, a set of code can be used to adapt and display the same view on different platforms, which facilitates developers to develop applications on different platforms, enabling developers to not need to pay attention to and understand the technical differences and adaptation differences of each platform, reducing the learning and development costs. The code is more maintainable and portable, facilitating developers to develop applications on different platforms.

[0035] It should be understood that the above general description and the following detailed description are only exemplary and explanatory, and cannot limit the present application. BRIEF DESCRIPTION OF THE DRAWINGS

[0036] By describing the exemplary embodiments of the present application in more detail in conjunction with the drawings, the above and other objects, features, and advantages of the present application will become more obvious. Among them, in the exemplary embodiments of the present application, the same reference numerals generally represent the same components.

[0037] Figure 1 is a schematic flowchart of the view adaptation processing method shown in the embodiments of the present application;

[0038] Figure 2 is a schematic structural diagram of the view adaptation processing device shown in the embodiments of the present application;

[0039] Figure 3 is a schematic structural diagram of the electronic device shown in the embodiments of the present application. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0040] Embodiments of the present application will be described in more detail below with reference to the accompanying drawings. Although the embodiments of the present application are shown in the drawings, it should be understood that the present application can be implemented in various forms and should not be limited by the embodiments set forth herein. On the contrary, these embodiments are provided to make the present application more thorough and complete, and to fully convey the scope of the present application to those skilled in the art.

[0041] The terms used in the present application are for the purpose of describing specific embodiments only and are not intended to limit the present application. The singular forms "a", "the", and "said" used in the present application and the appended claims are also intended to include the plural forms unless the context clearly indicates otherwise. It should also be understood that the term "and / or" as used herein refers to and encompasses any and all possible combinations of one or more of the associated listed items.

[0042] It should be understood that although the terms "first", "second", "third", etc. may be used in the present application to describe various information, such information should not be limited to these terms. These terms are only used to distinguish the same type of information from each other. For example, without departing from the scope of the present application, the first information may also be referred to as the second information, and similarly, the second information may also be referred to as the first information. Thus, the features defined with "first" and "second" may explicitly or implicitly include one or more of such features. In the description of the present application, the meaning of "a plurality" is two or more unless otherwise specifically defined.

[0043] In the related art, in the case of cross-platform mobile application development, there will be a problem that the same set of UI interfaces and business logics need to be implemented separately on different platforms, which is time-consuming and laborious and lacks innovation. For many years, many experts in the industry have hoped to unify the application development on multiple mobile platforms into the same framework. Although the existing cross-platform application development technologies can achieve cross-platform development, they still need to write platform-specific components for different platforms and cannot directly apply the code written only once to different platforms.

[0044] Therefore, how to reduce the learning cost and development cycle of cross-platform development, thereby improving the development efficiency, is an urgent problem to be solved.

[0045] For the above problems, no effective solutions have been proposed yet.

[0046] It should be noted that the above cross-platform application development is based on the React framework for application development. React Native (abbreviated as RN) is a cross-platform mobile application development framework. Different platform interfaces and functions can be implemented by using RN platform-specific components and APIs, and consistent interfaces and functions can also be achieved by using common components and APIs. The code development of React Native is used to write the logic and interface of the application in a language in the project, and then it is converted into native code and components through the React Native compiler, so as to achieve a high-performance and high-quality user experience.

[0047] Traditional platforms use the JavaScript (abbreviated as JS) language, JSX similar to HTML, and CSS to develop mobile applications. JavaScript is an interpreted scripting language, a dynamically typed, weakly typed, prototype-based language with built-in support for types. Its interpreter is called the JavaScript engine, which is part of the browser and is widely used as a client-side scripting language. It was first used on HTML (an application under the Standard Generalized Markup Language) web pages to add dynamic functions to HTML web pages. However, JavaScript uses the React.createElement() method to create the virtual DOM, which requires more code and time. Therefore, this application mainly uses the React JSX language. React JSX is a JavaScript syntax extension used to build user interfaces in React components. The JSX syntax allows developers to use HTML-like syntax to describe the structure and style of components. This enables developers to more easily create and maintain complex user interfaces.

[0048] The H5 view refers to a web page developed using HTML5 technology, which can run in a mobile browser or be embedded in a native application. H5 is an advanced web technology that supports more interactions and functions and supports multimedia on mobile devices.

[0049] Figure 1 It is a schematic flowchart of the view adaptation processing method shown in the embodiments of this application. The method includes:

[0050] Step S101, obtain a standard component, and the standard component is obtained based on a preset syntax rule.

[0051] Based on the original cross-platform mobile application development framework, this application adds a set of view adaptation layers to enable the compilation of code for multiple platforms using a single set of syntax rules. For example, on the RN platform, a set of view adaptation layers are added through preset syntax rules. When generating the view interface, instead of directly rendering standard components or code as the view page, the RN platform first converts the standard components into the form of create Element within the RN platform and then converts them into the standard code of the target application side for rendering. In this embodiment, the standard components need to add class names using class Name and add attributes using htmlFor.

[0052] In practical applications, the RN platform is used to write IOS views, Android views, and web views. However, the IOS views and Android views can share a set of view logics, that is, share a kind of React JSX code. When converting between IOS views and Android views subsequently, only the React JSX code and the native code of the application side need to communicate through the same standard components to generate IOS views or Android views. The view logic of H5 is different and cannot share a kind of React JSX code with IOS views and Android views. Therefore, when converting H5 views, IOS views, and Android views, developers need to deeply learn different front-end React JSX to achieve cross-platform display. This application provides a view adaptation processing method that can quickly, efficiently, and conveniently implement the conversion of view codes for different platforms without deep learning and writing the module codes of the native system, thereby reducing the learning cost and development cycle and improving the application development efficiency and the working experience of developers.

[0053] In this embodiment, the standard components can select the compilation configuration of one of the platforms as the basis. For example, select one kind of React JSX code in IOS views, Android views, or H5 views as the basic configuration file, and convert the standard components into the standard components of the target application side during the subsequent adaptation process. The standard components can also be common components, and subsequently, according to different application sides, the common components are adapted to the target application side. The common components can represent interface elements with the same visual form that need to appear in different application sides based on the same IU design logic in the form of common components. For example, in the application sides corresponding to two different platforms, the same text box or text symbol can appear, but it is adapted to different platforms. Later, during the adaptation stage, the standard components are added / deleted / modified according to the target application platform.

[0054] In one embodiment, obtaining the standard components includes: obtaining the label elements of the view interface to be displayed; generating standard components based on preset syntax rules and the label elements, and the standard components store the attribute information corresponding to the standard components.

[0055] The standard components of this embodiment at least include a graphic label component and a text label component. The graphic label component can be a Box label element, and the text label component can be a Txt label element. These labels can be used to describe the elements in a web page or ReactNative. Box and Txt are the most basic label components. Box is mainly used to display non-text visual elements such as text boxes, and Txt is used to display text visual elements. The Txt component can be nested in the box component to render text in the Box component, or the Txt component can also be used directly.

[0056] In one embodiment, the attribute information at least includes: the attribute information at least includes: keywords and the corresponding standard values for the keywords. The keywords are used for the feature description of the label element, and the standard values are used to represent the feature values corresponding to the features.

[0057] In this embodiment, creating label elements such as Box and Txt includes: configuring the attribute information of the standard component. The attribute information includes configuring the description attribute keywords and their corresponding standard values, and the standard values enable these label elements to always transmit these values. For example, the keywords of the attribute information include width (w), height (h), center (c), positioning (ab), background color (bg), font size (f), line height (lh), etc. The standard values can be numerical values or strings. For example, the standard value of the width can be a pixel length, the keyword of the background color is color, and the standard value is a transparency value.

[0058] For example, a standard component Box includes a label element border (border), and the standard value of the border includes the border size and color (for example, 1.dp, Color.Blue); the keyword of the standard component Box for the size of the package border is size, and the standard value of the keyword is the size value of the package border (for example, 300.dp). The keyword also includes whether to align, the position in the view, etc. The keywords of the standard component Txt include text content, text font size, and text color, etc. For example, for the keyword of text font size in Txt, the standard value corresponding to the text font size is a string of the corresponding font size type. When the Box component nests the Txt component, the keywords are text content, text size, color, etc., and the standard values of the Txt component are the displayed text size values, colors, etc. It should be noted that the Txt component can display not only single-line text but also multi-line text.

[0059] Step S102, based on the target application end corresponding to the view interface to be displayed, determine the attribute mapping rule between the standard component and the target application end.

[0060] The target application end can be a software application (Application, abbreviated as APP) applied to mobile terminals such as smart phones and tablets based on IOS and Android, or a device or browser that displays H5 pages.

[0061] In this embodiment, the attribute mapping rule can be to perform a compatibility test on the target application end for the view interface to be displayed, so as to obtain the attribute mapping rule; or it can be the attribute mapping rule converted according to the preset syntax rule.

[0062] In one embodiment, based on the target application end corresponding to the view interface to be displayed, determining the attribute mapping rule between the standard component and the target application end includes: determining the page style attributes of the target application end; according to the page style attributes, determining the keyword mapping rule and the standard value mapping rule.

[0063] In this embodiment, the page style attributes include: the attributes and states of the target application end. For example: determining the attributes and states of the view of the target application end; determining the sub-views and the view hierarchy according to the attributes and states of the target application end.

[0064] In one embodiment, in the React Native platform, a CSS style sheet can be used to define the styles of basic components. The Android style attributes supported by React Native include: backgroundColor, color, fontSize, fontWeight, TxttAlign, padding, margin, borderWidth, borderColor, borderRadius, shadowColor, shadowOffset, shadowOpacity, shadowRadius, etc. An IOS view refers to the native application view running on an IOS device. In the IOS view, a CSS style sheet can be used to define the styles of components. The style attributes supported by the IOS view include: backgroundColor, color, fontSize, fontWeight, TxttAlign, padding, margin, borderWidth, borderColor, borderRadius, shadowColor, shadowOffset, shadowOpacity, shadowRadius, etc. In the H5 view, a CSS style sheet can be used to define the styles of components. The style attributes supported by the H5 view include: background-color, color, font-size, font-weight, Txtt-align, padding, margin, border-width, border-color, border-radius, box-shadow, etc.

[0065] In this embodiment, by obtaining the style attributes of each platform, the standard component conversion form corresponding to each target application end is obtained, and then a corresponding relationship is established between the components with the same visual elements in each platform, that is, a mapping rule of keywords between components is established. After establishing the mapping relationship of keywords, the mapping rule between the standard values corresponding to the keywords is obtained.

[0066] In this embodiment, property information is set for standard components, and property mapping rules are configured to map the properties set for the standard components into different page style properties on different sides. Specifically, it includes the conversion of property keywords and the conversion of corresponding standard values. For example: converting the keyword w to the keyword width, the keyword h to the keyword height, and the keyword f to the keyword font-size (CSS property) or the keyword fontSize (React Native StyleSheet). It is also possible to, in a subsequent process, according to the adaptation requirements of the target application side, by presetting the centering (c) property, fix the flex direction flow layout direction to horizontal (row) to adapt to the inconsistent flex direction flow layout directions of React Native and H5.

[0067] Step S103, convert the standard component into a target component of the target application side according to the property mapping rules.

[0068] Through the property mapping rules, convert the standard component into a target component, thereby smoothing out the differences of the standard component in different target application sides.

[0069] In one embodiment, converting the standard component into a target component of the target application side according to the property mapping rules includes: based on the property mapping rules, converting the keywords of the standard component into the keywords of the target component; converting the standard values of the standard component into the standard values of the target component.

[0070] In this embodiment, based on the mapping rules, obtain the property information of the target component displayed on the target application side, and correspond the keywords of the target component and the keywords of the label component one by one. For the mapped keywords, convert the keywords of the standard component into the keywords of the target component, and convert the standard values of the keywords of the standard component into the standard values of the keywords of the target component. For the standard components that are not successfully mapped, according to the target page style of the target application side, decide whether to add or reduce label elements (that is, keywords), and generate the keywords of the target application side and their corresponding standard values according to the added or reduced label elements.

[0071] Among them, the conversion of attribute information includes: when the standard value of the attribute information is a numerical value, convert the standard value of the standard component to the standard value of the target component according to the style unit of the target end. For example, when encountering a standard value that is a numerical value, it is necessary to calculate and convert it to the style units of different ends to adapt to the style units of different ends. In the design draft with a fixed width of 375, in the React Native code, the actual screen width is divided by 375 and then multiplied by the standard numerical value to adapt to the adaptation rules of React Native; in H5 JavaScript, the attribute numerical value is divided by 3.75 and the corresponding vw and vh units are appended to adapt to the adaptation rules of the H5 browser (the percentage units of the visible viewport width and height in the H5 browser).

[0072] Step S103, generate the view interface of the target application end by rendering the target component.

[0073] In one embodiment, generating the view interface of the target application end by rendering the target component includes: generating a preset component package according to the target component, and introducing the target page data from the preset code repository based on the preset component package; generating the view interface of the target application end according to the target page data.

[0074] The preset component package introduces the original code into the view adaptation layer in the preset code repository (the code repository of React Native, the code repository of H5) in the form of an NPM component package to generate the target page data. An NPM component package refers to a plug-in or module of node.js managed by NPM (node package manager). NPM is a tool for installing, uninstalling, updating, and managing the dependencies of node.js projects. NPM can download third-party packages written by others from the NPM server, and can also upload the packages written by itself to the NPM server for others to use. NPM also supports two modes: local installation and global installation, and uses the package.json file to define the attributes and dependencies of the package

[0075] In this embodiment, when compiling and packaging in the code repositories of React native and H5, based on the configured attribute mapping rules, the labels in the target component are replaced back to the original code of the original target application end by means of string replacement. For example, the Box label is the View label in React Native and the Div label in H5, w is replaced with width, and the width value of 100 is replaced with 100 or 100vw. The specific original code is shown in Embodiments 1 to 3.

[0076] Embodiment 1 In the platform with H5 as the target application end, the original code corresponding to the target component includes:

[0077] -name: Specifies the name of the element, which is sent to the server when the form is submitted.

[0078] -rows: Specifies the number of lines of the input text of the element (the displayed height).

[0079] -cols: Specifies the visible width of the element.

[0080] -placeholder: Specifies the hint text displayed within the element, which automatically disappears when the user enters input.

[0081] -maxlength: Specifies the maximum number of characters that the user can enter.

[0082] -minlength: Specifies the minimum number of characters that the user can enter.

[0083] -required: Specifies whether the content of the element is required.

[0084] -readonly: Specifies whether the text within the element is read-only and not allowed to be modified by the user.

[0085] -disabled: Specifies whether the element is disabled and does not allow user interaction.

[0086] -wrap: Specifies the way text wraps, and the possible values are hard and soft.

[0087] -form: Specifies the ID of the form associated with the element. If not specified, it is the current form element.

[0088] Example 2 In the platform where the target application is on IOS, the original code corresponding to the target component of the target application includes:

[0089] -text: Specifies the text content of the input box, which can be set through code or an interface editor.

[0090] -font: Specifies the text font of the input box, which can be a system font or a custom font.

[0091] -textColor: Specifies the text color of the input box, which can be a predefined color or a custom color.

[0092] -textAlignment: Specifies the text alignment of the input box, which can be left-aligned, right-aligned, centered, or natural alignment.

[0093] -editable: Specifies whether the text of the input box is editable. If it is false, the input box can only display text and cannot be modified.

[0094] -selectable: Specifies whether the text in the input box is selectable. If it is false, the input box cannot respond to the user's selection operation.

[0095] -dataDetectorTypes: Specifies whether the text in the input box can detect specific data types, such as phone numbers, links, dates, etc. If detected, the input box will automatically add highlighting and interactive functions to the text.

[0096] -keyboardType: Specifies the keyboard type of the input box, which can be the default, numeric, web address, email, etc. This affects the layout of the keyboard and the formatting of the input content.

[0097] -returnKeyType: Specifies the type of the return key of the input box, which can be done, send, search, newline, etc. This affects the display and function of the return key.

[0098] -delegate: Specifies the delegate object of the input box, which can be any object that conforms to the UITextViewDelegate protocol. Through the delegate object, various events of the input box can be responded to and processed.

[0099] Example 3 In the platform where Andriod is the target application end, the original code corresponding to the target component of the target application end includes:

[0100] -android:hint: Specifies the minimum number of lines of the input box. If it is less than this number of lines, the input box will automatically fill in the blanks.

[0101] -android:singleLine: Specifies whether the input box can only input one line. If it is true, the input box will not wrap lines but display a horizontal scroll bar.

[0102] -android:selectAllOnFocus: Specifies whether the input box automatically selects all text when it gets focus. If it is true, the text in the input box will be selected all.

[0103] -android:maxLength: Specifies the maximum number of characters that the input box can input. If it exceeds this number, the input box will refuse to receive more characters.

[0104] In this example, only one set of code needs to be written to adapt to the view layers of different platforms. Developers do not need to pay attention to and understand the technical differences and adaptation differences of each platform, reducing the learning and development costs. The code is more maintainable and portable, facilitating developers to develop applications on different platforms.

[0105] Such as Figure 2As shown in the figure, the present invention also provides a view adaptation processing device according to the second aspect of the present application, including:

[0106] An acquisition module 201, configured to acquire a standard component, where the standard component is obtained based on a preset syntax rule;

[0107] A mapping module 202, configured to determine an attribute mapping rule between the standard component and the target application end based on the target application end corresponding to the view interface to be displayed;

[0108] A replacement module 203, configured to convert the standard component into a target component of the target application end according to the attribute mapping rule;

[0109] A rendering module 204, configured to generate a view interface of the target application end by rendering the target component.

[0110] In one embodiment, acquiring the standard component includes: acquiring a tag element of the view interface to be displayed; generating a standard component based on the preset syntax rule and the tag element, where the standard component stores attribute information corresponding to the standard component.

[0111] In one embodiment, the standard component includes at least a graphic tag component and a text tag component.

[0112] In one embodiment, the attribute information includes at least: a keyword and a standard value corresponding to the keyword, where the keyword is used for feature description of the tag element, and the standard value is used to represent the feature value corresponding to the feature.

[0113] In one embodiment, determining the attribute mapping rule between the standard component and the target application end based on the target application end corresponding to the view interface to be displayed includes: determining the page style attribute of the target application end; determining a keyword mapping rule and a standard value mapping rule according to the page style attribute.

[0114] In one embodiment, converting the standard component into a target component of the target application end according to the attribute mapping rule includes: replacing the keyword of the standard component with the keyword of the target component based on the attribute mapping rule;

[0115] Replacing the standard value of the standard component with the standard value of the target component.

[0116] In one embodiment, generating a view interface of the target application end by rendering the target component includes: generating a preset component package according to the target component, introducing target page data from a preset code repository based on the preset component package; generating a view interface of the target application end according to the target page data.

[0117] In this application, for the same view, there is no need to repeat writing code for the application ends on different platforms; when writing the components related to the view to be displayed, only standard components are needed to determine the relevant viewing distance elements of the view to be displayed. The standard components are obtained based on preset syntax rules. Subsequently, based on the target application end corresponding to the interface of the view to be displayed, the attribute mapping rules between the standard components and the target application end are determined. According to the attribute mapping rules, the standard components can be converted into target components of the target application end. By rendering the target components, the view interface of the target application end is generated. Thus, a set of code enables the adaptive display of the same view on different platforms, facilitating developers to develop applications on different platforms, so that developers do not need to pay attention to and understand the technical differences and adaptation differences of each platform, reducing the learning and development costs. The code is more maintainable and portable, facilitating developers to develop applications on different platforms.

[0118] See Figure 3 , the electronic device 300 includes a memory 310 and a processor 320.

[0119] The processor 320 can be a Central Processing Unit (CPU), or can also be other general-purpose processors, Digital Signal Processors (DSPs), Application Specific Integrated Circuits (ASICs), Field-Programmable Gate Arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. The general-purpose processor can be a microprocessor or the processor can also be any conventional processor, etc.

[0120] The memory 310 may include various types of storage units, such as system memory, read-only memory (ROM), and permanent storage devices. Among them, the ROM may store static data or instructions required by the processor 320 or other modules of the computer. The permanent storage device may be a readable and writable storage device. The permanent storage device may be a non-volatile storage device that does not lose the stored instructions and data even when the computer is powered off. In some embodiments, the permanent storage device uses a mass storage device (such as a magnetic or optical disk, flash memory) as the permanent storage device. In some other embodiments, the permanent storage device may be a removable storage device (such as a floppy disk, optical drive). The system memory may be a readable and writable storage device or a volatile readable and writable storage device, such as dynamic random access memory. The system memory may store some or all of the instructions and data required by the processor during operation. In addition, the memory 310 may include any combination of computer-readable storage media, including various types of semiconductor storage chips (such as DRAM, SRAM, SDRAM, flash memory, programmable read-only memory), and magnetic disks and / or optical disks may also be used. In some embodiments, the memory 310 may include a removable storage device that is readable and / or writable, such as a compact disc (CD), read-only digital versatile disc (such as DVD-ROM, dual-layer DVD-ROM), read-only Blu-ray disc, super density disc, flash memory card (such as SD card, min SD card, Micro-SD card, etc.), magnetic floppy disk, etc. Computer-readable storage media do not include carrier waves and instantaneous electronic signals transmitted wirelessly or wiredly.

[0121] Executable code is stored on the memory 310, and when the executable code is processed by the processor 320, it may cause the processor 320 to execute some or all of the methods described above.

[0122] In addition, the method according to the present application may also be implemented as a computer program or computer program product, which includes computer program code instructions for executing some or all of the above steps of the method according to the present application.

[0123] Alternatively, the present application may also be implemented as a computer-readable storage medium (or non-transitory machine-readable storage medium or machine-readable storage medium), on which executable code (or computer program or computer instruction code) is stored. When the executable code (or computer program or computer instruction code) is executed by a processor of an electronic device (or a server, etc.), it causes the processor to execute some or all of the steps of the above method according to the present application.

[0124] The embodiments of the present application have been described above. The above description is exemplary and not exhaustive, and is also not limited to the disclosed embodiments. Many modifications and variations are obvious to those of ordinary skill in the art without departing from the scope and spirit of the described embodiments. The choice of terms used herein is intended to best explain the principles of the embodiments, the practical application, or the improvement of the technology in the market, or to enable other ordinary skill in the art to understand the embodiments disclosed herein.

Claims

1. A view adaptation processing method, characterized in that Including: Obtain standard components, where the standard components are obtained based on preset syntax rules; Based on the target application corresponding to the view interface to be displayed, determine the attribute mapping rules between the standard components and the target application; According to the attribute mapping rules, convert the standard components into target components of the target application; Generate the view interface of the target application by rendering the target components.

2. The method according to claim 1, wherein The obtaining of the standard components includes: Obtain the label elements of the view interface to be displayed; Generate the standard components based on the preset syntax rules and the label elements, and the standard components store the attribute information corresponding to the standard components.

3. The method according to claim 2, wherein The standard components at least include graphic label components and text label components.

4. The method according to claim 2, wherein The attribute information at least includes: keywords and the standard values corresponding to the keywords, where the keywords are used for the feature description of the label elements, and the standard values are used to represent the feature values corresponding to the features.

5. The method according to claim 4, characterized in that The determining of the attribute mapping rules between the standard components and the target application based on the target application corresponding to the view interface to be displayed includes: Determine the page style attributes of the target application; According to the page style attributes, determine the keyword mapping rules and the standard value mapping rules.

6. The method according to claim 4, characterized in that, The converting of the standard components into the target components of the target application according to the attribute mapping rules includes: Based on the attribute mapping rules, convert the keywords of the standard components into the keywords of the target components; Convert the standard values of the standard components into the standard values of the target components.

7. The method according to any one of claims 1 to 6, characterized in that The generating of the view interface of the target application by rendering the target components includes: Generate a preset component package according to the target components, and introduce target page data from a preset code repository based on the preset component package; Generate the view interface of the target application according to the target page data.

8. A view adaptation processing device, characterized in that Including: An obtaining module, configured to obtain standard components, where the standard components are obtained based on preset syntax rules; A mapping module, configured to determine the attribute mapping rules between the standard components and the target application based on the target application corresponding to the view interface to be displayed; A replacement module, configured to convert the standard components into target components of the target application according to the attribute mapping rules; A rendering module, configured to generate the view interface of the target application by rendering the target components.

9. An electronic device, characterized in that, Including: A processor; And A memory, on which executable code is stored, and when the executable code is executed by the processor, the processor is caused to execute the method according to any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that, On which executable code is stored, and when the executable code is executed by the processor of an electronic device, the processor is caused to execute the method according to any one of claims 1 to 7.

Images