CN110795099A

CN110795099A - Page style conversion method and device, terminal equipment and storage medium

Info

Publication number: CN110795099A
Application number: CN201910828470.XA
Authority: CN
Inventors: 朴惠姝; 邓竹立; 彭飞
Original assignee: Wuba Co Ltd
Current assignee: Wuba Co Ltd
Priority date: 2019-09-03
Filing date: 2019-09-03
Publication date: 2020-02-14
Anticipated expiration: 2039-09-03

Abstract

The invention provides a page style conversion method, a page style conversion device, terminal equipment and a storage medium. The method comprises the following steps: acquiring an abstract syntax tree of the RN page code; traversing each node in the abstract syntax tree to obtain a style node of the RN page; according to the style supported by the small program page, carrying out style conversion processing on the style node to obtain a target style node; saving the target style node in a file format supported by the applet page to obtain a style file of the applet page; the style conversion processing comprises at least one of naming rule conversion, style value unit conversion and style value processing mode conversion. Therefore, the beneficial effects of improving the page development efficiency and reducing the page development cost are achieved.

Description

Page style conversion method and device, terminal equipment and storage medium

Technical Field

The present invention relates to the field of computer technologies, and in particular, to a page style conversion method and apparatus, a terminal device, and a storage medium.

Background

With the increasing rise of mobile internet, the demands of users for news reading, video viewing, online shopping, instant messaging and the like on mobile phones, tablets, computers and other devices through pages of different platforms are more complex and diversified. Moreover, because different page formats supported by different platforms are different, when a page is developed, a plurality of different pages supported by different platforms are usually developed for different operating platforms.

For example, if the same page needs to be displayed in the third-party platform applet for a developed rn (read native) page, the page format supported by the third-party platform applet needs to be separately developed again, so that the page development efficiency is low, and the development cost is high.

Disclosure of Invention

The embodiment of the invention provides a page style conversion method, a page style conversion device, terminal equipment and a storage medium, and aims to solve the problem of high development cost of the conventional page.

In order to solve the technical problem, the invention is realized as follows:

in a first aspect, an embodiment of the present invention provides a page style conversion method, including:

acquiring an abstract syntax tree of the RN page code;

traversing each node in the abstract syntax tree to obtain a style node of the RN page;

according to the style supported by the small program page, carrying out style conversion processing on the style node to obtain a target style node;

saving the target style node in a file format supported by the applet page to obtain a style file of the applet page;

the style conversion processing comprises at least one of naming rule conversion, style value unit conversion and style value processing mode conversion.

Optionally, the step of performing style conversion processing on the style node according to a style supported by the applet page to obtain a target style node includes:

in response to the style node being a package style node, performing style conversion processing on a style dictionary referred by the package style node, and adjusting a reference mode for the style dictionary in the package style node;

and responding to the style node as an unpackaged style node, and performing style conversion processing on the style key value pair in the unpackaged style node.

Optionally, the step of performing style conversion processing on the style dictionary referenced by the encapsulation style node and adjusting a reference mode for the style dictionary in the encapsulation style node in response to the style node being an encapsulation style node includes:

responding to the style node as a packaging style node, and performing style conversion processing on style key values contained in a style dictionary referred by the packaging style node to obtain first style key value pairs;

generating and storing a target packaging style name after style conversion processing according to a style variable name corresponding to the style dictionary, a packaging style name corresponding to the first style key value pair and a preset connection symbol aiming at each first style key value pair;

and adjusting the reference mode aiming at the style dictionary in the packaging style node according to the target packaging style name.

Optionally, the step of performing style conversion processing on the style key-value pairs in the unencapsulated style node includes:

traversing each style key value pair, and adjusting the naming rule of the style name in the style key value pair into a cascading style sheet style rule;

and/or, for each style value in the pair of style key values, in response to the style value being a number, setting a unit of the style value;

and/or processing the style value into a format supported by the applet page according to the existence form of each style value in the style key value pair.

Optionally, the step of saving the target style node in a file format supported by the applet page to obtain a style file of the applet page includes:

responding to the target style node as a packaging style node, splicing the target style node according to a cascading style sheet format and storing the target style node as a style sheet file supported by the small program page;

and in response to the target style node being an unpackaged style node, saving the target style node as a markup language file supported by the applet page.

Optionally, after the step of saving the target style node in the file format supported by the applet page to obtain the style file of the applet page, the method further includes:

and drawing the style file into a layout file of the RN page, replacing an original style file in the layout file with the style file, and generating a small program page corresponding to the RN page.

In a second aspect, an embodiment of the present invention provides a page style conversion apparatus, including:

the abstract syntax tree acquisition module is used for acquiring an abstract syntax tree of the RN page code;

the style node acquisition module is used for traversing each node in the abstract syntax tree to acquire a style node of the RN page;

the style conversion processing module is used for carrying out style conversion processing on the style node according to the style supported by the small program page to obtain a target style node;

the style file generation module is used for saving the target style node in a file format supported by the applet page to obtain a style file of the applet page;

Optionally, the style conversion processing module includes:

the packaging style conversion submodule is used for responding to the fact that the style node is a packaging style node, conducting style conversion processing on the style dictionary quoted by the packaging style node, and adjusting the quote mode aiming at the style dictionary in the packaging style node;

and the unencapsulated style conversion submodule is used for performing style conversion processing on the style key value pairs in the unencapsulated style nodes in response to the style nodes being unencapsulated style nodes.

Optionally, the package style conversion sub-module includes:

the style key value pair conversion unit is used for responding to the fact that the style node is a packaging style node, and carrying out style conversion processing on style key value pairs contained in a style dictionary referred by the packaging style node to obtain first style key value pairs;

