Page state component packaging method and system based on swan gap system, and medium

Abstract

The invention provides a page state component packaging method based on a swan gap system, which comprises the following steps: when a packaging instruction of a page component is detected, defining state constants of different page states; setting page configuration attributes of the page component in different page states; configuring material slots of the page component in different page states; the material slot is used for filling custom page materials; packaging the state constant, the page configuration attribute and the material slot to obtain a page component; and the page component is used for displaying the page of the swan system. On the basis of eliminating code redundancy, the page component is developed by using the characteristics of the swan Mongolia system, the readability of codes is improved, and the user-defined page is created in an embedded manner. The invention further provides a page state component packaging system based on the swan-gap system, a computer readable storage medium and electronic equipment, which have the above beneficial effects.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a page status component encapsulation method, system, medium and device based on the Hongmeng system. Background Art

[0002] Currently, electronic device operating systems include Android and Hongmeng, but the two are not compatible. One reason is that the two have different development languages: Hongmeng development uses ArkTS development language, and Android development uses Java / Kotlin development language. Secondly, the two have different UI development methods: Hongmeng development is based on Hongmeng API, and uses declarative UI development component method during development, and does not need to create layout files, while Android development needs to develop layout files to describe the UI, and then use the loader to load it into the view or page. Hongmeng development is based on component development method, and layout files cannot be used to implement UI description. There is no unified standard for the state development of each page, and it is impossible to intuitively observe the style of the state components of each page from the code.

[0003] Therefore, how to realize the display of page components under the Hongmeng system is a technical problem that technical personnel in this field urgently need to solve. Summary of the invention

[0004] The purpose of this application is to provide a page status component encapsulation method, system, medium and device based on the Harmony system, which can realize the page component display under the Harmony system.

[0005] In order to solve the above technical problems, this application provides a page status component encapsulation method based on the Hongmeng system. The specific technical solution is as follows:

[0006] When the encapsulation instruction of the page component is detected, the state constants of different page states are defined;

[0007] Setting page configuration properties of the page component in different page states;

[0008] Configuring the material slots of the page component in different page states; the material slots are used to fill custom page materials;

[0009] Encapsulate the state constant, the page configuration attribute and the material slot to obtain a page component; the page component is used to display the Hongmeng system page.

[0010] Optionally, the state constants defining different page states include:

[0011] Setting different page states supported by the page component; the page states at least include page data loading, page data successfully loaded, page with no data, and page data loading failure;

[0012] Define the state constants in each page state; the state constants are used to describe the page state of the page component.

[0013] Optionally, setting the page configuration attributes of the page component in different page states includes:

[0014] Create an interface construction function using the first decorator of the Hongmeng system;

[0015] The interface construction function is referenced by the second decorator to set the page configuration properties when the different page states are set.

[0016] Optionally, when setting the page configuration properties for different page states by referencing the interface construction function through the second decorator, it also includes:

[0017] The interface construction function is referenced by the second decorator to set the default page configuration properties of the different page states.

[0018] Optionally, configuring the material slots of the page component in different page states includes:

[0019] Utilize the system API interface to configure the material slots of the page component in different page states;

[0020] The steps of configuring the material slots of the page component in different page states by using the system API interface include:

[0021] For any page state, in the subcomponent, use tags to define the material slot;

[0022] In the parent component, insert the content within the tag of the child component;

[0023] The slot scope in the child component is set to pass data to the parent component; the parent component is used to receive and use the data.

[0024] Optionally, after configuring the material slots of the page component in different page states, the method further includes:

[0025] A custom parameter is defined in the custom component through the second decorator, and the custom parameter is used to allow the parent component to pass a custom construction function to the child component, and the custom construction function is used to call the material slot.

[0026] Optionally, after encapsulating the state constant, the page configuration attribute and the material slot to obtain the page component, the method further includes:

[0027] An object instance is created; the object instance is used to receive an object containing multiple attributes as a parameter; the attributes include page status, page display status and custom status view.

