Webpage development method and device

Abstract

The embodiment of the invention provides a webpage development method, and belongs to the technical field of webpage development. The webpage development method comprises the following steps: configuring a first page; in the process of configuring the first page, obtaining at least part of data of the second page; and rendering at least part of data of the second page to embed the at least part of data into the first page. According to the technical scheme, the first page can reuse the content of the second page, so that the development workload is reduced, and the development efficiency is improved.

Description

Technical Field

[0001] The embodiments of the present application relate to the field of Internet technology, and in particular, to a web page development method, apparatus, computer equipment, computer-readable storage medium, and computer program product. Background Art

[0002] As an important part of Internet technology, web development plays a key role in information dissemination, user interaction and business function realization. As a short-term marketing tool, activity pages have the characteristics of short delivery cycle, high iteration frequency and fast launch speed, but the existing development tools are inefficient for such page development.

[0003] It should be noted that the above content is not necessarily prior art, nor is it intended to limit the scope of patent protection of this application. Summary of the invention

[0004] The embodiments of the present application provide a web page development method, apparatus, computer device, computer-readable storage medium, and computer program product to solve or alleviate one or more of the technical problems raised above.

[0005] One aspect of an embodiment of the present application provides a webpage development method for a development platform, the method comprising: Configure the first page; In the process of configuring the first page, obtaining at least part of the data of the second page; Rendering at least a portion of the data of the second page to embed the at least a portion of the data into the first page.

[0006] Optionally, the development platform is configured with a fragment loader based on a generic renderer; Acquiring at least part of the data of the second page, comprising: passing the identifier of the second page into the fragment loader; and pulling at least part of the data of the second page from the server through the fragment loader; Rendering at least part of the data of the second page includes: transferring the at least part of the data to the universal renderer through the fragment loader, and rendering the second page or a fragment thereof through the universal renderer.

[0007] Optionally, rendering the second page or a fragment thereof by the universal renderer includes: determining whether the at least a portion of the data includes an environmental component; If the environment component is not included, other component resources are directly loaded and stored in the memory; Traversing each of the other component resources in the memory to obtain a framework type of each of the other component resources; According to the frame type of each of the other component resources, the universal renderer calls a corresponding method to perform component rendering to obtain the second page or a fragment thereof.

[0008] Optionally, the global state of each component resource in the memory is managed through useContext Hook.

[0009] Optionally, rendering the second page or a fragment thereof by the universal renderer further includes: In case the environment component is included, obtaining environment component parameters; The environment component and each of the other component resources are sequentially rendered by the universal renderer according to the environment component parameters or the inserted environment variables.

[0010] Optionally, the method further comprises: uninstalling and deregistering the component resources embedded in the first page through a preconfigured uninstall hook processing function.

[0011] One aspect of an embodiment of the present application provides a web page development method for developing a front end, the method comprising: Display an edit page, wherein the edit page is configured with a page edit area and a module configuration area, wherein the module configuration area includes a fragment loader; the fragment loader is obtained based on a universal renderer and is used to obtain page data and call the universal renderer; Edit the first page in the page editing area; In response to selecting the segment loader, displaying a parameter configuration interface, wherein the parameter configuration interface is provided with an identification input box; Receiving a page identifier of a second page through an identifier input box of the fragment loader, where the second page is a page to be embedded; Downloading, by the fragment loader, page data of the second page according to the page identifier; At least part of the data of the second page is transferred to the universal renderer through the fragment loader, the second page or a fragment thereof is rendered by the universal renderer, and the second page or a fragment thereof is embedded into the first page.

[0012] Another aspect of an embodiment of the present application provides a webpage development device for developing a platform, the device comprising: A configuration module, used for configuring the first page; An acquisition module, used for acquiring at least part of the data of the second page during the process of configuring the first page; A rendering module is used to render at least part of the data of the second page to embed the at least part of the data into the first page.

[0013] Another aspect of an embodiment of the present application provides a web page development device, the device comprising: A display module, used for displaying an edit page, wherein the edit page is configured with a page edit area and a module configuration area, wherein the module configuration area includes a fragment loader; the fragment loader is obtained based on a universal renderer and is used for acquiring page data and calling the universal renderer; An editing module, used for editing the first page in the page editing area; an identification module, for displaying a parameter configuration interface in response to selecting the segment loader, wherein the parameter configuration interface is provided with an identification input box; An input module, used for receiving a page identifier of a second page through an identifier input box of the fragment loader, where the second page is a page to be embedded; A download module, used for downloading the page data of the second page according to the page identifier through the fragment loader; The input module is used to input at least part of the data of the second page into the universal renderer through the fragment loader, render the second page or its fragment through the universal renderer, and embed the second page or its fragment into the first page.

[0014] Another aspect of an embodiment of the present application provides a computer device, including: at least one processor; and a memory communicatively coupled to the at least one processor; Wherein: the memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the method as described above.

[0015] Another aspect of an embodiment of the present application provides a computer-readable storage medium, wherein the computer-readable storage medium stores computer instructions, and when the computer instructions are executed by a processor, the method described above is implemented.

[0016] Another aspect of an embodiment of the present application provides a computer program product, including a computer program, which implements the method described above when executed by a processor.

[0017] The embodiment of the present application adopts the above-mentioned technical solution and may include the following advantages: during the process of configuring the first page, if the content of the second page needs to be reused, at least part of the data of the second page is directly obtained on a page basis, and at least part of the data of the second page is rendered to embed the at least part of the data into the first page, so that the first page can reuse the content of the second page, thereby reducing the development workload and improving the development efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] The accompanying drawings exemplarily illustrate the embodiments and constitute a part of the specification, and together with the text description of the specification, are used to explain the exemplary implementation of the embodiments. The embodiments shown are for illustrative purposes only and do not limit the scope of the claims. In all drawings, the same reference numerals refer to similar but not necessarily identical elements.

[0019] Figure 1 The operating environment diagram of the webpage development method according to the first embodiment of the present application is schematically shown; Figure 2 The flowchart of the webpage development method according to the first embodiment of the present application is schematically shown; Figure 3 The newly added flow chart of the webpage development method according to the first embodiment of the present application is schematically shown; Figure 4 The newly added flow chart of the webpage development method according to the first embodiment of the present application is schematically shown; Figure 5 The flowchart of the webpage development method according to the second embodiment of the present application is schematically shown; Figure 6 A diagram schematically shows an application example of the webpage development method according to the second embodiment of the present application; Figure 7 A diagram schematically shows an application example of the webpage development method according to the second embodiment of the present application; Figure 8 A diagram schematically shows an application example of the webpage development method according to the second embodiment of the present application; Fig. 9 A diagram schematically shows an application example of the webpage development method according to the second embodiment of the present application; Fig.10 A block diagram of a web page development device according to Embodiment 3 of the present application is schematically shown; Fig.11 A block diagram schematically shows a web page development device according to a fourth embodiment of the present application; and Fig.12 The hardware architecture diagram of the computer device according to the fifth embodiment of the present application is schematically shown. DETAILED DESCRIPTION

[0020] In order to make the purpose, technical solutions and advantages of the present application more clearly understood, the present application is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not intended to limit the present application. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in the field without making creative work are within the scope of protection of the present application.

[0021] It should be noted that the descriptions involving "first", "second", etc. in the embodiments of the present application are only for descriptive purposes and cannot be understood as indicating or implying their relative importance or implicitly indicating the number of technical features indicated. Therefore, the features defined as "first" and "second" may explicitly or implicitly include at least one of the features. In addition, the technical solutions between the various embodiments can be combined with each other, but they must be based on the ability of ordinary technicians in the field to implement them. When the combination of technical solutions is contradictory or cannot be implemented, it should be deemed that such combination of technical solutions does not exist and is not within the scope of protection required by this application.

[0022] In the description of the present application, it should be understood that the numerical labels before the steps do not indicate the order in which the steps are executed, but are only used to facilitate the description of the present application and to distinguish each step, and therefore should not be understood as a limitation on the present application.

[0023] First, the following terms are explained: Low-code platforms: Low-code is an approach to application development that uses graphical user interfaces and model-driven logic to reduce the need for manual coding.

[0024] Renderer: The core module in the computer system responsible for presenting content to the user, converting web page code into the page content that the user sees on the screen.

[0025] iframe (Inline Frame): It is an inline frame element provided by HTML (Hypertext Markup Language) and is used to embed another independent web page in a web page. It allows developers to load external content into the current page.

[0026] Micro-Frontend Framework: Applied in front-end development, it splits the monolithic front-end application into multiple independent, reusable small front-end modules, which can be independently developed, deployed, and dynamically loaded and rendered on the same page.

[0027] Secondly, in order to facilitate those skilled in the art to understand the technical solutions provided in the embodiments of the present application, the relevant technologies are described below: The applicant understands that: from the perspective of operators, how to efficiently build activity pages without affecting the performance and access costs of activity pages is the main problem currently faced, but the access cost of using iframe and other micro-frontend frameworks is high, difficult and difficult to understand, and the uniformity of the project environment cannot be guaranteed. From the user's perspective, the page should be able to be displayed and interacted quickly, and there should be no problems with abnormal display order and poor compatibility. From the developer's perspective, how to quickly reuse online activity pages to reduce development workload and thus improve efficiency is very important, but traditional development pages require the use of many components of the activity page. If these components need to be accessed during the development process, they need to be downloaded and implemented multiple times by themselves, which will affect the overall R&D cycle.