a packaging style name conversion unit, configured to generate and store a target packaging style name after style conversion processing according to a style variable name corresponding to the style dictionary, a packaging style name corresponding to the first style key value pair, and a preset connection symbol, for each first style key value pair;

and the reference mode adjusting unit is used for adjusting the reference mode aiming at the style dictionary in the packaging style node according to the target packaging style name.

Optionally, the unpackaged style conversion sub-module includes:

the naming rule adjusting unit is used for traversing each style key value pair and adjusting the naming rule of the style name in the style key value pair into a cascading style sheet style rule;

and/or, a style value unit adjustment unit, configured to set, for each style value in the pair of style key values, a unit of the style value in response to the style value being a number;

and/or the style value form processing unit is used for processing the style value into a format supported by the applet page according to the existence form of each style value in the style key value pair.

Optionally, the style file generating module includes:

the packaging style file generation submodule is used for responding to the fact that the target style node is a packaging style node, splicing the target style node according to a stacking style sheet format and storing the target style node as a style sheet file supported by the small program page;

and the unencapsulated style file generation submodule is used for responding to the condition that the target style node is an unencapsulated style node, and storing the target style node as a markup language file supported by the applet page.

Optionally, the apparatus further comprises:

and the applet page generation module is used for pulling the style file into the layout file of the RN page, replacing the original style file in the layout file with the style file and generating an applet page corresponding to the RN page.

In a third aspect, an embodiment of the present invention additionally provides a terminal device, including: a memory, a processor and a computer program stored on the memory and executable on the processor, the computer program, when executed by the processor, implementing the steps of the page style conversion method as described above.

In a fourth aspect, the embodiment of the present invention further provides a computer-readable storage medium, where a computer program is stored on the computer-readable storage medium, and when executed by a processor, the computer program implements the steps of the page style conversion method as described above.

In the embodiment of the invention, the abstract syntax tree of the RN page code is obtained; traversing each node in the abstract syntax tree to acquire a style node of the RN page; according to the style supported by the small program page, carrying out style conversion processing on the style node to obtain a target style node; saving the target style node in a file format supported by the applet page to obtain a style file of the applet page; the style conversion processing comprises at least one of naming rule conversion, style value unit conversion and style value processing mode conversion. Therefore, the beneficial effects of improving the page development efficiency and reducing the page development cost are achieved.

The above 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

In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings used in the description of the embodiments of the present invention will be briefly introduced below, and it is obvious that the drawings in the following description are only some embodiments of the present invention, and it is obvious for those skilled in the art that other drawings can be obtained based on these drawings without creative efforts.

FIG. 1 is a flowchart illustrating steps of a page style conversion method according to an embodiment of the present invention;

FIG. 2 is a flowchart illustrating steps of another page style conversion method according to an embodiment of the present invention;

fig. 2A is a schematic diagram of an RN page style transformation process in an embodiment of the present invention;

FIG. 3 is a schematic structural diagram of a page style converting apparatus according to an embodiment of the present invention;

FIG. 4 is a schematic structural diagram of another page style converting apparatus in an embodiment of the present invention;

fig. 5 is a schematic diagram of a hardware structure of a terminal device in the embodiment of the present invention.

Detailed Description

The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are some, not all, embodiments of the present invention. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making an invasive task, are within the scope of the present invention.

Referring to fig. 1, a flowchart illustrating steps of a page style conversion method according to an embodiment of the present invention is shown.

And step 110, acquiring an abstract syntax tree of the RN page code.

In the embodiment of the invention, in order to avoid respectively developing pages with different styles on different platforms corresponding to one page, style conversion can be directly carried out based on the developed RN page, so that an applet page supported by a target platform is obtained on the basis of the RN page, and the generation efficiency of the applet page can be improved.

Moreover, in order to perform style conversion on the RN page, all style-related codes in the source code of the RN page need to be acquired, and then conversion is performed on the style-related codes. In order to find the style related codes in the RN page conveniently, the abstract syntax tree of the RN page codes may be obtained first.

The Abstract Syntax Tree (AST) is a Tree representation of an Abstract Syntax structure of a source code, and here refers to a source code of a programming language. Each node on the tree represents a structure in the source code. In the embodiment of the present invention, the abstract syntax tree of the RN page code may be obtained in any available manner, which is not limited in the embodiment of the present invention.

And step 120, traversing each node in the abstract syntax tree to obtain the pattern node of the RN page.

After the abstract syntax tree of the RN page is obtained, each node in the abstract syntax tree may be traversed, so as to obtain a style node of the RN page. The pattern node can be understood as a node containing pattern related codes.

Specifically, each node in the abstract syntax tree may be traversed, and whether each node includes a style-related code or not may be detected, and if so, the corresponding node may be determined to be a style node, otherwise, the corresponding node may be determined not to be a style node.

Step 130, performing style conversion processing on the style node according to a style supported by the applet page to obtain a target style node; the style conversion processing comprises at least one of naming rule conversion, style value unit conversion and style value processing mode conversion.

After the style node of the RN page is obtained, in order to convert the RN page into an applet page in a style supported by another platform, according to the style supported by the applet page, style conversion processing may be performed on the original style code block in the style node, so as to obtain a target style code block that satisfies the style supported by the applet page.

Moreover, the specific style conversion processing procedure is different because the styles supported by the RN page and the applet page are different. In general, different formats may differ in naming rules, style value units, ways of handling style values in different dataforms, and the like. Therefore, in the embodiment of the present invention, according to the style of the RN page and the style supported by the applet page, at least one of a style conversion process including, but not limited to, a naming rule conversion process, a style value unit conversion process, and a style value processing manner conversion process may be set.

Taking the RN page as an example, assume that a RN page currently needs to be converted into a style supported by the wechat applet. The RN is developed based on fact, and aims to enable a programmer to develop an APP (Application) of a mobile terminal by using JavaScript (java script), so that a page is the same as a Web page, but has Native flow and operation experience.