[0028] The corresponding page component is displayed according to the attributes received by the object instance.

[0029] The present application also provides a page status component encapsulation system based on the Hongmeng system, including:

[0030] The constant definition module is used to define the state constants of different page states when the encapsulation instruction of the page component is detected;

[0031] An attribute setting module, used to set the page configuration attributes of the page component in different page states;

[0032] A slot configuration module, used to configure the material slots of the page component in different page states; the material slots are used to fill custom page materials;

[0033] The encapsulation module is used to encapsulate the state constant, the page configuration attributes and the material slot to obtain a page component; the page component is used to display the Hongmeng system page.

[0034] The present application also provides a computer-readable storage medium having a computer program stored thereon, and the computer program implements the steps of the above-mentioned method when executed by a processor.

[0035] The present application also provides an electronic device, including a memory and a processor, wherein a computer program is stored in the memory, and the processor implements the steps of the above-mentioned method when calling the computer program in the memory.

[0036] The present application provides a page status component encapsulation method based on the Hongmeng system, including: when an encapsulation instruction of a page component is detected, defining status constants of different page states; setting page configuration properties of the page component in different page states; configuring material slots of the page component in different page states; the material slots are used to fill custom page materials; encapsulating the status constants, the page configuration properties and the material slots to obtain a page component; the page component is used to display a Hongmeng system page.

[0037] This application can realize custom configuration of page components by configuring status constants, page configuration properties and material slots for different page states, and configure different page components for different page states. On the basis of eliminating code redundancy, the characteristics of the Hongmeng system are applied to develop page components, improve the readability of the code, and create custom pages in an embedded manner.

[0038] The present application also provides a page status component encapsulation system, computer-readable storage medium and electronic device based on the Hongmeng system, which have the above-mentioned beneficial effects and will not be repeated here. BRIEF DESCRIPTION OF THE DRAWINGS

[0039] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on the provided drawings without paying any creative work.

[0040] Figure 1 A flowchart of a method for encapsulating page status components based on the Hongmeng system provided in an embodiment of the present application;

[0041] Figure 2 A schematic diagram of the default style in page data loading provided in an embodiment of the present application;

[0042] Figure 3 A schematic diagram of the default style for a page data loading failure provided in an embodiment of the present application;

[0043] Figure 4 A schematic diagram of a page data custom style provided in an embodiment of the present application;

[0044] Figure 5 A schematic diagram of the structure of a page status component encapsulation system based on the Hongmeng system provided in an embodiment of the present application;

[0045] Figure 6 A structural diagram of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0046] In order to make the purpose, technical solution and advantages of the embodiments of the present application clearer, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0047] The object information involved in this application, including but not limited to the object device information, object personal information, etc., and data, including but not limited to data used for analysis, stored data, displayed data, etc., are all information and data authorized by the object or fully authorized by all parties, and the collection, use and processing of relevant data must comply with the laws, regulations and standards of relevant countries and regions.

[0048] See also Figure 1 , Figure 1 A flowchart of a method for encapsulating a page status component based on the Hongmeng system provided in an embodiment of the present application, the method comprising:

[0049] S101: when a packaging instruction of a page component is detected, state constants of different page states are defined;

[0050] S102: Setting page configuration properties of the page component in different page states;

[0051] S103: configuring the material slots of the page component in different page states; the material slots are used to fill custom page materials;

[0052] S104: Encapsulate the state constant, the page configuration attribute and the material slot to obtain a page component; the page component is used to display the Hongmeng system page.

[0053] Here, there is no limitation on how to detect the encapsulation instruction and the specific content of the encapsulation instruction. The encapsulation instruction is an execution signal of this embodiment, which is used to indicate the encapsulation of the page status component.

[0054] When encapsulating instructions, first define the state constants of different page states. Page state refers to the page state supported by the page component. Specifically, you can set different page states supported by the page component, including at least page data loading, page data successfully loaded, page with no data, and page data failed to load. Then define the state constants in each page state, and the state constants are used to describe the page state of the page component. For example, when the page is loading data, the state of the page component can be set to VIEW_STATE_LOADING; when the page successfully loads data, the state of the page component can be set to VIEW_STATE_SUCCESS; if the page has no data or fails to load, the state of the page component can be set to VIEW_STATE_EMPTY. In this way, these constants can be used in the code to control and handle different page states.