[0028] To this end, an embodiment of the present application provides a technical solution for web page development. In this technical solution, (1) for operators, if they need to load a certain activity page, they only need to add a fragment loader and configure an activity page identifier to completely load the required reused page. This will not cause performance problems, but also avoid inefficient construction and quickly achieve activity output. (2) For users, the loaded page is a complete whole page, rather than being loaded through an iframe or other micro-frontend container, thereby ensuring faster loading speed. (3) For developers, they only need to introduce a fragment loader to reuse the entire page of the activity platform, without having to implement and register each component locally one by one, which greatly improves development efficiency. See below for details.

[0029] Finally, for ease of understanding, an exemplary operating environment is provided below.

[0030] like Figure 1 As shown, the environment diagram includes a development platform 2, a server 4, and a client 6, wherein: The development platform 2 can be a workstation, a personal computer, a virtual instance in a cloud platform, etc., providing a development environment and a development interface for users. The development platform 2 can run a Windows system, an IOS system, or a Unix system, etc. After the development platform 2 develops an application (installation package), it can be distributed through the server 4.

[0031] Server 4, as a storage platform, can be composed of multiple computing devices. The multiple computing devices can include virtualized computing instances. Virtualized computing instances can include virtual machines, such as simulations of computer systems, operating systems, servers, etc. The computing device can load the virtual machine based on a virtual image and / or other data that defines specific software (e.g., operating system, dedicated application, server) for simulation. As the demand for different types of processing services changes, different virtual machines can be loaded and / or terminated on one or more computing devices. A hypervisor can be implemented to manage the use of different virtual machines on the same computing device.

[0032] Server 4 can provide services such as storage and distribution of application programs.

[0033] The server 4 may be configured to communicate with the development platform 2 , the client 6 , etc. via a network.

[0034] The client 6 can provide a user access page, and can also automatically download an installation package from the server 4 to perform software updates, etc.

[0035] It should be noted that the above devices are exemplary, and the number and type of devices are adjustable in different scenarios or according to different needs.

[0036] The technical solutions of the present application are described below through multiple embodiments. It should be noted that these embodiments can be implemented in a variety of different forms and should not be construed as being limited to the embodiments described here.

[0037] Embodiment 1 Figure 2 The flowchart of the webpage development method according to the first embodiment of the present application is schematically shown.

[0038] This web development method is used to develop platforms such as Figure 2 As shown, the method may include steps S200 to S204, wherein: Step S200, configuring the first page.

[0039] Step S202: in the process of configuring the first page, obtaining at least part of the data of the second page.

[0040] Step S204: render at least part of the data of the second page to embed the at least part of the data into the first page.

[0041] The web page development method provided in this embodiment directly obtains at least part of the data of the second page on a page basis if the content of the second page needs to be reused during the process of configuring the first page, and renders at least part of the data of the second page to embed the at least part of the data into the first page, so that the first page can reuse the content of the second page, thereby reducing the development workload and improving the development efficiency.

[0042] The following combination Figure 2 , each step in steps S200~S204 and other optional steps are described in detail.

[0043] Step S200 , configure the first page.

[0044] The development platform (such as the low-code platform) configures the first page. The first page can be a blank page, that is, a page without any configuration, or a page with some content configured. The configuration page will display the parameters of the component configuration in real time, and you can configure the first page on the configuration page. For example, a page can have background color, background image, and background tiling mode, and common parameters can include width, height, color, font size, background color, background image, inner and outer margins, etc.

[0045] Step S202 , in the process of configuring the first page, obtaining at least part of the data of the second page.

[0046] The second page may be a page that has been configured with at least part of its content and saved, and at least part of the data of the second page may be common component data required by the first page. The second page may also be a page that has been put online. Putting the page online may include publishing the page so that users can access it. In some implementations, the second page data may be saved to a server, and a data interface may be provided to the development platform through the server, so that during the process of configuring the first page, the development platform may obtain at least part of the data of the second page from the server.

[0047] Step S204 , rendering at least part of the data of the second page to embed the at least part of the data into the first page.

[0048] In some embodiments, when the first page is a blank page, all data of the second page can be rendered to the first page, thereby fully reusing the content of the second page. Alternatively, when other active components are configured on the first page, some functional components of the second page can be rendered and embedded into the first page.

[0049] For example, when the second page has been launched, the first page needs to be built, and the first page contains some functional components of the second page. In this case, the data of the second page can be obtained and the functional components of the second page can be rendered and implemented in the first page.

