Disclosure of Invention
In view of this, embodiments of the present invention provide a special topic page processing method and a client, so as to solve the problems of high development cost, long development time, high maintenance cost, and the like in the existing H5 special topic page application manner.
In order to achieve the above purpose, the embodiments of the present invention provide the following technical solutions:
the first aspect of the embodiments of the present invention discloses a method for processing a special topic page, where the method includes:
the method comprises the steps that a client receives H5 page data, and the H5 page data are created in advance based on a JSON data structure;
judging the operating environment of the client;
if the operating environment of the client is an IOS environment or an Android environment, analyzing the H5 page data, and constructing a widget component and a flutter component based on the obtained JSON data structure, wherein the widget component is used for the client to construct an APP page;
the client side constructs an APP page based on the widget component, and constructs a flutter page based on the flutter component on the APP page, wherein the flutter page carries a link of an H5 page;
and if the operating environment of the client is a web environment, generating an html component based on the H5 page data, and creating an H5 page by using the html component.
Preferably, if the operating environment of the client is an IOS environment or an Android environment, before analyzing the H5 page data, the method further includes:
comparing whether the JSON data structure of the currently acquired H5 page data is consistent with the JSON data structure of the H5 page data acquired at the previous time;
if the APP page and the flutter page are consistent, calling and displaying the APP page and the flutter page which are generated at the previous time;
and if the data are not consistent, executing the step of analyzing the H5 page data.
Preferably, the method further comprises:
sharing the flutter page with the third-party client, and enabling the third-party client to display the H5 page based on the link of the H5 page carried in the flutter page.
Preferably, the parsing the H5 page data and constructing a flutter component based on the obtained JSON data structure includes:
analyzing the H5 page data to obtain a JSON data structure;
constructing granularity components based on the JSON data structure, wherein the granularity components comprise a text component, a button component, a ranking list component, a picture component and a layout component, and the layout component comprises a Flex layout component and an extension layout component;
constructing the flutter component based on the granularity component.
Preferably, the JSON data structure includes a component name, component basic settings, and component data.
A second aspect of the present invention discloses a client, where the client includes:
the receiving unit is used for receiving H5 page data, and the H5 page data is created in advance based on a JSON data structure;
the judging unit is used for judging the operating environment of the client, executing the first processing unit if the operating environment of the client is an IOS environment or an Android environment, and executing the second processing unit if the operating environment of the client is a web environment;
the first processing unit is configured to parse the H5 page data, construct a widget component and a flutter component based on the obtained JOSN data structure, construct an APP page based on the widget component, and construct a flutter page on the APP page based on the flutter component, where the widget component is used by the client to construct the APP page, and the flutter page carries a link of an H5 page;
the second processing unit is used for generating an html component based on the H5 page data and creating an H5 page by using the html component.
Preferably, the client further includes:
a comparing unit, configured to compare whether a JSON data structure of currently acquired H5 page data is consistent with a JSON data structure of previously acquired H5 page data if an operating environment of the client is an IOS environment or an Android environment, execute a third processing unit if the JSON data structures are consistent, and execute the first processing unit if the JSON data structures are not consistent;
and the third processing unit is used for calling and displaying the APP page and the flutter page generated at the previous time.
Preferably, the client further includes:
and the sharing unit is used for sharing the flutter page to the third-party client, so that the third-party client displays the H5 page based on the link of the H5 page carried in the flutter page.
The third aspect of the embodiments of the present invention discloses an electronic device, where the electronic device is configured to run a program, and the program executes the method for processing a special page disclosed in the first aspect of the embodiments of the present invention when running.
The fourth aspect of the embodiments of the present invention discloses a storage medium, where the storage medium includes a stored program, and when the program runs, the device where the storage medium is located is controlled to execute the method for processing a special page as disclosed in the first aspect of the embodiments of the present invention.
Based on the above-mentioned subject page processing method and client provided by the embodiments of the present invention, the method is: the client receives H5 page data; judging the operating environment of the client; if the operating environment of the client is the IOS environment or the Android environment, analyzing H5 page data, and constructing a widget component and a flutter component based on the obtained JSON data structure; constructing an APP page based on the widget component, and constructing a flutter page on the APP page based on the flutter component; and if the operating environment of the client is a web environment, generating an html component based on H5 page data, and creating an H5 page by using the html component. In the scheme, the H5 page data are sent to the clients in different operating environments, one part of H5 page data is suitable for the clients in different operating environments, and the development cost is low and the development period is short. When the H5 page data is updated, only uniform modification is needed, and the maintenance cost is low.
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 only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
In this application, 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 identical elements in a process, method, article, or apparatus that comprises the element.
As is known in the art, for different types of platforms, a corresponding H5 topic page needs to be developed for each type of platform. On the one hand, however, the development cost of the H5 thematic pages is high and the development period is long, and a large amount of development cost and development time are required to develop the corresponding H5 thematic pages for each type of platform. On the other hand, the updating frequency of the H5 thematic pages is high, and when the H5 thematic pages are updated, the H5 thematic pages corresponding to each type of platform need to be updated, so that the maintenance cost is high.
Therefore, the embodiment of the invention provides a thematic page processing method and a client, which are used for sending H5 page data which is pre-constructed based on a JSON data structure to clients in different operating environments, and only needing to be modified uniformly when updating H5 page data, so that the development time, the development cost and the maintenance cost are reduced.
Referring to fig. 1, a flowchart of a special topic page processing method provided by an embodiment of the present invention is shown, where the special topic page processing method includes the following steps:
step S101: the client receives the H5 page data.
In the process of implementing the step S101 specifically, a page data configuration center is used to render an H5 page to be displayed in advance, and a JSON data structure is used to store H5 page data corresponding to the H5 page in a key-value form.
It should be noted that the JSON data structure includes a component name, component basic settings, and component data.
The H5 page data includes: page skeleton data of the H5 page and other data of the H5 page. Wherein the page skeleton data at least comprises: constructing a basic module of the H5 page, UI data of the H5 page, and content data of the H5 page.
It should be noted that, the component name, the component basic setting, and the component data in the JSON data structure are defined in advance, so that the parsed JSON data structure can smoothly convert the H5 page data into the parameters required for constructing the flutter component.
It should be further noted that the H5 page is composed of a plurality of nodes, and each page node adopts the same data structure in the process of constructing each page node. When naming each page node, the same field is used as the "id" field value of the page root node, for example, the "id" field value of the page root node is always "AppBox", and the "id" field values of other child nodes are [ parent node id _ random sequence number ].
By adopting the naming mode of each page node, the searching time can be reduced when the nested relation of each page node is searched.
Step S102: and judging the operating environment of the client, executing the step S103 if the operating environment of the client is the IOS environment or the Android environment, and executing the step S105 if the operating environment of the client is the web environment.
In the process of implementing step S103 specifically, the operating environment of the client specifically includes: web environments, IOS environments, and Android environments. Namely, the client is suitable for a web end, an IOS end or an Android end. However, the operating environment of the client is not limited to the above-disclosed web environment, IOS environment, and Android environment, and may be other mobile operating environments.
It should be noted that js Object Notation (json) according to the embodiment of the present invention is a lightweight data exchange format. The flutter is a cross-platform development technology. The flutter comprises a framework, a widget and tools, and can provide a simple and efficient way for developers to construct and deploy exquisite mobile applications on Android and IOS.
Step S103: and analyzing the H5 page data, and constructing a widget component and a flutter component based on the obtained JSON data structure.
It should be noted that, if the client is applicable to the IOS end or the Android end, when the installation package of the client is issued, a preset flutter component structure data package is issued while being carried.
In the specific implementation process of step S103, when the client receives the H5 page data, a flutter page is constructed in the client in combination with the flutter component structure data packet. And constructing a flutter component and a widget component by using the H5 page data. The client side constructs an APP page by using the widget component, and constructs a flutter page on the APP page based on the flutter component.
In further implementation, the client compares whether the JSON data structure of the currently acquired H5 page data is consistent with the JSON data structure of the previously acquired H5 page data, if so, calls and displays the previously generated APP page and the flute page, and if not, executes the step S103.
Step S104: the client side constructs an APP page based on the widget component, and constructs a flutter page based on the flutter component on the APP page.
In the process of implementing step S104 specifically, in the process of constructing the flutter page, the link of the H5 page is carried in the flutter page.
It should be noted that, parsing the H5 page data may obtain a predefined JSON data structure, where the predefined JSON data structure enables smooth conversion of H5 page data into parameters, i.e., granularity components, required for constructing a flutter component.
Preferably, when the operating environment of the client is Android or IOS, the flutter page is shared with a third-party client, so that the third-party client displays the H5 page based on a link of an H5 page carried in the flutter page.
Step S105: generating an html component based on the H5 page data, and creating the H5 page by using the html component.
In the specific implementation process of step S104, an html component of a web end is generated based on the H5 page data of the JSON data structure, and an H5 page is created by using the html component.
Preferably, when the operating environment of the client is a web client, the H5 page is directly sent to a third-party client, so that the H5 page is displayed by the third-party client.
In the embodiment of the invention, the client receives H5 page data and judges the operating environment of the client; if the operating environment of the client is the IOS environment or the Android environment, analyzing H5 page data, and constructing a widget component and a flutter component based on the obtained JSON data structure; constructing an APP page based on the widget component, and constructing a flutter page on the APP page based on the flutter component; and if the operating environment of the client is a web environment, generating an html component based on H5 page data, and creating an H5 page by using the html component. The H5 page data are sent to the clients in different operating environments, one piece of H5 page data are suitable for the clients in different operating environments, and the development cost is low and the development period is short. When the H5 page data is updated, only the page data needs to be uniformly modified in a page data configuration center, and the maintenance cost is low.
Fig. 2 shows a flowchart of building a flutter component according to an embodiment of the present invention, where the process of building a flutter component in step S103 in fig. 1 includes the following steps:
step S201: and analyzing the H5 page data to obtain a JSON data structure.
Step S202: and constructing a granularity component based on the JSON data structure.
In the process of implementing step S202 specifically, the granularity component includes a text component, a button component, a leaderboard component, a picture component, and a layout component. The layout components include a Flex layout component and an expand layout component.
Step S203: constructing the flutter component based on the granularity component.
To better explain the processing procedure of the H5 page data in the above embodiment of the present invention, the processing procedure is illustrated by the H5 page data processing flow diagram shown in fig. 3, and it should be noted that the contents shown in fig. 3 are only for illustration.
In fig. 3, the page data configuration center is used to create the H5 page data based on the JSON data structure, and the H5 page data is sent to clients of different operating environments respectively.
For the client applicable to the web end, the client generates an html component of the web end based on the H5 page data, and creates an H5 page by using the html component.
For the client side suitable for the Android side or the IOS side, when the client side receives the H5 page data, a flutter page is constructed in the client side by combining the flutter component structure data packet. And constructing a flutter component and a widget component by using a JSON data structure obtained by analyzing the H5 page data. The client side constructs an APP page by using the widget component, and constructs a flutter page on the APP page based on the flutter component. And carrying a link of an H5 page in the flutter page. To better explain the generation process of the html component and the flutter component mentioned above, the generation process of the html component and the flutter component is illustrated by the generation schematic diagram of the html component and the flutter component shown in fig. 4, and it should be noted that the content shown in fig. 4 is only for illustration.
In the fig. 4, the client adapted to the web side generates an html component by using the H5 page data. The method is suitable for the client side of the IOS end or the Android end, and the widget component is constructed by the JSON data structure.
It should be noted that both the H5 architecture and the flutter architecture have the characteristics of componentization construction, data management layering, component packaging use, and the like, and both the H5 architecture and the flutter architecture render corresponding components by reading corresponding component data structures. Meanwhile, the structural unification of the H5 architecture and the flutter architecture is beneficial to project migration.
In the embodiment of the invention, a JSON data structure can be obtained by analyzing H5 page data, and a granularity component is constructed based on the JSON data structure, wherein the granularity component can be set according to preset requirements, namely the granularity component is developed in a customized mode, such as setting a button component and a ranking list. For example, the granularity components include, but are not limited to, a text component, a button component, a leaderboard component, a picture component, and a layout component, including a Flex layout component and an expand layout component.
Corresponding to the method for processing a special topic page shown in the foregoing embodiment of the present invention, referring to fig. 5, an embodiment of the present invention further provides a structural block diagram of a client, where the client includes: a receiving unit 501, a judging unit 502, a first processing unit 503 and a second processing unit 504;
the receiving unit 501 is configured to receive H5 page data, where the H5 page data is created in advance based on a JSON data structure.
The determining unit 502 is configured to determine an operating environment of the client, execute the first processing unit 503 if the operating environment of the client is an IOS environment or an Android environment, and execute the second processing unit 504 if the operating environment of the client is a web environment.
The first processing unit 503 is configured to parse the H5 page data, construct a widget component and a flutter component based on the obtained JOSN data structure, construct an APP page based on the widget component, construct a flutter page based on the flutter component on the APP page, where the widget component is used for the client to construct the APP page, and the flutter page carries a link of an H5 page.
The second processing unit 504 is configured to generate an html component based on the H5 page data, and create an H5 page using the html component.
In the embodiment of the invention, the client receives H5 page data and judges the operating environment of the client; if the operating environment of the client is the IOS environment or the Android environment, analyzing H5 page data, and constructing a widget component and a flutter component based on the obtained JSON data structure; constructing an APP page based on the widget component, and constructing a flutter page on the APP page based on the flutter component; and if the operating environment of the client is a web environment, generating an html component based on H5 page data, and creating an H5 page by using the html component. The H5 page data are sent to the clients in different operating environments, one piece of H5 page data are suitable for the clients in different operating environments, and the development cost is low and the development period is short. When the H5 page data is updated, only uniform modification is needed, and the maintenance cost is low.
Preferably, with reference to fig. 5, the client shown in the embodiment of the present invention further includes: the device comprises a comparison unit and a processing unit, wherein the execution principle of each unit is as follows:
and the comparison unit is configured to compare whether the JSON data structure of the currently acquired H5 page data is consistent with the JSON data structure of the H5 page data acquired last time if the operating environment of the client is an IOS environment or an Android environment, execute the third processing unit if the JSON data structure of the currently acquired H5 page data is consistent with the JSON data structure of the H5 page data acquired last time, and execute the first processing unit 503 if the JSON data structure of the currently acquired H5 page data is inconsistent with.
And the third processing unit is used for calling and displaying the APP page and the flutter page generated at the previous time.
Preferably, with reference to fig. 5, the client shown in the embodiment of the present invention further includes:
and the sharing unit is used for sharing the flutter page to the third-party client, so that the third-party client displays the H5 page based on the link of the H5 page carried in the flutter page.
Preferably, with reference to fig. 4, the first processing unit 503 includes: the system comprises an analysis module, a first construction module and a second construction module, wherein the execution principle of each module is as follows:
and the analysis module is used for analyzing the H5 page data to obtain a JSON data structure.
The first building module is used for building granularity components based on the JSON data structure, the granularity components comprise text components, button components, ranking list components, picture component components and layout components, and the layout components comprise Flex layout components and Explay layout components.
A second construction module for constructing the flutter component based on the granularity component.
Based on the client disclosed in the embodiment of the present invention, the modules may be implemented by an electronic device including a processor and a memory. The method specifically comprises the following steps: the modules are stored in a memory as program units, and the program units stored in the memory are executed by a processor to realize the processing of thematic pages.
The processor comprises a kernel, and the kernel calls a corresponding program unit from the memory. The kernel can be set to be one or more than one, and the processing of the thematic page is realized by adjusting the kernel parameters.
The memory may include volatile memory in a computer readable medium, Random Access Memory (RAM) and/or nonvolatile memory such as Read Only Memory (ROM) or flash memory (flash RAM), and the memory includes at least one memory chip.
Further, an embodiment of the present invention provides a processor, where the processor is configured to execute a program, and the program executes a special page processing method when running.
Further, an embodiment of the present invention provides an electronic device, where the electronic device includes a processor, a memory, and a program stored in the memory and capable of running on the processor, and when the processor executes the program, the method for processing a special page as shown in any of the above embodiments is implemented.
The equipment disclosed in the embodiment of the invention can be a PC, a PAD, a mobile phone and the like.
Further, an embodiment of the present invention provides a storage medium, on which a program is stored, where the program, when executed by a processor, implements processing of a special topic page.
The present application further provides a computer program product adapted to perform, when executed on a data processing device, a method of initializing a topical page processing as shown in any of the above embodiments.
In summary, the embodiment of the present invention provides a topic page processing method and a client, where the method includes: the client receives H5 page data; judging the operating environment of the client; if the operating environment of the client is the IOS environment or the Android environment, analyzing H5 page data, and constructing a widget component and a flutter component based on the obtained JSON data structure; constructing an APP page based on the widget component, and constructing a flutter page on the APP page based on the flutter component; and if the operating environment of the client is a web environment, generating an html component based on H5 page data, and creating an H5 page by using the html component. In the scheme, H5 page data pre-constructed based on a JSON data structure is sent to clients in different operating environments, only one H5 page data is needed, the method is suitable for the clients in different operating environments, and development cost and development period can be effectively reduced. Meanwhile, when the H5 page data is updated, only unified modification is needed, and the maintenance cost is low.
The embodiments in the present specification are described in a progressive manner, and the same and similar parts among the embodiments are referred to each other, and each embodiment focuses on the differences from the other embodiments. In particular, the system or system embodiments are substantially similar to the method embodiments and therefore are described in a relatively simple manner, and reference may be made to some of the descriptions of the method embodiments for related points. The above-described system and system embodiments are only illustrative, wherein the units described as separate parts may or may not be physically separate, and the 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 modules may be selected according to actual needs to achieve the purpose of the solution of the present embodiment. One of ordinary skill in the art can understand and implement it without inventive effort.
Those of skill would further appreciate that the various illustrative elements and algorithm steps described in connection with the embodiments disclosed herein may be implemented as electronic hardware, computer software, or combinations of both, and that the various illustrative components and steps have been described above generally in terms of their functionality in order to clearly illustrate this interchangeability of hardware and software. 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.
The previous description of the disclosed embodiments is provided to enable any person skilled in the art to make or use the present invention. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the generic principles defined herein may be applied to other embodiments without departing from the spirit or scope of the invention. Thus, the present invention is not intended to be limited to the embodiments shown herein but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.