Page application architecture and method of generating page application based on page application architecture
By adopting an open architecture design and using page frameworks and independent category blocks, the problem of coupling risk in the rapid iteration of page applications is solved, and efficient collaborative development and rapid iteration are achieved.
Patent Information
- Application Number
- CN202511316614.5
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2025-09-15
- Publication Date
- 2025-12-05
- Estimated Expiration
- 2045-09-15
AI Technical Summary
The existing page application architecture has coupling risks during rapid iteration, which affects the efficiency of collaborative development and makes it difficult to adapt to rapidly changing user needs.
It adopts an open architecture design, including a page framework based on the first underlying framework and multiple independent category blocks. It provides basic functions such as location, login-free access, and first-screen data by utilizing page structure modules, general component libraries, and initialization modules. It also enables independent iteration of category blocks and dynamic loading of second category blocks through a global variable module.
It improves the collaborative development efficiency of page applications, reduces the coupling risk between category blocks, and enhances the startup performance and iteration efficiency of page applications.
Smart Images

Figure CN120803453B_ABST
Abstract
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:
[0007] 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.
[0008] Optionally, it also includes: the global positioning variable is used to store the acquired positioning information, including location coordinates, timestamp, and movement speed; the positioning information is acquired through the positioning function in the initialization module and stored in the global positioning variable; the global variable module is introduced into each category block; when or after a category function entry is triggered, the corresponding current category block displays location information according to the positioning information of the global positioning variable when the content display area is loaded; the same positioning module providing positioning function is called in each category block, responding to the interaction flow executed within the current category block. The system updates its location by calling the positioning module within the current category block to obtain and store the new location information. In response to a category function entry switching operation, it loads a new category block and reads the new location information during loading. The navigation global variable stores parameter information for common logic during switching between different category blocks, including information on the concatenation parameters of the Uniform Resource Locator (URL). The resource uses a global variable to store shared application layer information for network requests sent from the client to the server. Different category blocks use a unified method to send network requests from the client to the server based on this shared application layer information.
[0009] Optionally, for each category of blocks, a first artifact conforming to the package manager standard and a second artifact conforming to the asynchronous module definition and processable by the loading tool of the first underlying framework are generated; wherein, the first artifact of the first category of blocks is packaged into the page artifact, and the first artifact of the second category of blocks is generated as an independent code block; wherein, the second artifact, as an external script, is dynamically loaded as needed in the debugging chain of the page application by specifying the uniform locator of the second artifact through the import script method of the first underlying framework; wherein, the first artifact of the second category of blocks is loaded by lazy loading.
[0010] Optionally, the module artifacts of the functional modules contained within the category block are generated according to the interface exposure method and code organization method specific to the category block; the category block adds a block plugin corresponding to the category block on the basis of the component encapsulation tool, and introduces the module artifacts published by the functional modules contained within the category block, and exports category standard components that conform to 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 components 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 handle component rendering logic, and the first underlying framework is bridged with the native component rendering layer.
[0011] Optionally, for each category block, the page artifacts corresponding to the page framework are integrated into the local project 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 the general component library integrated in the page artifacts, and receives the first screen data provided by the initialization module of the page framework.
[0012] Optionally, 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.
[0013] Optionally, in the page application architecture, the structural hierarchy of the page application includes a top-of-page display area at the top of the page and a content display area in the main body of the page; wherein, the top-of-page display area includes the page header navigation area and the page core navigation area; wherein, the category blocks displayed in the content display area are one of the following category blocks: catering block, first retail block, second retail block, and third retail block, planned according to category domains; 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 drug information, and the third retail block... This is used to provide specialized product information; each category block includes one or more functional modules; the structure of each category block includes: an in-block benefits activity module, an in-block banner module, an in-block navigation module, and an object information presentation module; wherein, the selected navigation tag in the in-block navigation module serves as the current navigation tag, and the recommended object information filtered based on 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 runs.
[0014] Secondly, this application also provides a method for generating a page application based on a page application architecture, wherein the page application architecture is as described in any of the first aspects above. The method includes: establishing a page framework pipeline for the page framework in the page application architecture; constructing page artifacts corresponding to the page framework based on a first underlying framework through the page framework pipeline; generating a pre-release page based on the page artifacts; establishing a category block pipeline corresponding to the category block for the information of each category block in the page application architecture; generating category block artifacts for the category blocks through the category block pipeline and setting the version number of the category block artifacts according to predetermined rules; and integrating the category block artifacts into a pre-release page for each category block artifact. The pre-release page generates a category test page for testing the category blocks. The category test page receives a category test Uniform Locator carrying category block parameters to execute category test cases generated for the category blocks. In response to each category block artifact meeting the test pass criteria, the product artifacts of each page block are integrated with the pre-release page to obtain a test version of the page application. Based on the test version of the page application, each category block is verified. Verified category blocks are released and updated to the official version of the page application. Integration regression testing 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 pass criteria, the official version of the page application is released based on a canary release strategy.
[0015] Thirdly, this application also provides a page display method, the method comprising: in response to a page application launch instruction, loading the page framework 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 described in any one of the first aspects; during or after the loading process, displaying the page of the page application; the page includes a page header navigation area, a page core navigation area, and a content display area; wherein, in the page header navigation area, any one of the following header navigation labels is displayed: a location navigation label associated with a location module, a benefits navigation label associated with a benefits module, and an order navigation label associated with an order module; in the page core navigation area, a category function entry associated with a category block is displayed, 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 page structure; the display content of the first category block is initially displayed in the content display area; in response to the triggering of a target category function entry among the category function entries, the display content of the category block corresponding to the target category function entry is displayed in the content display area.
[0016] Fourthly, this application also provides an apparatus for generating page applications based on a page application architecture, wherein the page application architecture is as described in any of the first aspects above. The apparatus includes: a main pipeline unit, configured to establish a page framework pipeline for the page framework in the page application architecture, construct page products corresponding to the page framework based on a first underlying framework through the page framework pipeline, and generate pre-release pages according to the page products; a category pipeline unit, configured to establish a category block pipeline corresponding to the category block for the information of each category block in the page application architecture, generate category block products of the category block through the category block pipeline, and set the version number of the category block products according to a predetermined rule; and, for each category block product, integrate the category block products. Upon reaching the pre-release page, a category test page is generated for testing the category blocks. The category test page receives a category test Uniform Locator carrying category block parameters to execute category test cases generated for the category blocks. An integration test unit is used to integrate the product of each row page block with the pre-release page in response to each category block product meeting the test pass criteria to obtain a test version of the page application. Based on the test version of the page application, each category block is verified, and the verified category blocks are released and updated to the official version of the page application. A regression test unit is used to perform integration regression testing based on the official version of the page application. In response to the official version of the page application meeting the regression test pass criteria, the official version of the page application is released based on a canary release strategy.
[0017] Fifthly, this application also provides an electronic device, comprising: a processor, a memory, and computer program instructions stored in the memory and executable on the processor; wherein the processor executes the computer program instructions to implement the method as described in any one of the second or third aspects.
[0018] In a sixth aspect, this application provides a computer-readable storage medium storing computer-executable instructions that, when executed by a processor, are used to implement the method as described in any one of the second or third aspects.
[0019] In a seventh aspect, embodiments of this application provide a computer program product, including a computer program that, when executed by a processor, implements the method as described in any of the second or third aspects.
[0020] Compared with the prior art, this application has the following advantages:
[0021] This application provides a page application architecture, including: a page framework built on a first underlying framework; and multiple independent category blocks corresponding to different categories. The page framework includes a page structure module, a general component library, a global variable module, and an initialization module. The page structure module includes a page header navigation submodule for generating the page header navigation area, a page core navigation submodule for generating the page core navigation area, and a block configuration submodule for introducing category blocks. The page header navigation area is used to present any one of the following header navigation labels: a location navigation label associated with the location module, a benefits navigation label associated with the benefits module, and an order navigation label associated with the order module. The page core navigation area is used to present category function entries associated with category blocks. When a category function entry is triggered, the category block corresponding to the category function entry is displayed in the content display area of the page structure. The content to be displayed in the block; wherein, the general component library includes common components that are 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: location function, login-free function, first screen data function, and backup basic functions in abnormal situations; the global variable module encapsulates at least one type of global variable among location global variable, navigation global variable, event communication global variable, and resource usage global variable; the category block includes a first category block and a second category block, wherein the product of at least one first category block is packaged into the page product corresponding to the page framework to initially display the content of the first category block in the content display area of the page structure after the page application starts, and the product of at least one second category block is generated as an independent code block to be dynamically loaded as needed when the page application runs; wherein, the category block depends on the general component library. In this page application architecture, the sub-modules of the page structure module within the page framework provide navigation and entry capabilities. Furthermore, a common component library, a global variable module, and an initialization module provide the basic structure and a relatively consistent basic layout. Each category block is designed to be independent, facilitating independent iteration of each category block without affecting other categories. Therefore, this page application architecture is open. Moreover, each category block can integrate the page framework into local development and debugging, thereby improving the efficiency of collaboration between category blocks.
[0022] Furthermore, this application provides a method for generating page applications based on the above-described page application architecture. The page framework is iterated / developed based on the process carried by the page framework pipeline, and different types of blocks are iterated / developed based on the process carried by each block pipeline, thereby providing a development practice mode with high collaborative efficiency. Attached Figure Description
[0023] Figure 1This is a structural block diagram of a page application architecture provided in the first embodiment of this application.
[0024] Figure 2 This is a schematic diagram of a page application architecture provided in the first embodiment of this application.
[0025] Figure 3 This is a schematic diagram of a process for collaborative iteration of different types of blocks and page frames provided in the first embodiment of this application.
[0026] Figure 4 This is a schematic diagram of the page interface after the page application is deployed, provided in the first embodiment of this application.
[0027] Figure 5 This is a schematic diagram of a page application deployment method provided in the first embodiment of this application.
[0028] Figure 6 This is a flowchart of the method for generating a page application based on a page application architecture provided in the second embodiment of this application.
[0029] Figure 7 This is a schematic diagram of an apparatus for generating page applications based on a page application architecture, provided in the third embodiment of this application.
[0030] Figure 8 This is a flowchart of the page display method provided in the fourth embodiment of this application.
[0031] Figure 9 This is a structural block diagram of the electronic device provided in this application. Detailed Implementation
[0032] To enable those skilled in the art to better understand the technical solutions of this application, the application will be clearly and completely described below with reference to the accompanying drawings of the embodiments. However, this application can be implemented in many other ways different from those described below. Therefore, based on the embodiments provided in this application, all other embodiments obtained by those skilled in the art without creative effort should fall within the scope of protection of this application.
[0033] It should be noted that the terms "first," "second," "third," etc., in the claims, specification, and drawings of this application are used to distinguish similar objects and are not used to describe a specific order or sequence. Such data are interchangeable where appropriate so that the embodiments of this application described herein can be implemented in a sequence other than that shown or described herein. Furthermore, the terms "comprising," "having," and their variations are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or apparatus that includes a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to these processes, methods, products, or apparatuses.
[0034] To facilitate understanding of the various embodiments of this application, the application background of the embodiments will be explained.
[0035] An application, or application program, refers to a software program designed for a specific need, aiming to help users complete specific tasks or provide specific services. Applications include web applications, which can run on different types of electronic devices and present a visual interface through the screen of the electronic device or its controlled interface. Electronic devices include, but are not limited to, smart vehicle devices, computers, laptops, smartphones, tablets, smart home devices, smart wearable devices, PDAs, gaming devices, or any combination of the aforementioned devices. In this embodiment, the web application can be an application developed based on web technology that can run on different operating systems and the web.
[0036] Before developing a web application, it's necessary to design its architecture to guide the development process. The web application architecture is typically designed based on user experience, the various requirements the application needs to include, technical specifications, and best practices. It employs a decoupling principle to achieve an open architecture, ensuring that the resulting web application has good scalability and maintainability.
[0037] It should be noted that the information disclosed above is only for the purpose of helping to understand this application and does not constitute prior art known to those skilled in the art.
[0038] This application provides a page application architecture. It aims to design a page framework that provides a simple basic structure and independent category blocks based on a selected underlying framework. Category blocks can be switched via entry points presented on the page formed based on this framework. Each category block can be developed and debugged in an independent pipeline, and release versions of each category block can be introduced into the page framework via static or dynamic loading. This achieves the goal of providing an open architecture and improving collaborative processing efficiency. Simultaneously, based on the selection of the underlying framework and the design of the loading method for each category block, the startup performance of the page application is improved.
[0039] Example 1
[0040] The first embodiment of this application provides a page application architecture, which is described below in conjunction with... Figures 1 to 5 The application architecture of the page is described. Figure 1 The page application architecture shown includes:
[0041] A page framework 101 built on the first underlying framework; and multiple independent category blocks 102 corresponding to different category designs.
[0042] The page application involves complex pages built across multiple categories and scenarios, including user interfaces adaptable to various domain needs, thereby satisfying diverse user requirements and interaction flows. In practice, the selection can be based on the page application's performance requirements, the range of categories it covers, and the architectural design goals. Specifically, the first underlying framework is a mobile application development framework that allows code to be written using web technologies (such as Vue.js or Rax). The first underlying framework provides the ability to compile code written using web technologies into native components. The first underlying framework is preferably the Weex development framework. With performance requirements as the goal, the development process of each category of blocks is separated based on the Weex development framework. For example, Weex can directly compile or convert Vue.js components into native components for native platforms (such as Android, iOS, etc.), thereby improving rendering performance, reducing lag, and enhancing the user experience.
[0043] Specifically, the category blocks refer to functional blocks divided according to object types. Objects can include goods and / or services, and can also include stores that provide goods and / or services. The object types can be divided based on any information such as object attributes, service models, and the needs of the object recipient. Preferably, the category blocks include: a catering block for providing catering information, a first retail block for providing supermarket and convenience store information, a second retail block for providing pharmaceutical information, and a third retail block for providing information on specific products (such as clothing, department stores, and electronic products). The catering block is the first category block; the first, second, and third retail blocks are second category blocks dynamically loaded according to demand during the page application's runtime. That is, the catering block is the default category block loaded by default. Other retail blocks are asynchronous category blocks. For example, a catering block includes information on dishes and drinks to meet users' dietary needs, and can provide services such as takeout and fast drink delivery. Another example is a retail block including objects such as clothing, electronic products, and home furnishings, and related services, to meet users' daily shopping needs. The retail block also offers services such as online shopping and in-store pickup. For example, the pharmaceutical block is a retail block that includes medicines and medical supplies, as well as related services, to meet users' health needs. The pharmaceutical block also provides services such as online consultations and prescription review. In this embodiment, "block" also refers to "category block".
[0044] like Figure 1As shown, the page framework includes a page structure module, a general component library, a global variable module, and an initialization module. The page structure module includes a page header navigation submodule for generating the page header navigation area, a page core navigation submodule for generating the page core navigation area, and a block configuration submodule for introducing category blocks. The page header navigation area displays 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 displays category function entries associated with category blocks; when a category function entry is triggered, the content of the category block corresponding to the category function entry is displayed in the content display area of the page structure. The general component library includes common components registered with the loading tool of the first underlying framework and integrated into the page framework. The initialization module provides at least one of the following basic functions: location function, login-free function, first-screen data function, and backup basic functions in abnormal situations. The global variable module encapsulates at least one type of global variable among location global variables, navigation global variables, event communication global variables, and resource usage global variables. Global variables can store shared data across category blocks and / or components. The page structure module provides header navigation, entry point functionality, and block configuration functionality. Specifically, the header navigation submodule provides header navigation, and the core navigation submodule provides category function entry points to load the display content of the corresponding category blocks. One category function entry point corresponds to one category block. For example, clicking the "Restaurant" tag loads the Restaurant block. The block configuration functionality includes importing category blocks into the page frame using appropriate loading methods, that is, importing the product of the category blocks into the page product. The main display area of the page is used as the content display area of the page structure.
[0045] Specifically, this architecture employs a page framework and multiple category blocks. For frequently used common component libraries, this architecture only imports the common component library into the page framework, without requiring category blocks to import it. This avoids duplicate references across category blocks, reducing the size of the page application's executable package and improving loading performance. The common component library includes any of the following public 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: toast components, popup components, modal windows, and swiper containers. The second underlying framework integrates with the first underlying framework through a dedicated plugin. The second underlying framework is preferably the React framework.
[0046] Specifically, the loading tool for the first underlying framework is preferably a Weex loading tool, such as feloader-weex. The generic components in the generic component library are registered with the loading tool. Registering generic components with the loading tool enables the identification, reuse, modularization, and unified management of generic components, avoids naming conflicts, and facilitates the configuration and use of generic components. Preferably, feloader-weex provides support for the build process, converting Weex file code into JavaScript code for execution in the application. The JavaScript code obtained through feloader-weex conversion can then be bundled into output artifacts by a bundling tool such as Webpack.
[0047] Specifically, switching between category blocks is designed to be done within the same page that the application is using, meaning it appears as a switch within a single page, rather than loading a new, independent page. The content of a category block with its category entry point selected is displayed in the main display area of the page.
[0048] Specifically, a category block can be divided into one or more functional modules. The division of functional modules and the interfaces of each functional module are designed within the project of the category block. Furthermore, a category block can integrate a page framework in the local environment of the project, thereby enabling the development and debugging process of a category block to be completed in a self-closing loop, improving the collaborative development efficiency between category blocks and page frameworks.
[0049] Furthermore, the page application architecture unifies the technical language of the project team for category blocks and page frameworks, facilitating communication. Specifically, the page application architecture defines technical terminology used between different category blocks and within each category block. This technical terminology includes the structural hierarchy terminology of the page application. Based on these structural hierarchy terminology, the content presented in the page application is planned into one or more category blocks according to category domains. Each category block includes one or more functional modules. For example, the catering block within a category block includes: a benefits and activities module, an in-block banner module, and an in-block navigation module. The in-block navigation module includes navigation tabs, and the recommended objects displayed in the tabs associated with each navigation tab are filtered based on the catering type matching the navigation tab. Specifically, in the page application architecture, the structural hierarchy of the page application includes the top display area at the top of the page and the content display area in the main body of the page; this hierarchy specifically refers to the visual hierarchy. The top display area of the page includes the page header navigation area and the page core navigation area. The category blocks displayed in the content display area are one of the following categories: catering, first retail, second retail, and third retail, planned according to category domains. The catering block provides catering information, the first retail block provides supermarket / convenience store information, the second retail block provides pharmaceutical information, and the third retail block provides specialized product information. Each category block includes one or more functional modules. The structure of each category block includes: a block-based benefits activity module, a block-based banner module, a block-based navigation module, and an object information presentation module. The selected navigation tag in the block-based navigation module serves as the current navigation tag, and recommended object information filtered based on the current navigation tag is displayed in the object information presentation module. 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 during page application runtime.
[0050] like Figure 1As shown in the diagram, multiple category blocks are illustrated, such as category block 1, ..., category block n. In implementation, any number of category blocks are designated as first category blocks, and any number are designated as second category blocks. For example, at least one category block can be designated as the first category block, while other category blocks not designated as first category blocks can be designated as second category blocks. The first category block is the category block initially displayed in the content display area of the page structure after the application starts. Specifically, the artifacts of at least one first category block can be packaged into the page artifacts corresponding to the page framework to initially display the content of the first category block in the content display area of the page structure after the application starts. The second category block is a category block dynamically loaded according to requirements during the application's runtime. Specifically, the artifacts of the second category block can be generated as independent code blocks. The application architecture defines artifact specifications, ensuring that the artifacts published by each category block are standardized artifacts conforming to certain specifications. These standardized artifacts conform to the AMD (Asynchronous Module Definition) specification. The AMD specification primarily includes module definitions and module loading mechanisms. Module definitions include module identifiers, dependent modules, and module implementation code. Module loading mechanisms include asynchronous loading, dependency injection, and dynamic loading. Each artifact is introduced into the page structure module according to its requirements and loading method. Specifically, at least one artifact from a first-category block (e.g., the first artifact from the catering block) is packaged into the corresponding page artifact of the page framework to initially display the content of the first-category block in the content display area of the page structure after the page application starts. At least one artifact from a second-category block (e.g., the first artifact from the medicine block) is generated as an independent code block (e.g., packaged as a separate chunk) to be dynamically loaded as needed during page application runtime. These category blocks depend on the general component library. Dynamic loading based on needs can be based on user actions or actual requirements, reducing initial screen loading time and improving initial page startup performance and user experience. Dynamic loading can specifically be achieved through lazy loading (i.e., lazy import). Furthermore, technologies such as snapshots and pre-requests can also be used to improve access performance.
[0051] Furthermore, the page application architecture also defines the product specifications for the category blocks; the product specifications include: the category block publishes a first product conforming to the package manager standard, and a second product conforming to the asynchronous module definition and processable by the 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, are the first products conforming to the package manager standard; wherein, the second product, as an external script, is loaded in the debugging link of the page application by specifying the uniform locator of the second product through the import script method of the first underlying framework. Specifically, the first product of the second category block is loaded using lazy loading; the second product of the second category block and the second product of the first category block are dynamically loaded according to demand through the external script loaded by the import script method. For example, for a category block, two products can be published: the first product of the category block and the second product of the category block. The first product is preferably an NPM (Node Package Manager) package. The second product is a wlm resource that can be published through CDN (Content Delivery Network). WLM resources are simultaneously stored in the local caching system of the page application. This local caching system can store WLM resources on the terminal running the page application, thereby improving access speed and avoiding the pressure of CDN remote access. The WLM resources include static resources such as stylesheets and images, and may also include dynamic resources such as response data. For example, the script import method is the `weex.importScript` method, which allows for the dynamic loading of external JavaScript scripts in a Weex-based page application, i.e., script resources can be loaded on demand, thereby optimizing page application performance. In one specific embodiment, the page application architecture is implemented as follows: for each category of blocks, a first artifact conforming to the package manager standard is generated, and a second artifact conforming to the asynchronous module definition and processable by the loading tool of the first underlying framework is generated; wherein, the first artifact of the first category of blocks is packaged into the page artifact, and the first artifact of the second category of blocks is generated as an independent code block; wherein, the second artifact, as an external script, is dynamically loaded as needed in the debugging chain of the page application by specifying the uniform locator of the second artifact through the script import method of the first underlying framework; wherein, the first artifact of the second category of blocks is loaded using lazy loading.
[0052] Specifically, the module artifacts of the functional modules contained within the category block are generated according to the category block's unique interface exposure method and code organization method. The category block, based on the component encapsulation tool, adds a corresponding block plugin and imports the module artifacts published by the functional modules contained within the category block, exporting category standard components conforming to the second underlying framework. These category standard components are provided to the page framework, enabling the page framework to render them within the list components it contains. The first underlying framework is an extension of the second underlying framework, which handles component rendering logic, and the first underlying framework bridges the native component rendering layer. The exported category standard components conforming to the second underlying framework are specification-compliant block artifacts, particularly those conforming to the AMD specification. The component encapsulation tool is preferably ice-pkg. ice-pkg can encapsulate functional modules into npm packages for reuse in different projects and environments, thereby improving development efficiency. The first underlying framework, as an extension of the second underlying framework, can combine the two underlying frameworks. Of course, at least some of the functions of the second underlying framework can also be integrated into the first underlying framework through a dedicated plugin, thereby achieving a combination of the two underlying frameworks.
[0053] Please refer to Figure 2 ,exist Figure 1This diagram illustrates an example of a page application architecture, including: a page framework and multiple category blocks. The page framework comprises a page structure module 201, a general component library 202, a global variable module 203, and an initialization module 204. The initialization module provides location functionality, login-free functionality (allowing users to log in without entering login information for a period of time), initial screen data functionality (providing initial initial screen data), and backup basic functionality (basic functionality triggered by specific exceptions). The global variable module encapsulates global variables, facilitating their import by other modules, including location global variables, navigation global variables, event communication global variables, and resource monitoring global variables. The general component library includes: standard components of the underlying framework (such as React components) and unified interface components (such as prompt components, pop-up components, modals, and carousel components). The page structure module includes: a page header navigation submodule, a page core navigation submodule, and a block configuration submodule. The page core navigation submodule includes category block entry points and global common module entry points; the block configuration submodule includes default category blocks and asynchronous category blocks. In the diagram, the first artifact of category block 1 is imported into the default category block; the first artifact of category block 2 is loaded into the asynchronous category block using lazy import. The page framework also includes an underlying framework loading tool, enabling components from the general component library to be registered with the underlying framework loading tool. For multiple category blocks, taking category block 1 as an example, a category block project is created within the category block, and further divided into multiple modules. The category block project includes a package management tool and block plugins. Each module within the category block creates a corresponding module project within the category block and outputs module artifacts; for example, creating a module 1 project outputs module 1 artifacts. Module artifacts are imported into the category block project, specifically through the category block project's package management tool. The category block project publishes two artifacts: a first artifact and a second artifact. The second output is CDN loading resources, which can be introduced into the underlying framework loading tool through the script method in the debugging link (as shown by the dotted line in the figure, which includes the debugging link, the underlying framework loading tool, and the script loading method). This allows the URL test to be performed on the category block with the corresponding category block parameters through the debugging link, thereby enabling the testing and verification of the category block during the development process.
[0054] In implementation, for each category block, the page artifacts corresponding to the page framework are integrated into the local project environment of that category block to establish a local development environment for that category block. The category block communicates with the page framework via events, relies on the general component library integrated in the page artifacts, and receives the initial screen data provided by the page framework's initialization module. This allows for the establishment of a pipeline for each category block, realizing the corresponding development process.
[0055] Please refer to Figure 3 The diagram illustrates a collaborative iterative development process for different types of blocks and page frames, including: establishing a page frame pipeline (the main pipeline) for the page frame development process during page application iteration; and establishing corresponding block pipelines (sub-pipelines) for each type of block. The diagram shows three pipelines running in parallel. "Page Frame" (301) represents the main pipeline; "Block 1" (302) and "Block 2" (303) represent their respective sub-pipelines. The development process for one block is illustrated using the Block 1 pipeline as an example. This sub-pipeline includes Block 1 development, releasing the NPM package and its corresponding version number; importing the pre-released page (i.e., the pre-released page artifact) into the local environment of the Block 1 project, building the local test environment for the Block 1 project, and performing URL testing with Block 1 parameters; after the Block 1 development and testing are completed, updating the test version to the main pipeline of the page frame. Block 1 undergoes test version verification, during which issues are fixed. After verification, Block 1 is updated to the official version of the main pipeline of the page framework. Each block in its respective sub-pipeline is updated to this official version after verification based on the test version. Once all blocks are updated in the official version, integration regression testing is performed using the URL accessed by ordinary users (without block parameters). After issues are fixed, a release / canary release is conducted. Canary releases gradually introduce new features or updates to the production environment, thereby reducing iteration risks. If issue fixing is required after integration regression testing, the blocks involved (such as Block 2) need to have their corresponding NPM packages and version numbers modified. For general issue fixes and major issue fixes before integration regression testing, whether to modify the version number depends on the version control strategy.
[0056] In this embodiment, the main pipeline of the page framework focuses on building stable and reusable technical support; the block sub-pipelines depend on the page framework, and each block sub-pipeline can operate independently of the others until the verification of each block is completed. Pipeline separation allows teams to develop in parallel, thereby shortening the iteration cycle and improving iteration efficiency. At the same time, category blocks can be flexibly deployed, reducing systemic risks; and it facilitates the rational allocation of resources, improving resource utilization.
[0057] In implementation, the method further includes: the global positioning variable is used to store the acquired positioning information, which includes location coordinates, timestamp, and movement speed; the positioning information is obtained through the positioning function in the initialization module and stored in the global positioning variable; the global variable module is introduced into each category block; when a category function entry is triggered or after being triggered, the corresponding current category block displays the location information according to the positioning information of the global positioning variable when the content display area is loaded; the same positioning module providing the positioning function is called in each category block, and the location is updated in response to the interaction process executed in the current category block. The current category block calls the positioning module to obtain 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 the common logic during the switching process between different category blocks. This parameter information includes information on the concatenation parameters of the Uniform Resource Locator (URL) (e.g., the concatenation information of the URL and source). The resource uses a global variable to store shared application layer information for network requests sent from the client to the server. Different category blocks use a unified method to send network requests from the client to the server based on the shared application layer information. Using a unified method to send network requests from the client to the server helps to implement consistent security measures, such as data encryption and authentication, thereby improving the overall security of the application. Furthermore, when a new category block needs to be added, the uniformity of the network request processing flow allows for rapid integration and testing. An example of the positioning function is as follows: Application B includes a catering block, a medicine block, etc. The page framework, catering block, and medicine block call the same positioning module, thereby ensuring that the entire application B uses the same set of positioning logic, thus ensuring end-to-end positioning consistency. The Food & Beverage section is the default category section for application B, and it is loaded by default when application B loads. When the Food & Beverage section loads, its location information is displayed based on the location information obtained from the location function in the initialization module of application B's page framework. If the location information is updated in subsequent interactions within the Food & Beverage section, the new location information will be used through a global location variable when switching to the Medicine section. Location information can be shared between different category sections through client-side storage mechanisms similar to localStorage and KVStorage.
[0058] In the page application architecture, different backup basic functions correspond to different abnormal situations, and the abnormal category can be identified by a key. Furthermore, common components are implemented for the backup basic functions so that each category block can directly call them.
[0059] Please refer to Figure 4The diagram illustrates a typical page interface after application deployment, specifically the homepage of application A. It includes: a header navigation area 401, a core navigation area 402, and a selected entry point block 403. The content display area of the selected entry point block is the main display area of the page. The header navigation area includes one or more navigation tabs, generally guiding users to basic functions of a category. For example, a food and beverage section might display a location function module, a "Orders" tab might guide users to the order center, and a "Discounts" tab might guide users to the benefits center. The core navigation area includes entry points for specific functions and may also include entry points for common page modules. These entry points act as key elements, guiding users to the corresponding content. Common page module entry points may include one or more specific activity entry points, guiding users to popular activities. For example, a specific activity entry point might be an entry point for filtering recommended products based on date or time, displaying a "Late Night Snack" tab in the evening and a "Lunch" tab during lunchtime. Another example is a "Hot Deals" entry point, or a "Red Envelope" entry point. The selected entry point is block K from multiple blocks 1 to n. The interface of block K includes: module 403-1 (block K's core), navigation tabs / filter tabs / activity tabs within block K 403-2, default recommended object information / object information with certain tabs selected 403-3, etc. This diagram also illustrates the visual structural hierarchy of the page application. The elements shown in the diagram are not intended to limit the interface layout of the page application.
[0060] In this embodiment, the page application can be integrated into the parent application as a sub-application. In practice, the sub-application can be deployed within the parent application in two ways: one is to integrate the sub-application as a separate page, and the other is to integrate the sub-application as a tab. Please refer to [reference needed]. Figure 5 The diagram illustrates a page application deployment method. Based on this page application architecture, Application A is integrated as a sub-application into the parent application. This includes: Entering search terms related to Application A in the parent application's search area 501 allows access to Application A via a link, loading it as an independent page; triggering a channel tag like "Application A" in the parent application's channel tag area, or having that channel tag selected, presents Application A as a tab within the parent application's current page (e.g., displaying the Application A homepage), and displaying parent application-provided features such as "Search Function," "Parent Application Page," "Message Center," "Shopping Cart," and "Personal Center" at the top and bottom. (Diagram similar to...) Figure 4Taking block K from blocks 1 to n as an example, where the entry point is selected, the page application generated based on the described page application architecture achieves good performance whether loaded as a standalone page or as a tab.
[0061] It should be noted that, similar Figure 4 or Figure 5 The interface described herein is merely illustrative and does not limit the layout of any specific interface. Furthermore, features given in this embodiment and other embodiments of this application can be combined with each other unless otherwise specified. The page application architecture provided in this application can be applied to scenarios such as applications (APPs) and applets, without limitation.
[0062] Example 2
[0063] Based on the above embodiments, the second embodiment of this application provides a method for generating page applications based on a page application architecture, which is described below in conjunction with... Figure 6 The method will be described below. The page application architecture described herein is the page application architecture provided in the above embodiments. Figure 6 The method for generating a page application based on the page application architecture shown includes steps S601 to S604.
[0064] Step S601: Establish a page framework pipeline for the page framework in the page application architecture, construct the page product corresponding to the page framework based on the first underlying framework through the page framework pipeline, and generate a pre-release page based on the page product.
[0065] Step S602: For each category block in the page application architecture, establish a category block pipeline corresponding to the category block, generate category block products for the category blocks through the category block pipeline, and set the version number of the category block products according to predetermined rules; and,
[0066] For each category block artifact, the category block artifact is integrated into the pre-release page to generate a category test page for testing the category block. The category test page is used to receive a category test Uniform Locator (URL) carrying category block parameters to execute category test cases generated for the category block.
[0067] Step S603: In response to each category block product meeting the test pass criteria, integrate the block products of each row page with the pre-released page to obtain the test version of the page application; and verify each category block based on the test version of the page application, and publish and update the verified category blocks to the official version of the page application.
[0068] Step S604: Perform integration regression testing based on the official version of the page application. In response to the official version of the page application meeting the regression test pass criteria, release the official version of the page application based on the canary release strategy.
[0069] In this embodiment, each type of block can be developed, integrated, and tested independently. Once each type of block has passed the test version verification in its respective pipeline, it is officially released, integrated into the pre-release page, and the integration regression and page application release are centrally managed. A canary release strategy is then implemented to release it into the production environment.
[0070] Steps S601 and S602, or similar terms, do not specify that steps must be performed in a specific order.
[0071] Example 3
[0072] The third embodiment of this application also provides an apparatus for generating page applications based on a page application architecture, corresponding to the second embodiment. The following is in conjunction with… Figure 7 The apparatus will be described in a simple manner, as the apparatus embodiments are basically similar to the method embodiments. For details of the relevant technical features and their effects, please refer to the corresponding descriptions of the method embodiments provided above. Figure 7 The apparatus shown includes:
[0073] Mainstream pipeline unit 701 is used to establish a page framework pipeline for the page framework in the page application architecture, construct the page product corresponding to the page framework based on the first underlying framework through the page framework pipeline, and generate a pre-release page based on the page product.
[0074] Category pipeline unit 702 is configured to, for each category block in the page application architecture, establish a category block pipeline corresponding to the category block, generate category block products for the category block through the category block pipeline, and set the version number of the category block products according to predetermined rules; and,
[0075] 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 used to receive a category test Uniform Locator carrying category block parameters to execute category test cases generated for the category block.
[0076] The integrated test unit 703 is used to integrate the block products of each row page with the pre-released page in response to the fact that each category block product meets the test pass criteria, to obtain a test version of the page application; and to verify each category block based on the test version of the page application, and to release and update the verified category blocks to the official version of the page application.
[0077] The regression testing unit 704 is used to perform integration regression testing based on the official version of the page application. In response to the official version of the page application meeting the regression test pass criteria, the official version of the page application is released based on a canary release strategy.
[0078] The page application architecture described above is the same as the page application architecture provided in the above embodiments.
[0079] Example 4
[0080] Based on the above embodiments, the fourth embodiment provides a page display method, which is described below in conjunction with... Figure 8 Please provide an explanation. Figure 8 The page display methods shown include:
[0081] Step S801: In response to the page application launch command, load the page framework of the page application and load at least one first category block from the category blocks of the page application; the page application is generated based on the page application architecture provided in the above embodiments;
[0082] Step S802: During or after the loading process, the page of the application is displayed.
[0083] The page includes a header navigation area, a core navigation area, and a content display area. The header navigation area displays any one of the following header navigation tags: a location navigation tag associated with the location module, a benefits navigation tag associated with the benefits module, or an order navigation tag associated with the order module. The core navigation area displays category function entries associated with category blocks. When a category function entry is triggered, the page structure displays the content of the category block corresponding to that entry. The content display area initially displays the content of the first category block.
[0084] Step S803: In response to the target category function entry being triggered, the display content of the category block corresponding to the target category function entry is displayed in the content display area.
[0085] Specifically, in response to the application launch command, the page loading process begins. First, the page framework is loaded, including global variable initialization and component loading from the general component library. Global variables can be initialized before and after component loading to ensure components can access the correct data during rendering. Next, the default category block (i.e., a first category block) is loaded, allowing the page to initially display the content of that category block, enabling users to see and interact with it. The default category block includes the following: the modules it comprises, navigation / filter / activity tags within it, and information about default recommended objects / objects with selected tags. Furthermore, when users interact (e.g., clicking a category function entry point) to trigger the loading of other category blocks, these blocks are dynamically loaded. This on-demand loading improves initial page loading speed and reduces resource consumption. This loading order ensures the application is both efficient and stable, providing a good user experience. Of course, the specific loading order may vary depending on the application's specific needs.
[0086] Specifically, the core navigation area of the page also displays the entry point for the page's public modules. These public modules may include: activity modules corresponding to time periods (such as the dinner module or night market module displayed after 6:00 PM in the catering section, the afternoon tea module displayed between 3:00 PM and 5:00 PM), a red envelope module, and a special benefits module.
[0087] Based on the above embodiments, one embodiment of this application provides an electronic device; for relevant parts, please refer to the corresponding descriptions of the above embodiments. Figure 9 A schematic diagram of an electronic device is shown in the figure. The electronic device includes a memory and a processor. The memory is used to store computer instructions for data processing. When the computer instructions are read and executed by the processor, they execute the method provided in the embodiments of this application.
[0088] Based on the above embodiments, one embodiment of this application provides a computer-readable storage medium. For relevant details, please refer to the corresponding descriptions in the above embodiments. The schematic diagram of the computer-readable storage medium is similar to that of an electronic device, and the memory in the diagram can be understood as the computer-readable storage medium. The computer-readable storage medium stores computer instructions, which, when executed by a processor, are used to implement the method provided in the embodiments of this application.
[0089] The technical solution of this invention can be applied to the transaction and delivery services of instant e-commerce platforms, such as Taobao Flash Sale, Taoxianda, Ele.me takeaway and retail.
[0090] The embodiments of this application may involve the use of user data. In practical applications, user-specific personal data should be used in the scheme described herein within the scope permitted by applicable laws and regulations, provided that it complies with the applicable laws and regulations of the country in which it is located (e.g., with the explicit consent of the user, and with actual notification to the user, etc.).
[0091] In a typical configuration, a computing device includes one or more processors (CPUs), input / output interfaces, a network interface, and memory. Memory may include non-persistent storage in computer-readable media, such as random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash RAM. Memory is an example of computer-readable media.
[0092] 1. Computer-readable media includes both permanent and non-permanent, removable and non-removable media that can store information by any method or technology. 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, CD-ROM, digital versatile optical disc (DVD) or other optical storage, magnetic tape, magnetic disk storage or other magnetic storage devices, or any other non-transferable medium that can be used to store information accessible by a computing device. As defined herein, computer-readable media does not include non-transitory computer-readable media, such as modulated data signals and carrier waves.
[0093] 2. Those skilled in the art will understand that embodiments of this application can be provided as methods, systems, or computer program products. Therefore, this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this application can take the form of a computer program product embodied 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.
[0094] Although this application discloses preferred embodiments as described above, it is not intended to limit this application. Any person skilled in the art can make possible changes and modifications without departing from the spirit and scope of this application. Therefore, the scope of protection of this application should be determined by the scope defined in the claims of this application.
Claims
1. A page application architecture, characterized by, The page application architecture comprises: a page framework built based on a first underlying framework; and a plurality of independent category blocks corresponding to different category 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 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 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 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; 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 to initially display the display content of the first category block in a content display area of a 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; wherein, 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 according to requirements as an external script through a specified uniform locator of the second product by a script introduction method of the first underlying framework in a debugging link of the page application; wherein the first product of the second category block is loaded in a lazy loading manner; the switching between the first category block and the second category block is in-page switching in the page application.
2. The page application architecture of claim 1, wherein, Further comprising: the positioning global variable is used to store acquired positioning information, and the positioning information comprises a location coordinate, 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, and the global variable module is introduced in each category block. When a category function entry is triggered or 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 positioning function is called, and the positioning module is called in the current category block to obtain the current new positioning information and store the new positioning information in response to the interactive process performed in the current category block. In response to the category function entry switching operation, the new category block is loaded, and the new positioning information is read when the new category block is loaded. The navigation global variable stores the parameter information of the common logic in the switching process between different category blocks, and the parameter information includes the information of the uniform resource locator splicing parameter. The resource use global variable stores the common application layer information of the client sending network request to the server; different category blocks use a unified method to send network request from the client to the server according to the common application layer information.
3. The page application architecture of claim 1, wherein, The module product of the functional module contained in the category block is generated according to the interface exposure mode and code organization mode of 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 layer framework, which 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 layer framework is an extension based on the second bottom layer framework, the second bottom layer framework is used for processing component rendering logic, and the first bottom layer framework is bridged with the native component rendering layer.
4. The page application architecture of claim 1, wherein, For each category block, the page product corresponding to the page framework is integrated in the project local environment of the category block to establish the local development environment of the category block; The category block and the page framework communicate events, rely on the general component library integrated in the page product, and receive the first screen data provided by the initialization module of the page framework.
5. The page application architecture of claim 1, wherein, The general component library includes any of the following public components: standard components provided by the second bottom layer framework, and uniform interface components for building the page application; the uniform interface components include any of the following components: prompt component, pop-up component, modal box and carousel container.
6. The page application architecture of claim 1, wherein, In the page application architecture, the structure level of the page application includes the page top display area located at the top of the page and the content display area located in the main body of the page; Wherein, the page top display area 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 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 medicine information, and the third retail block is used to provide special commodity information. Each category block includes one or more functional modules; the structure of each category block includes: an in-block interest activity module, an in-block banner module, an in-block navigation module, and an object information presentation module; wherein the navigation tab in the in-block navigation module in a selected state is the current navigation tab, and the 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 needs when the page application runs.
7. A method for generating page applications based on a page application architecture, characterized in that, The page application architecture is the page application architecture of any one of claims 1-6, and the method comprises: A page framework pipeline is established for the page framework in the page application architecture, the page product corresponding to the page framework is constructed based on the first underlying framework through the page framework pipeline, and a pre-release page is generated according to the page product; For the information of each category block in the page application architecture, a category block pipeline corresponding to the category block is established, the 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 identifier 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, the category block products are integrated with the pre-release page to obtain a test version of the page application; and each category block is verified based on the test version of the page application, and the category block that passes the verification is published and updated to a formal version of the page application; Based on the formal version of the page application, an integration regression test is performed, and in response to the formal version of the page application meeting a regression test passing standard, the formal version of the page application is published based on a gray release strategy.
8. A page display method characterized by comprising: The method comprises: 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 of any one of claims 1-6; During or after the execution of the loading, displaying a page of the page application; the page includes a page header navigation area, a page core navigation area, and a content display area; wherein, The page head navigation area displays any one of the following head navigation labels: a location navigation label associated with a location module, a benefit navigation label associated with a benefit module, and an order navigation label associated with an order module; the page core navigation area displays a category function entry associated with a category block; when a category function entry is triggered, the page structure displays the display content of the category block corresponding to the category function entry; and the content display area initially displays the display content of a first category block. In response to a target category function entry being triggered, the content display area displays the display content of the category block corresponding to the target category function entry.
9. An apparatus for generating a page application based on a page application architecture, the apparatus comprising: The page application architecture is any one of the page application architectures of claims 1-6, and the device comprises: A main pipeline unit 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 configured to establish a category block pipeline corresponding to each category block in the page application architecture based on 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, integrate the category block product into the pre-release page to generate a category test page for testing the category block, and 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 integration test unit configured to integrate each category block product and the pre-release page to obtain a test version of the page application in response to each category block product meeting a test passing standard, and verify each category block based on the test version of the page application, and publish and update a category block that passes the verification to a formal version of the page application; A regression test unit configured to perform an integration regression test based on the formal version of the page application, and publish the formal version of the page application based on a gray release strategy in response to the formal version of the page application meeting a regression test passing standard.
10. An electronic device, comprising: Comprise: A processor, a memory, and computer program instructions stored on the memory and executable on the processor; The processor executes the computer program instructions to implement the method of any one of claims 1-8.
Citation Information
Patent Citations
Page project development method and device based on template engine and storage medium
CN115586896A