[0050] For example, the second page implements the functions of lottery, card collection and voting, while the first page needs to implement the functions of answering questions, lottery, card collection and voting. In the process of configuring the first page, the data of the second page can be obtained, and then the lottery, card collection and voting functions can be rendered in the first page without downloading or separately configuring multiple components corresponding to the lottery, card collection and voting functions, and without rebuilding the first page from beginning to end.

[0051] The following will provide a further exemplary introduction to obtaining at least part of the data of the second page and rendering at least part of the data of the second page through more embodiments.

[0052] In an alternative embodiment, the development platform is configured with a generic renderer based fragment loader.

[0053] Step S202 may include: passing the identifier of the second page into the fragment loader; and pulling at least part of the data of the second page from the server through the fragment loader.

[0054] Step S204 may include: transferring the at least part of the data into the universal renderer through the fragment loader, and rendering the second page or the fragment thereof through the universal renderer.

[0055] The fragment loader is pre-packaged into a component for downloading and calling. When the fragment loader is used on the development platform, it is equivalent to using a component. At the same time, obtaining the second page data through the fragment loader and rendering it in a component manner can improve rendering efficiency, and there is no need to introduce third-party micro-front-end components, and the compatibility is good. The fragment loader has configuration parameters, such as page identification. When the identification of the second page is passed to the fragment loader, the fragment loader will call the data interface of the server, and the server will return at least part of the data of the second page based on the identification of the second page. The universal renderer renders a page or fragment based on the passed in data.

[0056] In this embodiment, the development platform is configured with a fragment loader based on a universal renderer, so that the development platform and the fragment loader use the same renderer, so that all components can share a unified rendering environment, avoiding the problem of inconsistent rendering environments of components across frameworks.

[0057] In an optional embodiment, if Figure 3 As shown, rendering the second page or a fragment thereof by the universal renderer may include: Step S300: Determine whether the at least part of the data includes an environment component.

[0058] Step S302: when the environment component is not included, other component resources are directly loaded and the loaded other component resources are stored in the memory.

[0059] Step S304: traverse each of the other component resources in the memory to obtain a framework type of each of the other component resources.

[0060] Step S306 : According to the frame type of each of the other component resources, the universal renderer calls a corresponding method to perform component rendering to obtain the second page or a fragment thereof.

[0061] Environment components are components that provide basic functions or global context support in a specific application environment. The role of environment components is to provide a unified operating environment in a web page or application so that all functional components can be loaded and run correctly. Environment components can include some common functional modules, layout structures, style definitions or operating logic, and play the role of providing "infrastructure" for the entire page or application.

[0062] In some embodiments, the pages of traditional businesses are developed in a general environment, and development in a general environment may not require additional environment components. In addition, when the second page is a traditional business page, the data of the second page obtained does not include the environment component. The general environment refers to a scenario that does not rely on specific business logic and is suitable for pages or functions that are common to multiple businesses. The second page data passed in can be traversed by a general renderer to find the framework type and name of each component, and then select a suitable rendering method based on the framework type. It can support the rendering of multiple mainstream front-end frameworks (React, Vue, Vanilla JS, etc.), and can flexibly respond to different types of components. In some embodiments, the framework type of the component can be determined based on the framework field of the data, and the current component name can be obtained based on the name field, and then the corresponding component data can be obtained in the shared storage area.

[0063] In this embodiment, each component can be correctly rendered according to the framework to which it belongs, and each component can be reused in different page environments, thereby improving development efficiency and simplifying the process of building an activity page.

[0064] In an optional embodiment, if Figure 4 As shown, rendering the second page or a fragment thereof by the universal renderer may also include: Step S400: When the environment component is included, obtain the environment component parameters.

[0065] Step S402 : Rendering the environment component and each of the other component resources in sequence through the universal renderer according to the environment component parameter or the inserted environment variable.

[0066] In the ring business, such as events, the corresponding page data may include environment components. Ring business refers to multiple business modules or fields with independent logic and functions on the platform. By parsing the parameters of the environment component, it can be determined whether other components need to be loaded after the environment component rendering is completed. If the environment component needs to be rendered first, render the environment component first, and then load other component resources for rendering. The universal renderer can obtain component configuration and component functions, and then call the component function and pass in the component configuration to render the component. Since the component layout and component configuration are written into the component itself, during the rendering process, the universal renderer can render all components correctly, avoiding component hierarchy or layout disorder problems.

[0067] In this embodiment, by sequentially rendering the environment components and various other component resources, the environment components and various other component resources corresponding to the page data can be correctly loaded and rendered, ensuring that the first page after development can be correctly displayed.