[0055] Thereafter, the page configuration properties need to be set in step S102. Specifically, the first decorator of the Hongmeng system can be used to create an interface construction function, and then the interface construction function can be referenced by the second decorator to set the page configuration properties for different page states. There is no specific limitation on the first decorator and the second decorator. For example, the first decorator may be @Builder, and the second decorator may be @BuilderParam decorator. It is easy to understand that there are differences in page configuration properties for different page states. For example, the page configuration data corresponding to the page loading state may include page text color, page text size, page background color, etc. After the page is loaded successfully, it may further include page configuration properties such as page images or page animations. @BuilderParam and @Builder are used to construct annotations for complex objects. You can define a class and use the @Builder annotation to create an instance of a class using the builder pattern, and use the @BuilderParam annotation on the parameters of the constructor or setter method.

[0056] In order to implement the default loading and loading failure of the component, the page can be configured with page properties, you can design a state component that receives some configurable properties to customize its display style. For example, you can define a state component named StateComponent to indicate the current page state. The state component can determine the displayed content based on the passed in viewState property. You can also provide two additional properties, loadingText and emptyText, to customize the text content when loading and loading failure respectively.

[0057] In addition, the interface construction function is referenced by the second decorator to set the default page configuration properties of the different page states. For example, when loadingText and emptyText are not provided, the default values ​​are used. In addition, in this usage mode, the page component has customized the default UI component, and the developer does not need to code the UI component. By setting the configurable properties of the state component, the display style of the page component can be slightly customized.

[0058] It should be noted that the page configuration attributes of different page states are different. For example, for the two page states of page data loading and page data loading failure, the page display content and page UI may be different.

[0059] In step S103, it is necessary to configure the material slots of the page component in different page states, and the material slots are used to fill the custom page materials. Specifically, the system API interface can be used to configure the material slots of the page component in different page states, which may include the following steps:

[0060] Step 1: For any page state, in the subcomponent, use tags to define the material slot;

[0061] Step 2: In the parent component, insert content into the tag of the child component;

[0062] The third step is to set the slot scope in the child component to pass data to the parent component; the parent component is used to receive and use the data.

[0063] Material slots can be used to fill in various types of materials such as images, texts, videos, audios, etc., or they can be styles coded by developers themselves, thereby achieving style customization of page components.

[0064] In addition, in order to avoid the user not needing to customize the page style, after configuring the material slot, the default style state under different page states and the custom style state containing the material slot can be determined. If the user does not need to customize, the default style under the corresponding page state can be directly used. The default style states under different page states can be consistent or different.

[0065] In the process of implementing the customization of the material slot, the Hongmeng @BuilderParam decorator can be used to reference the @Builder function to embed a completely customized component. Specifically, the custom parameter is defined in the custom component through the second decorator. The custom parameter is used to allow the parent component to pass the custom builder function to the child component, and the custom builder function is used to call the material slot. In the actual application process, first install the Hongmeng development environment and configure the relevant tools. Create a custom component class that needs to inherit from the base class provided by Hongmeng (such as Ability, Service, etc.) and add the @Builder annotation to the class. In the custom component class, add the @BuilderParam annotation to the properties that need to be passed to other components. Use the @Builder annotation in other components to reference MyCustomComponent and pass parameters through @BuilderParam. Finally, start this custom component in the application.

[0066] The embodiment of the present application can realize custom configuration of page components by configuring status constants, page configuration properties and material slots for different page states, and configure different page components for different page states. On the basis of eliminating code redundancy, the characteristics of the Hongmeng system are applied to develop page components, improve the readability of the code, and create custom pages in an embedded manner.

