CN113568608B - A method, device, equipment and storage medium for displaying component information - Google Patents
A method, device, equipment and storage medium for displaying component information Download PDFInfo
- Publication number
- CN113568608B CN113568608B CN202110776238.3A CN202110776238A CN113568608B CN 113568608 B CN113568608 B CN 113568608B CN 202110776238 A CN202110776238 A CN 202110776238A CN 113568608 B CN113568608 B CN 113568608B
- Authority
- CN
- China
- Prior art keywords
- candidate component
- information
- component
- search keyword
- search
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/33—Intelligent editors
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/31—Programming languages or programming paradigms
- G06F8/315—Object-oriented languages
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computing Systems (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本公开实施例关于一种组件信息的展示方法、装置、设备及存储介质，涉及计算机技术领域。本公开实施例能够解决相关技术中，由于需要编程人员频繁的在浏览器和代码编写两个环境中来回的切换，从而导致代码编写过程需要耗费大量的时间资源，效率极低的问题。该方法包括：响应于针对搜索关键词的搜索指令，显示与搜索关键词对应的至少一个候选组件的信息。响应于对目标候选组件的触发操作，获取目标候选组件的标签；目标候选组件为至少一个候选组件中的一个。显示目标候选组件的标签。
The disclosed embodiments relate to a method, apparatus, device and storage medium for displaying component information, and relate to the field of computer technology. The disclosed embodiments can solve the problem in the related art that programmers need to frequently switch back and forth between the browser and the code writing environment, which results in the code writing process consuming a lot of time resources and being extremely inefficient. The method comprises: in response to a search instruction for a search keyword, displaying information of at least one candidate component corresponding to the search keyword. In response to a trigger operation on a target candidate component, obtaining a label of the target candidate component; the target candidate component is one of the at least one candidate component. Displaying the label of the target candidate component.
Description
Technical Field
The embodiment of the disclosure relates to the technical field of computers, in particular to a method, a device, equipment and a storage medium for displaying component information.
Background
In the background of rapid development of internet technology today, internet (Web) front-end technology has entered a new era. Development methods represented by assembly have gradually become the dominant trend in the front-end field. As more and more components are developed, how to quickly acquire a usage mode of a component becomes the biggest workload of a programmer in component code writing work.
In the prior art, the approach to the way the acquisition component is used is typically to query the relevant document website through a browser. In this way, in the process of coding, a programmer is required to code while comparing the component information of the browser. Therefore, a programmer is required to frequently switch back and forth in both the browser and the code writing environment, so that the code writing process needs to consume a great deal of time resources, and is extremely low in efficiency.
Disclosure of Invention
The embodiment of the disclosure provides a method, a device, equipment and a storage medium for displaying component information, which at least solve the problems that in the related art, programmers are required to frequently switch back and forth between a browser and a code writing environment, so that a large amount of time resources are required to be consumed in the code writing process, and the efficiency is extremely low.
The technical scheme of the embodiment of the disclosure is as follows:
according to a first aspect of embodiments of the present disclosure, a method for displaying component information is provided, which is applied to a code editor. The method includes determining a target candidate component in response to a triggering operation of information of the target candidate component in a code editing area. The target candidate component is displayed in the code editing area.
With reference to the first aspect, in one possible implementation manner, in response to a triggering operation on information of a target candidate component in a code editing area, the method for determining the target candidate component includes acquiring information of at least one candidate component corresponding to a search keyword in response to a search instruction for the search keyword input in the code editing area. Information of at least one candidate component corresponding to the search keyword is displayed in the code editing area. A target candidate component is determined in response to a click operation in the information of the at least one candidate component, the target candidate component being one of the at least one candidate component.
With reference to the first aspect, in a possible implementation manner, the method further includes acquiring a data packet of the target candidate component and a dependent data packet of the candidate component in response to a trigger operation on the target candidate component. And installing the data packet and the dependent data packet of the target candidate component, and importing the data packet of the target candidate component.
With reference to the first aspect, in another possible implementation manner, the method further includes displaying a configuration button of the target candidate component. And responding to the triggering operation of the configuration buttons, displaying at least one configuration control, wherein each configuration control corresponds to one function. And in response to a selection operation of at least one target configuration control, displaying information of a function corresponding to the target configuration control. The target configuration control is one of the at least one configuration control.
With reference to the first aspect, in another possible implementation manner, after the responding to the selection operation of the at least one target configuration control, the method further includes closing the selection operation of the first-selected target configuration control if it is determined that the function of the first-selected target configuration control is mutually exclusive with the function of the second-selected target configuration control. And generating and displaying prompt information. The prompt information is used for prompting that the function of the target configuration control selected firstly and the function of the target configuration control selected later are mutually exclusive.
With reference to the first aspect, in another possible implementation manner, the method for acquiring the search instruction includes receiving a preset character input by a user at a preset position of the code editing area, and displaying a search input box. And receiving a first search keyword input by a user in a search input box, and generating a search instruction. The search keyword is a first search keyword.
In combination with the first aspect, in another possible implementation manner, the method for acquiring the search instruction includes receiving a preset character input by a user at a preset position of the code editing area and a second search keyword input after the preset character, and generating the search instruction. The search keyword is a second search keyword.
With reference to the first aspect, in another possible implementation manner, in response to a search instruction for a search keyword, a method for displaying information of at least one candidate component corresponding to the search keyword includes determining a technical stack corresponding to a current editing position in a code editing area in response to the search instruction for the search keyword. And searching information of at least one candidate component corresponding to the search keyword in a database corresponding to the technical stack. Information of at least one candidate component is displayed.
With reference to the first aspect, in another possible implementation manner, displaying the target candidate component in the code editing area includes acquiring a tag of the target candidate component. The labels of the target candidate components are displayed in the code editing area.
According to a second aspect of embodiments of the present disclosure, there is provided a presentation apparatus of component information, the presentation apparatus including a processing unit configured to determine a target candidate component in response to a trigger operation of information of the target candidate component in a code editing area. And a display unit configured to display the target candidate component of the processing unit in the code editing area.
With reference to the second aspect, in one possible implementation manner, the obtaining unit is specifically configured to obtain, in response to a search instruction for a search keyword input in the code editing area, information of at least one candidate component corresponding to the search keyword. And a display unit configured to display information of at least one candidate component corresponding to the search keyword acquired by the acquisition unit in the code editing area. And a processing unit. Is configured to determine a target candidate component in response to a click operation in the at least one candidate component displayed by the display unit, the target candidate component being one of the at least one candidate component.
With reference to the second aspect, in one possible implementation manner, the obtaining unit is further configured to obtain, in response to a trigger operation on the target candidate component, a data packet of the target candidate component and a dependent data packet of the candidate component. And the processing unit is configured to install the data packet of the target candidate component and the dependent data packet acquired by the acquisition unit and import the data packet of the target candidate component.
With reference to the second aspect, in another possible implementation manner, the display unit is further configured to display a configuration button of the target candidate component, display at least one configuration control in response to a triggering operation of the configuration button, each configuration control corresponds to a function, and display information of the function corresponding to the target configuration control in response to a selection operation of the at least one target configuration control. The target configuration control is one of the at least one configuration control.
With reference to the second aspect, in another possible implementation manner, the processing unit is further configured to close the selection operation of the first-selected target configuration control if it is determined that the function of the first-selected target configuration control is mutually exclusive with the function of the second-selected target configuration control. The processing unit is further configured to generate prompt information, wherein the prompt information is used for prompting that the function of the target configuration control selected firstly and the function of the target configuration control selected later are mutually exclusive. The display unit is configured to display the prompt information generated by the processing unit.
With reference to the second aspect, in another possible implementation manner, the obtaining unit is specifically configured to receive a preset character input by a user at a preset position of the code editing area. And the display unit is configured to display a search input box after the acquisition unit receives the preset characters. And the acquisition unit is further configured to receive the search keywords input by the user in the search input box. And the processing unit is configured to generate a search instruction according to the first search keyword received by the acquisition unit. The search keyword is a first search keyword.
With reference to the second aspect, in another possible implementation manner, the obtaining unit is specifically configured to receive a preset character input by a user at a preset position of the code editing area and a second search keyword input after the preset character. The search keyword is a second search keyword. And the processing unit is configured to generate a search instruction according to the second search keyword received by the acquisition unit.
With reference to the second aspect, in another possible implementation manner, the processing unit is further configured to determine, in response to a search instruction for a search keyword, a technical stack corresponding to a current editing position in the code editing area. The processing unit is further configured to search the database corresponding to the technical stack for information of at least one candidate component corresponding to the search keyword. And a display unit configured to display information of the at least one candidate component searched by the processing unit.
With reference to the second aspect, in another possible implementation manner, the acquiring unit is specifically configured to acquire a tag of the target candidate component. And a display unit configured to display the tag of the target candidate component acquired by the acquisition unit in the code editing area.
According to a third aspect of embodiments of the present disclosure, there is provided an electronic device comprising a processor, a memory for storing processor-executable instructions, wherein the processor is configured to execute the instructions to implement the method of presenting component information as provided in the first aspect above.
According to a fourth aspect of embodiments of the present disclosure, there is provided a computer readable storage medium comprising instructions which, when executed by a processor in an electronic device, cause the electronic device to perform the method of presenting component information as provided in the first aspect above.
According to a fifth aspect of embodiments of the present disclosure, there is provided a computer program product, which when executed by a processor in an electronic device, causes the electronic device to perform the method of presenting component information as provided in the first aspect described above.
According to the technical scheme provided by the embodiment of the disclosure, the code editor can determine the target candidate component required by the user by sensing the triggering operation of the user on the information of the target candidate component in the code editing area. And displaying the target candidate component directly in the code editing area. Thus, the user does not need to query and acquire the information of the related components from the browser. The method and the device provide convenience for the user to write the codes of the components, save the time for writing the codes and improve the programming efficiency.
Drawings
The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the disclosure and, together with the description, serve to explain the principles of the disclosure and not to limit the disclosure in any way.
Fig. 1 is a schematic structural diagram of an electronic device according to an embodiment of the disclosure;
Fig. 2 is a flow chart of a method for displaying component information according to an embodiment of the disclosure;
FIG. 3 is a schematic diagram of a component information display interface according to an embodiment of the present disclosure;
FIG. 4 is a second flow chart of a method for displaying component information according to an embodiment of the disclosure;
FIG. 5A is a second schematic diagram of a display interface for component information according to an embodiment of the present disclosure;
FIG. 5B is a third diagram illustrating a display interface of component information according to an embodiment of the present disclosure;
FIG. 5C is a diagram illustrating a component information presentation interface according to an embodiment of the present disclosure;
FIG. 6 is a third flow chart of a method for displaying component information according to an embodiment of the disclosure;
FIG. 7 is a diagram of a component information presentation interface according to an embodiment of the present disclosure;
Fig. 8 is a schematic structural diagram of a device for displaying component information according to an embodiment of the disclosure.
Detailed Description
In order to enable those skilled in the art to better understand the technical solutions of the embodiments of the present disclosure, the technical solutions of the embodiments of the present disclosure will be clearly and completely described below with reference to the accompanying drawings.
It should be noted that the terms "first," "second," and the like in the description and claims of the embodiments of the present disclosure and the above-described figures are used for distinguishing between similar objects and not necessarily for describing a particular sequential or chronological order. It is to be understood that the data so used may be interchanged where appropriate such that embodiments of the disclosure described herein may be capable of operation in sequences other than those illustrated or described herein. The implementations described in the following exemplary embodiments do not represent all implementations consistent with the embodiments of the present disclosure. Rather, they are merely examples of apparatus and methods consistent with aspects of embodiments of the present disclosure as detailed in the accompanying claims.
In addition, in the description of the embodiments of the present disclosure, unless otherwise indicated, "/" means or, for example, a/B may represent a or B, and "and/or" herein is merely an association relationship describing an association object, means that there may be three relationships, for example, a and/or B, and that there may be three cases where a exists alone, while a and B exist alone, and B exists alone. In addition, in the description of the embodiments of the present disclosure, "a plurality" means two or more than two.
Before explaining the embodiments of the present disclosure in detail, some terms related to the embodiments of the present disclosure are explained.
1. Assembly
A component (component) is a simple package of data and methods. In C++ Builder, a component is a specific object derived from TComponent. The components may have their own properties and methods. The attribute is a simple visitor to the component data. The method is some simple and visible function of the assembly. Drag-and-drop programming, fast property handling, and true object-oriented design can be achieved using components. The VCL and CLX components are the core of the C++ Builder system. In the front-end eye, a component generally refers to a view unit on a page, i.e., a UI component. The UI components can be said to be a subset of the components.
2. Front-end technology stack
The front-end technology stack is actually a different way of implementing the front-end functionality.
3. Importation (import)
After the front-end engineering has introduced a component, it needs to use the import command for it to go further into the page-level environment. The import syntax declares the original values for importing functions, objects, specified files (or modules) from the exported modules, scripts.
Currently, the only way to understand the way components are used is to query the relevant document web site through a browser. In this way, in the process of coding, a programmer is required to code while comparing the component information of the browser. For example, when a programmer needs a calendar component, the component is obtained by searching through a browser for a component library document in the relevant document website. Assuming that the user desires to display the lunar calendar, he needs to query again in the component library document, find the attribute corresponding to the calendar component, and copy and paste the attribute into the own code writing environment. Therefore, a programmer is required to frequently switch back and forth in both the browser and the code writing environment, so that the code writing process needs to consume a great deal of time resources, and is extremely low in efficiency.
Aiming at the technical problems, the embodiment of the disclosure provides a method for displaying component information. The application scenario of the method for displaying component information provided by the embodiment of the present disclosure is first described below.
In practical application, the method for displaying the component information provided by the embodiment of the disclosure is applied to electronic equipment. The electronic device may be a terminal, a server, a device (e.g. an editor) for implementing a method for displaying component information in the terminal, or a device (e.g. an editor) for implementing a method for displaying component information in the server.
For example, when the electronic device in the embodiments of the present disclosure is a terminal, the terminal may be a device having a program writing function, such as a mobile phone, a tablet computer, a desktop, a laptop, a handheld computer, a notebook, an ultra-mobile personal computer (UMPC), a netbook, a cellular phone, a Personal Digital Assistant (PDA), an augmented reality (augmented reality, AR), a Virtual Reality (VR) device, and the like, and running related programs. The embodiment of the present disclosure does not particularly limit the specific form of the terminal.
Fig. 1 is a schematic diagram of one possible architecture of an electronic device 100, shown according to an example embodiment.
As shown in fig. 1, the electronic device 100 includes a processor 110 and a memory 120. The memory 120 is configured to store instructions executable by the processor 110, and the processor 110 may implement the functions of each module in the page information display device 200 in the above embodiment.
Among other things, in a particular implementation, as one embodiment, the processor 110 (110-1 and 110-2) may include one or more CPUs, such as CPU0 and CPU1 shown in FIG. 1. And as one example, the presentation apparatus 200 of page information may include a plurality of processors 110, such as the processor 11-1 and the processor 11-2 shown in fig. 1. Each of these processors 110 may be a Single-core processor (Single-CPU) or a Multi-core processor (Multi-CPU). The processor 110 herein may refer to one or more devices, circuits, and/or processing cores for processing data (e.g., computer program instructions).
The memory 120 may be, but is not limited to, a read-only memory 120 (ROM) or other type of static storage device that may store static information and instructions, a random access memory (random access memory, RAM) or other type of dynamic storage device that may store information and instructions, or an electrically erasable programmable read-only memory (ELECTRICALLY ERASABLE PROGRAMMABLE READ-only memory, EEPROM), a compact disc read-only memory (compact disc read-only memory) or other optical disc storage, optical disc storage (including compact disc, laser disc, optical disc, digital versatile disc, blu-ray disc, etc.), magnetic disk readable storage media or other magnetic storage devices, or any other medium that can be used to carry or store desired program code in the form of instructions or data structures and that can be accessed by a computer. The memory 120 may be stand alone and coupled to the processor 110 via a bus 130. Memory 120 may also be integrated with processor 110.
Bus 130 may be an industry standard architecture (industry standard architecture, ISA) bus, an external device interconnect (PERIPHERAL COMPONENT INTERCONNECT, PCI) bus, or an extended industry standard architecture (extended industry standard architecture, EISA) bus, among others. The bus 130 may be classified into an address bus, a data bus, a control bus, and the like. For ease of illustration, only one thick line is shown in fig. 1, but not only one bus or one type of bus.
In addition, to facilitate information interaction of the electronic device 100 with other devices (e.g., servers), the electronic device 100 includes a communication interface 140. The communication interface 140 uses any transceiver-like means for communicating with other devices or communication networks, such as control systems, radio access networks (radio access network, RAN), wireless local area networks (wireless local area networks, WLAN), etc. The communication interface 140 may include a receiving unit implementing a receiving function and a transmitting unit implementing a transmitting function.
Those skilled in the art will appreciate that the structure shown in fig. 1 is not limiting of the electronic device and may include more or fewer components than shown, or may combine certain components, or may employ a different arrangement of components.
The method for displaying the component information provided by the embodiment of the present disclosure is described below with reference to a specific embodiment, where one implementation manner of the code editor may be the electronic device 110 in fig. 1, so as to at least solve the problems in the related art that a programmer needs to frequently switch between a browser and a programming environment, and the writing process of the component needs to consume a large amount of time resources and has extremely low efficiency.
As shown in FIG. 2, the method for displaying component information provided by the embodiment of the present disclosure specifically includes the following steps S201 to S202.
S201, the electronic equipment responds to the triggering operation of the information of the target candidate component in the code editing area to determine the target candidate component.
Further, the information of the target candidate component may include one or more of a component name, an author, and an applicable development environment. For example, component XX, author XXX, VUE.
S202, the electronic device displays the target candidate component in the code editing area.
Optionally, the electronic device obtains the tag of the target candidate component and displays the tag of the target candidate component in the code editing area.
Specifically, the tag of the target candidate component is displayed at a cursor of a code editing area of the electronic device. For example, referring to FIG. 3, component G is selected and then displayed with a tab G-calendar (calendar) at the cursor of code editing area 50.
Further, after displaying the tag of the target candidate component, the electronic device may further display default configuration information of the target candidate component. A specific example is with reference to fig. 3.
According to the technical scheme provided by the embodiment of the disclosure, the code editor can determine the target candidate component required by the user by sensing the triggering operation of the user on the information of the target candidate component in the code editing area. And displaying the target candidate component directly in the code editing area. Thus, the user does not need to query and acquire the information of the related components from the browser. The method and the device provide convenience for the user to write the codes of the components, save the time for writing the codes and improve the programming efficiency.
Optionally, referring to fig. 4 in conjunction with fig. 2, s201 specifically includes:
s2011, the electronic equipment responds to a search instruction aiming at the search keyword and input in the code editing area, and obtains information of at least one candidate component corresponding to the search keyword.
It should be noted that, acquiring information of at least one candidate component corresponding to the search keyword in the electronic device requires that the information of the component and the configuration information of the component are imported into a local database of the electronic device in advance.
In one implementation, an electronic device determines a technical stack corresponding to a current editing location in a code editing area in response to a search instruction for a search keyword. And searching information of at least one candidate component corresponding to the search keyword in a database corresponding to the technical stack. And displaying information of at least one candidate component.
It should be noted that, the electronic device determines at least one candidate component corresponding to the search keyword in the technical stack by detecting the technical stack (i.e., development environment) used by the user. Wherein the technology stack used by the detection user can be determined by the suffix of the file name or the configuration item of the file.
The implementation mode obtains and displays the information of at least one candidate component corresponding to the search keyword in a database corresponding to a technical stack through determining the technical stack corresponding to the current editing position in the code editing area. Thereby ensuring the normal operation of the program of the component in the code editor.
Optionally, two acquisition methods are provided for the search instruction in S2011, specifically including:
the electronic equipment receives preset characters input by a user at a preset position of a code editing area, and displays a search input box. And receiving a first search keyword input by a user in a search input box, and generating a search instruction. The search keywords are first search keywords.
For example, text (synonyms, etc.) related to the target candidate component may be entered in the search input box. For example, a component related to a calendar needs to be searched, and a search keyword such as "calendar", "yellow calendar" or "perpetual calendar" may be input in a search input box.
According to the method for acquiring the search instruction in the first method, the search input box is directly displayed after the user inputs the preset characters. The user can input the first search keyword in the search input box to generate a search instruction so as to acquire the components required to be searched, thereby providing convenience for the user to acquire the information of the components.
The second method comprises the steps that the electronic equipment receives preset characters input by a user at preset positions of the code editing area and second search keywords input after the preset characters, and a search instruction is generated. The search keywords are second search keywords.
Note that, the specific position of the second search keyword input after the preset character is not limited. For example, the second search keyword may be input immediately after the preset character. For another example, the second search keyword may be input after a space symbol is spaced apart from the preset character after the preset character. For another example, the second search keyword may be input at the next line of the preset character.
According to the method for acquiring the search instruction in the second method, the search keyword is directly input after the preset character is input by the user, so that the search instruction can be generated, further, the component to be searched is acquired, and convenience is brought to the user for acquiring the information of the component.
In the present embodiment, describing the above two acquisition methods exemplarily with reference to fig. 5A, the user may input a left bracket "<" in the code editing area 50 of the electronic device, and a search input box is displayed at the third area 5012. There are two input methods of the search keyword, one is to input the search keyword behind the left angle bracket "<" of the code editing page 50, and the other is to input the search keyword in the search input box 5013. Here, the search keyword is usually an english letter combination to be input after the left bracket "<", and the search keyword is usually a chinese character combination to be input in the search input box. But the application is not limited thereto.
And S2012, the electronic device displays the information of at least one candidate component corresponding to the search keyword in the code editing area.
By way of example, referring to FIG. 5A, taking a calendar component as an example, when the search keyword is a calendar, detecting a development environment, information of components related to the calendar under the development environment displayed on the related display interface may include a component XX: an author XXX, an applicable development environment. The information of the components a-E is shown in a first area 5011 in a first interface 501 on the code editing area 50 and the related reminder content is shown in a second area 5012, which reminder content may be a detected development environment VUE as shown in fig. 5A, the following "calendar related components" are recommended for you. Of course, the content of the prompt may be changed according to the user's use requirement and experience, and is not limited herein. It should be noted that, fig. 5A only shows one display mode of the first interface 501 and the code editing area 50, and the first interface 501 may be a sub-interface of the code editing area 50 or may be an independent interface, which is not limited in any way in the embodiment of the disclosure.
In another example, when the interface size of the first region 5011 is insufficient to display information of all components, a page turning function is added. For example, the control of the previous page and the control of the next page can be added in the first area 5011 as shown in fig. 5B, the control of the previous page can be checked by clicking the control 5B1 of the previous page and the control 5B2 of the next page, and when the current page is the top page, the control of the previous page can be displayed in gray. Similarly, in the case where the current page is the end page, the space of the next page may be displayed in gray. For another example, a scroll bar 5C1 may be added to the right side of the first area as shown in fig. 5C, so that the user views information of all components up and down by sliding the scroll control 5C1 in the scroll bar.
S2013, the electronic device responds to clicking operation in the information of the at least one candidate component to determine a target candidate component, wherein the target candidate component is one of the at least one candidate component.
For example, as shown in fig. 5A, when the user views a desired component G in the displayed information of the component, the user can select by clicking the component G with the mouse.
The triggering operation of the target candidate component may be a clicking operation, and the clicking operation may be any feasible operation such as a single-clicking operation, a double-clicking operation, a sliding operation and the like, and may be specific according to actual requirements, and embodiments of the disclosure are not particularly limited. In addition, the selection operation and other triggering operations according to the embodiments of the present disclosure refer to the above description of the clicking operation.
According to the technical scheme provided by the embodiment of the disclosure, the information of one or more candidate components which can be selected is intuitively displayed for the user through the response to the search instruction of the search keyword, so that the user can directly select the required components according to the information of the candidate components. The information of the related components is not required to be inquired and obtained from the browser, convenience is brought to the user for coding the components, the coding time is saved, and the programming efficiency is improved.
In an implementation manner, referring to fig. 6 in conjunction with fig. 2, the method for displaying component information provided in the embodiment of the present disclosure further includes S203 and S204.
S203, the electronic equipment responds to the triggering operation of the target candidate component to acquire the data packet of the target candidate component and the dependent data packet of the candidate component.
Specifically, the dependent data package contains an environment file that runs the selected target candidate component. After the user selects the target candidate component, the electronic device obtains the dependent data packet of the target candidate component. On this basis, if the code needs to be used, the address of the code (i.e. the dependent data packet) needs to be found in the repository, and then the code is downloaded and run in the program code of the application.
It should be noted that, the dependency data packet in the embodiments of the present disclosure may also be referred to as a "plug-in".
S204, the electronic equipment installs the data packet of the target candidate component and the dependent data packet, and imports the data packet of the target candidate component.
Alternatively, target candidate components are introduced in the code editing area using import statements.
In addition, when the dependent data packet of the target candidate component is installed, the installed dependent data packet in the file is compared, and when the dependent data packet is the same dependent data packet, the two dependent data packets are combined.
In the implementation manner, the data packet of the target candidate component and the dependent data packet of the candidate component can be directly acquired and installed through the triggering operation on the target candidate component in the displayed at least one candidate component. The method and the device provide convenience for programmers in the process of writing codes, and save the code writing time.
In one implementation, referring to fig. 6, the method for displaying component information provided in the embodiment of the present disclosure further includes S205-S207.
S205, the electronic equipment displays configuration buttons of the target candidate components.
S206, the electronic equipment responds to the triggering operation of the configuration buttons and displays at least one configuration control, wherein each configuration control corresponds to one function.
S207, the electronic equipment responds to the selection operation of at least one target configuration control, and displays the information of the function corresponding to the target configuration control. The target configuration control is one of the at least one configuration control.
For a better understanding, referring to FIG. 7, an exemplary illustration is made with respect to S205-S206, showing a configuration control 701 (an info button 701 as shown in FIG. 7) in the upper right hand corner of the tab of the target candidate component of the code editing area 50. Clicking (i.e., triggering) the info button 701 by a programmer via a tool such as a mouse, at least one configuration control corresponding to the target candidate component is displayed (e.g., display lunar calendar corresponding switch control 7011, default show corresponding switch control 7012, and display holiday corresponding switch control 7013 as shown in fig. 7). The programmer clicks (i.e., selects) the switch control by means of a mouse or the like, and displays the state (on or off) of the corresponding switch control.
In the implementation manner, by responding to the triggering operation of the user on the displayed configuration control, the user intuitively displays the information of one or more selectable configurations, so that the user directly selects the required configuration according to the information of the candidate component. The information of relevant configuration is not required to be inquired and obtained from the browser, convenience is provided for the user to write the configuration codes of the components, the code writing time is saved, and the programming efficiency is improved.
Further, referring to fig. 6, after the electronic device in s207 responds to the selection operation of the at least one target configuration control, the method further includes the following steps:
S2071, closing the selection operation of the first-selected target configuration control under the condition that the electronic equipment determines that the function of the first-selected target configuration control and the function of the later-selected target configuration control are mutually exclusive.
S2072, the electronic equipment generates and displays prompt information, wherein the prompt information is used for prompting that the function of the first selected target configuration control and the function of the later selected target configuration control are mutually exclusive.
Specifically, referring to fig. 7, it is assumed that the display of the calendar (i.e., the on/off state of the calendar is "on") cannot be performed at the same time (i.e., the on/off state of the festival is "on"), and that the function of the calendar and the function of the switch are mutually exclusive. If the calendar is displayed first and then the display switch is selected, the calendar display function is turned off by default, and a prompt message "ps is generated as shown in FIG. 7, wherein when the festival is displayed, the calendar is unavailable
According to the embodiment of the disclosure, under the condition that the functions corresponding to the two selected target configuration controls are determined to have conflict, the function selected in advance is closed, and prompt information of conflict exists between the functions selected by a user is prompted. Therefore, the method not only can avoid conflict attributes and reduce potential loopholes, but also can improve the use experience of users.
Referring to fig. 8, a schematic structural diagram of a device for displaying component information according to an embodiment of the disclosure is provided. The display device 80 applied to the terminal comprises an acquisition unit 801, a display unit 802 and a processing unit 803. Wherein:
a processing unit 803 configured to determine a target candidate component in response to a trigger operation of information of the target candidate component in the code editing area. For example, as shown in connection with fig. 2, the processing unit 803 may be used to perform S201.
A display unit 802 configured to display the target candidate component of the processing unit 803 in the code editing area. For example, as shown in connection with fig. 2, the acquisition unit 801 may be used to perform S202.
In an exemplary aspect, the obtaining unit 801 is specifically configured to obtain, in response to a search instruction for a search keyword input in the code editing area, information of at least one candidate component corresponding to the search keyword. For example, as shown in connection with fig. 4, the acquisition unit 801 may be used to perform S2011.
A display unit 802 configured to display information of at least one candidate component corresponding to the search keyword acquired by the acquisition unit 801 in the code editing area. For example, as shown in connection with fig. 4, the display unit 802 may be used to perform S2012.
A processing unit 803. Is configured to determine a target candidate component, which is one of the at least one candidate component, in response to a click operation in the information of the at least one candidate component displayed in the display unit 802. For example, as shown in connection with fig. 4, the processing unit 803 may be used to perform S2013.
In an exemplary scenario, the obtaining unit 801 is further configured to obtain, in response to a triggering operation on the target candidate component, a data packet of the target candidate component and a dependent data packet of the candidate component.
A processing unit 803 configured to install the data packet of the target candidate component and the dependent data packet acquired by the acquisition unit 801 and import the data packet of the target candidate component.
In an exemplary scenario, the display unit 802 is further configured to display configuration buttons of the target candidate component. And responding to the triggering operation of the configuration buttons, displaying at least one configuration control, wherein each configuration control corresponds to one function. And responding to the selection operation of at least one target configuration control, displaying the information of the function corresponding to the target configuration control, wherein the target configuration control is one of the at least one configuration control.
In an exemplary aspect, the processing unit 803 is further configured to close the selection operation of the first selected target configuration control if it is determined that there is mutual exclusion between the function of the first selected target configuration control and the function of the second selected target configuration control.
The processing unit 803 is further configured to generate prompt information, where the prompt information is used to prompt that the function of the first selected target configuration control and the function of the second selected target configuration control are mutually exclusive.
The display unit 802 is configured to display the prompt information generated by the processing unit 803.
In an exemplary scenario, the obtaining unit 801 is specifically configured to receive a preset character input by a user at a preset position in the code editing area.
And a display unit 802 configured to display a search input box after the acquisition unit 801 receives the preset character.
The obtaining unit 801 is further configured to receive a first search keyword input by a user in the search input box, where the search keyword is the first search keyword.
The processing unit 803 is configured to generate a search instruction according to the search keyword received by the acquisition unit 801.
In an exemplary scenario, the obtaining unit 801 is specifically configured to receive a preset character input by a user at a preset position in the code editing area and a second search keyword input after the preset character, where the search keyword is the second search keyword.
The processing unit 803 is configured to generate a search instruction according to the second search keyword received by the acquisition unit 801.
In an exemplary scenario, the processing unit 803 is further configured to determine, in response to a search instruction for a search keyword, a technical stack corresponding to a current editing position in the code editing area.
The processing unit 803 is further configured to search the database corresponding to the technology stack for information of at least one candidate component corresponding to the search keyword.
A display unit 802 configured to display information of at least one candidate component searched by the processing unit 803.
In an exemplary scenario, the obtaining unit 801 is specifically configured to obtain a tag of the target candidate component.
A display unit 802 configured to display the tag of the target candidate component acquired by the acquisition unit 801 in the code editing area.
Of course, the display device 80 of component information provided in the embodiment of the present disclosure includes, but is not limited to, the above units, for example, the display device 80 of component information may further include a storage unit 804. The storage unit 804 may be used for storing the program code of the component information presentation device 80, and may also be used for storing data generated during operation of the component information presentation device 80, such as data in a write request, etc.
In addition, the embodiments of the present disclosure also provide a computer-readable storage medium including instructions that, when executed by a processor, cause the processor to perform a method of presenting component information as provided in the above embodiments, or that, when executed by a processor, cause the processor to perform a method of presenting component information as provided in the above embodiments.
In addition, the embodiments of the present disclosure also provide a computer program product comprising instructions that, when executed by a processor, cause the processor to perform the method of presenting component information as provided in the above embodiments, or that, when executed by a processor, cause the processor to perform the method of presenting component information as provided in the above embodiments.
In an exemplary embodiment, the embodiment of the present disclosure further provides a system for displaying component information, including a terminal and a server, where the terminal is configured to execute a function of the terminal in the method for displaying component information in the foregoing embodiment, and the server is configured to execute a function of the server in the method for displaying component information in the foregoing embodiment, so that the same technical effects can be achieved, and for avoiding repetition, a detailed description is omitted herein.
Other implementations of the disclosed embodiments will be apparent to those skilled in the art from consideration of the specification and practice of the invention disclosed herein. This disclosure is intended to cover any adaptations, uses, or adaptations of the embodiments of the disclosure following, in general, the principles of the disclosure and including such departures from the present disclosure as come within known or customary practice within the art to which the disclosure is not applied. It is intended that the specification and examples be considered as exemplary only, with a true scope and spirit of the disclosed embodiments being indicated by the following claims.
Claims (15)
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110776238.3A CN113568608B (en) | 2021-07-08 | 2021-07-08 | A method, device, equipment and storage medium for displaying component information |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110776238.3A CN113568608B (en) | 2021-07-08 | 2021-07-08 | A method, device, equipment and storage medium for displaying component information |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113568608A CN113568608A (en) | 2021-10-29 |
| CN113568608B true CN113568608B (en) | 2024-12-24 |
Family
ID=78164251
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110776238.3A Active CN113568608B (en) | 2021-07-08 | 2021-07-08 | A method, device, equipment and storage medium for displaying component information |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113568608B (en) |
Families Citing this family (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114089978B (en) * | 2021-11-23 | 2025-03-14 | 抖音视界有限公司 | Information display method and device |
| CN114911535B (en) * | 2022-04-22 | 2023-12-19 | 青岛海尔科技有限公司 | Application program component configuration method, storage medium and electronic device |
Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112230909A (en) * | 2019-07-15 | 2021-01-15 | 腾讯科技（深圳）有限公司 | Data binding method, device and equipment of small program and storage medium |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112579854A (en) * | 2019-09-30 | 2021-03-30 | 北京京东尚科信息技术有限公司 | Information processing method, device, equipment and storage medium |
| CN111240673B (en) * | 2020-01-08 | 2021-06-18 | 腾讯科技（深圳）有限公司 | Interactive graphic work generation method, device, terminal and storage medium |
-
2021
- 2021-07-08 CN CN202110776238.3A patent/CN113568608B/en active Active
Patent Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112230909A (en) * | 2019-07-15 | 2021-01-15 | 腾讯科技（深圳）有限公司 | Data binding method, device and equipment of small program and storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113568608A (en) | 2021-10-29 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| EP3876116B1 (en) | Method and apparatus for running mini program, electronic device, and storage medium | |
| US12086536B2 (en) | Method, apparatus, device and storage medium for determining page theme | |
| US10733259B2 (en) | Web page access method and apparatus | |
| JP6440828B2 (en) | Visibility detection of digital content | |
| US20130166527A1 (en) | System and methods thereof for dynamically updating the contents of a folder on a device | |
| CN105868166B (en) | Regular expression generation method and system | |
| US12321723B2 (en) | Code execution and data processing pipeline | |
| CN110221968A (en) | Method for testing software and Related product | |
| EP3848824A1 (en) | Landing page processing method, apparatus, device and medium | |
| RU2595524C2 (en) | Device and method for processing content of web resource in browser | |
| JP6529501B2 (en) | How to generate dynamically customized context-sensitive help | |
| JP2019520625A (en) | Human computer interaction method and device thereof | |
| US20150242474A1 (en) | Inline and context aware query box | |
| CN112506854B (en) | Page template file storage and page generation methods, devices, equipment and media | |
| EP3289451A1 (en) | Cross-platform command extensibility | |
| CN113568608B (en) | A method, device, equipment and storage medium for displaying component information | |
| US20160147897A1 (en) | Method, system and terminal for performing search in a browser | |
| US20140373033A1 (en) | Electronic device and method for launching an application installed in the same through address information | |
| US20180059887A1 (en) | Direct navigation to modal dialogs | |
| EP3889770B1 (en) | Mini program material processing | |
| CN112947984B (en) | Application program development method and device | |
| CN112905931B (en) | Page information display method and device, electronic equipment and storage medium | |
| US11080238B2 (en) | System and method for interactive visual representation of metadata within a networked heterogeneous workflow environment | |
| WO2017027209A1 (en) | Providing semantic based document editor | |
| US8775936B2 (en) | Displaying dynamic and shareable help data for images a distance from a pointed-to location |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |