Page application architecture and method for generating page application based on page application architecture

Abstract

The invention discloses a page application architecture and a method for generating a page application based on the page application architecture. The page application architecture comprises a page frame constructed based on a first bottom layer frame; and a plurality of mutually independent category blocks corresponding to different category designs, the page framework comprises a page structure module, a universal component library, a global variable module and an initialization module; wherein the page structure module comprises a page head navigation sub-module, a page core navigation sub-module and a block configuration sub-module; the universal component library comprises a common component registered to a loading tool of the first underlying framework and integrated to the page framework; in the category blocks, a product of a first category block is packaged into a page frame to be initially displayed in a content display area of the page, and a product of a second category block is dynamically loaded according to requirements when the page application runs. By adopting the architecture, the collaborative development efficiency of the page application can be improved.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of front-end, in particular to a page application architecture. The present application also relates to a method and device for generating a page application based on the page application architecture and an electronic device. BACKGROUND

[0002] At present, page applications are becoming more and more common. With the rapid development of Internet technology, the rapid change of product environment and the continuous updating of user needs, rapid iteration poses a challenge to page applications. In fact, the architecture of a page application often affects the iteration efficiency of the page application, so how to design the architecture of the page application is crucial.

[0003] In the prior art, a page application often integrates different categories of function modules, and adding or modifying a category of function may affect the page layout and may exist coupling between function modules, etc., which often requires direct modification of page engineering code, resulting in risks in collaborative development and emergency handling, and affecting the efficiency of rapid iteration.

[0004] Therefore, how to provide a more reasonable page application architecture to adapt to the needs of rapid iteration is a problem to be solved.

[0005] The above information disclosed in the background section is only used to strengthen the understanding of the background of the present application, and therefore it can include information that does not constitute prior art known to those of ordinary skill in the art. SUMMARY

[0006] The present application provides a page application architecture and a method and device for generating a page application based on the page application architecture and an electronic device, which can provide an open architecture and improve the collaborative development efficiency of the page application. The specific solutions are as follows: In a first aspect, the present application provides a page application architecture, comprising: a page framework built based on a first underlying framework; and a plurality of independent category blocks corresponding to different categories of designs; wherein the page framework comprises a page structure module, a general component library, a global variable module, and an initialization module; wherein the page structure module comprises a page header navigation submodule for generating a page header navigation area, a page core navigation submodule for generating a page core navigation area, and a block configuration submodule for importing a category block; the page header navigation area is used to present any one of the following header navigation labels: a location navigation label associated with a location module, an interest navigation label associated with an interest module, and an order navigation label associated with an order module; the page core navigation area is used to present a category function entry associated with a category block, and after a category function entry is triggered, the display content of the category block corresponding to the category function entry is displayed in a content display area of the page structure; wherein the general component library comprises common components registered to a loading tool of the first underlying framework and integrated into the page framework; wherein the initialization module is used to provide at least one of the following basic functions: a positioning function, a login-free function, a first-screen data function, and a backup basic function in abnormal situations; the global variable module encapsulates at least one type of global variables, such as positioning global variables, navigation global variables, event communication global variables, and resource usage global variables; the category block comprises a first category block and a second category block, a product of at least one first category block is packaged into a page product corresponding to the page framework, so as to initially display the display content of the first category block in a content display area of the page structure after the page application is started, and a product of at least one second category block is generated as an independent code block to be dynamically loaded according to requirements during the running of the page application; wherein the category block depends on the general component library.

[0007] Optionally, the positioning global variable is configured to store acquired positioning information, the positioning information including position coordinates, a time stamp, and a moving speed; the positioning information is acquired by a positioning function in the initialization module and stored in the positioning global variable; the global variable module is introduced in each category block; when a category function entry is triggered or after being triggered, the current category block displays position information according to the positioning information of the positioning global variable when the content display area is loaded; the same positioning module providing a positioning function is called in each category block, and the positioning module is called in the current category block to acquire new positioning information and store the new positioning information in response to an interactive process performed in the current category block; in response to a category function entry switching operation, a new category block is loaded, and the new positioning information is read when the new category block is loaded; the navigation global variable stores parameter information of a common logic in a switching process between different category blocks, the parameter information including information of a uniform resource locator splicing parameter; the resource usage global variable stores common application layer information of a client sending a network request to a server; different category blocks send network requests from the client to the server using a unified method according to the common application layer information.

[0008] Optionally, for each category block, a first product conforming to a package manager standard is generated, and a second product conforming to an asynchronous module definition and processable by a loading tool of the first underlying framework is generated; the first product of a first category block is packaged into the page product, and the first product of a second category block is generated as an independent code block; the second product is dynamically loaded according to a demand by a specified uniform locator of the second product through an introduced script method of the first underlying framework in a debugging link of a page application; the first product of the second category block is loaded in a lazy loading manner.

[0009] Optionally, a module product of a functional module included in the category block is generated according to an interface exposure manner and a code organization manner special for the category block; the category block increases a block plug-in corresponding to the category block on the basis of a component encapsulation tool, introduces a module product published by the functional module included in the category block, and exports a category standard component conforming to a second underlying framework, the category standard component being provided to the page framework so that the page framework renders the category standard component in a list component included in the page framework; the first underlying framework is an extension based on the second underlying framework, the second underlying framework is configured to process component rendering logic, and the first underlying framework is bridged with a native component rendering layer.

[0010] Optionally, for each category block, the page product corresponding to the page framework is integrated in the item local environment of the category block to establish a local development environment of the category block; the category block communicates with the page framework, relies on the universal component library integrated in the page product, and receives first screen data provided by an initialization module of the page framework.

[0011] Optionally, the universal component library includes any of the following public components: standard components provided by a second underlying framework, and uniform interface components for constructing the page application; the uniform interface components include any of the following components: a prompt component, a pop-up component, a modal box, and a carousel container.

[0012] Optionally, in the page application architecture, the structural hierarchy of the page application includes a page top display area at the top of the page and a content display area in the main body of the page; the page top display area includes the page header navigation area and the page core navigation area; the category block displayed in the content display area is one of a catering block, a first retail block, a second retail block, and a third retail block obtained according to a category field plan; the catering block is used to provide catering information, the first retail block is used to provide supermarket convenience store information, the second retail block is used to provide medicine information, and the third retail block is used to provide specialized commodity information; each category block includes one or more function modules; the structure of each category block includes an in-block benefit activity module, an in-block banner module, an in-block navigation module, and an object information presentation module; a navigation tab in the in-block navigation module in a selected state serves as a current navigation tab, and recommended object information filtered according to the current navigation tab is displayed in the object information presentation module; the catering block is a first category block; the first retail block, the second retail block, and the third retail block are second category blocks dynamically loaded according to requirements when the page application is running.

[0013] In a second aspect, the present application also provides a method for generating a page application based on a page application architecture, the page application architecture being any one of the page application architectures described in the first aspect above, the method comprising: establishing a page framework pipeline for a page framework in the page application architecture, constructing a page product corresponding to the page framework based on a first underlying framework through the page framework pipeline, and generating a pre-release page based on the page product; establishing a category block pipeline corresponding to each category block in the page application architecture based on information of the category block, generating a category block product of the category block through the category block pipeline, and setting a version number of the category block product according to a predetermined rule; integrating each category block product into the pre-release page to generate a category test page for testing the category block, the category test page being used to receive a category test uniform locator carrying a category block parameter to execute a category test case generated for the category block; in response to each category block product meeting a test passing standard, integrating each category block product into the pre-release page to obtain a test version of the page application; verifying each category block based on the test version of the page application, and publishing and updating a category block that passes the verification to a formal version of the page application; performing integration regression testing based on the formal version of the page application, and in response to the formal version of the page application meeting a regression test passing standard, publishing the formal version of the page application based on a gray release strategy.

[0014] In a third aspect, the present application also provides a page display method, the method comprising: in response to a page application start instruction, loading a page framework of the page application and loading at least one first category block of category blocks of the page application; the page application being generated based on the page application architecture of any one of the first aspect; during or after execution of the loading, displaying a page of the page application; the page comprising a page header navigation area, a page core navigation area, and a content display area; wherein any one of the following header navigation labels is displayed in the page header navigation area: a location navigation label associated with a location module, an interest navigation label associated with an interest module, and an order navigation label associated with an order module; a category function entry associated with a category block is displayed in the page core navigation area, and when a category function entry is triggered, the display content of the category block corresponding to the category function entry is displayed in the page structure; the display content of the first category block is initially displayed in the content display area; in response to a target category function entry in the category function entries being triggered, the display content of the category block corresponding to the target category function entry is displayed in the content display area.

[0015] In a fourth aspect, the present application further provides a device for generating a page application based on a page application architecture, the page application architecture being the page application architecture according to any one of the first aspect, the device comprising: a main pipeline unit configured to establish a page framework pipeline for a page framework in the page application architecture, to construct a page product corresponding to the page framework based on a first underlying framework through the page framework pipeline, and to generate a pre-release page according to the page product; a category pipeline unit configured to establish a category block pipeline corresponding to each category block in the page application architecture according to information of the category block, to generate a category block product of the category block through the category block pipeline and to set a version number of the category block product according to a predetermined rule, and to integrate the category block product into the pre-release page to generate a category test page for testing the category block, the category test page being configured to receive a category test uniform resource locator carrying a category block parameter to execute a category test case generated for the category block; an integrated test unit configured to integrate each row of the category block product and the pre-release page to obtain a test version of the page application in response to the fact that each category block product meets a test passing standard, and to verify each category block based on the test version of the page application, and to publish and update a category block that passes the verification to a formal version of the page application; and a regression test unit configured to perform integrated regression testing based on the formal version of the page application, and to publish the formal version of the page application based on a gray release strategy in response to the fact that the formal version of the page application meets a regression test passing standard.

[0016] In a fifth aspect, the present application further provides an electronic device, comprising a processor, a memory, and computer program instructions stored in the memory and executable on the processor; the processor implements the method according to any one of the second or third aspect when executing the computer program instructions.

[0017] In a sixth aspect, the present application provides a computer readable storage medium, the computer readable storage medium storing computer execution instructions, the computer execution instructions being used to implement the method according to any one of the second or third aspect when executed by a processor.

[0018] In a seventh aspect, the present application provides a computer program product, comprising a computer program, the computer program being used to implement the method according to any one of the second or third aspect when executed by a processor.

[0019] Compared with the prior art, the present application has the following advantages: The embodiment of the present application provides a page application architecture, comprising: a page framework constructed based on a first underlying framework; and a plurality of independent category blocks corresponding to different categories of design; wherein the page framework comprises a page structure module, a general component library, a global variable module and an initialization module; wherein the page structure module comprises a page header navigation submodule for generating a page header navigation area, a page core navigation submodule for generating a page core navigation area and a block configuration submodule for introducing a category block; the page header navigation area is used for presenting any one of the following header navigation labels: a location navigation label associated with a location module, an interest navigation label associated with an interest module, an order navigation label associated with an order module; the page core navigation area is used for presenting a category function entrance associated with a category block, and after one category function entrance is triggered, display content of a category block corresponding to the category function entrance is displayed in a content display area of the page structure; wherein the general component library comprises a public component registered to a loading tool of the first underlying framework and integrated into the page framework; wherein the initialization module is used for providing at least one of the following basic functions: a positioning function, a login-free function, a first screen data function and a backup basic function in an abnormal situation; the global variable module encapsulates at least one type of global variable, such as a positioning global variable, a navigation global variable, an event communication global variable and a resource usage global variable; the category block comprises a first category block and a second category block, a product of at least one first category block is packaged into a page product corresponding to the page framework, so that the display content of the first category block is initially displayed in a content display area of the page structure after the page application is started, and a product of at least one second category block is generated as an independent code block, so as to be dynamically loaded according to requirements during the running of the page application; wherein the category block depends on the general component library. The submodules of the page structure module in the page framework of the page application architecture provide navigation and entrance capabilities, and the general component library, the global variable module and the initialization module can provide a basic structure and a relatively consistent basic layout; the category blocks are designed to be independent of each other, so that independent iteration of the category blocks is facilitated without affecting other category blocks. Therefore, the page application architecture is an open architecture. Further, the category blocks can integrate the page framework into local development and debugging, thereby improving the collaborative work efficiency between the category blocks.

[0020] Further, the embodiment of the present application provides a method for generating a page application based on the above-mentioned page application architecture, the page framework is iterated / developed based on a process carried by a page framework pipeline, and different category blocks are iterated / developed based on a process carried by a block pipeline, thereby providing a development practice mode with high collaborative efficiency. BRIEF DESCRIPTION OF DRAWINGS

[0021] Figure 1is a structural block diagram of a page application architecture provided by a first embodiment of the present application.

[0022] Figure 2 is an example schematic diagram of a page application architecture provided by the first embodiment of the present application.

[0023] Figure 3 is a flow schematic diagram of a different category block and page framework cooperative iteration provided by the first embodiment of the present application.

[0024] Figure 4 is a page interface schematic diagram after a page application is put in by the first embodiment of the present application.

[0025] Figure 5 is a page application putting-in mode schematic diagram provided by the first embodiment of the present application.

[0026] Figure 6 is a processing flow chart of a method for generating a page application based on a page application architecture provided by a second embodiment of the present application.

[0027] Figure 7 is a device schematic diagram for generating a page application based on a page application architecture provided by a third embodiment of the present application.

[0028] Figure 8 is a processing flow chart of a page display method provided by a fourth embodiment of the present application.

[0029] Figure 9 is a structural block diagram of an electronic device provided by the present application. DETAILED DESCRIPTION

[0030] In order for those skilled in the art to better understand the technical solutions of the present application, the present application will be described clearly and completely below in combination with the drawings in the embodiments of the present application. However, the present application can be implemented in many other ways different from the description below, therefore, based on the embodiments provided by the present application, all other embodiments obtained by those skilled in the art without creative labor should belong to the scope of protection of the present application.

[0031] It should be noted that the terms "first", "second", "third", and the like in the description and in the claims of the present application are used for distinguishing between similar objects and not necessarily for describing a specific sequential or chronological order. The use of such terms in the description and in the claims is therefore only intended to distinguish between similar objects and not intended to limit the scope of the application to a given order or sequence. Also, the use of the terms "first", "second", "third", and the like in the description and in the claims is not necessarily used for charactersizing a certain number of objects, but can be used for charactersing a certain number of objects in appropriate cases, while these terms can only be used for charactersing a smaller number of objects in other appropriate cases. Furthermore, the terms "comprising", "having", "including", and the like in the description and in the claims are used in their open-ended, non-limiting sense to cover a wide variety of situations involving processes, methods, systems, products, or devices that can include a variety of elements, steps, or components, without the elements, steps, or components being present or essential, to such processes, methods, systems, products, or devices. In other words, the terms "comprising", "having", "including", and the like in the description and in the claims should be perused to cover and constitute the inclusion of a wide variety of elements, steps, or components, without the elements, steps, or components being present or essential to such processes, methods, systems, products, or devices, or otherwise ending the scope of the application.

[0032] To facilitate understanding of the embodiments of the present application, the application background of the embodiments is described.

[0033] An application, i.e. an application program, is a software program designed for a specific purpose, aiming to help users complete a specific task or provide a specific service. An application includes a page application, which can run on different types of electronic devices and present a visual interface through the electronic device or a screen controlled by the electronic device. The electronic device includes, but is not limited to, a smart in-vehicle device, a computer, a notebook computer, a smart phone, a tablet computer, a smart home device, a smart wearable device, a PDA, a game device, or any combination of the foregoing devices. In the embodiments, the page application can be an application developed based on web technology, which can run on different operating systems and web.

[0034] Before the coding development of a page application, the architecture of the page application needs to be designed to guide the development process of the page application. The architecture of the page application is generally designed according to user experience, various types of requirements that the page application needs to include, technical specifications and practices, and decoupling principles, so as to obtain an open architecture, so that the page application generated based on the architecture has good scalability and maintainability.

[0035] It should be noted that the above disclosed information is only used to help understand the present application, and does not mean to constitute the prior art known to those skilled in the art.

[0036] The embodiment of the present application provides a page application architecture. The page framework capable of providing a simple infrastructure and independent category blocks can be designed on the basis of a selected underlying framework. The category blocks can be switched through the category block entrances presented on the page formed based on the page framework. Each category block can be developed and debugged in an independent pipeline, and the published version of each category block can be introduced into the page framework through a static introduction or dynamic loading mode. Thus, the open architecture is provided, and the collaborative processing efficiency is improved. Meanwhile, based on the selection of the underlying framework and the design of the loading mode of each category block, the starting performance of the page application is improved.

[0037] Embodiment one The first embodiment of the present application provides a page application architecture. The following will be described in combination with Figures 1 to 5 The page application architecture is described. Figure 1 The page application architecture shown in the figure comprises: A page framework 101 constructed based on a first underlying framework; and a plurality of independent category blocks 102 corresponding to different categories.

[0038] The page application involves complex pages co-constructed in multiple categories and multiple scenes, including user interfaces capable of adapting to the needs of multiple fields, so as to meet the diversified user needs and interaction processes. In practice, the selection can be made according to the performance requirements of the page application, the category range covered, and the architecture design target. Specifically, the first underlying framework is a mobile application development framework that allows the use of web technology (such as vue.js or rax) to write code. The first underlying framework provides the compilation of the code written using web technology into native components. The first underlying framework is preferably a weex development framework. On the premise of performance requirements, the development process of each category block is separated based on the weex development framework. For example, through weex, the vue.js component can be directly compiled or converted into a native component of a native platform (such as Android, iOS, etc.), thereby improving the rendering performance, reducing the lag, and improving the user experience.

[0039] Specifically, the category block refers to a functional block divided according to an object type. The object can include a commodity and / or a service, and the object can also include a store providing the commodity and / or the service. The object type can be divided according to any information such as an attribute of the object, a service mode, a demand attribute of an object obtaining party, and the like. Preferably, the category block includes a catering block for providing catering information, a first retail block for providing supermarket and convenience store information, a second retail block for providing medicine information, and a third retail block for providing specialized commodity information (such as a clothing department store block, an electronic and digital block, and the like). The catering block is a first category block. The first retail block, the second retail block, and the third retail block are second category blocks that are dynamically loaded according to a demand when the page application is running. That is, the catering block is a default category block that is loaded by default. Other retail blocks are asynchronous category blocks. For example, the catering block is a block including object information such as dishes and drinks to meet the eating demand of a user. The catering block can provide services such as takeout and quick delivery of drinks. For another example, the retail block is a block including objects such as clothes, electronic products, and household supplies and related services to meet the daily shopping demand of a user. The retail block also provides services such as online selection and purchase and offline self-pickup. For another example, the medicine block is a retail block including objects such as medicines and medical supplies and related services to meet the health demand of a user. The medicine block also provides services such as online consultation and prescription review. In this embodiment, the "block" also means "category block".

[0040] As Figure 1As shown, the page framework includes a page structure module, a general component library, a global variable module, and an initialization module; wherein the page structure module includes a page header navigation submodule for generating a page header navigation area, a page core navigation submodule for generating a page core navigation area, and a block configuration submodule for introducing a category block; the page header navigation area is used to present any one of the following header navigation labels: a location navigation label associated with a location module, an interest navigation label associated with an interest module, and an order navigation label associated with an order module; the page core navigation area is used to present a category function entry associated with a category block, and after a category function entry is triggered, the display content of the category block corresponding to the category function entry is displayed in the content display area of the page structure; wherein the general component library includes a public component registered with the loading tool of the first underlying framework and integrated into the page framework; wherein the initialization module is used to provide at least one of the following basic functions: a positioning function, a login-free function, a first-screen data function, and a backup basic function in abnormal situations; the global variable module encapsulates at least one type of global variable, such as a positioning global variable, a navigation global variable, an event communication global variable, and a resource usage global variable. Global variables can store cross-category block and / or cross-component shared data. The page structure module provides header navigation functions, entry functions, and block configuration functions, specifically by providing header navigation functions through the page header navigation submodule, providing category function entries through the page core navigation submodule to load the display content of the corresponding category block, and one category function entry corresponding to one category block. For example, after a "dining" label is clicked, a dining block is loaded. The block configuration function includes introducing the category block into the page framework in the corresponding loading mode, i.e., importing the product of the category block into the page product. The main display area of the page is used as the content display area of the page structure.

[0041] Specifically, in the present architecture, the page framework and multiple category blocks are designed, and for the general component library with high usage frequency, the present architecture only introduces the general component library in the page framework, and the category block does not need to introduce the general component library, thereby avoiding repeated references in various category blocks, reducing the size of the executable package of the page application, and improving the loading performance of the page application. Wherein, the general component library includes any public component: a standard component provided by a second underlying framework, and a unified interface component for building the page application; the unified interface component includes any component: a prompt component (toast), a popup component (popup), a modal box (Modal), and a carousel container (swiper). Wherein, the second underlying framework is combined with the first underlying framework through a dedicated plug-in. The second underlying framework is preferably a React framework.

[0042] Specifically, the loading tool of the first bottom layer framework is preferably a weex loading tool, such as feloader-weex. The general components in the general component library are registered to the loading tool. The registration of the general components to the loading tool can realize the identification, reuse, modularization and unified management of the general components, avoid naming conflicts, and facilitate the configuration and use of the general components. Preferably, feloader-weex provides support for the construction process, can convert weex file code into JavaScript code, and run in the application. The JavaScript code obtained by conversion through feloader-weex can be further packaged into output products by a packaging tool such as Webpack.

[0043] Specifically, the switching between the category blocks is designed to switch within the page of the page application, that is, to be presented as switching within a page, rather than loading a separate page. The display content of the category block in which the category function entry is in the selected state is presented in the main display area of the page.

[0044] Specifically, one category block can be divided into one or more function modules. The division of the function modules and the interfaces of the function modules are designed in the project inside the category block. In addition, one category block can integrate a page framework in a project local environment, so that the research and development debugging process of one category block can be completed in a self-closed loop, and the collaborative research and development efficiency between one category block and the page framework is improved.

[0045] Furthermore, the page application architecture also unifies the technical language of the project team of the category blocks and page frameworks to facilitate communication. Specifically, the page application architecture also defines the technical terms used between different category blocks and within each category block, and the technical terms include the structural hierarchy terms of the page application; wherein, according to the structural hierarchy terms, the content presented in the page application is planned into one or more category blocks according to the category field, and each category block includes one or more functional modules; wherein, the catering block in the category block includes: a rights and interests activity module, an in-block banner module, and an in-block navigation module; the in-block navigation module includes a navigation tag, and the recommended objects displayed in the tab page associated with each navigation tag are filtered according to the catering type that matches the navigation tag. Specifically, in the page application architecture, the structural hierarchy of the page application includes a page top display area at the top of the page and a content display area at the body of the page; the result hierarchy especially refers to a visual hierarchy. Wherein, the top display area of ​​the page includes the page header navigation area and the page core navigation area; wherein, the category block displayed in the content display area is one of the category blocks of the catering block, the first retail block, the second retail block, and the third retail block obtained according to the category field planning; the catering block is used to provide catering information, the first retail block is used to provide supermarket convenience store information, the second retail block is used to provide drug information, and the third retail block is used to provide special commodity information; wherein, each category block includes one or more functional modules; the structure of each category block includes: an intra-block equity activity module, an intra-block banner module, an intra-block navigation module, and an object information presentation module; wherein, the navigation tag in the intra-block navigation module is selected as the current navigation tag, and the recommended object information filtered according to the current navigation tag is displayed in the object information presentation module; wherein, the catering block is the first category block; the first retail block, the second retail block and the third retail block are second category blocks dynamically loaded according to demand when the page application is running.

[0046] like Figure 1As shown, the diagram shows a plurality of category blocks, such as category block 1, …, category block n. In implementation, any number of the plurality of category blocks as first category blocks, and any number of the plurality of category blocks as second category blocks. As can be implemented: at least one of the plurality of category blocks as a first category block, and other category blocks that are not the first category block can be second category blocks. Among them, the first category block is the category block initially displayed in the content display area of the page structure after the page application is started, and specifically, the product of at least one first category block can be packaged into the page product corresponding to the page framework, so as to initially display the display content of the first category block in the content display area of the page structure after the page application is started. Among them, the second category block is a category block dynamically loaded according to demand when the page application is running. Specifically, the product of the second category block can be generated as an independent code block. The product specification is defined in the page application architecture, so that the product published by each category block is a standardized product conforming to a certain specification. The standardized product is a product conforming to the AMD (Asynchronous Module Definition, asynchronous module definition) specification. The AMD specification mainly includes module definition and module loading mechanism. Among them, the information of the module definition includes: module identifier, dependent module, module implementation code, etc.; the module loading mechanism includes any of the following: asynchronous loading, dependency injection, dynamic loading, etc. Each product is introduced into the page structure module according to the corresponding product loading mode. Specifically, the product of at least one first category block (such as the first product of the catering block) is packaged into the page product corresponding to the page framework, so as to initially display the display content of the first category block in the content display area of the page structure after the page application is started, and the product of at least one second category block (such as the first product of the medicine block) is generated as an independent code block (such as packaged as a single chunk), so as to be dynamically loaded according to demand when the page application is running; wherein the category block depends on the general component library. Dynamic loading according to demand can be dynamic loading according to user operation or actual demand, reducing the first screen loading time, thereby improving the initial start performance of the page and improving the user experience. The dynamic loading mode can be a lazy loading mode (i.e. lazy import mode). Further, access performance can also be improved by snapshot and pre-request technologies.

[0047] Further, the page application architecture further defines a product specification of the category block; the product specification includes: the category block publishes a first product conforming to a package manager standard, and a second product conforming to an asynchronous module definition and processable by a loading tool of the first underlying framework; wherein the product of the category block packaged into the page product, and the product of the category block generated as an independent code block, is the first product conforming to the package manager standard; wherein the second product is loaded as an external script in a debugging link of the page application through a specified uniform locator of the second product by an introduction script method of the first underlying framework; specifically, the first product of the second category block is loaded in a lazy loading manner; the second product of the second category block and the second product of the first category block are dynamically loaded according to requirements through an external script loaded by the introduction script method. For example, for a category block, two products can be published: a first product of the category block and a second product of the category block. The first product is preferably an NPM (Node Package Manager, Node.js package manager) package. The second product is a wlm resource that can be published through a CDN (Content Delivery Network). The wlm resource is also stored in a near cache system of the page application, which can store the wlm resource on a terminal running the page application, thereby improving access speed and avoiding the pressure of remote access of the CDN. The wlm resource includes static resources such as style sheets, pictures, etc., and can also include dynamic resources such as response data. For another example, the introduction script method is a weex.importScript method, through which an external JavaScript script can be dynamically loaded in a weex-based page application, that is, script resources can be loaded on demand, thereby optimizing the performance of the page application. In one specific embodiment, the page application architecture is implemented as: for each category block, a first product conforming to a package manager standard and a second product conforming to an asynchronous module definition and processable by a loading tool of the first underlying framework are generated; wherein the first product of the first category block is packaged into the page product, and the first product of the second category block is generated as an independent code block; wherein the second product is dynamically loaded as an external script in a debugging link of the page application through a specified uniform locator of the second product by an introduction script method of the first underlying framework; wherein the first product of the second category block is loaded in a lazy loading manner.

[0048] Specifically, the module product of the functional module contained in the category block is generated according to the interface exposure mode and the code organization mode exclusive to the category block; the category block increases the block plug-in corresponding to the category block on the basis of the component packaging tool, and introduces the module product published by the functional module contained in the category block, and exports the category standard component conforming to the second bottom framework, the category standard component is provided to the page framework, so that the page framework renders the category standard component in the list component contained in the page framework; wherein the first bottom framework is an extension based on the second bottom framework, the second bottom framework is used for processing component rendering logic, and the first bottom framework is bridged with the native component rendering layer. The category standard component conforming to the second bottom framework exported is a standardized block product, especially a block product conforming to AMD specification. The component packaging tool is preferably an ice-pkg tool. The ice-pkg can package functional modules as npm packages for reuse in different projects and environments, thereby improving development efficiency. The first bottom framework is an extension based on the second bottom framework, which can combine the two bottom frameworks. Of course, at least part of the functions of the second bottom framework can also be integrated into the first bottom framework through a dedicated plug-in, thereby also realizing the combination of the two bottom frameworks.

[0049] Please refer to Figure 2 , in Figure 1On the basis of the above, a schematic diagram of an example of a page application architecture is shown, including: a page framework, a plurality of category blocks; wherein the page framework includes a page structure module 201, a general component library 202, a global variable module 203, an initialization module 204. The initialization module is used to provide positioning functions, login-free functions (i.e. allowing users to log in without inputting login information for a period of time), first screen data functions (i.e. providing initial first screen data), backup basic functions (i.e. basic functions triggered by specific exceptions). The global variable module is used to encapsulate global variables, so that global variables can be introduced by other modules, including positioning global variables, navigation global variables, event communication global variables, resource monitoring global variables, etc. The general component library includes: bottom framework standard components (such as React components), unified interface components (such as prompt components, pop-up components, modal boxes, carousel components, etc.). The page structure module: page header navigation submodule, page core navigation submodule, block configuration submodule; wherein the page core navigation submodule includes category block entry, global public module entry; the block configuration submodule includes default category block and asynchronous category block. In the figure, the first product of category block 1 is imported into the default category block; the first product of category block 2 is loaded into the asynchronous category block in a lazy import manner. The page framework further includes a bottom framework loading tool, so that the components of the general component library are registered to the bottom framework loading tool. For a plurality of category blocks, taking category block 1 as an example, category block items are established in the category block, and the category block is also divided into a plurality of modules. The category block items include a package management tool and a block plug-in. Each module in the category block establishes corresponding module items inside the category block and outputs module products, such as establishing module 1 item and outputting module 1 product. The module products are imported into the category block items, which can be imported through the package management tool of the category block item. The category block item publishes two products: the first product and the second product. Among them, the second product is a CDN loading resource, which can be imported into the bottom framework loading tool through the introduction script method in the debugging link (such as the dashed line shown in the figure, including the debugging link, the bottom framework loading tool, and the introduction script method loading), so that the URL test of the category block carrying the category block parameter corresponding to the category block is carried out through the debugging link, so that the category block can be tested and verified during the development process.

[0050] In implementation, for each category block, the page product corresponding to the page framework is integrated in the local environment of the project of the category block to establish a local development environment of the category block; the category block communicates events with the page framework, depends on the general component library integrated in the page product, and receives the first screen data provided by the initialization module of the page framework. Thus, the pipeline of each category block can be established to implement the development process of the corresponding category block.

[0051] Referring to Figure 3 , the figure schematically shows a development process of different category blocks cooperating with page framework iteration, including: during the iteration process of page application, the development process of page framework establishes a page framework pipeline, which is the main pipeline; and the corresponding block pipeline is established for each category block, which is the sub-pipeline. In the figure, three pipelines are parallel to carry out iteration work. Similar to "page framework" 301, it represents the main pipeline; similar to "block 1" 302, "block 2" 303 represents the corresponding sub-pipeline of each block. Take the block 1 pipeline as an example to explain the development process of a block. In this sub-pipeline, it includes block 1 development, release of NPM package and corresponding version number; the released NPM package is introduced into the pre-release page (i.e. the pre-released page product) in the block 1 project local environment, the block 1 project local test environment is constructed, and the URL test carrying the block 1 parameter is carried out; after the block 1 development test is completed, it is updated to the test version of the page framework main pipeline. After the block 1 is verified in the test version, the verification process is carried out, and after the verification is completed, the block 1 is updated to the formal version of the page framework main pipeline. After each block is verified in the corresponding sub-pipeline based on the test version, it is updated to the formal version. After all the blocks are updated in the formal version, the URL is accessed using the normal user access condition (such as not carrying the block parameter), and the integrated regression test is carried out. After the problem is repaired, it is released / gray released. Gray release can gradually introduce new functions or updates into the production environment, thereby reducing the iteration risk. Among them, if problem repair is needed after integrated regression, the block involved in problem repair (such as block 2) needs to modify the corresponding NPM package and version number. According to the version control strategy, whether to modify the version number is determined before integrated regression.

[0052] In this embodiment, the page framework main pipeline focuses on building stable and reusable technical support; the block sub-pipeline depends on the page framework, and each block sub-pipeline can be independent of each other in the process before each block verification is completed. Pipeline separation enables teams to develop in parallel, thereby shortening the iteration cycle and improving iteration efficiency. At the same time, the category block can be flexibly deployed, reducing the systematic risk; and it is convenient to reasonably allocate resources and improve resource utilization.

[0053] In implementation, the positioning global variable is used to store the acquired positioning information, and the positioning information includes position coordinates, a timestamp, and a moving speed. The positioning information is acquired by the positioning function in the initialization module and stored in the positioning global variable. The global variable module is introduced in each category block. When a category function entry is triggered or after being triggered, the corresponding current category block displays position information according to the positioning information of the positioning global variable when the content display area is loaded. In each category block, the same positioning module providing the positioning function is called. The position is updated in response to an interactive process performed in the current category block, and the positioning module is called in the current category block to acquire new positioning information and store the new positioning information. In response to a category function entry switching operation, a new category block is loaded, and the new positioning information is read when the new category block is loaded. The navigation global variable stores parameter information of a common logic in a switching process between different category blocks, and the parameter information includes information of a uniform resource locator splicing parameter (for example, splicing information of a URL and a source). The resource uses a global variable to store common application layer information of a network request sent by a client to a server. Different category blocks send network requests from the client to the server by using a unified method according to the common application layer information. The network requests are sent from the client to the server by using a unified method, which helps to implement consistent security measures such as data encryption and identity authentication, thereby improving the security of the whole application. On the other hand, when a new category block needs to be added, the network request processing flow is unified, and integration and testing can be quickly performed. Examples of the positioning function are as follows. Application B includes a catering block, a medicine block, and the like. The page framework, the catering block, and the medicine block call the same positioning module, so that the whole link of application B uses the same set of positioning logic, thereby ensuring the consistency of the whole link positioning. The catering block is the default category block of application B, and application B is loaded by default. When the catering block is loaded, the position information is displayed according to the positioning information acquired by the positioning function in the initialization module of the page framework of application B. If the positioning information is updated in a subsequent interactive process of the catering block, the new positioning information is used when switching to the medicine block through the positioning global variable. The positioning information shared between different category blocks can be implemented by using a client storage mechanism such as localStorage and KVStorage.

[0054] In the page application architecture, different backup basic functions correspond to different abnormal situations, and a key identifier can be used to identify an abnormal category. In addition, a public component is implemented for the backup basic function, so that each category block can directly call the public component.

[0055] Please refer to Figure 4, the figure shows a page interface schematic diagram of the page application after delivery, which is an application A home page schematic diagram, including: a header navigation area 401, a core navigation area 402, and a block 403 in a selected state. Among them, the content display area of the block in the selected state is the main display area of the page. The header navigation area includes one or more navigation labels, which generally guide the basic functions of categories, for example, the catering block presents the location function module, the "order" label guides to the order center, the "benefit" label guides to the benefit center, etc. The core navigation area includes block function entrances, and can also include page public module entrances, etc. The block function entrance is equivalent to the king position, which is used to guide the presentation of the corresponding block content; the page public module entrance can include one or more specific activity entrances, which guide to activities with certain heat. For example, a specific activity entrance is an activity entrance that filters recommended products according to date or time period, which presents a label similar to "night snack" at night and a label similar to "lunch" at lunch time. For another example, a specific activity entrance is a "best-selling product group" entrance. For another example, a specific activity entrance is similar to a "red packet" entrance, etc. The block in the selected state is block K in blocks 1 to n, and the interface of block K is presented to include: block K module 403-1, navigation label / filter label / activity label 403-2 inside block K, default recommended object information / object information under certain label selected state 403-3, etc. From the figure, it can also be seen that the page application has a visual structural hierarchy. The elements shown in the figure do not limit the layout of the interface of the page application.

[0056] In this embodiment, the page application can be integrated into the parent application as a sub-application. When implemented, the sub-application can be delivered in the parent application in two ways. One way is to integrate the sub-application into the parent application in the form of an independent page, and one way is to integrate the sub-application into the parent application in the form of a tab page. Please refer to Figure 5 , the figure shows a page application delivery method schematic diagram, A application based on the page application architecture is integrated into the parent application as a sub-application, including: A application related search terms can be input in the search area 501 of the parent application, then A application is accessed in the form of a link and loads the page in the form of an independent page; the "A application" channel label is triggered in the channel label area of the parent application or the channel label is in a selected state, then A application page is presented in the form of a tab page of the current page of the parent application (such as presenting A application home page), and the top and bottom can display function items provided by the parent application such as "search function", "parent application page", "message center", "shopping cart", "personal center", etc. In the figure, similar Figure 4Taking a block with an entry in a selected state as an example, the block K in the plurality of blocks 1 to n. The page application generated based on the page application architecture can be loaded in the form of an independent page and in the form of a tab page, and both can achieve good performance.

[0057] It should be noted that the interface in Figure 4 or Figure 5 is only exemplary content, and does not limit the layout of the specific interface. In addition, the features given in the embodiments and other embodiments of the present application can be combined with each other without conflict. The page application architecture provided by the embodiments of the present application can be applied to application programs (APP), applets and the like, without limitation.

[0058] Embodiment two Based on the above embodiments, the second embodiment of the present application provides a method for generating a page application based on a page application architecture, which will be described below in combination with Figure 6 The method. Wherein the page application architecture is the page application architecture provided in the above embodiments. Figure 6 The method for generating a page application based on a page application architecture shown includes steps S601 to S604.

[0059] Step S601, a page framework pipeline is established for the page framework in the page application architecture, and a page product corresponding to the page framework is constructed based on a first bottom framework through the page framework pipeline, and a pre-release page is generated according to the page product; Step S602, for the information of each category block in the page application architecture, a category block pipeline corresponding to the category block is established, and a category block product of the category block is generated through the category block pipeline and the version number of the category block product is set according to a predetermined rule; and, For each category block product, the category block product is integrated into the pre-release page to generate a category test page for testing the category block, and the category test page is used to receive a category test uniform resource locator (URL) carrying a category block parameter to execute a category test case generated for the category block; Step S603, in response to each category block product meeting a test passing standard, integrating each row page block product with the pre-release page to obtain a test version of the page application; and verifying each category block based on the test version of the page application, and the category block that passes the verification is published and updated to the formal version of the page application; Step S604, performing integrated regression testing based on the formal version of the page application, and in response to the formal version of the page application meeting a regression test passing standard, publishing the formal version of the page application based on a gray release strategy.

[0060] In this embodiment, each type of block can be independently developed, debugged, and tested. When each type of block passes the validation based on the test version in the respective pipeline, the type of block is officially released, integrated into the pre-release page, integrated into the regression test and the page application release for centralized management, and released to the production environment through the gray release strategy.

[0061] In the above embodiment, steps S601 and S602 or similar terms do not limit the execution order of the steps.

[0062] Embodiment Three The third embodiment of the present application also provides a device for generating a page application based on a page application architecture corresponding to the second embodiment. The following will be described in combination with Figure 7 The device is described briefly because the device embodiment is basically similar to the method embodiment. For details of the technical features and the effects achieved, please refer to the corresponding description of the method embodiment provided above. Figure 7 The device shown includes: A main pipeline unit 701 is configured to establish a page framework pipeline for a page framework in the page application architecture, build a page product corresponding to the page framework based on a first underlying framework through the page framework pipeline, and generate a pre-release page based on the page product. A category pipeline unit 702 is configured to establish a category block pipeline corresponding to each category block in the page application architecture based on the information of the category block, generate a category block product of the category block through the category block pipeline, and set a version number of the category block product according to a predetermined rule; and For each category block product, the category block product is integrated into the pre-release page to generate a category test page for testing the category block. The category test page is configured to receive a category test uniform resource locator carrying a category block parameter to execute a category test case generated for the category block. An integrated test unit 703 is configured to integrate each category block product and the pre-release page to obtain a test version of the page application in response to the fact that each category block product meets a test passing standard, and verify each category block based on the test version of the page application. The category block that passes the verification is released and updated to an official version of the page application. A regression test unit 704 is configured to perform an integrated regression test based on the official version of the page application. In response to the fact that the official version of the page application meets a regression test passing standard, the official version of the page application is released based on a gray release strategy. The page application architecture is the page application architecture provided in the above embodiments.

[0063] Embodiment Four Based on the above embodiments, the fourth embodiment provides a page display method, which will be described below in combination with Figure 8 Embodiments. Figure 8 The page display method shown in the above embodiments comprises: Step S801, in response to a page application start instruction, loading a page framework of the page application and loading at least one first category block in a category block of the page application; the page application is generated based on the page application architecture provided in the above embodiments; Step S802, during or after the execution of the loading, displaying a page of the page application; Wherein, the page comprises a page header navigation area, a page core navigation area and a content display area; any one of the following header navigation labels is displayed in the page header navigation area: a location navigation label associated with a location module, an interest navigation label associated with an interest module, and an order navigation label associated with an order module; a category function entry associated with a category block is displayed in the page core navigation area, and the display content of the category block corresponding to the category function entry is displayed in the page structure after the category function entry is triggered; the display content of the first category block is initially displayed in the content display area; Step S803, in response to a target category function entry in the category function entry being triggered, displaying the display content of the category block corresponding to the target category function entry in the content display area.

[0064] Specifically, in response to a page application start instruction, enter the page loading process of the page application. The page framework can be loaded first, including: global variable initialization, component loading in the general component library; the global variable can be initialized before and after the component loading, so that the component can access the correct data when rendering. Then load the default category block (i.e. a first category block), so that the page initially displays the display content of the category block, and the user can see and interact with the content of the category block. The default category block includes the following content: the modules included in the default category block, the navigation labels / filtering labels / activity labels inside the default category block, the default recommended object information inside the default category block / the object information under the state of some label selection. Further, when the user triggers the loading of other category blocks through interaction (such as clicking the category function entry), the category block is dynamically loaded, and the on-demand loading mode can improve the initial loading speed of the page and reduce resource consumption. The above loading sequence can make the page application efficient and stable, while providing good user experience. Of course, the specific loading sequence may be different according to the specific needs of the page application.

[0065] Specifically, the page core navigation area also displays a page public module entrance, and the page public module can include: an activity module corresponding to a time period (such as a dinner module or a night market module displayed after 18:00 in the evening in a dining area block, an afternoon tea module displayed from 3:00 to 5:00 in the afternoon, etc.), a red packet module, a special benefit module, and the like.

[0066] Based on the above-mentioned embodiments, an embodiment of the present application provides an electronic device, and related parts can be understood by referring to the corresponding description of the above-mentioned embodiments. Figure 9 The electronic device schematic diagram shown in the figure includes a memory and a processor; the memory is used to store computer instructions for data processing, and the computer instructions are executed by the processor when read, to execute the method provided by the embodiment of the present application.

[0067] Based on the above-mentioned embodiments, an embodiment of the present application provides a computer readable storage medium, and related parts can be understood by referring to the corresponding description of the above-mentioned embodiments. The schematic diagram of the computer readable storage medium is similar to the electronic device schematic diagram, and the memory in the figure can be understood as the readable storage medium. The computer readable storage medium stores computer instructions, and the computer instructions are executed by the processor to implement the method provided by the embodiment of the present application.

[0068] The technical solution of the present application can be applied to the transaction and distribution service of instant e-commerce platforms, such as Taobao flash shopping, Taofxian, Eleme takeout and retail, etc.

[0069] In the embodiment of the present application, the use of user data may be involved. In actual application, user-specific personal data can be used in the scheme described in the present application in the range allowed by applicable laws and regulations, under the condition of meeting the requirements of applicable laws and regulations of the country (for example, user's explicit consent, user's actual notification, etc.).

[0070] In a typical configuration, a computing device includes one or more processors (CPUs), input / output interfaces, network interfaces, and memory. The memory can include non-persistent memory in the form of computer-readable media, random access memory (RAM), and / or non-volatile memory, such as read-only memory (ROM) or flash memory (flash RAM). The memory is an example of computer-readable media.

[0071] 1. Computer-readable media includes permanent and non-permanent, removable and non-removable media can be implemented by any method or technology to store information. Information can be computer-readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, compact disc read-only memory (CD-ROM), digital versatile disc (DVD) or other optical storage, magnetic cassette, magnetic tape disk storage or other magnetic storage devices or any other non-transmission medium that can be used to store information that can be accessed by a computing device. According to the definition herein, computer-readable media does not include non-transitory computer-readable media (transitory media), such as modulated data signals and carriers.

[0072] 2. Those skilled in the art should understand that the embodiments of the present application can be provided as a method, system or computer program product. Therefore, the present application can take the form of a complete hardware embodiment, a complete software embodiment or an embodiment combining software and hardware aspects. Moreover, the present application can take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0073] Although the present application is disclosed as above with preferred embodiments, it is not intended to limit the present application, and any person skilled in the art can make possible changes and modifications without departing from the spirit and scope of the present application, therefore the protection scope of the present application should be limited by the scope defined by the claims of the present application.

Claims

1. A page application architecture, characterized in that: The page application architecture includes: A page frame constructed based on the first underlying frame; and a plurality of mutually independent category blocks corresponding to different category designs; wherein, The page framework includes a page structure module, a general component library, a global variable module and an initialization module; wherein the page structure module includes a page header navigation submodule for generating a page header navigation area, a page core navigation submodule for generating a page core navigation area and a block configuration submodule for introducing a category block; the page header navigation area is used to present any one of the following header navigation tags: a location navigation tag associated with the location module, a rights navigation tag associated with the rights module, and an order navigation tag associated with the order module; the page core navigation area is used to present a category function entry associated with the category block, and after a category function entry is triggered, the display content of the category block corresponding to the category function entry is displayed in the content display area of ​​the page structure; wherein the general component library includes a public component registered with the loading tool of the first underlying framework and integrated into the page framework; wherein the initialization module is used to provide at least one of the following basic functions: positioning function, free login function, first screen data function, and backup basic function under abnormal circumstances; the global variable module encapsulates at least one type of global variables among positioning global variables, navigation global variables, event communication global variables, and resource usage global variables; The category blocks include a first category block and a second category block. The product of at least one first category block is packaged into the page product corresponding to the page frame, so that the display content of the first category block is initially displayed in the content display area of ​​the page structure after the page application is started, and the product of at least one second category block is generated as an independent code block, so as to be dynamically loaded according to demand when the page application is running; wherein, the category blocks rely on the general component library.

