CN117539464A - Cross-end page development method, device, equipment and storage medium - Google Patents

Cross-end page development method, device, equipment and storage medium Download PDF

Info

Publication number
CN117539464A
CN117539464A CN202311631462.9A CN202311631462A CN117539464A CN 117539464 A CN117539464 A CN 117539464A CN 202311631462 A CN202311631462 A CN 202311631462A CN 117539464 A CN117539464 A CN 117539464A
Authority
CN
China
Prior art keywords
business
logic
public
state
component
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.)
Pending
Application number
CN202311631462.9A
Other languages
Chinese (zh)
Inventor
吴俊辉
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
China Merchants Bank Co Ltd
Original Assignee
China Merchants Bank Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by China Merchants Bank Co Ltd filed Critical China Merchants Bank Co Ltd
Priority to CN202311631462.9A priority Critical patent/CN117539464A/en
Publication of CN117539464A publication Critical patent/CN117539464A/en
Pending legal-status Critical Current

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/34Graphical or visual programming
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Stored Programmes (AREA)

Abstract

The application discloses a method, a device, equipment and a storage medium for developing a cross-end page, and belongs to the technical field of page development. Before a business project component corresponding to a target page is developed, a public logic module corresponding to the business project component is directly referenced from a preset public code warehouse, wherein the public logic module comprises general business logic for different equipment pages; according to the public logic module and the business project component, the target page is developed, namely, the general business logic and the business project component are decoupled and put into a public code warehouse, so that the business project component can be directly referenced to the general business logic, the condition of selecting the adapting logic from the public logic module is avoided, and the development efficiency of the target page is improved.

Description

