Page processing method, device and equipment of application program, medium and product

Abstract

The application discloses a page processing method and device of an application program, equipment, medium and product, and the application program comprises a data base and at least two front-end interaction layers; the method comprises the following steps: calling a first front-end interaction layer to display a first page in the application program, wherein the first front-end interaction layer and the first page are developed by using a first technology stack; in response to a page switching request of switching from the first page to a second page in the application program, calling the first front-end interaction layer to instruct the data base to transfer page content data of the second page to a second front-end interaction layer; the second front-end interaction layer and the second page are developed by using a second technology stack; and calling the second front-end interaction layer to render and display the second page based on the page content data of the second page. The application can effectively cope with the page switching coordination problem caused by different technology stacks, and ensure that different technology stack pages can smoothly transition when switching.

Description

Technical Field

[0001] This application relates to the field of computer technology, specifically to a page processing method for an application, a page processing apparatus for an application, a computer device, a computer-readable storage medium, and a computer program product. Background Technology

[0002] In modern application page development, multiple technology stacks are often employed. For example, applications running on specific operating system platforms may use the native technology stack, while cross-platform technology stacks such as Flutter, Web, and Mini Programs may be used in hybrid development. This leads to the coexistence of pages using different technology stacks within an application; for instance, an application may simultaneously contain native pages, Flutter pages, Web pages, and Mini Program pages. The differences between these technology stacks create a series of coordination problems when switching between pages using different technology stacks, and currently, the industry lacks a universal solution. Summary of the Invention

[0003] This application provides a page processing method, apparatus, device, medium, and product for an application, which can effectively address page switching coordination issues caused by different technology stacks and ensure a smooth transition when switching between pages of different technology stacks.

[0004] On one hand, embodiments of this application provide a page processing method for an application, the application including a data base and at least two front-end interaction layers, the method including:

[0005] The first front-end interaction layer is invoked to display the first page of the application. Both the first front-end interaction layer and the first page are developed using the first technology stack.

[0006] In response to a page switching request from the first page to the second page in the application, the first front-end interaction layer instruction data base is invoked to pass the page content data of the second page to the second front-end interaction layer; both the second front-end interaction layer and the second page are developed using the second technology stack.

[0007] The second front-end interaction layer is invoked to render and display the second page based on the page content data of the second page.

[0008] On one hand, embodiments of this application provide a page processing apparatus for an application, the application including a data base and at least two front-end interaction layers, the apparatus including:

[0009] The first processing unit is used to call the first front-end interaction layer to display the first page of the application. Both the first front-end interaction layer and the first page are developed using the first technology stack.

[0010] The second processing unit is used to respond to a page switching request from the first page to the second page in the application, and to call the first front-end interaction layer instruction data base to pass the page content data of the second page to the second front-end interaction layer; both the second front-end interaction layer and the second page are developed using the second technology stack;

[0011] The third processing unit is used to call the second front-end interaction layer to render and display the second page based on the page content data of the second page.

[0012] In one embodiment, the data base includes a data storage module, and the page content data of the second page is stored in the data storage module of the data base;

[0013] In response to a page switching request from the first page to a second page in the application, the second processing unit invokes the first front-end interaction layer instruction data base to pass the page content data of the second page to the second front-end interaction layer, including:

[0014] In response to a page switching request from the first page to the second page, the first processing unit calls the first front-end interaction layer to send a page switching instruction to the data base;

[0015] The system invokes the data base to respond to page switching commands and retrieves the storage address of the second page's content data in the data base's data storage module.

[0016] The data base is invoked to send a page switching notification to the second front-end interaction layer, and the page switching notification carries the storage address.

[0017] The second processing unit calls the second front-end interaction layer to retrieve the page content data of the second page from the data storage module of the data base based on the storage address in the page switching notification.

[0018] In one embodiment, the first technology stack includes a first programming language, which is the development language of the first front-end interaction layer; the first processing unit calls the first front-end interaction layer to send a page switching instruction to the data base, including:

[0019] The first front-end interaction layer calls the page switching data class based on the first programming language, encapsulates the page switching parameters corresponding to the page switching request into a first instruction object, and generates the binary data of the first instruction object;

[0020] The first front-end interaction layer calls the page switching interaction class based on the first programming language and sends the binary data of the first instruction object to the data base;

[0021] The first instruction object is a page switching instruction object that conforms to the syntax rules of the first programming language. The page switching instruction object is used to represent page switching instructions.

[0022] In one embodiment, the data base is developed in the target programming language, and the data base also includes a network communication module;

[0023] The second processing unit invokes the data base to respond to the page switching command and obtains the storage address of the second page's page content data in the data storage module of the data base, including:

[0024] The data base is called based on the page switching data class of the target programming language. The binary data of the first instruction object is deserialized into the second instruction object, which is a page switching instruction object that conforms to the syntax of the target programming language.

[0025] The data base is invoked based on the page switching parameters in the second instruction object to detect whether the data storage module of the data base contains the page content data of the second page;

[0026] If included, the data base is called to obtain the storage address of the page content data of the second page in the data storage module of the data base;

[0027] If not included, the network communication module of the data base is invoked to request the page content data of the second page from the application server and store it in the data storage module of the data base, and the storage address of the page content data of the second page in the data storage module of the data base is obtained.

[0028] In one embodiment, the data base is developed in the target programming language; the second processing unit calls the data base to send a page switching notification to the second front-end interaction layer, including:

[0029] The data base is invoked based on the page switching data class of the target programming language, the storage address is encapsulated into a first notification object, and the binary data of the first notification object is generated;

[0030] The data base is invoked based on the page switching interaction class of the target programming language, and the binary data of the first notification object is sent to the second front-end interaction layer;

[0031] The first notification object is a page switching notification object that conforms to the syntax specifications of the target programming language. The page switching notification object is used to represent page switching notifications.

[0032] In one embodiment, the second technology stack includes a second programming language, which is the development language of the second front-end interaction layer; the third processing unit calls the second front-end interaction layer to obtain the page content data of the second page from the data storage module of the data base based on the storage address in the page switching notification, including:

[0033] The second front-end interaction layer calls the page switching data class based on the second programming language to deserialize the binary data of the first notification object into a second notification object. The second notification object is a page switching notification object that conforms to the syntax rules of the second programming language.

[0034] The second front-end interaction layer calls the page switching interaction class based on the second programming language, and retrieves the page content data of the second page from the data storage module of the data base according to the storage address in the second notification object.

[0035] In one embodiment, the data base further includes a code generator, a data definition file, and an interaction definition file; the data definition file defines a page switching data model, and the interaction definition file defines a page switching interaction interface;

[0036] The code generator is used to convert page switching data models into page switching data classes in a specific programming language, and to convert page switching interaction interfaces into page switching interaction classes in a specific programming language.

[0037] Among them, specific development languages ​​include: development languages ​​for various front-end interaction layers and development languages ​​for data base.

[0038] In one embodiment, the third processing unit invokes the second front-end interaction layer to render and display the second page based on the page content data of the second page, including:

[0039] Call the second front-end interaction layer to obtain the page code data of the second page;

[0040] The second front-end interaction layer is invoked to parse the page code data of the second page and generate the rendering tree of the second page;

[0041] The second front-end interaction layer is invoked to render and display the second page based on the page content data and the rendering tree of the second page.

[0042] The second page contains variable components and invariant components. The page code data of the second page contains the component description information of the invariant components, as well as M types of component description information of the variable components and the flag information corresponding to each component description information, where M is an integer greater than 1; the rendering tree of the second page contains the rendering nodes corresponding to the invariant components and the rendering nodes corresponding to the variable components.

[0043] In one embodiment, the third processing unit calls the second front-end interaction layer to parse the page code data of the second page and generate the rendering tree of the second page, including:

[0044] When the invariant component in the page code data of the second page is parsed, the second front-end interaction layer is called to construct the rendering node corresponding to the invariant component in the rendering tree of the second page using the component description information of the invariant component.

[0045] When the variable component in the page code data of the second page is parsed, the second front-end interaction layer is called to request the target identifier information that matches the second page. The component description information corresponding to the target identifier information is used to construct the rendering node corresponding to the variable component in the rendering tree of the second page.

[0046] In one embodiment, the application further includes a hybrid routing stack, which is shared by at least two front-end interaction layers; each page in the application corresponds to a page instance, and the hybrid routing stack is used to place the corresponding page instances in the order of page display, with the page instance at the top of the hybrid routing stack corresponding to the page to be displayed;

[0047] Before the third processing unit calls the second front-end interaction layer to render and display the second page based on the page content data of the second page, it also includes:

[0048] Call the second front-end interaction layer to initialize the page instance corresponding to the second page;

[0049] The second front-end interaction layer is invoked to place the page instance corresponding to the second page at the top of the hybrid routing stack.

[0050] In one embodiment, the hybrid routing stack contains N page instances arranged sequentially from the bottom to the top of the stack. The order of the N page instances in the hybrid routing stack represents the display sequence of the corresponding N pages, where N is a positive integer. The N pages include a first page and a second page. The page instance corresponding to the second page is located at the top of the hybrid routing stack, and the page instance corresponding to the first page is located below and adjacent to the top of the hybrid routing stack. The application defines that when performing a back operation on the second page, it should return to the third page. The third processing unit is further configured to:

[0051] If the first page is not the same page as the third page defined by the application, then update the hybrid routing stack so that the page instance of the third page is located below the top of the hybrid routing stack and adjacent to the top of the stack.

[0052] In one embodiment, the third processing unit is further configured to:

[0053] In response to a back operation on the second page, the page instance corresponding to the second page is removed from the hybrid routing stack, and the page instance corresponding to the third page is placed at the top of the hybrid routing stack; and,

[0054] The third page is displayed.

[0055] In one embodiment, the first page displays target dynamic data, and the second page includes a dynamic display area and a stable display area. The dynamic display area displays dynamic data in a first publication state, and the stable display area displays dynamic data in a second publication state. The page switching instruction carries an identifier of the target dynamic data. The second processing unit is further configured to:

[0056] The data base requests the target dynamic data of the first published state from the application server based on the identifier of the target dynamic data, and notifies the second front-end interaction layer to display the target dynamic data of the first published state in the dynamic display area of ​​the second page.

[0057] The data base is invoked to poll the application server for the publication status of the target dynamic data.

[0058] When the publication status of the target dynamic data changes from the first publication status to the second publication status, the data base is invoked to notify the second front-end interaction layer to migrate the target dynamic data in the dynamic display area to the stable display area.

[0059] On one hand, embodiments of this application provide a computer device, the computer device comprising:

[0060] Processor, memory, and network interface;

[0061] The processor is connected to the memory and the network interface. The network interface is used to provide network communication functions, the memory is used to store program code, and the processor is used to call the program code to implement the page handling method of the above application.

[0062] On one hand, embodiments of this application provide a computer-readable storage medium storing a computer program, the computer program including computer instructions adapted for a processor to load and execute the page processing method of the aforementioned application.

[0063] On one hand, embodiments of this application provide a computer program product, which includes a computer program or computer instructions. When the computer program or computer instructions are executed by a processor, they implement the page processing method of the above-mentioned application.

[0064] In this embodiment, the application includes at least two front-end interaction layers, such as a first front-end interaction layer and a second front-end interaction layer. The first front-end interaction layer is developed using a first technology stack and can be used to display a first page developed using the first technology stack in the application. The second front-end interaction layer is developed using a second technology stack and can be used to display a second page developed using the second technology stack in the application. Therefore, this application is applicable to scenarios where pages using different technology stacks coexist. Furthermore, the application also includes a data base. In response to a page switching request from the first page to the second page, the first front-end interaction layer can instruct the data base to pass the page content data of the second page to the second front-end interaction layer, and then the second front-end interaction layer can render and display the second page based on the page content data. Thus, the data base, as an intermediate layer, provides unified data services, shielding the differences between different technology stacks. The data base coordinates the work of various front-end interaction layers, allowing each front-end interaction layer to focus only on its interaction logic with the data base. This effectively addresses the page switching coordination issues caused by different technology stacks and ensures a smooth transition between pages using different technology stacks. Attached Figure Description