[0067] On the basis of the above embodiment, after obtaining the page component, an object instance can be created, so as to display the corresponding page component according to the attributes received by the object instance. The object instance is used to receive an object containing multiple attributes as a parameter, and the attributes may include page status, page display status, and custom status view, etc.

[0068] For example, you can enter the following code:

[0069] StateComponent({

[0070] viewState: this.viewState,

[0071] stateDisplayConfigurator: this.stateConfigurator,

[0072] viewContent: this.viewContent,

[0073] customEmpty: this.customEmpty,

[0074] customLoading: this.customLoading,

[0075] retryCallback:this.retryCallback

[0076] })

[0077] Create an object instance called StateComponent. This object receives an object containing multiple properties as a parameter. These properties include:

[0078] viewState: represents the state of the view, which may be a state machine or other type of state management object.

[0079] stateDisplayConfigurator: A function or object used to configure the state display.

[0080] viewContent: represents the content of the view, which can be a React component or other types of view elements.

[0081] customEmpty: A custom empty state view, displayed when there is no data.

[0082] customLoading: A custom loading status view that is displayed when data is loading.

[0083] retryCallback: The callback function called when the loading fails and the user clicks the retry button.

[0084] The StateComponent object can be used to manage the state, content, and display of the view, as well as handle retry logic when loading fails.

[0085] For example, developer A wants to implement a scenario where a picture is displayed in the case of success. The code is as follows:

[0086] @Builder

[0087] successStateDisplayPicture(pictureUrl: string) {

[0088] Column() {

[0089] Image(pictureUrl).height('100%').width("100%")

[0090] }.height('100%').width("100%")

[0091] }

[0092] StateComponent({

[0093] viewState: this.viewState,

[0094] viewContent: this.successStateDisplayPicture()})

[0095] You also need to set:

[0096] this.viewState= ViewStateConstant.VIEW_STATE_SUCCESS;

[0097] In this scenario, there are no requirements for loading and failure, and the default parameter configuration can be used. Therefore, StateComponent does not need to set parameters such as stateDisplayConfigurator.

[0098] The above code is a Flutter component using the Builder mode. It defines a method called successStateDisplayPicture, which accepts a string parameter pictureUrl to display a picture. The process uses Column and Image components to create a vertical layout containing a picture with a height and width of 100%.

[0099] Then, in StateComponent, set the viewState property to the current state, and set the viewContent property to the result of calling the successStateDisplayPicture() method. When the state of StateComponent is viewState, it will display a picture with a height and width of 100%. The viewState can determine the actual page state through parameters.

[0100] From the above embodiments, it can be seen that the page state component encapsulation method based on the Hongmeng system provided by this application allows users to choose whether to use custom page materials, that is, whether to customize material slots. At this time, the default style can be selected accordingly, or the material slot can be used to customize the style. After that, after selecting the page style, it is further selected whether to set the page configuration attributes. The default page configuration attributes and customized page configuration attributes under different page states are also provided.

[0101] Of course, in other embodiments, the customized determination of the page configuration attributes may be performed first, and then the determination of whether the page style, that is, the material slot is selected, may be performed.

[0102] See also Figures 2 to 4 , Figure 2 This is a schematic diagram of the default style in the page data loading provided in the embodiment of the present application. Figure 3 This is a schematic diagram of the default style of a page data loading failure provided in an embodiment of the present application. Figure 4 This is a schematic diagram of a page data custom style provided in an embodiment of the present application. It can be seen that for different page states, its page components can implement custom configurations or use default styles.

[0103] See also Figure 5 , the present application also provides a page status component encapsulation system based on the Hongmeng system, including:

[0104] The constant definition module is used to define the state constants of different page states when the encapsulation instruction of the page component is detected;

[0105] An attribute setting module, used to set the page configuration attributes of the page component in different page states;

[0106] A slot configuration module, used to configure the material slots of the page component in different page states; the material slots are used to fill custom page materials;

[0107] The encapsulation module is used to encapsulate the state constant, the page configuration attributes and the material slot to obtain a page component; the page component is used to display the Hongmeng system page.