Cross-end page development method, device, equipment and storage medium
Technical Field
The present disclosure relates to the field of page development technologies, and in particular, to a method, an apparatus, a device, and a storage medium for developing a cross-end page.
Background
The front-end code may typically be packaged as an NPM (node package manager, module management tool) module and published to the NPM repository so that developers can download and use the module from the repository through the management tool of the NPM module.
When business products need to face multi-terminal (pc/pad) use, a development team needs to develop a separate set of code warehouse for each terminal, and maintenance cost is huge. The current industry is more conventional in that pages are packaged into a public module and released to an NPM module warehouse for service items at each end to complete multiplexing.
In the scheme, UI state codes and UI function business logic are coupled in a common logic module, but corresponding page interactions are different due to different end sizes and interaction characteristics, different interaction logics and UI styles need to be adapted in the common logic module, business logic codes for different devices need to be added in the current common logic module and simultaneously met, after the corresponding devices refer to the common logic module, corresponding selection programs need to be run, and the business logic codes for the current devices need to be selected from the common logic module, so that the efficiency in developing the corresponding pages is low.
Content of the application
The main purpose of the application is to provide a cross-end page development method, a device, equipment and a storage medium, and aims to solve the technical problem that the development efficiency of a development page is low because a public logic code contains business logic codes for different equipment.
In order to achieve the above object, the present application provides a method for developing a cross-end page, the method for developing a cross-end page comprising the steps of:
before a business project component corresponding to a target page is developed, directly referencing a public logic module corresponding to the business project component from a preset public code warehouse, wherein the public logic module comprises general business logic for different equipment pages;
and developing the target page according to the public logic module and the business project component.
Optionally, before the step of directly referencing the common logic module corresponding to the service item component from the preset common code repository before developing the service item component corresponding to the target page, the method further includes:
acquiring target business logic and UI codes of each business item component of a target page, wherein the target business logic and the UI codes are in a coupling state;
and extracting the target business logic and the logic for different equipment pages in the UI code into a common logic module to obtain the common logic module, wherein the common logic module comprises general business logic and UI states.
Optionally, the step of extracting the target business logic and the logic for different equipment pages in the UI code into a common logic module to obtain a common logic module includes:
extracting to obtain general service logic for changing the UI state in the service logic;
and defining and obtaining a preset custom function according to the extracted general service logic and the UI state, and extracting and obtaining a public logic module according to the preset custom function.
Optionally, after the step of extracting the target business logic and the logic for different device pages in the UI code into a common logic module to obtain the common logic module, the method further includes:
and adding the UI corresponding to the business project component and the public logic module into a preset public code warehouse, so that the public code warehouse stores each UI and each public logic module as independent engineering to meet the condition that the UI corresponding engineering directly references the public logic module from the public code warehouse.
Optionally, after the step of developing the target page according to the common logic module and the service item component, the method further includes:
When the state of any one of the business item components is changed, global state linkage is carried out between the component module with the changed state and other component modules in the business item components so as to update the state of the business item components meeting the preset state change condition in the target page.
Optionally, after the step of developing the target page according to the common logic module and the service item component, the method further includes:
modifying a preset global public state through a business item component with changed state;
and modifying the states of other business item components in the target page according to the modified global public state, so that the business item components meeting the preset state change conditions in the target page are subjected to global state linkage.
Optionally, the step of modifying the preset global public state by the service item component with state change includes:
determining a modification function corresponding to a business item component with changed state, and determining the state change content of the business item component;
modifying the preset global public state through the modification function according to the state change content;
The step of modifying the states of other business item components in the target page according to the modified global public state so as to enable the business item components meeting the preset state change condition in the target page to carry out global state linkage comprises the following steps:
and modifying the modification function corresponding to the business item component meeting the preset state change condition in the target page according to the modified global public state, so that the business item component meeting the preset state change condition performs global state linkage.
In addition, in order to achieve the above object, the present application further provides a cross-end page development device, including:
the system comprises a reference module, a reference module and a storage module, wherein the reference module is used for directly referencing a public logic module corresponding to a business item assembly from a preset public code warehouse before the business item assembly corresponding to a target page is developed, and the public logic module comprises general business logic for different equipment pages;
and the development module is used for developing the target page according to the public logic module and the business project component.
In addition, in order to achieve the above object, the present application further provides a cross-end page development device, including: the system comprises a memory, a processor and a cross-end page development program stored on the memory and capable of running on the processor, wherein the cross-end page development program is configured to realize the steps of the cross-end page development method.
In addition, in order to achieve the above object, the present application further provides a computer readable storage medium, on which a cross-end page development program is stored, which when executed by a processor, implements the steps of the cross-end page development method as described above.
Before a business project component corresponding to a target page is developed, a public logic module corresponding to the business project component is directly referenced from a preset public code warehouse, wherein the public logic module comprises general business logic for different equipment pages; according to the public logic module and the business project component, the target page is developed, namely, the general business logic and the business project component are decoupled and put into a public code warehouse, so that the business project component can be directly referenced to the general business logic, the condition of selecting the adapting logic from the public logic module is avoided, and the development efficiency of the target page is improved.
Drawings
FIG. 1 is a schematic flow chart of a first embodiment of a cross-end page development method of the present application;
FIG. 2 is a schematic diagram of a structure of a preset common code in an embodiment of the present application;
FIG. 3 is a schematic overall flow chart of generating a target page in an embodiment of the present application;
FIG. 4 is a schematic flow chart of anomaly analysis of a monitoring device in an embodiment of the present application;
FIG. 5 is a simplified flow diagram of generating a target page according to an embodiment of the present application;
FIG. 6 is a flow chart of global state linkage in an embodiment of the present application;
FIG. 7 is a block diagram illustrating an embodiment of a cross-end page development device of the present application;
fig. 8 is a schematic device structure diagram of a hardware running environment according to an embodiment of the present application.
The realization, functional characteristics and advantages of the present application will be further described with reference to the embodiments, referring to the attached drawings.
Detailed Description
It should be understood that the specific embodiments described herein are for purposes of illustration only and are not intended to limit the present application.
Referring to fig. 1, fig. 1 is a flowchart of a first embodiment of a cross-end page development method of the present application.
In a first embodiment, the cross-end page development method includes the following steps:
s10, before a business project component corresponding to a target page is developed, directly referencing a public logic module corresponding to the business project component from a preset public code warehouse, wherein the public logic module comprises general business logic for different equipment pages.
It should be noted that, in the current cross-end page development technology, different devices may be involved, for example, a PC end, a PAD end, and the like, on different devices, due to display characteristics and interaction technical features of corresponding platforms of the devices, pages developed on different platforms may need to correspond to different sizes and provide different interaction features.
For example, the list paging function generally uses a mouse to click the interactive mode of page number page turning on the PC side, and the mobile terminal (PAD side) adopts more interactive modes of touch down page turning.
Therefore, before the development of the cross-end page, different interaction logics and UI styles need to be adapted at different devices, different interaction logics and different UI styles need to be packaged for achieving the function, corresponding public logic modules are generated, and the public logic modules are uploaded to corresponding code warehouses so as to be convenient for the subsequent use of the development process of the cross-end page. However, as the business iterates and expands, the UI presentation code and business logic of each platform are interleaved together, and the common logic module is increasingly bulkier and difficult to maintain.
To sum up, in order to solve the above-mentioned problem, in this embodiment, a corresponding cross-end page development method is provided, which is based on decoupling a UI style (specifically, corresponding business item components or UI display contents, etc.) and interaction logic (UI display state and change logic thereof, etc.), and only the corresponding common code for page development is put into a common logic module, i.e. the common code is written into a preset common code repository, so that the corresponding common logic module is called from the common code repository by subsequent related personnel, and is matched with the corresponding business item components through the common logic module, so as to realize page display, thereby facilitating subsequent debugging and development.
It can be understood that the business item component refers to a corresponding UI component in page development, where the UI component can implement a corresponding interaction function and be displayed in the page for related personnel to view and operate, and the business item component corresponds to a corresponding code, through which corresponding component content is constructed, and can be understood as a UI style.
It can be understood that the page to be developed refers to a page that a related person needs to develop at present, different devices may correspond to different pages, for example, the PC end and the PAD end respectively correspond to two pages that differ in size and/or function, for example, the related person directly enables a service item component of the page to be developed through the PC end at present, and a page to be developed formed by the service item component is displayed in a display interface of the PC end.
It can be understood that the public code repository is a repository for storing public code logic, and can store public logic modules used when different devices develop cross-end pages, where corresponding general service logic is stored in the public logic modules, for example, an a component in a page realizes a function of triggering popup windows by corresponding buttons at both a PC end and a PAD end.
It is understood that the generic business logic is logic code that implements the functionality of the corresponding business project component.
It should be noted that, the common logic module is a common service logic shared when different devices perform cross-end page development, where the common service logic refers to a logic that a service item component implements a corresponding service function, for example, taking the service item component as a popup component as an example, where the common service logic of the popup component is a functional logic that is used to implement popup state change in both the PC end and the PAD end, and specifically may include invoking a corresponding logic to control popup to open and close, that is, the common service logic is a logic code that implements a popup state change function of the corresponding service item component.
Further, the business project components and the common logic modules directly referenced from the common code warehouse can realize the display of corresponding interactive contents, and different UI effects can be developed according to the specific conditions of the current equipment.
It will be appreciated that before using the corresponding common code repository, it is necessary to first perform decoupling processing on the codes and service logic actually required to be used, and construct the corresponding common code repository according to the result of the decoupling processing.
Specifically, a target business logic and a UI code of each business item component of a target page need to be acquired, wherein the target business logic and the UI code are in a coupling state, and logic for different equipment pages in the target business logic and the UI code are extracted into a common logic module to obtain a common logic module, wherein the common logic module comprises a general business logic and a UI state, so that the UI corresponding to the business item component and the common logic module can be further added into a preset common code warehouse, and each UI and each common logic module are stored as independent projects by the common code warehouse so as to meet the condition that the common logic module is directly referenced from the common code warehouse by the UI corresponding projects.
It should be noted that, in the related art, the common logic module includes logic codes adapted to different devices, while the general logic code in the embodiment is substantially different from the logic code in the related art, and the general logic code includes only logic codes that can be commonly used on different devices, and the page development work can be performed corresponding to different devices by referring to the general logic code.
Wherein, the multiplexing of the common logic modules in the common code repository can be performed by the monorepo using the monorepo as a reference tool.
When the corresponding common logic module is extracted, the codes which can be used for different devices in the target business logic are extracted, namely the codes used for representing the UI state and changing the UI state in the UI codes are required to be extracted.
It can be understood that the main key point in constructing the public code warehouse is to decouple the UI corresponding to the business item component and the target business logic realizing the corresponding function of the business item component, and store the UI and the target business logic into the corresponding public code warehouse respectively, so that the difficulty in the subsequent operation and maintenance of the public code warehouse is reduced.
When the target business logic and the UI code of each business item component of the page to be developed are decoupled, the target business logic and the UI code of each business item component of the page to be developed are required to be acquired, at the moment, the data of the target business logic and the UI code are also in a coupling state, at the moment, corresponding functions are required to be customized, the business item components are extracted and redefined through the functions, the preset customized functions are hooks, the target business logic and the UI state are directly extracted through the hooks, and the content of the functions can be defined, wherein the redefining of the state relation refers to decoupling of the extracted target business logic and the UI code, and the target business logic and the UI which are originally in the coupling state are separated.
It should be noted that the main purpose of using the hook function is to extract a part of codes in the target business logic, which can be used as general business logic, and extract the part of codes into a common logic module, and the rest of codes in the target business logic (for example, business logic codes for changing UI states) so as to realize separation of the general business logic and the UI codes, so that related personnel can develop and debug the UI at different devices, namely, the codes for realizing the business functions are extracted as common items, rather than the original technology in which all the codes are used as common items, thereby reducing the complexity of the codes in the common logic module and being beneficial to subsequent operation and maintenance.
Specifically, a general service logic for changing the UI state in the service logic needs to be extracted, and a preset custom function is defined and obtained according to the extracted general service logic and the UI state, so that a public logic module is extracted and obtained according to the preset custom function.
It can be understood that in the embodiment, the general service logic needs to be formed into a corresponding public logic module, the public logic module is put into a public code repository, and the content of the preset custom function is defined according to the public logic module and the public code repository, that is, the preset custom function hops in the embodiment is set to contain the UI state and the non-general service logic.
In summary, the hooks-based UI logic complete decoupling scheme includes the following:
based on the custom hots feature provided by the reaction 16.8 and above framework, we can extract a section of business logic and UI state through custom hots. In general, when a compact page is developed, a complete page is divided into different components according to functions or layouts, each component contains specific business logic and UI display, and communication and interaction between the components are generally required. Based on the above basic pattern, we give a split scheme in the following logical decoupling by means of hops: dividing each component according to the original function condition by splitting service item component logic, and separating the general service logic and UI of the service item component by using custom hops, namely each component has corresponding hops to support the display and interaction logic, and the definition is needed: the hops contain only the business logic (generic business logic) for the UI to expose the desired states and change states, and do not care how a specific UI is implemented (non-generic business logic).
Furthermore, it should be noted that, in this embodiment, the common code repository may use a single repo repository architecture based on yarn workspaces+lerna, so as to optimize the logic code sharing efficiency, and the repository architecture may refer to fig. 2 specifically.
Specifically, under the traditional Multirepo warehouse, functions of different ends can be divided into different warehouses, code sharing is needed to be completed among the warehouses, and the code sharing mode can only be used for downloading and calling projects of other warehouses in a mode of packaging NPM packages, so that little trouble is brought to development and release, for example, a developer needs to manually link in local development, NPM modules need to be released firstly during release, and then codes of the warehouses at all ends need to be released so as to ensure that a latest released public module can be obtained.
In contrast, in this embodiment, the Monorepo has only one warehouse, and the warehouse includes multiple independent projects for storing codes of different platforms, and corresponding to the application scenario in this embodiment, the UI and the public logic module corresponding to the service item component at each end are respectively used as independent projects, and are managed in the same Monorepo warehouse, and the combination of the yarn workspaces and lerna technical stacks is matched to complete the construction of the Monorepo warehouse and the support of engineering sharing characteristics.
It can be understood that when the corresponding codes are stored in the independent engineering manner, when the corresponding page reference public module is developed, the corresponding public module can be directly referenced according to the service item component required to be used, compared with the traditional NPM module multiplexing manner, the monorepo helps the developer to shield the link details, only the corresponding service item component is required to be directly started during local debugging, the local debugging efficiency is improved, and the specific reference process can refer to fig. 3.
And S20, developing the target page according to the public logic module and the business project component.
It is appreciated that upon referencing a common logic module, a corresponding target page can be enabled in accordance with the common logic module and business project component.
The target page comprises a page to be debugged and a page to be issued.
For the page to be debugged, relevant personnel can perform corresponding development and debugging work on the target page, and specifically refer to fig. 4.
In addition, after the debugging work of the corresponding page is completed, the corresponding page is required to be published, in the related technology, all codes are used as public modules, so that after the codes adapted to the PC end and the PAD end are published to the corresponding equipment, the corresponding selection logic codes are required to be operated through the equipment, the codes adapted to the current equipment are selected from the public modules, in the embodiment, the development and the publishing of the page are realized based on the mode of extracting the public logic modules, therefore, when the corresponding page is published, the public logic modules (the PC end and the PAD end can be adapted at the same time) and the UI can be directly called according to a preset public code warehouse, and the public logic modules and the UI can be packaged and published to the corresponding equipment, so that the page display adapted to different equipment is directly realized, and the efficiency of page development and publishing is improved.
In summary, in this embodiment, the efficiency of enabling the target page may be improved by directly referencing the common logic module.
In the embodiment, before a business project component corresponding to a target page is developed, a public logic module corresponding to the business project component is directly referenced from a preset public code warehouse, wherein the public logic module comprises general business logic for different equipment pages; according to the public logic module and the business project component, the target page is developed, namely, the general business logic and the business project component are decoupled and put into a public code warehouse, so that the business project component can be directly referenced to the general business logic, the condition of selecting the adapting logic from the public logic module is avoided, and the development efficiency of the target page is improved.
As shown in fig. 2, a second embodiment of the cross-end page development method of the present application is provided based on the first embodiment, where in this embodiment, the method further includes:
s30, when the state of any one of the business project components is changed, the state of the business project component meeting the preset state change condition in the target page is updated by performing global state linkage between the component module with the changed state and other component modules in the business project component.
It can be understood that in the above embodiment, the scheme of decoupling the corresponding service item component and the corresponding target service logic is determined, and the logic of the single service item component is pulled out into the custom hops, but in the service requirement, the modules in the service item component generally need to communicate with each other to complete the linkage of different functional modules of the page, so that the decoupling of the service item component corresponding to the service logic is not enough to meet the service requirement, and the purpose of communication linkage between the components is achieved by implementing the mutual communication between the custom hops.
It should be noted that, the business item component satisfying the preset state change condition refers to a module that is affected by a state change of any module in the page.
For example, taking a form component in a page as an example, setting a corresponding filling frame and a "submit" button in the page, taking the filling frame and the button as modules in the form component, generally setting corresponding logic contents, when the number of characters corresponding to a field with a filling frame being empty or filled does not meet a preset requirement, failing to click the corresponding "submit" button, and when the number of characters corresponding to the field with the filling frame being empty or filled does not meet the preset requirement, triggering a state switching condition of a module clickable by the "submit" button, namely, taking the button as a module meeting a preset state change condition.
The business item components are linked, and usually, the state is informed through state change in a component tree, and the state is transferred from top to bottom in a reaction component tree, so that the state cannot be transferred in an out-of-order mode. But this mode couples the state and the component tree.
Therefore, in order to release the above-mentioned mode from coupling between the states of the modules in the business project assembly and the assembly tree interaction level, an interaction mode different from that in the related art needs to be adopted, in the prior art, since communication interaction between the assemblies is generated in a level manner, only assemblies between two adjacent levels can generate communication each time interaction is generated, and the communication efficiency is low.
Specifically, in this embodiment, when the state of any business item component in the target page is changed in a global state linkage manner, the state of the business item component in the target page is updated by directly performing global state linkage between the business item with the state changed and other business item components in the target page, which is equivalent to a manner that one business item component with the state changed simultaneously notifies all other modules in the business item component in the global.
It should be noted that, the hops have corresponding communication functions, and the hops have association relations with the business item components, so that the global linkage effect between the business item components can be realized through communication interaction actions between the hops.
In addition, in this embodiment, a global linkage interaction scheme is also provided, specifically, a preset global common state can be modified through a service item component with a changed state, and according to the modified global common state, the states of other service item components in the target page are modified, so that the service item components meeting the preset state change condition in the target page are subjected to global state linkage.
It should be noted that, the preset global common state is used as a logic code of the additionally set global common state, where the logic code corresponds to a code corresponding to a state condition of each service item component in the target page, that is, corresponds to setting an intermediate node, and obtains state information of each service item component in communication with the intermediate node through the intermediate node, and when the intermediate node generates a state change modification operation, other service item components obtain a state change condition of the intermediate node in a subscription manner (the state change condition corresponds to a state change condition of the global service item component), and correspondingly modify a state of the intermediate node according to the state change condition, so as to realize an effect of global state linkage of all service item components.
Further, communication interaction between the service item components can be achieved by combining the hooks and the global public states, specifically, a modification function corresponding to the service item component with a state change is required to be determined, state change content of the service item component is determined, and the preset global public state is modified through the modification function according to the state change content, so that the modification function corresponding to the service item component meeting the preset state change condition in the target page can be modified according to the modified global public state, and the service item component meeting the preset state change condition is subjected to global state linkage.
It can be understood that, the modification function in this embodiment is the preset custom function in the above embodiment, when redefining the UI state and the target business logic, the preset custom function is also used for the corresponding business item components, that is, each business item component corresponds to one preset custom function, in the scene of the current modification state, the preset custom function can be used as the modification function, and interact with the global public state through the modification function, and interact with other business item components through the global public state, so as to realize the effect of global state linkage.
To sum up, in this embodiment, referring specifically to fig. 6, with the integrated hots and global public status, a specific scheme for implementing interactive communication between each service item component is as follows:
the global state is created by means of the fact Context, and the state is shared by using a Provider component on the top layer of the component tree for all sub-components under the tree, so that the state created in the mode can be transferred in the middle layer of the component tree without being explicit, and only sub-components need to consume by using the fact.
Because the hooks can be called mutually, the custom hooks separated by each component can consume and change the global state by using a real.
Further, after decoupling the component tree and the state by extracting the global state, the linkage between the components is finally converted into the linkage between the component hooks through the global state, so that all logics and UIs of the page are completely decoupled and separated.
According to the method, when the state of any business item component in the target page is changed, global state linkage is directly carried out between the business item component with the state changed and other business item components in the target page so as to update the states of all business item components in the target page meeting the preset state change condition, namely, the interaction mode of state change of each business item component is further optimized on the premise of realizing the decoupling effect between the public logic module and the business item component, and the global state linkage is directly carried out between the business item component with the state changed and other business item components so as to update the states of all business components in the target page.
In addition, the embodiment of the application further provides a cross-end page development device, and referring to fig. 7, the cross-end page development device includes:
a reference module 10, configured to directly reference, before developing a service item component corresponding to a target page, a common logic module corresponding to the service item component from a preset common code repository, where the common logic module includes general service logic for different device pages;
and the generating module 20 is configured to develop the target page according to the common logic module and the service project component.
In the embodiment, before a business project component corresponding to a target page is developed, a public logic module corresponding to the business project component is directly referenced from a preset public code warehouse, wherein the public logic module comprises general business logic for different equipment pages; according to the public logic module and the business project component, the target page is developed, namely, the general business logic and the business project component are decoupled and put into a public code warehouse, so that the business project component can be directly referenced to the general business logic, the condition of selecting the adapting logic from the public logic module is avoided, and the development efficiency of the target page is improved.
It should be noted that each module in the above apparatus may be used to implement each step in the above method, and achieve a corresponding technical effect, which is not described herein again.
Referring to fig. 8, fig. 8 is a schematic structural diagram of a device of a hardware running environment according to an embodiment of the present application.
As shown in fig. 8, the apparatus may include: a processor 1001, such as a CPU, a communication bus 1002, a user interface 1003, a network interface 1004, and a memory 1005. Wherein the communication bus 1002 is used to enable connected communication between these components. The user interface 1003 may include a Display, an input unit such as a Keyboard (Keyboard), and the optional user interface 1003 may further include a standard wired interface, a wireless interface. The network interface 1004 may optionally include a standard wired interface, a wireless interface (e.g., WI-FI interface). The memory 1005 may be a high-speed RAM memory or a stable memory (non-volatile memory), such as a disk memory. The memory 1005 may also optionally be a storage device separate from the processor 1001 described above.
It will be appreciated by those skilled in the art that the structure shown in fig. 8 is not limiting of the apparatus and may include more or fewer components than shown, or certain components may be combined, or a different arrangement of components.
As shown in fig. 8, an operating system, a network communication module, a user interface module, and a cross-end page development program may be included in a memory 1005, which is one type of computer storage medium.
In the device shown in fig. 8, the network interface 1004 is mainly used for data communication with an external network; the user interface 1003 is mainly used for receiving an input instruction of a user; the device invokes, via the processor 1001, the cross-end page development program stored in the memory 1005 and performs the following operations:
before a business project component corresponding to a target page is developed, directly referencing a public logic module corresponding to the business project component from a preset public code warehouse, wherein the public logic module comprises general business logic for different equipment pages;
and developing the target page according to the public logic module and the business project component.
Further, the processor 1001 may call the cross-end page development program stored in the memory 1005, and further perform the following operations:
acquiring target business logic and UI codes of each business item component of a target page, wherein the target business logic and the UI codes are in a coupling state;
And extracting the target business logic and the logic for different equipment pages in the UI code into a common logic module to obtain the common logic module, wherein the common logic module comprises general business logic and UI states.
Further, the processor 1001 may call the cross-end page development program stored in the memory 1005, and further perform the following operations:
extracting to obtain general service logic for changing the UI state in the service logic;
and defining and obtaining a preset custom function according to the extracted general service logic and the UI state, and extracting and obtaining a public logic module according to the preset custom function.
Further, the processor 1001 may call the cross-end page development program stored in the memory 1005, and further perform the following operations:
and adding the UI corresponding to the business project component and the public logic module into a preset public code warehouse, so that the public code warehouse stores each UI and each public logic module as independent engineering to meet the condition that the UI corresponding engineering directly references the public logic module from the public code warehouse.
Further, the processor 1001 may call the cross-end page development program stored in the memory 1005, and further perform the following operations:
When the state of any one of the business item components is changed, global state linkage is carried out between the component module with the changed state and other component modules in the business item components so as to update the state of the business item components meeting the preset state change condition in the target page.
Further, the processor 1001 may call the cross-end page development program stored in the memory 1005, and further perform the following operations:
modifying a preset global public state through a business item component with changed state;
and modifying the states of other business item components in the target page according to the modified global public state, so that the business item components meeting the preset state change conditions in the target page are subjected to global state linkage.
Further, the processor 1001 may call the cross-end page development program stored in the memory 1005, and further perform the following operations:
determining a modification function corresponding to a business item component with changed state, and determining the state change content of the business item component;
modifying the preset global public state through the modification function according to the state change content;
And modifying the modification function corresponding to the business item component meeting the preset state change condition in the target page according to the modified global public state, so that the business item component meeting the preset state change condition performs global state linkage.
In the embodiment, before a business project component corresponding to a target page is developed, a public logic module corresponding to the business project component is directly referenced from a preset public code warehouse, wherein the public logic module comprises general business logic for different equipment pages; according to the public logic module and the business project component, the target page is developed, namely, the general business logic and the business project component are decoupled and put into a public code warehouse, so that the business project component can be directly referenced to the general business logic, the condition of selecting the adapting logic from the public logic module is avoided, and the development efficiency of the target page is improved.
In addition, the embodiment of the application also provides a computer readable storage medium, wherein the computer readable storage medium stores a cross-end page development program, and the cross-end page development program realizes the following operations when being executed by a processor:
Before a business project component corresponding to a target page is developed, directly referencing a public logic module corresponding to the business project component from a preset public code warehouse, wherein the public logic module comprises general business logic for different equipment pages;
and developing the target page according to the public logic module and the business project component.
In the embodiment, before a business project component corresponding to a target page is developed, a public logic module corresponding to the business project component is directly referenced from a preset public code warehouse, wherein the public logic module comprises general business logic for different equipment pages; according to the public logic module and the business project component, the target page is developed, namely, the general business logic and the business project component are decoupled and put into a public code warehouse, so that the business project component can be directly referenced to the general business logic, the condition of selecting the adapting logic from the public logic module is avoided, and the development efficiency of the target page is improved.
It should be noted that, when the computer readable storage medium is executed by the processor, each step in the method may be further implemented, and meanwhile, the corresponding technical effects are achieved, which is not described herein.
It should be noted that, in this document, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or system that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or system. Without further limitation, an element defined by the phrase "comprising one … …" does not exclude the presence of other like elements in a process, method, article, or system that comprises the element.
The foregoing embodiment numbers of the present application are merely for describing, and do not represent advantages or disadvantages of the embodiments.
From the above description of the embodiments, it will be clear to those skilled in the art that the above-described embodiment method may be implemented by means of software plus a necessary general hardware platform, but of course may also be implemented by means of hardware, but in many cases the former is a preferred embodiment. Based on such understanding, the technical solution of the present application may be embodied essentially or in a part contributing to the prior art in the form of a software product stored in a storage medium (such as ROM/RAM, magnetic disk, optical disk) as described above, including several instructions for causing a terminal device (which may be a mobile phone, a computer, a server, an air conditioner, or a network device, etc.) to perform the method described in the embodiments of the present application.
The foregoing description is only of the preferred embodiments of the present application, and is not intended to limit the scope of the claims, and all equivalent structures or equivalent processes using the descriptions and drawings of the present application, or direct or indirect application in other related technical fields are included in the scope of the claims of the present application.