[0065] Figure 1 This is an illustration of a page switching scenario provided in an embodiment of this application. Figure 1 ;

[0066] Figure 2 This is a schematic diagram of the system architecture of an application provided in an embodiment of this application;

[0067] Figure 3 This is a schematic diagram of the architecture of a page processing system provided in an embodiment of this application;

[0068] Figure 4 This is a flowchart illustrating a page processing method for an application provided in an embodiment of this application;

[0069] Figure 5 This is a schematic diagram of a hybrid routing stack provided in an embodiment of this application. Figure 1 ;

[0070] Figure 6 This is a schematic diagram of a hybrid routing stack provided in an embodiment of this application. Figure 2 ;

[0071] Figure 7 This is an illustration of a page switching scenario provided in an embodiment of this application. Figure 2 ;

[0072] Figure 8 This is a flowchart illustrating a page reuse scheme provided in an embodiment of this application;

[0073] Figure 9This is a schematic diagram of a page from the perspective of an account owner, provided in an embodiment of this application;

[0074] Figure 10 This is a flowchart illustrating a page update scheme provided in an embodiment of this application;

[0075] Figure 11 This is a schematic diagram of the structure of a page processing device for an application provided in an embodiment of this application;

[0076] Figure 12 This is a schematic diagram of the structure of a computer device provided in an embodiment of this application. Detailed Implementation

[0077] To better understand the technical solutions provided in the embodiments of this application, the key terms involved in this solution will be introduced first:

[0078] I. Technology Stack: This refers to the collection of development tools, programming languages, frameworks, and services used in application development to accomplish specific functions. Development tools are various software or hardware tools that assist developers in application development. For example, they integrate multiple functions such as code editing, compilation, debugging, and version control, providing developers with a one-stop integrated development environment. Programming languages ​​(also known as programming languages) are languages ​​used to write and develop applications. Their purpose is to write code instructions that enable the computer to execute tasks according to the predetermined logic of those instructions. Development frameworks provide a basic structure and toolset for implementing specific types of applications. They encapsulate common functions and design patterns, helping developers quickly build the application's skeleton and reduce repetitive development work. Services are a collection of functions and capabilities provided to meet specific needs, such as APIs (Application Programming Interfaces), cloud computing services, and cloud storage services.

[0079] II. Application (App): Refers to a computer program designed to perform one or more specific tasks, such as social networking applications, music and video applications, leisure and entertainment applications, lifestyle service applications, photography applications, news and information applications, shopping applications, payment applications, travel applications, etc. In the embodiments of this application, the application will employ at least two technology stacks to develop the page. For example, in addition to using the native technology stack, one or more cross-platform technology stacks will be combined to develop the page. The page, also known as the User Interface (UI), is the medium through which the application interacts and exchanges information with objects.

[0080] III. Native Technology Stack: This refers to the set of technologies used to develop applications for a specific operating system platform. Its core characteristic is directly calling the system's native APIs, fully utilizing platform features to achieve high performance, high stability, and deep device functionality integration. Different operating system platforms have their own corresponding native technology stacks. For example, the iOS technology stack commonly uses Objective-C and Swift (a modern programming language) as development languages, UIKit (a traditional UI framework based on imperative programming) and SwiftUI (a framework for building UIs in a declarative way) as development frameworks, and Xcode (an integrated development environment) as the primary development tool. The Android technology stack primarily uses Java and Kotlin (a modern programming language compatible with Java) as development languages, the Android SDK (Software Development Kit) as a development framework, and Android Studio (another integrated development environment) as the primary development tool.

[0081] IV. Cross-Platform Technology Stack: This refers to the collection of technologies used to develop applications that can run on multiple operating system platforms. Cross-platform technology stacks include, but are not limited to: Flutter technology stack, Web technology stack, Mini Program technology stack, React Native technology stack, and Xamarin technology stack. The Flutter technology stack is a cross-platform UI framework technology stack based on Dart (an object-oriented programming language) and uses a self-drawing engine to achieve high-performance cross-platform application development. The Web technology stack refers to a collection of web development technologies, covering front-end (browser-side) and back-end (server-side) technologies, with HTML (HyperText Markup Language), CSS (Cascading Style Sheets), and JavaScript (a lightweight, interpreted, or just-in-time programming language) at its core. The Mini Program technology stack is a lightweight application technology stack that relies on the super app ecosystem (such as a host program that can host a Mini Program), typically using a specific framework and a closed sandbox environment. The React Native technology stack refers to a cross-platform native application development framework based on React (reactive), which uses JavaScript to bridge and call native components. The Xamarin technology stack is a cross-platform mobile development framework that uses C# (a strongly typed, multi-paradigm programming language) and binds to native APIs.

[0082] V. Front-end Interaction Layer: This refers to the functional module responsible for the interaction between objects and the application. It can convert object operations (such as click operations, input operations, and swipe operations) into instructions that can be understood and processed, and dynamically feed back the processing results to the object in response to the instructions. In the embodiments of this application, the application includes at least two front-end interaction layers. Each front-end interaction layer corresponds to a technology stack used by the application, and each front-end interaction layer is developed using a corresponding technology stack. For example, a native layer can be developed using a native technology stack, a Flutter layer can be developed using a Flutter technology stack, a mini-program layer can be developed using a mini-program technology stack, and a React Native layer can be developed using a React Native technology stack. A technology stack page refers to a page developed using a specific technology stack. For example, a native page can be developed using a native technology stack, a Flutter page can be developed using a Flutter technology stack, a mini-program page can be developed using a mini-program technology stack, and a React Native page can be developed using a React Native technology stack. Each front-end interaction layer is responsible for the interaction between an object and the corresponding technology stack page in the application. For example, the Native layer is responsible for the interaction between an object and a native page in the application, the Flutter layer is responsible for the interaction between an object and a Flutter page in the application, the Mini Program layer is responsible for the interaction between an object and a Mini Program page in the application, and the React Native layer is responsible for the interaction between an object and a React Native page in the application.

[0083] VI. Page Routing Stack: This is a data structure that manages the page routing logic of an application. It follows the Last-In-First-Out (LIFO) principle. For example, when switching from page A to page B, the page instance of page B can be pushed onto the page routing stack so that the page instance of page B is at the top of the stack. When going back (or returning) from page B to page A, the page instance of page B can be popped from the page routing stack so that the page instance of page A returns to the top of the stack. Page routing logic (or page routing mechanism) refers to the mechanisms and rules for implementing navigation and data transfer between different pages in an application. It ensures smooth navigation between pages and correctly handles data interaction during page transitions.

[0084] 7. Page Instance: A page instance is a specific, interactive page entity created during the runtime of an application. For example, in page development, page code data defines the structure, style, and interaction logic of the page. A page instance can be a page entity created based on page code data, and it has its own independent state (such as loading state, display and hiding state of page components) and information (such as data entered by objects, data obtained from the application server, etc.).

[0085] In this application, the application is designed to switch between pages of different technology stacks; for example, please see [link to relevant documentation]. Figure 1 This is an illustration of a page switching scenario provided in an embodiment of this application. Figure 1 The user can enter the official account page 11 (Flutter page) as an author. When clicking the official account avatar 12, they can switch to the account owner's perspective page 13 (Native page) to view the published article content. When clicking the write article control 14, they can switch to the article editing page 15 (Mini Program page) to edit the article. Alternatively, they can directly click the write article control 16 to switch to the article editing page 15 to edit the article. After the article is edited, the user can switch back to the account owner's perspective page 13 by triggering the publish control in the article editing page 15, and the published article will be displayed in the account owner's perspective page 13. This process involves switching between the Flutter page, the Mini Program page, and the Native page.

[0086] While different front-end interaction layers can leverage the unique advantages of their respective technology stacks—for example, the Flutter technology stack can create beautiful interfaces with its high-performance rendering and rich component library, the Web technology stack offers broad compatibility and convenient development features, the Mini Program technology stack is lightweight and quick to deploy, and the native technology stack provides ultimate performance—the differences between these technology stacks present a series of coordination challenges when switching between pages using different technology stacks within an application.

[0087] (1) Data format coordination issues: Data classes are used to store, transmit, and manipulate data. Data classes used by different technology stacks follow the syntax rules of their respective development languages. Taking Flutter and React Native technology stacks as examples, Flutter uses Dart, and its data classes have strict type definitions and operation methods. For example, Dart's List needs to specify the field type it stores (such as integer type). React Native technology stack uses JavaScript, and its data classes are more flexible and dynamic. For example, JavaScript arrays (similar to Dart's lists) can store data of different field types. Moreover, different technology stacks have significantly different ways of handling field types. For example, for time types, Dart uses its own DateTime class to store date data, while JavaScript uses the Date class (a data class used to process dates) to store date data. When switching from a Flutter page to a React Native page, the React Native layer may not be able to correctly identify and process data from the Flutter layer (such as Dart's lists, DateTime objects (DateTime class that stores date data)), thus causing errors. Therefore, switching between different technology stack pages involves the conversion of different data formats.

[0088] (2) Data transmission coordination issues: Different technology stacks may use different communication protocols for data transmission. For example, the Web technology stack uses multiple transmission protocols such as HTTP and WebSocket to transmit data, while the Mini Program technology stack uses its own unique network request API. The underlying implementations of the two are completely decoupled, so it is necessary to coordinate the communication protocols between the Web layer (the front-end interaction layer developed using the Web technology stack) and the Mini Program layer. In addition, various cross-platform technology stacks only focus on solving communication with the native layer. For example, the Flutter layer has its own Platform Channel for communicating with the native layer, and the React Native layer has its own bridging mechanism for communicating with the native layer. However, the support for communication between different cross-platform technology stacks is relatively weak, requiring additional development and adaptation work, which not only increases the complexity and cost of development.

[0089] (3) State Management Collaboration Issues: State management libraries can be used to store state data, including but not limited to: application state (such as the identifier, avatar, and login status of the logged-in account in the application, the theme color, font size, etc. of the application), business data state (such as various list data such as product lists, article lists, task lists, etc., form data such as the content entered in registration forms, search forms, and comment forms, cached data such as popular product information, commonly used configuration items, etc.), and asynchronous operation state (recording the loading state of asynchronous operations (such as network requests, file reading, etc.). Different technology stacks may use different state management libraries, and the differences between state management libraries will cause problems in the management and transmission of state data when switching between pages of different technology stacks. For example, each state database may use different data formats to store state data, requiring state data conversion, which increases the complexity of development and the possibility of errors. Moreover, when a large amount of state data is transmitted, the problem of untimely transmission is likely to occur. In addition, each state management library manages its own state data independently. Even if different pages need to use the same state data, it may be stored repeatedly in different state management libraries, which not only wastes storage space but also increases the difficulty of data synchronization.

[0090] (4) Page routing coordination issues: Page routing stacks of different technology stacks may have different implementation methods and rules. For example, the iOS technology stack uses UINavigationController (a navigation controller) to implement the page routing stack, while the Flutter technology stack uses the Navigator component (a navigation component) to implement the page routing stack. When switching between pages of different technology stacks, the page routing mechanism under different technology stacks needs to be coordinated and managed in a unified manner. Otherwise, phenomena such as jump conflicts (such as abnormal page display after jump) and state loss (such as page data loss, object operation state loss) may occur.

[0091] Please see Figure 2This is a schematic diagram of the system architecture of an application provided in an embodiment of this application. The application includes a data base, at least two front-end interaction layers, and a hybrid routing stack shared by the at least two front-end interaction layers. The data base includes a code generator, a data definition file, an interaction definition file, a data storage module, and a network communication module. In one implementation, the development language of the data base is the target programming language. This means that when developing the data base, the language selected for writing code and implementing its various functions is the target programming language. The target programming language has the characteristics of cross-platform universality and good performance. Cross-platform universality means that it can run, be used, or interact normally in a variety of different operating systems, hardware architectures, or software environments without extensive modification or adjustment. For example, the target programming language can be C++ (a high-level computer programming language). The C++ standard library is clearly defined, ensuring the consistency and portability of C++ code. On different operating system platforms, as long as there is a corresponding C++ compiler, C++ code can be compiled and run with minimal or no modification. Moreover, C++ provides a powerful memory management mechanism that can directly manipulate memory and hardware, and the generated machine code has high execution efficiency.

[0092] The data base has the ability to solve data format coordination problems, data transmission coordination problems, and state management coordination problems, while the hybrid routing stack has the ability to solve page routing coordination problems. These are explained in detail below:

[0093] (1) The data platform has the ability to solve data format coordination problems:

[0094] The data definition file defines the data model. The data model describes data in a general and standardized way, independent of a specific programming language, starting from the essential characteristics of the data, such as field types, field names, and relationships (e.g., optionality). The code generator can convert the data model in the data definition file into data classes for various programming languages. In other words, the data model in the data definition file provides a unified standard for building data classes for the data base and at least two front-end interaction layers, ensuring data class consistency (e.g., inconsistent data classes exist if field names or types for the same field are defined differently). This makes the transfer and processing of data between the front-end interaction layer and the data base (and between different front-end interaction layers) smoother, reducing errors caused by data format incompatibility.

[0095] Data classes are primarily used to encapsulate (or store) data and provide methods for manipulating that data. Data objects are concrete entities created by encapsulating data using data classes. Network transmission is performed in binary data format, and data objects cannot be directly transmitted over a network. In this application, data classes can provide serialization and deserialization methods. Serialization converts a data object into binary data for transmission over the network. Deserialization converts received binary data into understandable and processable data objects. For example, the Dlutter layer can send data objects conforming to Dart's syntax as binary data to a data base, which then converts them into data objects conforming to the syntax of the target programming language.

[0096] For example, Protocol Buffers (often abbreviated as Protobuf or PB) is a lightweight and efficient structured data storage format. It is a language-independent, operating system platform-independent, and extensible serialized structured data format used in communication protocols, data storage, and other fields. The data definition file can be a PB file, and the data model in the data definition file can be a Protobuf message within the PB file. Protobuf messages in PB files are used to describe structured data. The typical form of a Protobuf message is:

[0097] message Message

[0098] {

[0099] optional string a = 1;

[0100] Repeated string b = 2;

[0101] optional bool c = 3;

[0102] }

[0103] The message keyword is followed by a structured data Message, which contains an optional string field a (field number 1), a repeated string field b (field number 2), and an optional boolean field c (field number 3).

[0104] Correspondingly, the code generator can be a PB code generator. A PB code generator can generate data classes in various programming languages ​​(such as Java, Dart, C++, etc.) based on Protobuf messages in a PB file. These data classes provide serialization and deserialization methods. For example, a PB code generator can generate Java data classes (i.e., data classes that conform to Java's syntax) for the aforementioned standard form of Protobuf messages.

[0105] public class Message extends BaseProtoBuf{

[0106] public String a;

[0107] public List b;

[0108] public boolean c;

[0109] }

[0110] BaseProtoBuf is a base class for handling Protobuf messages, containing some common message processing logic, such as serialization and deserialization methods. The Message class inherits from BaseProtoBuf and can utilize these common message processing logics while adding its own unique message processing logic.

[0111] Therefore, this application can use the data model in the data definition file as a unified standard for describing data classes. The code generator can generate data classes for different programming languages ​​based on the data model in the data definition file, which can effectively solve the problem of data format incompatibility between different front-end interaction layers and data bases, and automatically realize the conversion of different data objects, thereby improving development efficiency and reducing the workload and error probability of manual coding.

[0112] (2) The data base has the ability to solve data transmission coordination problems:

[0113] Suppose an application contains P types of front-end interaction layers, where P is an integer greater than 1. If these front-end interaction layers communicate directly with each other, each pair of technology stacks requires separate adaptation of the communication protocol, resulting in an exponential increase in the coordination workload of P(P-1) / 2. For example, if the application contains native, Flutter, mini-program, and React Native layers, then communication protocols need to be coordinated between the native and Flutter layers, between the native and mini-program layers, between the native and React Native layers, between the Flutter and mini-program layers, between the Flutter and React Native layers, and between the mini-program and React Native layers. Therefore, this application uses a data base as an intermediate layer to coordinate the communication protocols between the data base and various front-end interaction layers in the application, enabling all front-end interaction layers in the application to communicate with the data base. This reduces the coordination workload from P(P-1) / 2 to P.

[0114] The interaction definition file defines the interaction interface. The interaction interface is the agreement and specification for communication and data exchange between different software modules (such as the front-end interaction layer and the data base). It specifies the methods, parameters, return values, etc., ensuring effective and accurate communication between the data base and the front-end interaction layer. For example, the interaction definition file may include, but is not limited to, the following information: ① A detailed description of the interface function, specifying the input parameters and return values. For example, a `getMessage` method can be defined to obtain a `Message` object (a data object obtained by encapsulating data using the `Message` class mentioned above). ② The type of communication protocol used, such as HTTP for request-response mode and WebSocket for real-time communication mode. Communicating according to the specified communication protocol type avoids communication problems caused by protocol mismatch. ③ Data transmission specifications, such as specifying that data transmission and response should follow the PB format (the core of which is the serialization and deserialization process) and specifying the field type of each field. In other words, the data transmission specifications can be clearly defined through the data definition file. ④ Error handling mechanisms, such as appropriate handling when an error code (a code used to identify abnormal conditions) is received.

[0115] The code generator can convert the interaction interfaces in the interaction definition file into interaction classes in various programming languages. The interaction class is the method corresponding to the interface functionality defined in the interaction definition file. For example, the `getMessage` method in the interaction definition file can be automatically generated by the code generator into a Java-callable `public MessagegetMessage()` method. In this way, the data base and various front-end interaction layers only need to integrate their own programming language's interaction class to easily implement the logic for calling the interaction interface, establishing communication between the data base and various front-end interaction layers in the application. Moreover, this communication mechanism allows various front-end interaction layers to pass instructions (such as page switching instructions) to the data base for processing. After processing the instructions, the data base returns the results (such as page content data) to the corresponding front-end interaction layer for further processing (such as rendering and display), enabling the flow and interaction of data between different software modules.

[0116] Therefore, in this application, the interaction classes used by the data base and various front-end interaction layers are generated according to the interaction interfaces in the interaction definition file. This ensures that all interaction class calls conform to the unified standard defined by the interaction interface. Developers no longer need to write a lot of repetitive code for communication and data interaction between different front-end interaction layers, and can focus more on the implementation of business logic code, which can improve development efficiency and greatly reduce the probability of data errors during transmission and processing.

[0117] (3) The data infrastructure has the ability to solve state management and coordination problems:

[0118] The data storage module of the data base can serve as a centralized storage center, uniformly storing the state data generated by pages from different technology stacks. Various front-end interaction layers only need to call the interaction interface provided by the data base to obtain, store, and update state data, which can solve the problem of state data transmission and sharing, making the management and maintenance of state data more convenient and avoiding duplicate storage of state data.

[0119] Furthermore, during page switching (including switching between pages using different technology stacks and between pages using the same technology stack), the data base can prioritize providing data from the data storage module. If data is not successfully obtained, the data base then requests data from the application server based on its own network communication module. On the one hand, various front-end interaction layers no longer need to invest additional resources in handling complex operations such as network requests and error handling, allowing them to focus more on their own business logic (such as page layout and object interaction), greatly reducing development workload and costs. On the other hand, the data base is developed using a high-performance programming language, which enables it to have more professional network request and data processing capabilities, thereby improving the efficiency of data acquisition.

[0120] (4) The hybrid routing stack has the ability to solve page routing coordination problems:

[0121] The hybrid routing stack provides a unified page routing mechanism that can coordinate page routing implementations under different technology stacks. This ensures consistency and stability when switching between pages of different technology stacks, effectively solving the page routing coordination problem of different technology stacks and providing a unified, stable and efficient page navigation experience.

[0122] The following is a brief introduction to the page processing systems to which this solution can be applied. The page processing systems described below are only for illustrating the embodiments of this application and are not intended to limit the scope. In the specific implementation process, this solution can be flexibly applied according to actual needs.

[0123] Please see Figure 3 This is a schematic diagram of the architecture of a page processing system provided in an embodiment of this application. The page processing system may include terminal devices and application servers. The terminal devices and application servers can be directly or indirectly connected via wired or wireless communication, which is not limited herein. Terminal devices may be mobile phones, tablets, laptops, desktop computers, smart TVs, smart in-vehicle devices, and smart wearable devices, etc. Application servers may be independent physical servers, server clusters composed of multiple physical servers, or distributed systems. They may also be cloud servers that provide basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, content delivery networks (CDNs), and big data and artificial intelligence platforms.

[0124] An application runs on the terminal device. The application server can refer to the application's backend server, providing the necessary environment and support for the application's operation, translating application requests into specific business operations, and returning corresponding results. The terminal device (or the application running on the terminal device) can be used to execute the page processing method of the application proposed in this application.

[0125] The page processing method for the application proposed in the embodiments of this application will be described in detail below. Please refer to [link to relevant documentation]. Figure 4 This is a flowchart illustrating a page processing method for an application provided in an embodiment of this application. The application may include a data base and at least two front-end interaction layers. The page processing method may include, but is not limited to, steps S41-S43:

[0126] S41. Call the first front-end interaction layer to display the first page of the application. Both the first front-end interaction layer and the first page are developed using the first technology stack.

[0127] The first technology stack can be any technology stack used by the application. For example, the first technology stack can be any of the following: Native technology stack, Flutter technology stack, Web technology stack, Mini Program technology stack, React Native technology stack, or Xamarin technology stack. The first front-end interaction layer refers to the front-end interaction layer developed using the first technology stack, and the first page refers to any page developed using the first technology stack. When the first page needs to be displayed in the application, it needs to be called to implement it. The implementation method is similar to the implementation method of calling the second front-end interaction layer to display the second page, which will not be elaborated here.

[0128] S42. In response to a page switching request from the first page to the second page in the application, the first front-end interaction layer instruction data base is invoked to pass the page content data of the second page to the second front-end interaction layer; both the second front-end interaction layer and the second page are developed using the second technology stack.

[0129] The first front-end interaction layer is responsible for the interaction between the object and the first page of the application. For example, the first front-end interaction layer is responsible for receiving page switching requests initiated by the object on the first page. This page switching request is used to request a switch from the first page to the second page of the application. For example, the methods for initiating this page switching request may include, but are not limited to: click events (such as triggering a jump by clicking on controls such as buttons, menus, and links), gesture interactions (such as touch behaviors such as swiping, long pressing, and dragging), and voice commands (such as by recognizing voice: "Open page xx and jump directly").

[0130] The second page refers to a page developed using a second technology stack, and the second front-end interaction layer refers to a front-end interaction layer developed using a second technology stack. The second technology stack differs from the first technology stack; therefore, switching from the first page to the second page involves switching between pages using different technology stacks. To respond to page switching requests, this application invokes the first front-end interaction layer's instruction data base to pass the page content data of the second page to the second front-end interaction layer. In other words, the first front-end interaction layer can instruct the data base to prepare the page content data of the second page in advance, allowing the second front-end interaction layer to directly use the page content data to display the second page. This achieves the functions of data transmission and preloading (i.e., advance request), significantly reducing the complexity of data transmission (because the second front-end interaction layer itself requesting the page content data of the second page may involve communication and interaction between multiple terminals). The page content data of the second page refers to the information actually displayed to the object on the second page, which can be various forms of data such as text, images, videos, and audio. This data is usually dynamically changing and varies depending on different objects, times, scenarios, and other factors.

[0131] In one embodiment, the data base includes a code generator, a data definition file, and an interaction definition file. ① The data definition file defines a page transition data model, and the code generator can be used to convert the page transition data model into page transition data classes for a specific programming language. The page transition data model describes the data involved in the page transition process in a general and standardized way, specifying which fields need to be processed during the page transition, the field types and relationships of these fields, etc.; for example, from... Figure 1When switching from page 11 of the official account to page 13 in the account owner's perspective, it can be specified that information such as the login account identifier and the official account identifier must be transmitted. The page switching data class is a specific code structure implemented using a specific programming language based on the page switching data model. ② The interaction definition file defines the page switching interaction interface, and the code generator is used to convert the page switching interaction interface into a page switching interaction class in a specific programming language. The page switching interaction interface is an abstract specification that defines a series of methods related to the page switching process, such as methods responsible for sending page switching instructions, methods responsible for preloading page content data, methods responsible for sending page content data, etc., and specifies the way different software modules (such as the front-end interaction layer and the data base) interact during the page switching process, such as clarifying how the front-end interaction layer sends page switching instructions to the data base and how the data base responds and prepares and transmits page content data. The page switching interaction class is a specific code structure implemented using a specific programming language based on the page switching interaction interface. ③ The specific programming language can include: the development languages ​​of various front-end interaction layers and the development languages ​​of the data base, so that various front-end interaction layers and data bases can integrate their own page switching data classes and page switching interaction classes. In one implementation, the page switching interaction class integrated by the data base can contain only methods that implement its own responsibilities, and the page switching interaction class integrated by the front-end interaction layer can contain only methods that implement its own responsibilities.

[0132] Based on the above embodiments, the implementation process of S42 will be described in detail below. This implementation process may include the following steps S421-S424:

[0133] S421. In response to a page switching request from the first page to the second page, the first front-end interaction layer is invoked to send a page switching instruction to the data base.

[0134] The page switching instruction can be used to request the data base to preload the page content data of the second page, and to notify the second front-end interaction layer to obtain the page content data of the second page from the data base to render and display the second page.

[0135] The first technology stack includes the first programming language. For example, the React Native technology stack typically uses JavaScript as its development language, so JavaScript is a programming language included in the React Native technology stack. The first front-end interaction layer is developed using the first programming language (e.g., the React Native layer is developed using JavaScript). This means that the first front-end interaction layer can execute code that conforms to the syntax rules of the first programming language. When a page switching request from the first page to the second page is received through the first front-end interaction layer, the page switching data class based on the first programming language can be called to encapsulate the page switching parameters corresponding to the page switching request into a first instruction object and generate the binary data of the first instruction object. The page switching parameters refer to the relevant information carried to accurately and efficiently complete the page switching and meet the display and interaction requirements of the second page; for example, when switching from the first page to the second page... Figure 1 When switching from the official account page 11 to the account owner's perspective page 13, the page switching parameters may include the identifier of the account owner's perspective page 13 (used to uniquely identify the account owner's perspective page 13), the login account identifier, the official account identifier, and other information. The first instruction object is a concrete entity created by encapsulating the page switching parameters of the second page using the page switching data class of the first programming language. The serialization method in the page switching data class of the first programming language can be used to convert the first instruction object into binary data for transmission over the network. The first instruction object is a page switching instruction object that conforms to the syntax of the first programming language. It can represent page switching instructions; that is, it integrates and encapsulates various information required for page switching (such as page switching parameters) in a structured way. After obtaining the binary data of the first instruction object, the first front-end interaction layer can call the page switching interaction class based on the first programming language to send the binary data of the first instruction object to the data base.

[0136] S422, Call the data base to respond to the page switching command and obtain the storage address of the page content data of the second page in the data storage module of the data base.

[0137] The data base is developed in the target programming language (such as C++), meaning it can execute code that conforms to the syntax of the target programming language (such as C++ code). The data base may include a network communication module and a data storage module. In one embodiment, the deserialization method in the data base's page switching data class (based on the target programming language) can be invoked to deserialize the binary data of the first instruction object into a second instruction object. The second instruction object is a page switching instruction object that conforms to the syntax of the target programming language, thus allowing the data base to obtain understandable and processable page switching instructions. The data base can then use the page switching parameters in the second instruction object to detect whether its data storage module contains the page content data of the second page. For example, the page switching parameters may carry information such as the identifier, path, and name of the second page, which can be used as the basis for searching for the page content data of the second page in the data storage module. If the data storage module contains the data, the storage address of the second page's content data in the data storage module of the data base can be directly obtained by calling the data base. If the data storage module does not contain the data, the network communication module of the data base needs to be called to request the second page's content data from the application server and store it in the data storage module of the data base, and then the storage address of the second page's content data in the data storage module of the data base can be obtained.

[0138] In one implementation, the data storage module includes a local storage module and a data cache module. The local storage module refers to the module that stores data locally on the device. The data is persistently stored on the device's own storage medium, and the read and write speed is relatively slow. The data cache module is a module that temporarily stores data, and its purpose is to improve the data access speed. The callable data base, based on the page switching parameters in the second instruction object, checks whether the data cache module contains the page content data of the second page. If the data cache module contains it, the access address of the page content data of the second page in the data cache module is used as the storage address of the page content data of the second page in the data storage module. If the data cache module does not contain it, it checks whether the local storage module contains the page content data of the second page, based on the page switching parameters in the second instruction object. If the local storage module contains it, the page content data of the second page can be loaded from the local storage module into the data cache module, and the access address of the page content data of the second page in the data cache module is used as the storage address of the page content data of the second page in the data storage module. If the local storage module does not contain it, the data base's network communication module is invoked to request the page content data of the second page from the application server and store it in the data cache module, and the access address of the page content data of the second page in the data cache module is used as the storage address of the page content data of the second page in the data storage module. In one feasible implementation, if a preset migration time is reached (e.g., the cache reaches a certain time, the data cache module is short of space, or the application is idle), the page content data of the second page can be migrated from the data cache module to the local storage module.

[0139] S423. Call the data base to send a page switching notification to the second front-end interaction layer. The page switching notification carries the storage address.

[0140] The page switching notification is used to instruct the second front-end interaction layer to retrieve the page content data of the second page from the data base to render and display the second page.

[0141] In one implementation, a page switching data class based on the target programming language can be invoked from the data base to encapsulate the aforementioned storage address (and related information such as the identifier, path, and name of the second page) into a first notification object, generating binary data for the first notification object. The first notification object is a concrete entity created by encapsulating the aforementioned storage address (and related information such as the identifier, path, and name of the second page) using the page switching data class of the target programming language. The serialization method in the page switching data class of the target programming language can be used to convert the first notification object into its binary data for transmission over the network. The first notification object is a page switching notification object conforming to the syntax of the target programming language. The page switching notification object represents a page switching notification; that is, it integrates and encapsulates various information to be conveyed to the second front-end interaction layer, representing the page switching notification in a structured manner. After obtaining the binary data of the first notification object, the page switching interaction class based on the target programming language from the data base can be invoked to send the binary data of the first notification object to the second front-end interaction layer.

[0142] S424. Call the second front-end interaction layer to retrieve the page content data of the second page from the data storage module of the data base based on the storage address in the page switching notification.

[0143] The second technology stack includes a second programming language, which serves as the development language for the second front-end interaction layer. For example, Dart is a programming language included in the Flutter technology stack, and the Flutter layer is developed using Dart. This means the second front-end interaction layer can execute code that conforms to the syntax of the second programming language. In one embodiment, the second front-end interaction layer can call a page switching data class based on the second programming language to deserialize the binary data of the first notification object into a second notification object. The second notification object is a page switching notification object that conforms to the syntax of the second programming language, thus allowing the second front-end interaction layer to obtain understandable and processable page switching notifications. The second front-end interaction layer can also call a page switching interaction class based on the second programming language and retrieve the page content data of the second page from the data storage module of the data base according to the storage address in the second notification object. For example, the page switching data class of the second programming language includes a data retrieval method that can be used to retrieve the page content data of the second page from the data storage module of the data base according to the storage address in the second notification object.

[0144] For example, the data storage module includes a local storage module and a data cache module. The storage address refers to the access address of the page content data of the second page in the data cache module. In one implementation, the page switching data class of the second front-end interaction layer based on the second programming language can be called, and the page content data of the second page can be retrieved from the data cache module according to the storage address in the second notification object.

[0145] In one feasible implementation, page content data can be stored in the data storage module as binary data. After the front-end interaction layer obtains the binary data from the data storage module, it needs to deserialize it in order to obtain the page content data that it can process and understand.

[0146] S43. Call the second front-end interaction layer to render and display the second page based on the page content data of the second page.

[0147] The page code data of the second page defines the structure, style, and interaction logic of each page component within the second page. For example, HTML code can be used to construct the structure of page components in a web page (such as position and hierarchy), CSS code can be used to control the style of page components in a web page (such as font, color, size, spacing, and border style), and JavaScript code can be used to add interaction logic to page components in a web page (such as dynamic content updates, animation effects, and event handling). Page components are the basic units that constitute the visual layout of a page, carrying the page's content, functionality, and interactivity. The page content data of the second page is the specific information to be displayed on the second page. Only by combining the page code data and the page content data of the second page can the second page be fully presented. In one implementation, the second front-end interaction layer can be called to obtain the page code data of the second page. If the page code data of the second page is compiled into the application's installation package, the second front-end interaction layer can be called to obtain the page code data of the second page from the application based on information such as the second page's identifier, path, and name. If the page code data of the second page is not compiled into the application's installation package, then the page code data of the second page is obtained and transmitted along with the page content data of the second page. The second front-end interaction layer can be invoked to parse the page code data of the second page and generate the rendering tree of the second page. The rendering tree of the second page is a key data structure built during the rendering process of the second page, indicating which page components need to be displayed and how they are displayed. For example, if multiple page components need to be displayed on the second page, the rendering tree of the second page can contain multiple rendering nodes. One page component corresponds to one rendering node, and each rendering node can contain the style information (such as font, color, size, spacing, border style, etc.) and structural information (such as box model information (such as the width and height of the content area, padding, border, margin, etc.)) of the corresponding page component. At the same time, each rendering node can be associated with the interaction logic of the corresponding page component. When an object interacts with a page component (such as clicking), the interaction logic associated with the corresponding rendering node will be triggered. The second front-end interaction layer can be invoked to render and display the second page based on the page content data and the rendering tree of the second page. For example, the second front-end interaction layer can be invoked to calculate the accurate position and size of each page component in the second page according to the structural and style information contained in each rendering node in the rendering tree of the second page. Based on the calculated position and size of each page component, each page component can be drawn on the screen, and the page content data of the second page can be used to fill each page component.

[0148] In one implementation, the application includes a hybrid routing stack, shared by at least two front-end interaction layers. The hybrid routing stack is a data structure following a last-in-first-out (LIFO) principle, capable of managing page instances from different technology stacks. For example, it records the type (e.g., native page or lutter page), identifier, and state (e.g., loading state, display / hidden state of page components) of each page instance. For instance, each page in the application corresponds to a page instance, and the hybrid routing stack can be used to place the corresponding page instances sequentially according to the page display order. For example, when switching from page A to page B, and then from page B to page C, the hybrid routing stack, starting from the top, places the following instances sequentially: In the hybrid routing stack, the page instance at the top of the stack corresponds to the page to be displayed. Therefore, before calling the second front-end interaction layer to render and display the second page based on its content data, the second front-end interaction layer can be called to initialize the page instance corresponding to the second page (for example, the Activity method in the Android technology stack can be used to create a page instance). Calling the second front-end interaction layer places the page instance corresponding to the second page at the top of the hybrid routing stack, thus creating and preparing a usable page object for the second page, enabling it to be displayed and interacted with normally. For example, the second front-end interaction layer and the hybrid routing stack can communicate using an interaction class implemented based on the Channel (pipeline) principle to place the page instance corresponding to the second page at the top of the hybrid routing stack. Please see [link to relevant documentation]. Figure 5 This is a schematic diagram of a hybrid routing stack provided in an embodiment of this application. Figure 1 The page instance of the official account page 11 (Flutter page) is located at the top of the hybrid routing stack. When switching from the official account page 11 (Flutter page) to the account owner's perspective page 13 (Native page), the page instance of the account owner's perspective page 13 (Native page) is pushed onto the top of the hybrid routing stack.

[0149] For example, the hybrid routing stack contains N page instances arranged sequentially from bottom to top. The order of the N page instances in the hybrid routing stack represents the display sequence of the corresponding N pages, where N is a positive integer. The N pages include a first page and a second page. The page instance corresponding to the second page is located at the top of the hybrid routing stack, and the page instance corresponding to the first page is located below and adjacent to the top of the hybrid routing stack. The application defines that when a back operation is performed on the second page, it should navigate to the third page. This means that when an object initiates a back operation on the second page, the application must navigate to the third page. If the first page and the application-defined third page are not the same page, the hybrid routing stack needs to be updated so that the page instance of the third page is located below and adjacent to the top of the hybrid routing stack. In this way, in response to a back operation on the second page, the page instance corresponding to the second page can be removed from the hybrid routing stack, and the page instance corresponding to the third page can be controlled to be located at the top of the hybrid routing stack, thus making the third page the page to be displayed.

[0150] For example, please see Figure 6 This is a schematic diagram of a hybrid routing stack provided in an embodiment of this application. Figure 2 The page instance of the official account page 11 (Flutter page) is located at the top of the hybrid routing stack. When switching to the article editing page 15 (mini program page) through the article writing control 16 in the official account page 11 (Flutter page), the page instance of the article editing page 15 is pushed onto the top of the hybrid routing stack. After editing the article, you can switch from the article editing page 15 to the account owner's perspective page 13 (Native page). The application defines that the account owner's perspective page 13 (Native page) should fall back to the official account page 11. Therefore, updating the hybrid routing stack can mean destroying the page instance of the article editing page 15 in the hybrid routing stack, so that you can fall back from the account owner's perspective page 13 (Native page) to the official account page 11.

[0151] In a feasible implementation, each front-end interaction layer can also have its own unique page routing stack. For example, if the page routing stack of the first front-end interaction layer contains a page instance of the first page (located at the top of the stack), the page instance of the first page can be moved to the hybrid routing stack, and then the second front-end interaction layer can be called to place the corresponding page instance of the second page at the top of the hybrid routing stack. When switching from the first page to the third page, which is a page developed using the first technology stack, if the page routing stack of the first front-end interaction layer contains a page instance of the first page (located at the top of the stack), the first front-end interaction layer can be called to place the corresponding page instance of the third page at the top of its own page routing stack; if the hybrid routing stack contains a page instance of the first page (located at the top of the stack), the first front-end interaction layer can be called to place the corresponding page instance of the third page at the top of the hybrid routing stack. On the one hand, independent page routing stacks can more efficiently manage the entry and exit operations of page instances; on the other hand, through the collaborative work of the hybrid routing stack and the page routing stacks of various front-end interaction layers, more flexible page routing logic can be achieved, allowing seamless switching between pages using different technology stacks without noticeable lag or stuttering.

[0152] It should be noted that when the second technology stack is the same as the first technology stack, and the switch from the first page to the second page is a switch between pages of the same technology stack, the page switching method proposed in this application is also applicable.

[0153] Therefore, this application allows switching between pages using different technology stacks, enabling developers to choose the appropriate technology stack to implement specific functions based on different business needs and scenarios, while ensuring collaborative work between different pages. This provides more possibilities for application function expansion and innovation. Moreover, regardless of whether the existing function implementation uses the Flutter, Mini Program, or Web technology stack, new function development can be seamlessly adapted. This means that when expanding functions on the basis of existing projects, there is no need to worry about differences in technology stacks, and new functions can be easily integrated. For example, if the new page is a Flutter page, the data base can ensure that the Flutter layer can communicate with various existing front-end interaction layers to achieve switching between the new page and various existing pages. Furthermore, a single codebase can be used to adapt and generate code that can run on various front-end interaction layers and the data base, greatly reducing development workload and maintenance costs.

[0154] Please see Figure 7 This is an illustration of a page switching scenario provided in an embodiment of this application. Figure 2The first user can enter the official account page 71 (Flutter page) as an author. Clicking the avatar control 72 will switch them to the account owner's perspective page 73 (Native page). The second user can enter the official account page 71 (Flutter page) as a guest. Clicking the avatar control 72 will switch them to the guest's perspective page 74 (Native page). The account owner's perspective page 73 (Native page) and the guest's perspective page 74 (Native page) share common page components, such as page components for displaying articles and page components for displaying avatars. They also have different components, such as the "Write Article" control 75 and the "Post Image and Text" control 76 in the account owner's perspective page 73, which are the "Follow" control 77 in the guest's perspective page 74. To reduce development costs and redundant code, a set of page code data can be reused, and Flag information can be used to identify whether the account owner's perspective page 73 or the guest's perspective page 74 is displayed. For example, if the Flag information is 0, the account owner's perspective page 73 is displayed; if the Flag information is 1, the guest's perspective page 74 is displayed.

[0155] The following uses the second page as an example to illustrate the page reuse scheme described above. The second page can contain variable components and invariant components. For example, the invariant component can be a page component that displays articles, common to both the account owner's perspective page 73 and the visitor's perspective page 74. For instance, a variable component can be a placeholder component. A placeholder component is used to temporarily occupy the position of a specific component and provide a transitional display when that component cannot be loaded immediately or is unavailable. For example, a placeholder component can be set to occupy a position, and then it can be determined whether that position should display the "Write Article" control 75 or the "Follow" control 77. The page code data of the second page includes component description information for the invariant components, as well as M types of component description information for the variable components and corresponding flag information for each type of component description information, where M is an integer greater than 1. The component description information for the invariant components can be used to specify the structure, style, and interaction logic of the invariant component. One component description can correspond to one page component. Each component description can be used to specify the structure, style, and interaction logic of the corresponding page component. For example, M component descriptions include component description 1 and component description 2. Component description 1 specifies the structure, style, and interaction logic of the writing control 75, and component description 2 specifies the structure, style, and interaction logic of the follow control 77. Additionally, each component description can correspond to a flag; for example, component description 1 corresponds to 0, and component description 2 corresponds to 1. At this point, the rendering tree of the second page contains rendering nodes corresponding to immutable components and rendering nodes corresponding to variable components. Calling the second front-end interaction layer to parse the page code data of the second page and generate the rendering tree of the second page includes: when an immutable component is parsed from the page code data of the second page, the second front-end interaction layer can be called to construct the rendering node corresponding to the immutable component in the rendering tree of the second page using the component description information of the immutable component. The rendering structure of the immutable component can contain the style information and structure information of the immutable component, and associate the interaction logic of the immutable component. When a variable component in the page code data of the second page is parsed, the second front-end interaction layer can be invoked to request target flag information matching the second page. For example, the page code data of the second page can have a Falg attribute (used to request a Falg value). The second front-end interaction layer can request target flag information matching the second page from the data base based on this Falg attribute. For instance, when entering the second page as an author, the target flag information matching the second page is 0; when entering the second page as a guest, the target flag information matching the second page is 1. The component description information corresponding to the target flag information can be used to construct rendering nodes corresponding to the variable components in the rendering tree of the second page. The rendering nodes corresponding to the variable components contain the style information and structural information of the page components corresponding to the target flag information, and are associated with the interaction logic of the page components corresponding to the target flag information.When there are multiple variable components, after the target flag information is requested for the first time, each subsequent variable component can save the target flag information so that it can perform operations based on the target flag information when performing operation logic.

[0156] Please see Figure 8 This is a flowchart illustrating a page reuse scheme provided in an embodiment of this application. The page reuse scheme can be executed by a second front-end interaction layer and includes the following steps S81-S86:

[0157] S81, Start rendering the second page.

[0158] S82. Parse the page code data of the second page. When the first page component in the page code data of the second page is parsed, determine whether the first page component is a variable component.

[0159] S83. If the first page component is not a variable component, then render and display the first page component using the component description information of the first page component, and continue to execute S86.

[0160] S84. If the first page component is a variable component, then request the target identifier information that matches the second page.

[0161] S85. Save the target flag information, and determine the component description information corresponding to the target flag information from the M types of component description information of the first page component. Render and display the first page component according to the component description information corresponding to the target flag information. M is an integer greater than 1.

[0162] S86. If the first page component is the last page component in the page code data of the second page, then the rendering of the second page ends; if the first page component is not the last page component in the page code data of the second page, then continue to parse the next page component of the first page component in the page code data of the second page.

[0163] Therefore, in this embodiment of the application, global target identifier information is requested for the second page, so that each variable component in the second page can be rendered and displayed based on the target identifier information. Compared to a solution where page components have multiple rendering logics and then request target flag information to determine which rendering logic to use (e.g., if the target flag information is 0, the first rendering logic is used; if the target flag information is 1, the second rendering logic is used), this application reduces the number of requests, making the code structure clearer, easier to understand and maintain. Furthermore, during the process of a page component requesting target flag information, to avoid blank pages, a placeholder might be generated in the rendering node of the rendering tree. After the target flag information request is completed and the specific rendering logic is determined, the placeholder is removed from the rendering node, and the actual content determined based on the target flag information is added to the rendering node. This involves two rendering operations. In contrast, this application first uses the target flag information to determine the component description information and then directly generates a specific rendering node in the rendering tree, involving only one rendering operation. Therefore, this application can improve page rendering speed and accelerate page display.

[0164] In summary, this application uses a data base to connect various technology stack pages, while reusing, managing, and displaying page components in a multi-layered manner (i.e., displaying different page components based on target identifier information). This reduces development and maintenance costs while ensuring product functionality and user experience.

[0165] Please see Figure 9 This is a schematic diagram of a page from the perspective of an account owner, provided in an embodiment of this application. The page displays articles in the publishing state, articles in the published state, and articles in the published state. Users can refresh the page to check if the publishing status of articles in the publishing state has changed (e.g., changed to published successfully or published unsuccessfully). However, this page update method is too cumbersome for users.

[0166] Based on this, this application proposes a new page update scheme, which is illustrated below using the switching between the first page and the second page as an example. Dynamic data refers to data actively created, modified, or updated by an object, such as articles, social media data, product information, etc. The second page may include a dynamic display area and a stable display area. The dynamic display area is used to display dynamic data in the first publication state, and the stable display area is used to display dynamic data in the second publication state. That is, the dynamic display area refers to the area used to display dynamic data in the first publication state, and the static display area refers to the area used to display dynamic data in the second publication state. Dynamic data in the first publication state refers to dynamic data whose publication state is newly generated and is still being updated or changing, such as the first publication state being the "publishing in progress" state. Dynamic data in the second publication state refers to dynamic data whose publication state is relatively stable, such as the second publication state including the publication success state and the publication failure state. For example, the first page can edit target dynamic data, and the page switching instruction can carry the identifier of the target dynamic data. The identifier of the target dynamic data is returned to the first front-end interaction layer by the application server after requesting the application server to publish the target dynamic data. The callable data base, based on the identifier of the target dynamic data, requests the target dynamic data in its first published state from the application server and notifies the second front-end interaction layer to display the target dynamic data in the first published state in the dynamic display area of ​​the second page. Then, the callable data base polls the application server for the published state of the target dynamic data. When the published state of the target dynamic data changes from the first published state to the second published state, the callable data base notifies the second front-end interaction layer to migrate the target dynamic data in the dynamic display area to the stable display area. Polling is a periodic, proactive communication mechanism for querying the published state. For example, it can poll 5 times in total, with intervals of 1 second, 2 seconds, 4 seconds, 8 seconds, and 16 seconds. This ensures timely updates to the published state of the target dynamic data, migrating it to the stable display area, while limiting multiple requests and avoiding performance degradation.

[0167] Please see Figure 10 This is a flowchart illustrating a page update scheme provided in an embodiment of this application. The page update scheme is jointly executed by a first front-end interaction layer, a data base, a second front-end interaction layer, and an application server. The page update scheme includes the following steps S101-S108:

[0168] S101. When the target dynamic data is published on the first page, the first front-end interaction layer passes the identifier of the target dynamic data to the data base. In a feasible implementation, the first front-end interaction layer may first pass the identifier of the target dynamic data to the second front-end interaction layer. The second front-end interaction layer triggers the update mechanism of the dynamic display area on the second page based on the identifier of the target dynamic data and sends the identifier of the target dynamic data to the data base.

[0169] S102, The data base requests the target dynamic data from the application server based on the identifier of the target dynamic data.

[0170] S103. The application server obtains the target dynamic data and its publication status based on the identifier of the target dynamic data.

[0171] S104. The application server returns the request response information to the data base. The request response information includes the target dynamic data and the publication status of the target dynamic data.

[0172] S105, The data base sends the target dynamic data and the publication status of the target dynamic data to the second front-end interaction layer.

[0173] S106. The second front-end interaction layer displays the target dynamic data on the second page based on the publication status of the target dynamic data. In one implementation, when the publication status of the target dynamic data is the second publication status, the target dynamic data is displayed in the stable display area of ​​the second page; when the publication status of the target dynamic data is the first publication status, the target dynamic data is displayed in the dynamic display area of ​​the second page.

[0174] S107. If the publication status of the target dynamic data is the first publication status, the data base polls the application server for the publication status of the target dynamic data.

[0175] S108. When the publication status of the target dynamic data changes from the first publication status to the second publication status, the data base notifies the second front-end interaction layer to migrate the target dynamic data in the dynamic display area of ​​the second page to the stable display area of ​​the second page. In one implementation, the application server can detect whether the publication status of other dynamic data displayed in the dynamic display area of ​​the second page has changed, and when a change occurs, it returns a change notification message to the data base in the request-response information. The data base can then use the change notification message to notify the second front-end interaction layer to migrate the corresponding dynamic data from the dynamic display area of ​​the second page to the stable display area of ​​the second page.

[0176] Therefore, the embodiments of this application can adopt a timely and proactive polling mechanism to ensure the rapid display of the latest publication status of dynamic data, and the data base can perform polling tasks more efficiently, making it easier to maintain and update the polling logic.

[0177] The methods of the embodiments of this application have been described in detail above. In order to facilitate better implementation of the methods of the embodiments of this application, the apparatus of the embodiments of this application is provided below.

[0178] Figure 11 This is a schematic diagram of the structure of a page processing device for an application provided in an embodiment of this application; the page processing device of this application can be used to execute some or all of the steps in the foregoing method embodiments. The application includes a data base and at least two front-end interaction layers. Please refer to... Figure 11 The page processing device of the application includes the following units: a first processing unit 111, a second processing unit 112 and a third processing unit 113.

[0179] The first processing unit 111 is used to call the first front-end interaction layer to display the first page of the application. Both the first front-end interaction layer and the first page are developed using the first technology stack.

[0180] The second processing unit 112 is used to respond to a page switching request from the first page to the second page in the application, and to call the first front-end interaction layer instruction data base to pass the page content data of the second page to the second front-end interaction layer; both the second front-end interaction layer and the second page are developed using the second technology stack;

[0181] The third processing unit 113 is used to call the second front-end interaction layer to render and display the second page based on the page content data of the second page.

[0182] In one embodiment, the data base includes a data storage module, and the page content data of the second page is stored in the data storage module of the data base;

[0183] In response to a page switching request from the first page to a second page in the application, the second processing unit 112 invokes the first front-end interaction layer instruction data base to pass the page content data of the second page to the second front-end interaction layer, including:

[0184] In response to a page switching request from the first page to the second page, the first processing unit 111 calls the first front-end interaction layer to send a page switching instruction to the data base;

[0185] The system invokes the data base to respond to page switching commands and retrieves the storage address of the second page's content data in the data base's data storage module.

[0186] The data base is invoked to send a page switching notification to the second front-end interaction layer, and the page switching notification carries the storage address.

[0187] The second processing unit 112 calls the second front-end interaction layer to obtain the page content data of the second page from the data storage module of the data base based on the storage address in the page switching notification.

[0188] In one embodiment, the first technology stack includes a first programming language, which is the development language of the first front-end interaction layer; the first processing unit 111 calls the first front-end interaction layer to send a page switching instruction to the data base, including:

[0189] The first front-end interaction layer calls the page switching data class based on the first programming language, encapsulates the page switching parameters corresponding to the page switching request into a first instruction object, and generates the binary data of the first instruction object;

[0190] The first front-end interaction layer calls the page switching interaction class based on the first programming language and sends the binary data of the first instruction object to the data base;

[0191] The first instruction object is a page switching instruction object that conforms to the syntax rules of the first programming language. The page switching instruction object is used to represent page switching instructions.

[0192] In one embodiment, the data base is developed in the target programming language, and the data base also includes a network communication module;

[0193] The second processing unit 112 invokes the data base to respond to the page switching command and obtains the storage address of the page content data of the second page in the data storage module of the data base, including:

[0194] The data base is called based on the page switching data class of the target programming language. The binary data of the first instruction object is deserialized into the second instruction object, which is a page switching instruction object that conforms to the syntax of the target programming language.

[0195] The data base is invoked based on the page switching parameters in the second instruction object to detect whether the data storage module of the data base contains the page content data of the second page;

[0196] If included, the data base is called to obtain the storage address of the page content data of the second page in the data storage module of the data base;

[0197] If not included, the network communication module of the data base is invoked to request the page content data of the second page from the application server and store it in the data storage module of the data base, and the storage address of the page content data of the second page in the data storage module of the data base is obtained.

[0198] In one embodiment, the data base is developed in the target programming language;

[0199] The second processing unit 112 calls the data base to send a page switching notification to the second front-end interaction layer, including:

[0200] The data base is invoked based on the page switching data class of the target programming language, the storage address is encapsulated into a first notification object, and the binary data of the first notification object is generated;

[0201] The data base is invoked based on the page switching interaction class of the target programming language, and the binary data of the first notification object is sent to the second front-end interaction layer;

[0202] The first notification object is a page switching notification object that conforms to the syntax specifications of the target programming language. The page switching notification object is used to represent page switching notifications.

[0203] In one embodiment, the second technology stack includes a second programming language, which is the development language of the second front-end interaction layer; the third processing unit 113 calls the second front-end interaction layer to obtain the page content data of the second page from the data storage module of the data base based on the storage address in the page switching notification, including:

[0204] The second front-end interaction layer calls the page switching data class based on the second programming language to deserialize the binary data of the first notification object into a second notification object. The second notification object is a page switching notification object that conforms to the syntax rules of the second programming language.

[0205] The second front-end interaction layer calls the page switching interaction class based on the second programming language, and retrieves the page content data of the second page from the data storage module of the data base according to the storage address in the second notification object.

[0206] In one embodiment, the data base further includes a code generator, a data definition file, and an interaction definition file; the data definition file defines a page switching data model, and the interaction definition file defines a page switching interaction interface;

[0207] The code generator is used to convert page switching data models into page switching data classes in a specific programming language, and to convert page switching interaction interfaces into page switching interaction classes in a specific programming language.

[0208] Among them, specific development languages ​​include: development languages ​​for various front-end interaction layers and development languages ​​for data base.

[0209] In one embodiment, the third processing unit 113 invokes the second front-end interaction layer to render and display the second page based on the page content data of the second page, including:

[0210] Call the second front-end interaction layer to obtain the page code data of the second page;

[0211] The second front-end interaction layer is invoked to parse the page code data of the second page and generate the rendering tree of the second page;

[0212] The second front-end interaction layer is invoked to render and display the second page based on the page content data and the rendering tree of the second page.

[0213] The second page contains variable components and invariant components. The page code data of the second page contains the component description information of the invariant components, as well as M types of component description information of the variable components and the flag information corresponding to each component description information, where M is an integer greater than 1; the rendering tree of the second page contains the rendering nodes corresponding to the invariant components and the rendering nodes corresponding to the variable components.

[0214] In one embodiment, the third processing unit 113 calls the second front-end interaction layer to parse the page code data of the second page and generate the rendering tree of the second page, including:

[0215] When the invariant component in the page code data of the second page is parsed, the second front-end interaction layer is called to construct the rendering node corresponding to the invariant component in the rendering tree of the second page using the component description information of the invariant component.

[0216] When the variable component in the page code data of the second page is parsed, the second front-end interaction layer is called to request the target identifier information that matches the second page. The component description information corresponding to the target identifier information is used to construct the rendering node corresponding to the variable component in the rendering tree of the second page.

[0217] In one embodiment, the application further includes a hybrid routing stack, which is shared by at least two front-end interaction layers; each page in the application corresponds to a page instance, and the hybrid routing stack is used to place the corresponding page instances in the order of page display, with the page instance at the top of the hybrid routing stack corresponding to the page to be displayed;

[0218] Before the third processing unit 113 calls the second front-end interaction layer to render and display the second page based on the page content data of the second page, it also includes:

[0219] Call the second front-end interaction layer to initialize the page instance corresponding to the second page;

[0220] The second front-end interaction layer is invoked to place the page instance corresponding to the second page at the top of the hybrid routing stack.

[0221] In one embodiment, the hybrid routing stack contains N page instances arranged sequentially from the bottom to the top of the stack. The order of the N page instances in the hybrid routing stack represents the display sequence of the corresponding N pages, where N is a positive integer. The N pages include a first page and a second page. The page instance corresponding to the second page is located at the top of the hybrid routing stack, and the page instance corresponding to the first page is located below and adjacent to the top of the hybrid routing stack. The application defines that when performing a back operation on the second page, it should return to the third page. The third processing unit 113 is further configured to:

[0222] If the first page is not the same page as the third page defined by the application, then update the hybrid routing stack so that the page instance of the third page is located below the top of the hybrid routing stack and adjacent to the top of the stack.

[0223] In one embodiment, the third processing unit 113 is further configured to:

[0224] In response to a back operation on the second page, the page instance corresponding to the second page is removed from the hybrid routing stack, and the page instance corresponding to the third page is placed at the top of the hybrid routing stack; and,

[0225] The third page is displayed.

[0226] In one embodiment, the first page contains target dynamic data, and the second page includes a dynamic display area and a stable display area. The dynamic display area is used to display dynamic data in a first publication state, and the stable display area is used to display dynamic data in a second publication state. The page switching instruction carries an identifier of the target dynamic data. The second processing unit 112 is further configured to:

[0227] The data base requests the target dynamic data of the first published state from the application server based on the identifier of the target dynamic data, and notifies the second front-end interaction layer to display the target dynamic data of the first published state in the dynamic display area of ​​the second page.

[0228] The data base is invoked to poll the application server for the publication status of the target dynamic data.

[0229] When the publication status of the target dynamic data changes from the first publication status to the second publication status, the data base is invoked to notify the second front-end interaction layer to migrate the target dynamic data in the dynamic display area to the stable display area.

[0230] According to one embodiment of this application, Figure 11The various units in the page processing apparatus of the application shown can be individually or entirely merged into one or more other units, or some of the units can be further divided into multiple functionally smaller units. This can achieve the same operation without affecting the technical effect of the embodiments of this application. The above units are based on logical function division. In practical applications, the function of one unit can also be implemented by multiple units, or the function of multiple units can be implemented by one unit. In other embodiments of this application, the page processing apparatus of the application may also include other units. In practical applications, these functions can also be implemented with the assistance of other units, and can be implemented by multiple units working together. According to another embodiment of this application, a computer program (including program code) capable of performing the steps involved in the aforementioned method can be constructed by running a computer program (including program code) on a general-purpose computing device, such as a computer, which includes processing elements and storage elements such as a central processing unit (CPU), random access storage medium (RAM), and read-only storage medium (ROM), to construct the page processing apparatus of the application shown. Figure 11 The page processing apparatus for the application shown herein, and the page processing method for implementing the application of the embodiments of this application, are described. The computer program may be recorded on, for example, a computer-readable recording medium, loaded onto the aforementioned computing device via the computer-readable recording medium, and run therein.

[0231] In this embodiment, the application includes at least two front-end interaction layers, such as a first front-end interaction layer and a second front-end interaction layer. The first front-end interaction layer is developed using a first technology stack and can be used to display a first page developed using the first technology stack in the application. The second front-end interaction layer is developed using a second technology stack and can be used to display a second page developed using the second technology stack in the application. Therefore, this application is applicable to scenarios where pages using different technology stacks coexist. Furthermore, the application also includes a data base. In response to a page switching request from the first page to the second page, the first front-end interaction layer can instruct the data base to pass the page content data of the second page to the second front-end interaction layer, and then the second front-end interaction layer can render and display the second page based on the page content data. Thus, the data base, as an intermediate layer, provides unified data services, shielding the differences between different technology stacks. The data base coordinates the work of various front-end interaction layers, allowing each front-end interaction layer to focus only on its interaction logic with the data base. This effectively addresses the page switching coordination issues caused by different technology stacks and ensures a smooth transition between pages using different technology stacks.

[0232] Please see Figure 12 This is a schematic diagram of the structure of a computer device provided in an embodiment of this application. Figure 12As shown, the computer device 120 may include an input device 121, an output device 122, a processor 123, a memory 124, a network interface 125, and at least one communication bus 126. The processor 123 may be a Central Processing Unit (CPU). The processor may further include hardware chips. These hardware chips may be application-specific integrated circuits (ASICs), programmable logic devices (PLDs), etc. The PLDs may be field-programmable gate arrays (FPGAs), generic array logic (GALs), etc.

[0233] Memory 124 may include volatile memory, such as random-access memory (RAM); memory 124 may also include non-volatile memory, such as flash memory, solid-state drive (SSD), etc.; memory 124 may be high-speed RAM or non-volatile memory, such as at least one disk drive. Optionally, memory 124 may also be at least one storage device located remotely from the aforementioned processor 123. Memory 124 may also include combinations of the above-mentioned types of memory. Figure 12 As shown, the memory 124, which is a computer-readable storage medium, may include an operating system, a network communication module, an object interface module, and a device control application.

[0234] The network interface 125 may include a standard wired interface or a wireless interface (such as a Wi-Fi interface) for providing data communication functions; the communication bus 126 is responsible for connecting various communication components; the input device 121 receives instructions from the object input to generate signal inputs related to the object settings and function control of the terminal device. In one embodiment, the input device 121 includes, but is not limited to, one or more of a touch panel, a physical keyboard or virtual keyboard, function keys, and a mouse; the output device 122 is used to output data information and may include a display screen or other display device; the processor 123 is the control center of the terminal device, connected to various parts of the entire terminal device by various interfaces and lines, and performs various functions by scheduling and running computer programs stored in the memory 124.

[0235] The processor 123 can be used to call a computer program in memory to perform the following operations:

[0236] The first front-end interaction layer is invoked to display the first page of the application. Both the first front-end interaction layer and the first page are developed using the first technology stack.

[0237] In response to a page switching request from the first page to the second page in the application, the first front-end interaction layer instruction data base is invoked to pass the page content data of the second page to the second front-end interaction layer; both the second front-end interaction layer and the second page are developed using the second technology stack.

[0238] The second front-end interaction layer is invoked to render and display the second page based on the page content data of the second page.

[0239] In one embodiment, the data base includes a data storage module, and the page content data of the second page is stored in the data storage module of the data base;

[0240] In response to a page switching request from a first page to a second page in the application, processor 123 invokes the first front-end interaction layer instruction data base to pass the page content data of the second page to the second front-end interaction layer, including:

[0241] In response to a page switching request from the first page to the second page, the first front-end interaction layer is invoked to send a page switching instruction to the data base.

[0242] The system invokes the data base to respond to page switching commands and retrieves the storage address of the second page's content data in the data base's data storage module.

[0243] The data base is invoked to send a page switching notification to the second front-end interaction layer, and the page switching notification carries the storage address.

[0244] The second front-end interaction layer is invoked to retrieve the page content data of the second page from the data storage module of the data base based on the storage address in the page switching notification.

[0245] In one embodiment, the first technology stack includes a first programming language, which is the development language of the first front-end interaction layer; the processor 123 calls the first front-end interaction layer to send a page switching instruction to the data base, including:

[0246] The first front-end interaction layer calls the page switching data class based on the first programming language, encapsulates the page switching parameters corresponding to the page switching request into a first instruction object, and generates the binary data of the first instruction object;

[0247] The first front-end interaction layer calls the page switching interaction class based on the first programming language and sends the binary data of the first instruction object to the data base;

[0248] The first instruction object is a page switching instruction object that conforms to the syntax rules of the first programming language. The page switching instruction object is used to represent page switching instructions.

[0249] In one embodiment, the data base is developed in the target programming language, and the data base also includes a network communication module;

[0250] Processor 123 invokes the data base to respond to the page switching instruction and obtains the storage address of the page content data of the second page in the data storage module of the data base, including:

[0251] The data base is called based on the page switching data class of the target programming language. The binary data of the first instruction object is deserialized into the second instruction object, which is a page switching instruction object that conforms to the syntax of the target programming language.

[0252] The data base is invoked based on the page switching parameters in the second instruction object to detect whether the data storage module of the data base contains the page content data of the second page;

[0253] If included, the data base is called to obtain the storage address of the page content data of the second page in the data storage module of the data base;

[0254] If not included, the network communication module of the data base is invoked to request the page content data of the second page from the application server and store it in the data storage module of the data base, and the storage address of the page content data of the second page in the data storage module of the data base is obtained.

[0255] In one embodiment, the data base is developed in the target programming language; the processor 123 calls the data base to send a page switching notification to the second front-end interaction layer, including:

[0256] The data base is invoked based on the page switching data class of the target programming language, the storage address is encapsulated into a first notification object, and the binary data of the first notification object is generated;

[0257] The data base is invoked based on the page switching interaction class of the target programming language, and the binary data of the first notification object is sent to the second front-end interaction layer;

[0258] The first notification object is a page switching notification object that conforms to the syntax specifications of the target programming language. The page switching notification object is used to represent page switching notifications.

[0259] In one embodiment, the second technology stack includes a second programming language, which is the development language of the second front-end interaction layer. The processor 123 calls the second front-end interaction layer to retrieve page content data of the second page from the data storage module of the data base based on the storage address in the page switching notification. This includes:

[0260] The second front-end interaction layer calls the page switching data class based on the second programming language to deserialize the binary data of the first notification object into a second notification object. The second notification object is a page switching notification object that conforms to the syntax rules of the second programming language.

[0261] The second front-end interaction layer calls the page switching interaction class based on the second programming language, and retrieves the page content data of the second page from the data storage module of the data base according to the storage address in the second notification object.

[0262] In one embodiment, the data base further includes a code generator, a data definition file, and an interaction definition file; the data definition file defines a page switching data model, and the interaction definition file defines a page switching interaction interface;

[0263] The code generator is used to convert page switching data models into page switching data classes in a specific programming language, and to convert page switching interaction interfaces into page switching interaction classes in a specific programming language.

[0264] Among them, specific development languages ​​include: development languages ​​for various front-end interaction layers and development languages ​​for data base.

[0265] In one embodiment, the processor 123 invokes the second front-end interaction layer to render and display the second page based on the page content data of the second page, including:

[0266] Call the second front-end interaction layer to obtain the page code data of the second page;

[0267] The second front-end interaction layer is invoked to parse the page code data of the second page and generate the rendering tree of the second page;

[0268] The second front-end interaction layer is invoked to render and display the second page based on the page content data and the rendering tree of the second page.

[0269] The second page contains variable components and invariant components. The page code data of the second page contains the component description information of the invariant components, as well as M types of component description information of the variable components and the flag information corresponding to each component description information, where M is an integer greater than 1; the rendering tree of the second page contains the rendering nodes corresponding to the invariant components and the rendering nodes corresponding to the variable components.

[0270] In one embodiment, processor 123 invokes a second front-end interaction layer to parse the page code data of the second page and generate the rendering tree of the second page, including:

[0271] When the invariant component in the page code data of the second page is parsed, the second front-end interaction layer is called to construct the rendering node corresponding to the invariant component in the rendering tree of the second page using the component description information of the invariant component.

[0272] When the variable component in the page code data of the second page is parsed, the second front-end interaction layer is called to request the target identifier information that matches the second page. The component description information corresponding to the target identifier information is used to construct the rendering node corresponding to the variable component in the rendering tree of the second page.

[0273] In one embodiment, the application further includes a hybrid routing stack, which is shared by at least two front-end interaction layers; each page in the application corresponds to a page instance, and the hybrid routing stack is used to place the corresponding page instances in the order of page display, with the page instance at the top of the hybrid routing stack corresponding to the page to be displayed;

[0274] Before processor 123 calls the second front-end interaction layer to render and display the second page based on the page content data of the second page, it also includes:

[0275] Call the second front-end interaction layer to initialize the page instance corresponding to the second page;

[0276] The second front-end interaction layer is invoked to place the page instance corresponding to the second page at the top of the hybrid routing stack.

[0277] In one embodiment, the hybrid routing stack contains N page instances arranged sequentially from the bottom to the top of the stack. The order of the N page instances in the hybrid routing stack represents the display timing of the corresponding N pages, where N is a positive integer. The N pages include a first page and a second page. The page instance corresponding to the second page is located at the top of the hybrid routing stack, and the page instance corresponding to the first page is located below and adjacent to the top of the hybrid routing stack. The application defines that when performing a back operation on the second page, it should return to the third page. The processor 123 is further configured to:

[0278] If the first page is not the same page as the third page defined by the application, then update the hybrid routing stack so that the page instance of the third page is located below the top of the hybrid routing stack and adjacent to the top of the stack.

[0279] In one embodiment, the processor 123 is further configured to:

[0280] In response to a back operation on the second page, the page instance corresponding to the second page is removed from the hybrid routing stack, and the page instance corresponding to the third page is placed at the top of the hybrid routing stack; and,

[0281] The third page is displayed.

[0282] In one embodiment, the first page contains target dynamic data, and the second page includes a dynamic display area and a stable display area. The dynamic display area displays dynamic data in a first publication state, and the stable display area displays dynamic data in a second publication state. The page switching instruction carries an identifier of the target dynamic data. The processor 123 is further configured to:

[0283] The data base requests the target dynamic data of the first published state from the application server based on the identifier of the target dynamic data, and notifies the second front-end interaction layer to display the target dynamic data of the first published state in the dynamic display area of ​​the second page.

[0284] The data base is invoked to poll the application server for the publication status of the target dynamic data.

[0285] When the publication status of the target dynamic data changes from the first publication status to the second publication status, the data base is invoked to notify the second front-end interaction layer to migrate the target dynamic data in the dynamic display area to the stable display area.

[0286] Based on the same inventive concept, the principle and beneficial effects of the computer device provided in the embodiments of this application in solving the problem are similar to the principle and beneficial effects of the page processing method of the application in the method embodiments of this application in solving the problem. Please refer to the principle and beneficial effects of the implementation of the method. For the sake of brevity, they will not be repeated here.

[0287] In the embodiments of this application, the terms "module" or "unit" refer to a computer program or part of a computer program that has a predetermined function and works with other related parts to achieve a predetermined goal, and can be implemented wholly or partially using software, hardware (such as processing circuitry or memory), or a combination thereof. Similarly, a processor (or multiple processors or memory) can be used to implement one or more modules or units. Furthermore, each module or unit can be part of an overall module or unit that includes the functionality of that module or unit.

[0288] In this application embodiment, the collection and processing of relevant data should strictly comply with the requirements of relevant laws and regulations. The acquisition of personal information must be based on the knowledge or consent of the individual (or have a legal basis for information acquisition), and subsequent data use and processing should be carried out within the scope of laws and regulations and the authorization of the personal information subject.

[0289] Furthermore, it should be noted that embodiments of this application also provide a computer-readable storage medium storing a computer program for the aforementioned page processing method of the application. This computer program includes computer instructions, which, when loaded and executed by one or more processors, can implement the page processing method of the application described in the embodiments, which will not be repeated here. The beneficial effects of using the same method will also not be repeated here. It is understood that the computer instructions can be deployed on one or more computer devices capable of communicating with each other for execution.

[0290] The aforementioned computer-readable storage medium can be the page processing apparatus of the application provided in any of the foregoing embodiments or the internal storage unit of the aforementioned computer device, such as the hard disk or memory of the computer device. The computer-readable storage medium can also be an external storage device of the computer device, such as a plug-in hard disk, smart media card (SMC), secure digital (SD) card, flash card, etc., provided on the computer device. Furthermore, the computer-readable storage medium may include both internal storage units and external storage devices of the computer device. The computer-readable storage medium is used to store the computer program and other programs and data required by the computer device. The computer-readable storage medium can also be used to temporarily store data that has been output or will be output.

[0291] This application provides a computer program product or computer program that includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform a method provided in one aspect of the embodiments of this application.

[0292] In one aspect of this application, another computer program product is provided, which includes a computer program or computer instructions that, when executed by a processor, implement the steps of the page processing method of the application provided in the embodiments of this application.

[0293] The above-disclosed embodiments are merely preferred embodiments of this application and should not be construed as limiting the scope of this application. Therefore, any equivalent variations made in accordance with the claims of this application shall still fall within the scope of this application.

Claims

1. A page processing method for an application, characterized in that, The application includes a data base and at least two front-end interaction layers, and the method includes: The first front-end interaction layer is invoked to display the first page of the application. Both the first front-end interaction layer and the first page are developed using the first technology stack. In response to a page switching request from the first page to a second page in the application, the first front-end interaction layer is invoked to instruct the data base to pass the page content data of the second page to the second front-end interaction layer; both the second front-end interaction layer and the second page are developed using the second technology stack. The second front-end interaction layer is invoked to render and display the second page based on the page content data of the second page.

2. The method as described in claim 1, characterized in that, The data base includes a data storage module, and the page content data of the second page is stored in the data storage module of the data base; The step of responding to a page switching request from the first page to a second page in the application, by instructing the data base to pass the page content data of the second page to the second front-end interaction layer, includes: In response to a page switching request from the first page to the second page, the first front-end interaction layer is invoked to send a page switching instruction to the data base; The data base is invoked to respond to the page switching instruction and obtain the storage address of the page content data of the second page in the data storage module of the data base; The data base is invoked to send a page switching notification to the second front-end interaction layer, and the page switching notification carries the storage address. The second front-end interaction layer is invoked to retrieve the page content data of the second page from the data storage module of the data base based on the storage address in the page switching notification.

3. The method as described in claim 2, characterized in that, The first technology stack includes a first programming language, which is the development language of the first front-end interaction layer; the step of calling the first front-end interaction layer to send a page switching instruction to the data base includes: The first front-end interaction layer calls the page switching data class based on the first programming language, encapsulates the page switching parameters corresponding to the page switching request into a first instruction object, and generates the binary data of the first instruction object; The first front-end interaction layer calls the page switching interaction class based on the first programming language to send the binary data of the first instruction object to the data base; The first instruction object is a page switching instruction object that conforms to the syntax rules of the first programming language, and the page switching instruction object is used to represent the page switching instruction.

4. The method as described in claim 3, characterized in that, The data base is developed in the target programming language and also includes a network communication module. The step of invoking the data base to respond to the page switching instruction and obtaining the storage address of the page content data of the second page in the data storage module of the data base includes: The data base is invoked to call the page switching data class based on the target programming language, and the binary data of the first instruction object is deserialized into a second instruction object. The second instruction object is a page switching instruction object that conforms to the syntax specification of the target programming language. The data base is invoked to detect whether the data storage module of the data base contains the page content data of the second page based on the page switching parameters in the second instruction object; If included, the data base is invoked to obtain the storage address of the page content data of the second page in the data storage module of the data base; If not included, the network communication module of the data base is invoked to request the page content data of the second page from the application server and store it in the data storage module of the data base, and the storage address of the page content data of the second page in the data storage module of the data base is obtained.

5. The method as described in claim 2, characterized in that, The data base is developed using Target Programming Language; The step of invoking the data base to send a page switching notification to the second front-end interaction layer includes: The data base is invoked to encapsulate the storage address into a first notification object based on the page switching data class of the target programming language, and the binary data of the first notification object is generated. The data base invokes a page switching interaction class based on the target programming language to send the binary data of the first notification object to the second front-end interaction layer; The first notification object is a page switching notification object that conforms to the syntax specifications of the target programming language, and the page switching notification object is used to represent the page switching notification.

6. The method as described in claim 5, characterized in that, The second technology stack includes a second programming language, which is the development language of the second front-end interaction layer; the step of calling the second front-end interaction layer to obtain the page content data of the second page from the data storage module of the data base based on the storage address in the page switching notification includes: The second front-end interaction layer calls the page switching data class based on the second programming language to deserialize the binary data of the first notification object into a second notification object. The second notification object is a page switching notification object that conforms to the syntax specification of the second programming language. The second front-end interaction layer invokes the page switching interaction class based on the second programming language, and retrieves the page content data of the second page from the data storage module of the data base according to the storage address in the second notification object.

7. The method according to any one of claims 3-6, characterized in that, The data base also includes a code generator, a data definition file, and an interaction definition file; the data definition file defines a page switching data model, and the interaction definition file defines a page switching interaction interface; The code generator is used to convert the page switching data model into a page switching data class in a specific programming language, and to convert the page switching interaction interface into a page switching interaction class in the specific programming language. The specific development languages ​​include: the development languages ​​of the various front-end interaction layers and the development languages ​​of the data base.

8. The method as described in claim 1, characterized in that, The step of calling the second front-end interaction layer to render and display the second page based on the page content data of the second page includes: Call the second front-end interaction layer to obtain the page code data of the second page; The second front-end interaction layer is invoked to parse the page code data of the second page and generate the rendering tree of the second page; The second front-end interaction layer is invoked to render and display the second page based on the page content data of the second page and the rendering tree of the second page.

9. The method as described in claim 8, characterized in that, The second page contains variable components and invariant components. The page code data of the second page contains component description information of the invariant components, as well as M types of component description information of the variable components and flag information corresponding to each type of component description information, where M is an integer greater than 1. The rendering tree of the second page contains rendering nodes corresponding to the invariant components and rendering nodes corresponding to the variable components. The step of calling the second front-end interaction layer to parse the page code data of the second page and generate the rendering tree of the second page includes: When an invariant component is parsed in the page code data of the second page, the second front-end interaction layer is called to construct the rendering node corresponding to the invariant component in the rendering tree of the second page using the component description information of the invariant component. When a variable component in the page code data of the second page is parsed, the second front-end interaction layer is called to request the target identifier information that matches the second page, and the component description information corresponding to the target identifier information is used to construct the rendering node corresponding to the variable component in the rendering tree of the second page.

10. The method as described in claim 1, characterized in that, The application also includes a hybrid routing stack, which is shared by the at least two front-end interaction layers; each page in the application corresponds to a page instance, and the hybrid routing stack is used to place the corresponding page instances in the order of page display, with the page instance at the top of the hybrid routing stack corresponding to the page to be displayed; Before invoking the second front-end interaction layer to render and display the second page based on the page content data of the second page, the method further includes: The second front-end interaction layer is invoked to initialize the page instance corresponding to the second page; The second front-end interaction layer is invoked to place the page instance corresponding to the second page at the top of the hybrid routing stack.

11. The method as described in claim 10, characterized in that, The hybrid routing stack contains N page instances arranged sequentially from the bottom to the top. The arrangement order of the N page instances in the hybrid routing stack represents the display sequence of the corresponding N pages, where N is a positive integer. The N pages include the first page and the second page. The page instance corresponding to the second page is located at the top of the hybrid routing stack, and the page instance corresponding to the first page is located below and adjacent to the top of the hybrid routing stack. The application defines that when a back operation is performed on the second page, the user should be redirected to the third page; the method further includes: If the first page and the third page defined by the application are not the same page, then update the hybrid routing stack so that the page instance of the third page is located below the top of the hybrid routing stack and adjacent to the top of the stack.

12. The method as described in claim 11, characterized in that, The method further includes: In response to the rollback operation performed on the second page, the page instance corresponding to the second page is removed from the hybrid routing stack, and the page instance corresponding to the third page is positioned at the top of the hybrid routing stack; and, The third page is displayed.

13. The method as described in claim 2, characterized in that, The first page contains target dynamic data for editing, and the second page includes a dynamic display area and a stable display area. The dynamic display area is used to display dynamic data in a first publication state, and the stable display area is used to display dynamic data in a second publication state. The page switching instruction carries an identifier of the target dynamic data; the method further includes: The data base is invoked to request the target dynamic data of the first publication state from the application server based on the identifier of the target dynamic data, and to notify the second front-end interaction layer to display the target dynamic data of the first publication state in the dynamic display area of ​​the second page. The data base is invoked to poll the application server for the publication status of the target dynamic data. When the publication status of the target dynamic data changes from the first publication status to the second publication status, the data base is invoked to notify the second front-end interaction layer to migrate the target dynamic data in the dynamic display area to the stable display area for display.

14. A page processing apparatus for an application, characterized in that, The application includes a data base and at least two front-end interaction layers, and the device includes: The first processing unit is used to call the first front-end interaction layer to display the first page of the application. Both the first front-end interaction layer and the first page are developed using the first technology stack. The second processing unit is configured to respond to a page switching request from the first page to the second page in the application by instructing the first front-end interaction layer to transmit the page content data of the second page to the second front-end interaction layer; both the second front-end interaction layer and the second page are developed using the second technology stack. The third processing unit is used to call the second front-end interaction layer to render and display the second page based on the page content data of the second page.

15. A computer device, characterized in that, include: Processor, memory, and network interface; The processor is connected to the memory and the network interface, wherein the network interface is used to provide network communication functions, the memory is used to store program code, and the processor is used to call the program code to execute the page processing method of the application according to any one of claims 1 to 13.

16. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program, the computer program including computer instructions, which, when executed by a processor, perform the page processing method of the application program according to any one of claims 1 to 13.

17. A computer program product, characterized in that, The computer program product includes a computer program or computer instructions that, when executed by a processor, implement the steps of the page processing method of the application as described in any one of claims 1 to 13.

Images