2. The page application architecture according to claim 1, characterized in that: Also includes: The positioning global variable is used to store the acquired positioning information, which includes position coordinates, timestamp and moving speed; Obtain the positioning information through the positioning function in the initialization module and store it in the positioning global variable, and introduce the global variable module in each category block; When a category function entry is triggered or after being triggered, the corresponding current category block displays position information according to the positioning information of the positioning global variable when the content display area is loaded; Invoking the same positioning module providing positioning functionality in each category block, in response to an interaction process executed in the current category block triggering a location update, invoking the positioning module in the current category block to obtain current new positioning information, and storing the new positioning information; In response to the category function entry switching operation, loading a new category block, and reading the new positioning information when the new category block is loaded; The navigation global variable stores parameter information of common logic in the process of switching between different types of blocks, and the parameter information includes information of uniform resource locator splicing parameters; The resource uses global variables to store common application layer information of network requests sent by the client to the server; different types of blocks use a unified method to send network requests from the client to the server according to the common application layer information.

3. The page application architecture according to claim 1, characterized in that: Also includes: For each category block, generating a first product that complies with the package manager standard and a second product that complies with the asynchronous module definition and can be processed by the loading tool of the first underlying framework; wherein the first product of the first category block is packaged into the page product, and the first product of the second category block is generated as an independent code block; Among them, the second product, as an external script, is dynamically loaded according to demand by specifying the unified locator of the second product through the introduction script method of the first underlying framework in the debugging link of the page application; wherein, the first product of the second category block is loaded by lazy loading.

4. The page application architecture according to claim 1, characterized in that: The module products of the functional modules contained in the category block are generated according to the interface exposure method and code organization method exclusive to the category block; The category block adds a block plug-in corresponding to the category block on the basis of the component encapsulation tool, and introduces the module products released by the functional modules contained in the category block, and exports the category standard components that comply with the second underlying framework. The category standard components are provided to the page framework so that the page framework renders the category standard components in the list component contained in the page framework; wherein, the first underlying framework is an extension based on the second underlying framework, the second underlying framework is used to process the component rendering logic, and the first underlying framework is bridged with the native component rendering layer.

5. The page application architecture according to claim 1, characterized in that: For each category block, integrating the page product corresponding to the page framework into the project local environment of the category block to establish a local development environment for the category block; The category block communicates with the page framework through events, relies on a universal component library integrated in the page product, and receives first screen data provided by an initialization module of the page framework.

6. The page application architecture according to claim 1, characterized in that: The general component library includes any of the following common components: standard components provided by the second underlying framework, and unified interface components for building the page application; the unified interface components include any of the following components: prompt components, pop-up components, modal boxes, and carousel containers.

7. The page application architecture according to claim 1, characterized in that: In the page application architecture, the structural hierarchy of the page application includes a page top display area located at the top of the page and a content display area located in the body of the page; Wherein, the page top display area includes the page header navigation area and the page core navigation area; The category block displayed in the content display area is one of a catering block, a first retail block, a second retail block, and a third retail block obtained according to the category field planning; the catering block is used to provide catering information, the first retail block is used to provide supermarket and convenience store information, the second retail block is used to provide pharmaceutical information, and the third retail block is used to provide specialized product information; Each category block includes one or more functional modules; the structure of each category block includes: an intra-block equity activity module, an intra-block banner module, an intra-block navigation module, and an object information presentation module; wherein the navigation tag in the intra-block navigation module is selected as the current navigation tag, and the recommended object information filtered according to the current navigation tag is displayed in the object information presentation module; The dining area is a first category area; the first retail area, the second retail area, and the third retail area are second category areas that are dynamically loaded according to demand when the page application is running.

8. A method for generating a page application based on a page application architecture, characterized in that: The page application architecture is the page application architecture according to any one of claims 1 to 7, and the method includes: Establishing a page frame pipeline for the page frame in the page application architecture, constructing a page product corresponding to the page frame based on the first underlying framework through the page frame pipeline, and generating a pre-published page according to the page product; For each category block in the page application architecture, a category block pipeline corresponding to the category block is established, a category block product of the category block is generated by the category block pipeline, and a version number of the category block product is set according to a predetermined rule; and For each category block product, the category block product is integrated into the pre-release page to generate a category test page for testing the category block, wherein the category test page is used to receive a category test unified locator carrying category block parameters to execute a category test case generated for the category block; In response to each category block product meeting the test passing criteria, integrating each row of page block products with the pre-released page to obtain a test version of the page application; and verifying each category block based on the test version of the page application, and publishing the category blocks that pass the verification and updating them to the official version of the page application; An integrated regression test is performed based on the official version of the page application. In response to the official version of the page application meeting the regression test passing standard, the official version of the page application is released based on a grayscale release strategy.

9. A page display method, characterized in that: The method comprises: In response to a page application startup instruction, loading a page frame of the page application and loading at least one first category block among the category blocks of the page application; the page application is generated based on the page application architecture according to any one of claims 1 to 7; During or after the loading process, the page of the page application is displayed; the page includes a page header navigation area, a page core navigation area, and a content display area; wherein, Display any one of the following header navigation tags in the page header navigation area: a location navigation tag associated with the location module, a rights navigation tag associated with the rights module, and an order navigation tag associated with the order module; display a category function entry associated with a category block in the page core navigation area, and after a category function entry is triggered, display the display content of the category block corresponding to the category function entry in the page structure; initially display the display content of the first category block in the content display area; In response to a target category function entry among the category function entries being triggered, display content of a category block corresponding to the target category function entry is displayed in the content display area.

10. A device for generating a page application based on a page application architecture, characterized in that: The page application architecture is the page application architecture according to any one of claims 1 to 7, and the device includes: A main pipeline unit is configured to establish a page frame pipeline for the page frame in the page application architecture, construct a page product corresponding to the page frame based on the first underlying framework through the page frame pipeline, and generate a pre-published page based on the page product; a category pipeline unit, configured to establish a category block pipeline corresponding to each category block in the page application architecture, generate a category block product of the category block through the category block pipeline, and set a version number of the category block product according to a predetermined rule; and For each category block product, the category block product is integrated into the pre-release page to generate a category test page for testing the category block, wherein the category test page is used to receive a category test unified locator carrying category block parameters to execute a category test case generated for the category block; an integration testing unit, configured to integrate the products of each row of page blocks with the pre-released page to obtain a test version of the page application in response to each category block product meeting the test passing criteria; and to verify each category block based on the test version of the page application, whereby category blocks that pass the verification are released and updated to the official version of the page application; The regression testing unit is used to perform integrated regression testing based on the official version of the page application, and release the official version of the page application based on a grayscale release strategy in response to the official version of the page application meeting the regression test passing standard.

11. An electronic device, characterized in that: include: a processor, a memory, and computer program instructions stored on the memory and executable on the processor; When the processor executes the computer program instructions, the method according to any one of claims 1 to 9 is implemented.

Images