[0068] In an optional embodiment, rendering the second page or a fragment thereof by the universal renderer further includes: when an environment component is included in the at least part of the data but the first page is configured with a corresponding environment component, filtering out the environment component.

[0069] In some embodiments, when the business scenario is a sports event or other environmental business scenario, the first page is configured with a corresponding environment component, and there is no need to repeatedly load the environment component. After the fragment loader obtains the page data of the second page from the server, the data of the environment component is filtered and cleared, and then other components are rendered through the universal renderer.

[0070] In this embodiment, when the first page is configured with corresponding environment components, by filtering the environment components of the second page, resource consumption and redundant operations can be reduced, thereby speeding up page rendering.

[0071] In an optional embodiment, the web page development method further includes: managing the global state of each of the component resources in the memory through useContext Hook.

[0072] useContext is a Hook in React, which is used to allow components to access and share global state or cross-component data without having to pass it layer by layer. React is a JavaScript library (front-end scripting language library) for building user interfaces, especially suitable for building single-page applications. Hook is an API (application programming interface) for function components provided by React, which is used to manage state, handle side effects, access context, etc., making function components more powerful and able to replace many functions of class components. The fragment loader uses useContext to maintain the state of these components. Through useContext, the fragment loader can manage the global state of the component to ensure that the state of the component is unified and consistent throughout the page.

[0073] In this embodiment, memory management and intelligent rendering based on useContext Hook reduce repeated loading of resources and redundant rendering operations.

[0074] In an optional embodiment, the web page development method further includes: The component resources embedded in the first page are uninstalled and deregistered through a pre-configured uninstall hook processing function.

[0075] A hook function is a function that is automatically called by the system or framework at a specific time. An uninstall hook is a function that is triggered when a component is uninstalled (i.e., removed from the page). In some embodiments, the fragment loader can be developed based on React, and when the fragment loader executes createRoot, an uninstall hook function will be returned. When a component needs to be unregistered, the fragment loader can uninstall the component by calling the returned uninstall hook function. createRoot is an API in React that is used to create and render the root component of a React application, supporting concurrent rendering and optimizing performance. It should be noted that the fragment loader can also be developed based on other programming environments, which is not limited here.

[0076] In this embodiment, by uninstalling the hook processing function, the component resources can be automatically cleaned up when the component is removed, thereby avoiding unnecessary component resources from continuously occupying system resources and improving the performance of the page.

[0077] Embodiment 2 Figure 5 The flowchart of the web page development method according to the second embodiment of the present application is schematically shown.

[0078] This web development method is used to develop front-ends, such as Figure 5 As shown, the method may include steps S500 to S510, wherein: Step S500, displaying an edit page, wherein the edit page is configured with a page edit area and a module configuration area, wherein the module configuration area includes a fragment loader; the fragment loader is obtained based on a universal renderer and is used to obtain page data and call the universal renderer; Step S502, editing the first page in the page editing area; Step S504, in response to selecting the segment loader, displaying a parameter configuration interface, wherein the parameter configuration interface is provided with an identification input box; Step S506, receiving a page identifier of a second page through the identifier input box of the fragment loader, where the second page is a page to be embedded; Step S508, downloading the page data of the second page according to the page identifier through the fragment loader; Step S510: passing at least part of the data of the second page into the universal renderer through the fragment loader, rendering the second page or a fragment thereof through the universal renderer, and embedding the second page or the fragment thereof into the first page.

[0079] The web page development method provided in this embodiment can develop a web page through a graphical interface, and can flexibly reuse the second page data to render it to the first page, thereby improving development efficiency and reducing the learning cost of developers.

[0080] In order to make this application easier to understand, the following Figure 6-9 An exemplary application is provided.

[0081] S1. Display an editing page, wherein the editing page is configured with a page editing area and a module configuration area.

[0082] like Figure 6 As shown, the editing page can observe the rendering effect in real time. Different modules such as activity rules and basic containers are displayed, and the corresponding activity rule module parameters such as size, layout and background are displayed.

[0083] S2. Edit the first page in the page editing area.

[0084] You can click on the corresponding module to configure it accordingly. For example, you can modify Figure 6 Configure the corresponding parameters such as size, layout and background accordingly.

[0085] S3. In response to selecting the segment loader, a parameter configuration interface is displayed, wherein the parameter configuration interface is provided with an identification input box.

[0086] like Figure 7As shown, you can select a fragment loader or a connection button to embed the corresponding content in the page editing area. You can place the cursor at a certain position on the first page to be used as the location for inserting data on the second page. Figure 8 As shown, the second page content loaded by the fragment loader and the configuration interface of the fragment loader, wherein the parameter configuration interface is provided with an identification input box.