[0108] Based on the above embodiment, as a preferred embodiment, the constant definition module includes:

[0109] A state setting unit, used to set different page states supported by the page component; the page states at least include page data loading, page data successfully loaded, page with no data, and page data loading failure;

[0110] The constant definition unit is used to define the state constants in each page state; the state constants are used to describe the page state of the page component.

[0111] Based on the above embodiment, as a preferred embodiment, the attribute setting module includes:

[0112] A function construction unit, used to create an interface construction function using the @Builder decorator of the Hongmeng system;

[0113] The property determination unit is used to set the page configuration properties when the different page states are set by referencing the interface construction function through the second decorator.

[0114] Based on the above embodiments, as a preferred embodiment, it also includes:

[0115] A default property configuration module is used to set the default page configuration properties of the different page states by referencing the interface construction function through the second decorator.

[0116] Based on the above embodiment, as a preferred embodiment, the slot configuration module is a module for configuring the material slots of the page component in different page states using the system API interface.

[0117] At this point, the slot configuration module is used to perform the following steps:

[0118] For any page state, in the subcomponent, use tags to define the material slot;

[0119] In the parent component, insert the content within the tag of the child component;

[0120] The slot scope in the child component is set to pass data to the parent component; the parent component is used to receive and use the data.

[0121] Based on the above embodiments, as a preferred embodiment, it also includes:

[0122] A slot calling module is used to define custom parameters in a custom component through the second decorator, wherein the custom parameters are used to allow a parent component to pass a custom construction function to a child component, and the custom construction function is used to call the material slot.

[0123] Based on the above embodiments, as a preferred embodiment, it also includes:

[0124] The page application module is used to create an object instance; the object instance is used to receive an object containing multiple attributes as a parameter; the attributes include page status, page display status and custom status view. The corresponding page component is displayed according to the attributes received by the object instance.

[0125] The present application also provides a computer-readable storage medium on which a computer program is stored, and when the computer program is executed, the steps provided in the above embodiment can be implemented. The storage medium may include: a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, and other media that can store program codes.

[0126] The present application also provides an electronic device, see Figure 6 , a structural diagram of an electronic device provided in an embodiment of the present application, such as Figure 6 As shown, a processor 1410 and a memory 1420 may be included.

[0127] Among them, the processor 1410 may include one or more processing cores, such as a 4-core processor, an 8-core processor, etc. The processor 1410 may be implemented in at least one hardware form of DSP (Digital Signal Processing), FPGA (Field-Programmable Gate Array), and PLA (Programmable Logic Array). The processor 1410 may also include a main processor and a coprocessor. The main processor is a processor for processing data in the awake state, also known as a CPU (Central Processing Unit); the coprocessor is a low-power processor for processing data in the standby state. In some embodiments, the processor 1410 may be integrated with a GPU (Graphics Processing Unit), which is responsible for rendering and drawing the content to be displayed on the display screen. In some embodiments, the processor 1410 may also include an AI (Artificial Intelligence) processor, which is used to process computing operations related to machine learning.

[0128] The memory 1420 may include one or more computer-readable storage media, which may be non-transitory. The memory 1420 may also include a high-speed random access memory, and a non-volatile memory, such as one or more disk storage devices, flash memory storage devices. In this embodiment, the memory 1420 is at least used to store the following computer program 1421, wherein, after the computer program is loaded and executed by the processor 1410, it can implement the relevant steps in the method performed by the electronic device side disclosed in any of the aforementioned embodiments. In addition, the resources stored in the memory 1420 may also include an operating system 1422 and data 1423, etc., and the storage method may be temporary storage or permanent storage. Among them, the operating system 1422 may include Windows, Linux, Android, etc.

[0129] In some embodiments, the electronic device may further include a display screen 1430 , an input / output interface 1440 , a communication interface 1450 , a sensor 1460 , a power source 1470 , and a communication bus 1480 .