Claims (10)

1. The cross-end page development method is characterized by comprising the following steps of:
before a business project component corresponding to a target page is developed, directly referencing a public logic module corresponding to the business project component from a preset public code warehouse, wherein the public logic module comprises general business logic for different equipment pages;
and developing the target page according to the public logic module and the business project component.
2. The method for developing a cross-end page according to claim 1, wherein before the step of developing a business item component corresponding to a target page, directly referencing a common logic module corresponding to the business item component from a preset common code repository, the method further comprises:
acquiring target business logic and UI codes of each business item component of a target page, wherein the target business logic and the UI codes are in a coupling state;
And extracting the target business logic and the logic for different equipment pages in the UI code into a common logic module to obtain the common logic module, wherein the common logic module comprises general business logic and UI states.
3. The method for developing a cross-end page according to claim 2, wherein the step of extracting the target business logic and the logic for different device pages in the UI code into a common logic module to obtain the common logic module includes:
extracting to obtain general service logic for changing the UI state in the service logic;
and defining and obtaining a preset custom function according to the extracted general service logic and the UI state, and extracting and obtaining a public logic module according to the preset custom function.
4. The method for developing a cross-end page according to claim 2, wherein after the step of extracting the target business logic and the logic for different device pages in the UI code into a common logic module to obtain the common logic module, the method further comprises:
and adding the UI corresponding to the business project component and the public logic module into a preset public code warehouse, so that the public code warehouse stores each UI and each public logic module as independent engineering to meet the condition that the UI corresponding engineering directly references the public logic module from the public code warehouse.
5. The method for developing a cross-end page according to claim 1, wherein after the step of developing the target page according to the common logic module and the business project component, the method further comprises:
when the state of any one of the business item components is changed, global state linkage is carried out between the component module with the changed state and other component modules in the business item components so as to update the state of the business item components meeting the preset state change condition in the target page.
6. The method for developing a cross-end page according to claim 1, wherein after the step of developing the target page according to the common logic module and the business project component, the method further comprises:
modifying a preset global public state through a business item component with changed state;
and modifying the states of other business item components in the target page according to the modified global public state, so that the business item components meeting the preset state change conditions in the target page are subjected to global state linkage.
7. The method for developing a cross-end page according to claim 6, wherein the step of modifying the preset global common state by the state-changed business item component comprises:
Determining a modification function corresponding to a business item component with changed state, and determining the state change content of the business item component;
modifying the preset global public state through the modification function according to the state change content;
the step of modifying the states of other business item components in the target page according to the modified global public state so as to enable the business item components meeting the preset state change condition in the target page to carry out global state linkage comprises the following steps:
and modifying the modification function corresponding to the business item component meeting the preset state change condition in the target page according to the modified global public state, so that the business item component meeting the preset state change condition performs global state linkage.
8. A cross-end page development device, characterized in that the cross-end page development device comprises:
the system comprises a reference module, a reference module and a storage module, wherein the reference module is used for directly referencing a public logic module corresponding to a business item assembly from a preset public code warehouse before the business item assembly corresponding to a target page is developed, and the public logic module comprises general business logic for different equipment pages;
And the development module is used for developing the target page according to the public logic module and the business project component.
9. A cross-end page development device, the cross-end page development device comprising: memory, a processor and a cross-end page development program stored on the memory and executable on the processor, the cross-end page development program configured to implement the steps of the cross-end page development method of any one of claims 1 to 7.
10. A storage medium, wherein a program implementing a cross-end page development method is stored on the storage medium, the program implementing the cross-end page development method being executed by a processor to implement the steps of the cross-end page development method according to any one of claims 1 to 7.
CN202311631462.9A 2023-11-30 2023-11-30 Cross-end page development method, device, equipment and storage medium Pending CN117539464A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202311631462.9A CN117539464A (en) 2023-11-30 2023-11-30 Cross-end page development method, device, equipment and storage medium

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202311631462.9A CN117539464A (en) 2023-11-30 2023-11-30 Cross-end page development method, device, equipment and storage medium