[0087] S4. Receive the page identifier of the second page through the identifier input box of the fragment loader, and then embed the content of the second page into the first page.

[0088] Figure 6 The first page is shown which does not load the second page via the fragment loader.

[0089] Fig. 9 The second page is displayed.

[0090] Figure 8 The first page is displayed, and the second page is inserted into the first page by inputting the second page identifier in the identifier input box corresponding to the fragment loader.

[0091] Fig. 9 The first page is displayed, which has been inserted into the second page.

[0092] pass Figure 6 and Fig. 9 The comparison can show the process of the first page reusing the content of the second page to the first page through the fragment loader.

[0093] In this exemplary application, web pages can be developed through a graphical interface, and the second page data can be flexibly reused to render it to the first page, thereby improving rendering efficiency and development efficiency and reducing the learning cost of developers.

[0094] Embodiment 3 Fig.10 The block diagram of the webpage development device according to the third embodiment of the present application is schematically shown. The device is used for developing a platform and can be divided into one or more program modules. One or more program modules are stored in a storage medium and executed by one or more processors to complete the embodiment of the present application. The program module referred to in the embodiment of the present application refers to a series of computer program instruction segments that can complete specific functions. The following description will specifically introduce the functions of each program module in this embodiment. Fig.10 As shown, the device 1600 may include: a configuration module 1610, an acquisition module 1620 and a rendering module 1630, wherein: The configuration module 1610 is used to configure the first page.

[0095] The acquisition module 1620 is used to acquire at least part of the data of the second page during the process of configuring the first page.

[0096] The rendering module 1630 is configured to render at least part of the data of the second page to embed the at least part of the data into the first page.

[0097] As an optional embodiment, the development platform is configured with a fragment loader based on a universal renderer; Acquiring at least part of the data of the second page, comprising: passing the identifier of the second page into the fragment loader; and pulling at least part of the data of the second page from the server through the fragment loader; Rendering at least part of the data of the second page includes: transferring the at least part of the data to the universal renderer through the fragment loader, and rendering the second page or a fragment thereof through the universal renderer.

[0098] As an optional embodiment, rendering the second page or a fragment thereof by the universal renderer includes: determining whether the at least a portion of the data includes an environmental component; If the environment component is not included, other component resources are directly loaded and stored in the memory; Traversing each of the other component resources in the memory to obtain a framework type of each of the other component resources; According to the frame type of each of the other component resources, the universal renderer calls a corresponding method to perform component rendering to obtain the second page or a fragment thereof.

[0099] As an optional embodiment, the method further includes: Through the useContext Hook, the global state of each component resource in the memory is managed.

[0100] As an optional embodiment, rendering the second page or a fragment thereof by the universal renderer further includes: In case the environment component is included, obtaining environment component parameters; The environment component and each of the other component resources are sequentially rendered by the universal renderer according to the environment component parameters or the inserted environment variables.

[0101] As an optional embodiment, rendering the second page or a fragment thereof by the universal renderer further includes: In the case where the at least part of the data includes an environmental component, but the first page is configured with a corresponding environmental component, the environmental component is filtered out.

[0102] As an optional embodiment, the method further includes: The component resources embedded in the first page are uninstalled and deregistered through a pre-configured uninstall hook processing function.

[0103] Embodiment 4 Fig.11 The block diagram of the web page development device according to the fourth embodiment of the present application is schematically shown. The device is used to develop the front end and can be divided into one or more program modules. One or more program modules are stored in a storage medium and executed by one or more processors to complete the embodiment of the present application. The program module referred to in the embodiment of the present application refers to a series of computer program instruction segments that can complete specific functions. The following description will specifically introduce the functions of each program module in this embodiment. Fig.11 As shown, the device 1700 may include: a display module 1710, an editing module 1720, an identification module 1730, an input module 1740, a download module 1750 and an input module 1760, wherein: The display module 1710 is used to display an editing page. The editing page is configured with a page editing area and a module configuration area. The module configuration area includes a fragment loader. The fragment loader is obtained based on the universal renderer and is used to obtain page data and call the universal renderer.

[0104] The editing module 1720 is used to edit the first page in the page editing area.

[0105] The identification module 1730 is used to display a parameter configuration interface in response to selecting the segment loader, wherein the parameter configuration interface is provided with an identification input box.

[0106] The input module 1740 is used to receive the page identifier of the second page through the identifier input box of the fragment loader, where the second page is the page to be embedded.

[0107] The download module 1750 is used to download the page data of the second page according to the page identifier through the fragment loader.

[0108] The input module 1760 is used to input at least part of the data of the second page into the universal renderer through the fragment loader, render the second page or its fragment through the universal renderer, and embed the second page or its fragment into the first page.