[0130] certainly, Figure 6 The structure of the electronic device shown does not constitute a limitation on the electronic device in the embodiments of the present application. In actual applications, the electronic device may include Figure 6 More or fewer components than shown, or combinations of certain components.

[0131] The various embodiments in the specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the various embodiments can be referred to each other. For the system provided in the embodiment, since it corresponds to the method provided in the embodiment, the description is relatively simple, and the relevant parts can be referred to the method part description.

[0132] Specific examples are used herein to illustrate the principles and implementation methods of the present application, and the description of the above embodiments is only used to help understand the method and core ideas of the present application. It should be pointed out that for ordinary technicians in this technical field, without departing from the principles of the present application, several improvements and modifications can be made to the present application, and these improvements and modifications also fall within the scope of protection of the claims of the present application.

[0133] It should also be noted that, in this specification, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "comprise", "include" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, an element defined by the statement "comprises a ..." does not exclude the presence of other identical elements in the process, method, article or device including the element.

Claims

1. A page status component encapsulation method based on Hongmeng system, characterized in that: include: When the encapsulation instruction of the page component is detected, the state constants of different page states are defined; Setting page configuration properties of the page component in different page states; Configuring the material slots of the page component in different page states; the material slots are used to fill custom page materials; Encapsulate the state constant, the page configuration attribute and the material slot to obtain a page component; the page component is used to display the Hongmeng system page.

2. The page status component encapsulation method according to claim 1, characterized in that: The state constants defining different page states include: Setting different page states supported by the page component; the page states at least include page data loading, page data successfully loaded, page with no data, and page data loading failure; Define the state constants in each page state; the state constants are used to describe the page state of the page component.

3. The page status component encapsulation method according to claim 1, characterized in that: The page configuration properties of the page component in different page states include: Create an interface construction function using the first decorator of the Hongmeng system; The interface construction function is referenced by the second decorator to set the page configuration properties when the different page states are set.

4. The page status component encapsulation method according to claim 3, characterized in that: When the page configuration properties of the different page states are set by referencing the interface construction function through the second decorator, it also includes: The interface construction function is referenced by the second decorator to set the default page configuration properties of the different page states.

5. The page status component encapsulation method according to claim 1, characterized in that: Configuring the material slots of the page component in different page states includes: Utilize the system API interface to configure the material slots of the page component in different page states; The steps of configuring the material slots of the page component in different page states by using the system API interface include: For any page state, in the subcomponent, use tags to define the material slot; In the parent component, insert the content within the tag of the child component; The slot scope in the child component is set to pass data to the parent component; the parent component is used to receive and use the data.

6. The page status component encapsulation method according to claim 3, characterized in that: After configuring the material slots of the page component in different page states, it also includes: A custom parameter is defined in the custom component through the second decorator, and the custom parameter is used to allow the parent component to pass a custom construction function to the child component, and the custom construction function is used to call the material slot.

7. The page status component encapsulation method according to claim 1, characterized in that: After encapsulating the state constant, the page configuration attribute and the material slot to obtain the page component, it also includes: Creating an object instance; the object instance is used to receive an object containing multiple attributes as a parameter; the attributes include page status, page display status and custom status view; The corresponding page component is displayed according to the attributes received by the object instance.

8. A page status component encapsulation system based on Hongmeng system, characterized in that: include: The constant definition module is used to define the state constants of different page states when the encapsulation instruction of the page component is detected; An attribute setting module, used to set the page configuration attributes of the page component in different page states; A slot configuration module, used to configure the material slots of the page component in different page states; the material slots are used to fill custom page materials; The encapsulation module is used to encapsulate the state constant, the page configuration attributes and the material slot to obtain a page component; the page component is used to display the Hongmeng system page.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by the processor, the steps of the page status component encapsulation method based on the Hongmeng system are implemented as described in any one of claims 1 to 7.

10. An electronic device, characterized in that: It includes a memory and a processor, the memory stores a computer program, and when the processor calls the computer program in the memory, it implements the steps of the page status component encapsulation method based on the Hongmeng system as described in any one of claims 1 to 7.

Images