Publications (1)

Publication Number Publication Date
CN117539464A true CN117539464A (en) 2024-02-09

Family

ID=89787936

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202311631462.9A Pending CN117539464A (en) 2023-11-30 2023-11-30 Cross-end page development method, device, equipment and storage medium

Country Status (1)

Country Link
CN (1) CN117539464A (en)

Similar Documents

Publication Publication Date Title
US9696972B2 (en) Method and apparatus for updating a web-based user interface
US9015660B1 (en) Proxy graphical user interface generation
US5983001A (en) Method and system for facilitating the automatic creation of test scripts
CA2557111C (en) System and method for building mixed mode execution environment for component applications
US8166396B2 (en) User interface rendering
EP0449438A2 (en) Graphical user interface management system and method
CN102495735A (en) Web end UI (user interface) component application frame system
CN100437478C (en) System and method for interactive wireless applications
CN112114890A (en) Method, device and equipment for processing small program and storage medium
CN113934832A (en) Interactive processing method, device, equipment, medium and program product based on session
CN113360211A (en) Loading display method based on control and related equipment
CN112667221A (en) Deep learning model construction method and system for developing IDE (integrated development environment) based on deep learning
US20050193370A1 (en) System and method for interactive wireless applications with conditional UI controls and screen navigation
CN113626095A (en) Switching method and switching system of configuration center, electronic equipment and storage medium
CN117539464A (en) Cross-end page development method, device, equipment and storage medium
CN115964042A (en) Menu generation method and device, storage medium and electronic equipment
CN115437608A (en) Intelligent research and development assisting method and device
CN111124386B (en) Animation event processing method, device, equipment and storage medium based on Unity
JP2010204840A (en) Customization method, terminal apparatus, computer program, and information recording medium for user interface operation integration system
JPH10222355A (en) Gui application developing device
CN115237386B (en) Method and system for developing large-scale complex Windows native desktop
CN112199097B (en) Installation package generation method, installation package generation device, computer equipment and storage medium
KR102560619B1 (en) Electronic device providing no-code tool service and method thereof
CN116909563B (en) Page generation method, terminal device and storage medium
CN111596906B (en) MVPVM-based Android application development method, device, equipment and medium

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