[0109] Embodiment 5 Fig.12The schematic diagram of the hardware architecture of a computer device 10000 suitable for implementing a webpage development method according to the third embodiment of the present application is shown. In some embodiments, the computer device 10000 may be a terminal device such as a smart phone, a wearable device, a tablet computer, a personal computer, a vehicle-mounted terminal, a game console, a virtual device, a workbench, a digital assistant, a set-top box, a robot, etc. In other embodiments, the computer device 10000 may be a rack server, a blade server, a tower server, or a cabinet server (including an independent server, or a server cluster composed of multiple servers), etc. Fig.12 As shown, the computer device 10000 includes but is not limited to: a memory 10010, a processor 10020, and a network interface 10030 that can communicate with each other through a system bus. Among them: The memory 10010 includes at least one type of computer-readable storage medium, and the readable storage medium includes flash memory, hard disk, multimedia card, card-type memory (such as SD or DX memory), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, magnetic disk, optical disk, etc. In some embodiments, the memory 10010 can be an internal storage module of the computer device 10000, such as a hard disk or memory of the computer device 10000. In other embodiments, the memory 10010 can also be an external storage device of the computer device 10000, such as a plug-in hard disk equipped on the computer device 10000, a smart memory card (Smart Media Card, SMC), a secure digital (Secure Digital, SD) card, a flash card (Flash Card), etc. Of course, the memory 10010 can also include both the internal storage module of the computer device 10000 and its external storage device. In this embodiment, the memory 10010 is generally used to store the operating system and various application software installed in the computer device 10000, such as program codes of the web page development method, etc. In addition, the memory 10010 can also be used to temporarily store various data that have been output or are to be output.

[0110] In some embodiments, the processor 10020 may be a central processing unit (CPU), a controller, a microcontroller, a microprocessor, or other chips. The processor 10020 is generally used to control the overall operation of the computer device 10000, such as performing control and processing related to data interaction or communication with the computer device 10000. In this embodiment, the processor 10020 is used to run the program code stored in the memory 10010 or process data.

[0111] The network interface 10030 may include a wireless network interface or a wired network interface, and the network interface 10030 is generally used to establish a communication link between the computer device 10000 and other computer devices. For example, the network interface 10030 is used to connect the computer device 10000 to an external terminal through a network, and to establish a data transmission channel and a communication link between the computer device 10000 and the external terminal. The network may be a wireless or wired network such as an intranet, the Internet, the Global System of Mobile communication (GSM), Wideband Code Division Multiple Access (WCDMA), 4G network, 5G network, Bluetooth, Wi-Fi, etc.

[0112] It should be pointed out that Fig.12 Only a computer device having components 10010 - 10030 is shown, but it should be understood that implementation of all of the components shown is not a requirement, and more or fewer components may alternatively be implemented.

[0113] In this embodiment, the web page development method stored in the memory 10010 can also be divided into one or more program modules and executed by one or more processors (such as processor 10020) to complete the embodiment of the present application.

[0114] Embodiment 6 An embodiment of the present application further provides a computer-readable storage medium, on which a computer program is stored, wherein when the computer program is executed by a processor, the steps of the web page development method in the embodiment are implemented.

[0115] In this embodiment, the computer-readable storage medium includes flash memory, hard disk, multimedia card, card-type memory (for example, SD or DX memory, etc.), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, disk, optical disk, etc. In some embodiments, the computer-readable storage medium may be an internal storage unit of a computer device, such as a hard disk or memory of the computer device. In other embodiments, the computer-readable storage medium may also be an external storage device of a computer device, such as a plug-in hard disk, a smart memory card (Smart Media Card, SMC), a secure digital (Secure Digital, SD) card, a flash card (Flash Card), etc. equipped on the computer device. Of course, the computer-readable storage medium may also include both the internal storage unit of the computer device and its external storage device. In this embodiment, the computer-readable storage medium is generally used to store an operating system and various application software installed on the computer device, such as the program code of the web page development method in the embodiment, etc. In addition, the computer-readable storage medium may also be used to temporarily store various types of data that have been output or are to be output.

[0116] Embodiment 7 An embodiment of the present application also provides a computer program product, including a computer program, which implements the method in the above embodiment when executed by a processor.

[0117] Obviously, those skilled in the art should understand that the modules or steps of the above-mentioned embodiments of the present application can be implemented by general-purpose computer devices, they can be concentrated on a single computer device, or distributed on a network composed of multiple computer devices, optionally, they can be implemented by executable program codes of computer devices, so that they can be stored in a storage device and executed by the computer device, and in some cases, the steps shown or described can be executed in a different order from that herein, or they can be made into individual integrated circuit modules, or multiple modules or steps therein can be made into a single integrated circuit module for implementation. In this way, the embodiments of the present application are not limited to any specific combination of hardware and software.