Then the pattern format of the RN and the pattern format of the wechat applet may be different as follows:

1. the RN style format is a hump naming rule, and the WeChat applet style format is a css (Cascading StyleS) style rule;

2. the style value of the RN style is usually not written in units, while the style value of the WeChat applet style needs to be written in units;

3. the style value of the RN style supports various forms such as expressions, variables, arrays and the like, and the style value of the WeChat applet needs to independently process formats of different forms.

Therefore, in the embodiment of the present invention, if the RN page is an RN style and the applet page is a style supported by the WeChat applet, when performing the style conversion processing on the original-style code block in each style node, the following contents may be specifically included:

1. the naming rule conversion, for example, determines whether each style name in all style nodes contains a capital letter, and if so, replaces the capital letter with a lowercase letter and adds a "-" to the front.

2. And converting the style value unit. For example, it is determined whether each style value in all style nodes is a numeric value, and if the style value is a numeric value and the style value is not a special style without a unit, the style value may be changed from a numeric value to a string and the corresponding unit may be concatenated.

3. And converting the style value processing mode. For example, whether each style value in all style nodes is an expression is judged, and if the style value is the expression, a calculation method of the expression needs to be added to perform calculation of the expression.

Step 140, saving the target style node in a file format supported by the applet page to obtain a style file of the applet page.

In the embodiment of the invention, in order to realize the style conversion of the page, only the code block related to the style in the page needs to be modified. Therefore, after the target style code block after the style conversion processing is obtained, in order to avoid the conflict between different styles, the target style code block can be output in a file format supported by the applet page, and the style file of the applet page is obtained.

For example, for the RN Style page, after the original Style code block in the RN Style page is converted into the target Style code block supported by the wechat applet, the target Style code block may be additionally output and saved as a Style file supported by the wexcss, for example, a wxcss (WeiXin Style Sheets) file.

After the style file of the applet page is obtained, the style file of the applet page is pulled into the RN page code to replace the style code block corresponding to each style file, so that the applet page corresponding to the RN page can be obtained, secondary development is directly carried out on the basis of the RN page code, a corresponding page supported by the applet is obtained, layout readjustment is not needed, and development cost of the applet page can be effectively reduced. Moreover, the generated applet page code can also support secondary development, so that iteration is facilitated.

Referring to fig. 2, in an embodiment of the present invention, the step 130 may further include:

step 131, responding to the style node being a packaging style node, performing style conversion processing on the style dictionary referred by the packaging style node, and adjusting the reference mode aiming at the style dictionary in the packaging style node;

step 132, in response to the style node being an unpackaged style node, performing style conversion processing on the style key value pair in the unpackaged style node.

In addition, in practical application, the source code corresponding to the RN page may include encapsulated code and/or unencapsulated code. The encapsulation is to organically combine data and source code of operation data to form a class, wherein both data and functions are members of the class. Most of the time in programming, the details of a complex process can be shielded by using a function call (API), and a user only needs to call the function to realize corresponding behaviors without knowing the details. Modular programming can be achieved through encapsulation, programmers work with each other and are responsible for maintaining the details of module objects which are responsible for themselves.

Also, in packaging a style node, style definition is generally performed by referring to a key-value dictionary. For example, for the aforementioned RN page, there are two styles supported by the RN page at present: one is a package style in which JSX (a JavaScript syntax extension, which is used in the read architecture) refers to a dictionary style, and the other is an unpack style in which JSX attributes are directly specified. The key value of the key-value dictionary is usually a name of a style variable of the current dictionary, the value is usually in a dictionary format, and the value dictionary may include a package style name and a package style value corresponding to the package style name.

For example, assume that a certain key-value dictionary is as follows:

style1＝{‘backgroundColor’:‘#FFF’,‘width’:‘100’,‘flex’:‘1’}，

then, the key value of the key-value dictionary is "style 1", the value is { ' background color ' # FFF ', ' width ': 100 ', ' flex ': 1 ' }, the value includes the package style names background color, width and flex, and the package style values corresponding to the package style names are # FFF, 100 and 1 in sequence.

As described above, in practical applications, the data structures of the encapsulated style and the unencapsulated style are different, and therefore, the execution process of the style conversion process may be different. Therefore, in the embodiment of the present invention, before performing the style conversion processing, the type of each style node may be determined, and if the current style node is a package style node, the style conversion processing may be performed on the style dictionary referred by the corresponding package style node, and a reference manner for the style dictionary in the package style node is adjusted; and if the current style node is the unencapsulated style node, the style conversion processing can be directly carried out on the style key value pair in the corresponding unencapsulated style node.

For example, when the style dictionary referenced by the package style node is subjected to style conversion processing, the key value corresponding to the style dictionary, the package style name and the package style value contained in the value thereof need to be subjected to style conversion respectively according to the style supported by the applet page, and after the conversion of the style dictionary is completed, the reference mode of the package style node for the corresponding style dictionary needs to be adjusted accordingly.

When the style dictionary is subjected to the style conversion processing, only the key value and the value contained in the style dictionary can be converted, but the format of the style dictionary is not adjusted, namely, after the style conversion processing, a key-value dictionary can still be obtained; or, only the value part of the style dictionary may be reserved, and the style name of each package style value may be regenerated based on the style dictionary key value and the package style name after the style conversion processing, in order to avoid confusion of data after the style conversion processing is performed on different style dictionaries.

For example, when the style conversion process is performed on the aforementioned style dictionaries style1 { 'background color': '# FFF', 'width': 100 ',' flex ': 1' }, only the key value and the value included in the style dictionaries may be converted without adjusting the format of the style dictionaries themselves, and then the key-value dictionaries after the style conversion process may be obtained as style1 { 'background-color': '# FFF', 'width': 100px ',' flex ': 1' }; if only the value part of the style dictionary is reserved and data confusion occurs after the style conversion processing is performed on the different style dictionaries, the style name of each package style value can be regenerated again based on the key value of the style dictionary and the package style value after the style conversion processing, the package style value and the package style value after the style conversion processing can be obtained at this time as style1_ background-color [ # FFF ], style1_ width [ < 100px ], and style1_ flex [ < 1 ].

Moreover, for a package style node, if the style dictionary referenced by the package style node itself changes, in order not to affect the reference of the package style node to the style dictionary after the style conversion, the reference mode of the corresponding package style node to the corresponding style dictionary may be adjusted after the style conversion processing is performed on the style dictionary accordingly. Specifically, the reference to the style dictionary before no style conversion in the package style node may be adjusted to the reference to the style dictionary after style conversion, and the style reference manner may be adjusted accordingly.

For example, assuming that the target of the style transformation is an applet page supported by the WeChat applet, then the reference package style name may be changed from "style variable name. For example, if reference to the background color in the above-described style dictionary is required, the reference package style name may be adjusted from "style 1.background color" to "style 1_ background-color". And meanwhile, the style reference mode can be adjusted to be of a Class type, and the like.

If the current style node is an unpackaged style node, because the unpackaged style specifies the style by directly setting the attribute of the JSX, all the attributes of all the JSX need to be traversed, and the attribute related to the style is found out, so that all the style key value pairs are obtained, whether each style key value pair accords with the style supported by the applet page is further judged, if the style does not accord with the style supported by the applet page, the style conversion processing can be carried out on the corresponding style key value pair so as to convert the style supported by the applet page, and the reference mode can be unchanged.

The style conversion processing performed on the style key value pairs in the unencapsulated style nodes is the same as the specific style conversion principle of the style conversion processing performed on the style key value pairs contained in the value values corresponding to the style dictionaries referred to in the encapsulated style nodes, that is, the correspondence between the encapsulated style names and the encapsulated style values, and can be customized to different style conversion principles according to requirements, which is not limited in the embodiment of the present invention.

Optionally, in an embodiment of the present invention, the step 131 further includes:

step 1311, in response to the style node being a package style node, performing style conversion processing on style key-value pairs included in a style dictionary referred by the package style node to obtain first style key-value pairs, and obtaining first style key-value pairs;

step 1312, generating and storing a target packaging style name after style conversion processing according to the style variable name corresponding to the style dictionary, the packaging style name corresponding to the first style key value pair and a preset connection symbol for each first style key value pair;

step 1313, adjusting a reference mode of the style dictionary in the package style node according to the target package style name.

If the applet page does not support the style dictionary format, in the embodiment of the present invention, in order to adjust the style in the package style node, style conversion processing may be performed on a style key value pair included in a style dictionary referred by the package style node to obtain a first style key value pair, that is, style conversion processing is performed on a style key value pair included in a value of the original style dictionary in the key-value form, so as to obtain the first style key value pair.

Further, in order to distinguish style key-value pairs corresponding to different style dictionaries to avoid reference confusion, a target package style name after style conversion processing may be generated and stored for each first style key-value pair according to a style variable name corresponding to a corresponding style dictionary, a package style name corresponding to the first style key-value pair, and a preset connection symbol.

The preset connection symbol may be preset according to a requirement, and the embodiment of the present invention is not limited thereto. For example, the connection symbol may be set to be underlined "_", and so on. Furthermore, since the reference manner for the package style value in the original style dictionary is the form of "style variable name. package style name", in the embodiment of the present invention, in order to avoid invalid or confusing reference, the connection symbol may be avoided to be set as "".

For example, assuming that the concatenated symbol is set to be underlined "_", then, for the above-mentioned style dictionary style1 { 'background color': '# FFF', 'width': 100 ',' flex ': 1' }, the style may include a style key-value pair, and the style key-value pair may include the following first style key-value pair obtained after the style conversion processing:

‘background-color’:‘#FFF’，‘width’:‘100px’,‘flex’:‘1’。

furthermore, the RN page may also correspond to a style dictionary style2 { 'background color' # FFF ',' width ': 110', 'flex': 1 '}, if the reference of the package style value is made only with the package style name in each style-converted first style key value pair, then there are two first style key values for width at this time,' 100px ',' width ': 110 px', thereby easily causing confusion when referring to 'width'.

Therefore, in the embodiment of the present invention, in order to avoid the above problem, the package style name of each first style key-value pair may be redefined. From the above analysis, in the code corresponding to the RN page, the style variable name of each style dictionary may uniquely represent one style dictionary. Therefore, in the embodiment of the present invention, for each first pattern key value pair, a target package style name after the style conversion process may be generated and stored according to the pattern variable name corresponding to the corresponding style dictionary, the package style name corresponding to the first pattern key value pair, and the preset connection symbol.

For example, assuming that the connection sign is set to be underlined "_", for the style dictionary style1 { ' background color ' # FFF ', ' width ': 100 ', ' flex ': 1 ' } and the first style key pair obtained after style conversion, the encapsulation style name of each first style key pair may be adjusted to be the "style variable name _ encapsulation style name", where the style variable name may be a style variable name after style conversion processing, and may also be an original style variable name without style conversion processing according to requirements, and the embodiment of the present invention is not limited.

For example, for the first style key value pair ' background-color ' corresponding to style1 described above, the package style name "background-color" in the ' # FFF ' is adjusted to the target package style name "background 1_ background-color", whereas for the first style key value pair ' background-color ' # FFF ' corresponding to style2, the package style name may be adjusted to the target package style name "background 2_ background-color".

Further, the reference mode for the corresponding style dictionary in the corresponding package style node may be adjusted according to the target package style name after the style conversion processing.

For example, the reference encapsulation style name is changed from "style variable name" to "style variable name _ encapsulation style name", and thus the reference encapsulation style name may be directly replaced in the corresponding encapsulation style node.

Optionally, in an embodiment of the present invention, the step 132 further includes:

step 1321, traversing each style key value pair, and adjusting a naming rule of the style name in the style key value pair into a cascading style sheet style rule;

and/or, step 1322, for each style value in the pair of style key values, setting a unit of the style value in response to the style value being a number;

and/or, in step 1323, processing the style value into a format supported by the applet page according to the existence form of each style value in the style key value pair.

In the embodiment of the present invention, when style conversion processing is performed on the style key value pair in the packaged style node or the unpacked style node, the specific operation of the style conversion processing may be different according to the different styles supported by the applet page.

Specifically, each style key value pair may be traversed, and a naming rule of a style name in the style key value pair is adjusted to a cascading style sheet style rule; and/or, for each style value in the pair of style key values, in response to the style value being a number, setting a unit of the style value; and/or processing the style value into a format supported by the applet page according to the existence form of each style value in the style key value pair.

For example, when the naming rule is adjusted, whether the style names of all style key value pairs contain capital letters can be judged, if so, the capital letters can be replaced by corresponding lowercase letters, and a "-" symbol is added in front of the capital letters; when the style value unit is set, whether the style values of all the style key value pairs are numbers or not can be judged, if yes, the style values can be changed into character strings from the numbers and spliced units under the condition of excluding the special style of which the style values have no units. The units corresponding to different values may be preset according to requirements, and the embodiment of the present invention is not limited thereto. For example, the unit that can be set as the length value in some cases is px (pixel), or the like.

When the style values are processed into the format supported by the applet page, whether all the style values are expressions or not can be judged, if the style values are expressions, a calculation method of the expressions is needed to be added to execute calculation of the expressions; if the style value is an array, each element in the array can be split into separate style key value pairs; if the style value is a variable, the style value in the variable form in the encapsulated style node can be moved to the unencapsulated style node; and so on.

For example, assuming that a certain expression value is an expression 100-20 × 2, after the style conversion process, a unit may be set for the value therein, and the calculation method of the expression is added, so as to obtain an expression after the style conversion, which is calc (100px-20px 2), where calc () is the calculation method of the original expression 100-20 × 2.

Referring to fig. 2, in an embodiment of the present invention, the step 140 may further include:

step 141, in response to that the target style node is a package style node, splicing the target style node according to a stacked style sheet format and storing the spliced target style node as a style sheet file supported by the applet page;

and 142, responding to the target style node being the unpackaged style node, and saving the target style node as a markup language file supported by the applet page.

In practical applications, the file formats corresponding to the encapsulated style nodes and the unencapsulated style nodes will generally differ. Therefore, in the embodiment of the present invention, if the target style node is a package style node, the target style node may be spliced according to a stacked style sheet format and stored as a style sheet file supported by the applet page; and if the target style node is the unpackaged style node, saving the target style node as a markup language file supported by the applet page.

For example, assuming that the applet page is a wechat applet page, for the encapsulation Style node obtained after the Style conversion process, the encapsulation Style node may be spliced according to the css format and stored as a Style sheet file supported by the wexss (weixin Style sheets) file; for the unencapsulated style nodes obtained after the style conversion processing, the unencapsulated style nodes can be stored as markup language files supported by the WeChat applet page, namely WXML (WeiXin MarkupLanguage) files.

Fig. 2A is a schematic diagram illustrating style conversion of an RN page. The rectangular frame marked as 1 is a packaging style node of the RN page, the rectangular frame marked as 2 is an unpackaged node of RN layout, a code in the rectangular frame marked as 3 is an RN unpackaged style, the rectangular frame marked as 4 is an applet packaging style WXSS file obtained by storing the packaging style node in 1 after style conversion processing, the rectangular frame marked as 5 is an applet layout WXML file obtained by storing the unpackaged style node in 2 after style conversion processing, and the rectangular frame marked as 6 is an unpackaged style corresponding to 3.

Referring to fig. 2, in the embodiment of the present invention, after the step 140, the method may further include:

step 150, drawing the style file into a layout file of the RN page, replacing an original style file in the layout file with the style file, and generating an applet page corresponding to the RN page.

The foregoing steps implement the conversion of the RN page style to obtain the style file of the applet page, and then to generate the applet page, the style file may be further pulled into the layout file of the RN page, and the style file replaces the original style file in the layout file to generate the applet page corresponding to the RN page. The layout file of the RN page may be understood as all files required for generating the RN page, and the layout file may include a source code of the RN page.

Therefore, in the embodiment of the present invention, if the original style file of the RN page is the style node in the code thereof, after the style file of the applet page is obtained, the style node in the RN page may also be replaced by the style file of the applet page, so that the RN page is directly converted into the applet page.

For example, if the RN page is an RN page and the applet page is a wechat applet page, at this time, the style file obtained after the style conversion may replace a corresponding style node in the source code corresponding to the RN page, so that the RN page may be converted into a page supported by the wechat applet. In the embodiment of the invention, secondary development can be carried out based on RN page codes on the basis of saving RN pages, so that pages supported by different platforms under different styles can be obtained.

In the embodiment of the invention, in response to the style node being a package style node, performing style conversion processing on a style dictionary referred by the package style node, and adjusting a reference mode aiming at the style dictionary in the package style node; and responding to the style node as an unpackaged style node, and performing style conversion processing on the style key value pair in the unpackaged style node. And in response to the style node being a package style node, performing style conversion processing on style key-value pairs contained in a style dictionary referred by the package style node to obtain first style key-value pairs; generating and storing a target packaging style name after style conversion processing according to a style variable name corresponding to the style dictionary, a packaging style name corresponding to the first style key value pair and a preset connection symbol aiming at each first style key value pair; and adjusting the reference mode aiming at the pattern dictionary in the packaging pattern node according to the target packaging pattern name. Traversing each style key value pair, and adjusting the naming rule of the style name in the style key value pair into a cascading style sheet style rule; and/or, for each style value in the style key-value pair, in response to the style value being a number, setting a unit of the style value; and/or processing the style value into a format supported by the applet page according to the existence form of each style value in the style key value pair. Therefore, the style conversion can be respectively carried out according to the style node form in the RN page, and the accuracy of the style conversion is improved.

Moreover, in the embodiment of the present invention, in response to that the target style node is a package style node, the target style node may be spliced according to a stacked style sheet format and stored as a style sheet file supported by the applet page; and in response to the target style node being an unpackaged style node, saving the target style node as a markup language file supported by the applet page. The style conversion accuracy and the validity of the converted style file can be improved.

In addition, in the embodiment of the present invention, the style file may be pulled into a layout file of the RN page, and the style file replaces an original style file in the layout file to generate an applet page corresponding to the RN page. Therefore, the applet page is directly generated on the basis of the RN page, and flexible conversion between the RN page and the applet page can be realized.

EXAMPLE III

The page style converting device provided by the embodiment of the invention is described in detail.

Referring to fig. 3, a schematic structural diagram of a page style conversion apparatus in an embodiment of the present invention is shown.

The network port management device of the embodiment of the invention comprises: an abstract syntax tree obtaining module 210, a pattern node obtaining module 220, a style conversion processing module 230, and a style file generating module 240.

The functions of the modules and the interaction relationship between the modules are described in detail below.

And an abstract syntax tree obtaining module 210, configured to obtain an abstract syntax tree of the RN page code.

A style node obtaining module 220, configured to traverse each node in the abstract syntax tree, and obtain a style node of the RN page.

The style conversion processing module 230 is configured to perform style conversion processing on the style node according to a style supported by the applet page to obtain a target style node; the style conversion processing comprises at least one of naming rule conversion, style value unit conversion and style value processing mode conversion.

The style file generating module 240 is configured to save the target style node in a file format supported by the applet page, so as to obtain a style file of the applet page.

Referring to fig. 4, in an embodiment of the present invention, the style conversion processing module 230 may further include:

and the encapsulation style conversion sub-module 231 is configured to, in response to that the style node is an encapsulation style node, perform style conversion processing on the style dictionary referred by the encapsulation style node, and adjust a reference manner for the style dictionary in the encapsulation style node.

And the unencapsulated pattern conversion submodule 232 is configured to perform pattern conversion processing on the pattern key value pairs in the unencapsulated pattern node in response to that the pattern node is an unencapsulated pattern node.

Optionally, in an embodiment of the present invention, the package style conversion sub-module 231 may further include:

Optionally, in an embodiment of the present invention, the unpackaged style conversion sub-module 232 further may include:

Referring to fig. 4, in an embodiment of the present invention, the style file generating module 240 may further include:

the encapsulation style file generation submodule 241 is configured to, in response to that the target style node is an encapsulation style node, splice the target style node according to a stacked style sheet format and store the spliced target style node as a style sheet file supported by the applet page;

and the unencapsulated pattern file generation sub-module 242 is configured to, in response to that the target pattern node is an unencapsulated pattern node, store the target pattern node as a markup language file supported by the applet page.

Referring to fig. 4, in an embodiment of the present invention, the apparatus may further include:

an applet page generating module 250, configured to pull the style file into a layout file of the RN page, replace an original style file in the layout file with the style file, and generate an applet page corresponding to the RN page.

The mobile terminal provided in the embodiment of the present invention can implement each process implemented by the mobile terminal in the method embodiments of fig. 1 to fig. 2, and is not described herein again to avoid repetition.

EXAMPLE five

Fig. 5 is a schematic diagram of a hardware structure of a terminal device for implementing various embodiments of the present invention.

The terminal device 500 includes but is not limited to: radio frequency unit 501, network module 502, audio output unit 503, input unit 504, sensor 505, display unit 506, user input unit 507, interface unit 508, memory 509, processor 510, and power supply 511. Those skilled in the art will appreciate that the terminal device configuration shown in fig. 5 does not constitute a limitation of the terminal device, and that the terminal device may include more or fewer components than shown, or some components may be combined, or a different arrangement of components. In the embodiment of the present invention, the terminal device includes, but is not limited to, a mobile phone, a tablet computer, a notebook computer, a palm computer, a vehicle-mounted terminal, a wearable device, a pedometer, and the like.

It should be understood that, in the embodiment of the present invention, the radio frequency unit 501 may be used for receiving and sending signals during a message sending and receiving process or a call process, and specifically, receives downlink data from a base station and then processes the received downlink data to the processor 510; in addition, the uplink data is transmitted to the base station. In general, radio frequency unit 501 includes, but is not limited to, an antenna, at least one amplifier, a transceiver, a coupler, a low noise amplifier, a duplexer, and the like. In addition, the radio frequency unit 501 can also communicate with a network and other devices through a wireless communication system.

The terminal device provides the user with wireless broadband internet access through the network module 502, such as helping the user send and receive e-mails, browse webpages, access streaming media, and the like.

The audio output unit 503 may convert audio data received by the radio frequency unit 501 or the network module 502 or stored in the memory 509 into an audio signal and output as sound. Also, the audio output unit 503 may also provide audio output related to a specific function performed by the terminal apparatus 500 (e.g., a call signal reception sound, a message reception sound, etc.). The audio output unit 503 includes a speaker, a buzzer, a receiver, and the like.

The input unit 504 is used to receive an audio or video signal. The input Unit 504 may include a Graphics Processing Unit (GPU) 5041 and a microphone 5042, and the Graphics processor 5041 processes image data of a still picture or video obtained by an image capturing device (e.g., a camera) in a video capturing mode or an image capturing mode. The processed image frames may be displayed on the display unit 506. The image frames processed by the graphic processor 5041 may be stored in the memory 509 (or other storage medium) or transmitted via the radio frequency unit 501 or the network module 502. The microphone 5042 may receive sounds and may be capable of processing such sounds into audio data. The processed audio data may be converted into a format output transmittable to a mobile communication base station via the radio frequency unit 501 in case of the phone call mode.

The terminal device 500 further comprises at least one sensor 505, such as light sensors, motion sensors and other sensors. Specifically, the light sensor includes an ambient light sensor that adjusts the brightness of the display panel 5061 according to the brightness of ambient light, and a proximity sensor that turns off the display panel 5061 and/or a backlight when the terminal device 500 is moved to the ear. As one of the motion sensors, the accelerometer sensor can detect the magnitude of acceleration in each direction (generally, three axes), detect the magnitude and direction of gravity when stationary, and can be used to identify the terminal device attitude (such as horizontal and vertical screen switching, related games, magnetometer attitude calibration), vibration identification related functions (such as pedometer, tapping), and the like; the sensors 505 may also include fingerprint sensors, pressure sensors, iris sensors, molecular sensors, gyroscopes, barometers, hygrometers, thermometers, infrared sensors, etc., which are not described in detail herein.

The display unit 506 is used to display information input by the user or information provided to the user. The Display unit 506 may include a Display panel 5061, and the Display panel 5061 may be configured in the form of a Liquid Crystal Display (LCD), an Organic Light-Emitting Diode (OLED), or the like.

The user input unit 507 may be used to receive input numeric or character information and generate key signal inputs related to user settings and function control of the terminal device. Specifically, the user input unit 507 includes a touch panel 5071 and other input devices 5072. Touch panel 5071, also referred to as a touch screen, may collect touch operations by a user on or near it (e.g., operations by a user on or near touch panel 5071 using a finger, stylus, or any suitable object or attachment). The touch panel 5071 may include two parts, a touch detection device and a touch controller. The touch detection device detects the touch direction of a user, detects a signal brought by touch operation and transmits the signal to the touch controller; the touch controller receives touch information from the touch sensing device, converts the touch information into touch point coordinates, sends the touch point coordinates to the processor 510, and receives and executes commands sent by the processor 510. In addition, the touch panel 5071 may be implemented by various types such as resistive, capacitive, infrared, and surface acoustic wave. In addition to the touch panel 5071, the user input unit 507 may include other input devices 5072. Specifically, the other input devices 5072 may include, but are not limited to, a physical keyboard, function keys (e.g., volume control keys, switch keys, etc.), a trackball, a mouse, and a joystick, which are not described herein.

Further, the touch panel 5071 may be overlaid on the display panel 5061, and when the touch panel 5071 detects a touch operation thereon or nearby, the touch operation is transmitted to the processor 510 to determine the type of the touch event, and then the processor 510 provides a corresponding visual output on the display panel 5061 according to the type of the touch event. Although in fig. 5, the touch panel 5071 and the display panel 5061 are two independent components to implement the input and output functions of the terminal device, in some embodiments, the touch panel 5071 and the display panel 5061 may be integrated to implement the input and output functions of the terminal device, and is not limited herein.

The interface unit 508 is an interface for connecting an external device to the terminal apparatus 500. For example, the external device may include a wired or wireless headset port, an external power supply (or battery charger) port, a wired or wireless data port, a memory card port, a port for connecting a device having an identification module, an audio input/output (I/O) port, a video I/O port, an earphone port, and the like. The interface unit 508 may be used to receive input (e.g., data information, power, etc.) from an external device and transmit the received input to one or more elements within the terminal apparatus 500 or may be used to transmit data between the terminal apparatus 500 and the external device.

The memory 509 may be used to store software programs as well as various data. The memory 509 may mainly include a storage program area and a storage data area, wherein the storage program area may store an operating system, an application program (such as a sound playing function, an image playing function, etc.) required by at least one function, and the like; the storage data area may store data (such as audio data, a phonebook, etc.) created according to the use of the cellular phone, and the like. Further, the memory 509 may include high-speed random access memory, and may also include non-volatile memory, such as at least one magnetic disk storage device, flash memory device, or other volatile solid-state storage device.

The processor 510 is a control center of the terminal device, connects various parts of the entire terminal device by using various interfaces and lines, and performs various functions of the terminal device and processes data by running or executing software programs and/or modules stored in the memory 509 and calling data stored in the memory 509, thereby performing overall monitoring of the terminal device. Processor 510 may include one or more processing units; preferably, the processor 510 may integrate an application processor, which mainly handles operating systems, user interfaces, application programs, etc., and a modem processor, which mainly handles wireless communications. It will be appreciated that the modem processor described above may not be integrated into processor 510.

The terminal device 500 may further include a power supply 511 (e.g., a battery) for supplying power to various components, and preferably, the power supply 511 may be logically connected to the processor 510 through a power management system, so as to implement functions of managing charging, discharging, and power consumption through the power management system.

In addition, the terminal device 500 includes some functional modules that are not shown, and are not described in detail herein.

Preferably, an embodiment of the present invention further provides a terminal device, including: the processor 510, the memory 509, and a computer program stored in the memory 509 and capable of running on the processor 510, where the computer program, when executed by the processor 510, implements each process of the above-described page style conversion method embodiment, and can achieve the same technical effect, and are not described herein again to avoid repetition.

The embodiment of the invention also provides a computer-readable storage medium, wherein a computer program is stored on the computer-readable storage medium, and when being executed by a processor, the computer program realizes each process of the page style conversion method embodiment, and can achieve the same technical effect, and in order to avoid repetition, the description is not repeated here. The computer-readable storage medium may be a Read-Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk or an optical disk.

It should be noted that, in this document, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.

Through the above description of the embodiments, those skilled in the art will clearly understand that the method of the above embodiments can be implemented by software plus a necessary general hardware platform, and certainly can also be implemented by hardware, but in many cases, the former is a better embodiment. Based on such understanding, the technical solutions of the present invention may be embodied in the form of a software product, which is stored in a storage medium (such as ROM/RAM, magnetic disk, optical disk) and includes instructions for enabling a terminal (such as a mobile phone, a computer, a server, an air conditioner, or a network device) to execute the method according to the embodiments of the present invention.

While the present invention has been described with reference to the embodiments shown in the drawings, the present invention is not limited to the embodiments, which are illustrative and not restrictive, and it will be apparent to those skilled in the art that many more modifications and variations can be made without departing from the spirit of the invention and the scope of the appended claims.

Those of ordinary skill in the art will appreciate that the various illustrative elements and algorithm steps described in connection with the embodiments disclosed herein may be implemented as electronic hardware or combinations of computer software and electronic hardware. Whether such functionality is implemented as hardware or software depends upon the particular application and design constraints imposed on the implementation. Skilled artisans may implement the described functionality in varying ways for each particular application, but such implementation decisions should not be interpreted as causing a departure from the scope of the present invention.

It is clear to those skilled in the art that, for convenience and brevity of description, the specific working processes of the above-described systems, apparatuses and units may refer to the corresponding processes in the foregoing method embodiments, and are not described herein again.

In the embodiments provided in the present application, it should be understood that the disclosed apparatus and method may be implemented in other ways. For example, the above-described apparatus embodiments are merely illustrative, and for example, the division of the units is only one logical division, and other divisions may be realized in practice, for example, a plurality of units or components may be combined or integrated into another system, or some features may be omitted, or not executed. In addition, the shown or discussed mutual coupling or direct coupling or communication connection may be an indirect coupling or communication connection through some interfaces, devices or units, and may be in an electrical, mechanical or other form.

The units described as separate parts may or may not be physically separate, and parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of the embodiment.

In addition, functional units in the embodiments of the present invention may be integrated into one processing unit, or each unit may exist alone physically, or two or more units are integrated into one unit.

The functions, if implemented in the form of software functional units and sold or used as a stand-alone product, may be stored in a computer readable storage medium. Based on such understanding, the technical solution of the present invention may be embodied in the form of a software product, which is stored in a storage medium and includes instructions for causing a computer device (which may be a personal computer, a server, or a network device) to execute all or part of the steps of the method according to the embodiments of the present invention. And the aforementioned storage medium includes: various media capable of storing program codes, such as a U disk, a removable hard disk, a ROM, a RAM, a magnetic disk, or an optical disk.

The above description is only for the specific embodiments of the present invention, but the scope of the present invention is not limited thereto, and any person skilled in the art can easily conceive of the changes or substitutions within the technical scope of the present invention, and all the changes or substitutions should be covered within the scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the claims.

Claims

1. A page style conversion method is characterized by comprising the following steps:

acquiring an abstract syntax tree of the RN page code;

2. The method according to claim 1, wherein the step of performing style conversion processing on the style node according to the style supported by the applet page to obtain the target style node comprises:

in response to the style node being a package style node, performing style conversion processing on a style dictionary referenced by the package style node, and adjusting a reference mode for the style dictionary in the package style node;

3. The method according to claim 2, wherein the step of performing a style conversion process on the style dictionary referenced by the package style node and adjusting a reference manner for the style dictionary in the package style node in response to the style node being a package style node comprises:

4. The method according to claim 2 or 3, wherein the step of style converting the style key-value pairs in the unencapsulated style node comprises:

5. The method according to any of claims 1-3, wherein said step of saving said target style node in a file format supported by said applet page, resulting in a style file for said applet page, comprises:

in response to the target style node being a packaging style node, splicing the target style node according to a stacking style sheet format and storing the target style node as a style sheet file supported by the applet page;

6. The method according to any of claims 1-3, further comprising, after the step of saving the target style node in a file format supported by the applet page to obtain a style file for the applet page:

and drawing the style file into a layout file of the RN page, replacing an original style file in the layout file with the style file, and generating an applet page corresponding to the RN page.

7. A page style conversion apparatus, comprising:

8. The apparatus of claim 1, wherein the style conversion processing module comprises:

the packaging style conversion sub-module is used for responding to the fact that the style node is a packaging style node, performing style conversion processing on the style dictionary quoted by the packaging style node, and adjusting the quote mode aiming at the style dictionary in the packaging style node;

9. The apparatus of claim 8, wherein the encapsulation style conversion submodule comprises:

the style key value pair conversion unit is used for responding to the fact that the style node is a packaging style node, and carrying out style conversion processing on style key value pairs contained in a style dictionary quoted by the packaging style node to obtain first style key value pairs;

10. The apparatus of claim 8 or 9, wherein the unencapsulated style conversion submodule comprises:

11. The apparatus according to any one of claims 7-9, wherein the style file generation module comprises:

12. The apparatus of any one of claims 7-9, further comprising:

and the applet page generation module is used for pulling the style file into a layout file of the RN page, replacing an original style file in the layout file with the style file, and generating an applet page corresponding to the RN page.

13. A terminal device, comprising: memory, processor and computer program stored on the memory and executable on the processor, which computer program, when executed by the processor, carries out the steps of the page style conversion method according to any one of claims 1 to 6.

14. A computer-readable storage medium, characterized in that a computer program is stored thereon, which computer program, when being executed by a processor, carries out the steps of the page style conversion method according to one of the claims 1 to 6.