[0118] It should be noted that the above are only preferred embodiments of the present application, and the patent protection scope of the present application is not limited thereto. Any equivalent structure or equivalent process transformation made using the contents of the specification and drawings of the present application, or directly or indirectly applied in other related technical fields, are also included in the patent protection scope of the present application.

Claims

1. A web page development method, characterized in that: For developing a platform, the method comprises: Configure the first page; In the process of configuring the first page, obtaining at least part of the data of the second page; Rendering at least a portion of the data of the second page to embed the at least a portion of the data into the first page.

2. The method according to claim 1, characterized in that The development platform is configured with a fragment loader based on a generic renderer; Acquiring at least part of the data of the second page, comprising: passing the identifier of the second page into the fragment loader; and pulling at least part of the data of the second page from the server through the fragment loader; Rendering at least part of the data of the second page includes: transferring the at least part of the data to the universal renderer through the fragment loader, and rendering the second page or a fragment thereof through the universal renderer.

3. The method according to claim 2, characterized in that Rendering the second page or a fragment thereof by the universal renderer includes: determining whether the at least a portion of the data includes an environmental component; If the environment component is not included, other component resources are directly loaded and stored in the memory; Traversing each of the other component resources in the memory to obtain a framework type of each of the other component resources; According to the frame type of each of the other component resources, the universal renderer calls a corresponding method to perform component rendering to obtain the second page or a fragment thereof.

4. The method according to claim 3, characterized in that The method further comprises: Through the useContext Hook, the global state of each component resource in the memory is managed.

5. The method according to claim 3, characterized in that: Rendering the second page or a fragment thereof by the universal renderer further includes: In case the environment component is included, obtaining environment component parameters; The environment component and each of the other component resources are sequentially rendered by the universal renderer according to the environment component parameters or the inserted environment variables.

6. The method according to claim 3, characterized in that Rendering the second page or a fragment thereof by the universal renderer further includes: In the case where the at least part of the data includes an environmental component, but the first page is configured with a corresponding environmental component, the environmental component is filtered out.

7. The method according to any one of claims 3 to 6, characterized in that: The method further comprises: The component resources embedded in the first page are uninstalled and deregistered through a pre-configured uninstall hook processing function.

8. A web page development method, characterized in that: For developing a front end, the method includes: Display an edit page, wherein the edit page is configured with a page edit area and a module configuration area, wherein the module configuration area includes a fragment loader; the fragment loader is obtained based on a universal renderer and is used to obtain page data and call the universal renderer; Edit the first page in the page editing area; In response to selecting the segment loader, displaying a parameter configuration interface, wherein the parameter configuration interface is provided with an identification input box; Receiving a page identifier of a second page through an identifier input box of the fragment loader, where the second page is a page to be embedded; Downloading, by the fragment loader, page data of the second page according to the page identifier; At least part of the data of the second page is transferred to the universal renderer through the fragment loader, the second page or a fragment thereof is rendered by the universal renderer, and the second page or a fragment thereof is embedded into the first page.

9. A web page development device, characterized in that: For developing a platform, the device comprises: A configuration module, used for configuring the first page; An acquisition module, used for acquiring at least part of the data of the second page during the process of configuring the first page; A rendering module is used to render at least part of the data of the second page to embed the at least part of the data into the first page.

10. A web page development device, characterized in that: For developing a front end, the device comprises: A display module, used for displaying an edit page, wherein the edit page is configured with a page edit area and a module configuration area, wherein the module configuration area includes a fragment loader; the fragment loader is obtained based on a universal renderer and is used for acquiring page data and calling the universal renderer; An editing module, used for editing the first page in the page editing area; an identification module, for displaying a parameter configuration interface in response to selecting the segment loader, wherein the parameter configuration interface is provided with an identification input box; An input module, used for receiving a page identifier of a second page through an identifier input box of the fragment loader, where the second page is a page to be embedded; A download module, used for downloading the page data of the second page according to the page identifier through the fragment loader; The input module is used to input at least part of the data of the second page into the universal renderer through the fragment loader, render the second page or its fragment through the universal renderer, and embed the second page or its fragment into the first page.

11. A computer device, characterized in that: include: at least one processor; and a memory communicatively connected to the at least one processor; wherein: The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform the method according to any one of claims 1 to 8.

12. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer instructions, and when the computer instructions are executed by a processor, the method according to any one of claims 1 to 8 is implemented.

13. A computer program product, comprising a computer program, characterized in that When the computer program is executed by a processor, the steps of the method according to claims 1 to 8 are implemented.

Images