Page display method and device, electronic equipment and storage medium

Abstract

The application provides a page display method and device, electronic equipment and storage medium. The method comprises the following steps: in response to an initial jump request of a first page, putting a first page instance into a route stack and putting first page data into a data stack; obtaining the first page instance from the route stack and obtaining the first page data from the data stack; generating and displaying the first page according to the first page instance and the first page data; in response to a back jump request from a second page to the first page, popping the second page instance from the route stack and popping the second page data from the data stack; and finally, obtaining the first page instance from the route stack again and obtaining the first page data from the data stack, and generating and displaying the first page again according to the first page instance and the first page data. The application converts the covering and emptying operations of page data into the stacking and popping operations in the data stack, and realizes the coexistence of multiple sets of page data in the data stack, which can meet the back jump display requirements of the page.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a page display method, device, electronic device, and storage medium. Background Art

[0002] As the functionality of various applications continues to grow, many types of pages require multiple page instances and multiple sets of page data within the routing chain, such as product detail pages and video detail pages. Currently, for systems developed using the react-redux and react-navigation architectures, the react-redux model's store object only stores a single piece of page data at a time. Under this approach, when navigating from page A1 to page A2, A2's page data overwrites A1's page data to ensure complete display of page A2. However, when navigating back to page A1 from page A2, A2's page data is cleared. At this point, the store object contains neither A2's nor A1's page data, causing page A1 to display abnormally and fail. To ensure normal display, page A1 must be refreshed or reinitialized, restoring A1's page data to the store object before it can be read and displayed. This affects the display quality of page A1.

[0003] Therefore, the current single storage mode of page data cannot meet the display requirements when the page jumps back and needs to be improved. Summary of the Invention

[0004] Embodiments of the present application provide a page display method, device, electronic device, and storage medium to alleviate the technical problem that a single storage mode of current page data cannot meet the display requirements when the page jumps back.

[0005] To solve the above technical problems, the embodiments of the present application provide the following technical solutions:

[0006] This application provides a page display method, including:

[0007] In response to an initial jump request for the first page, placing the first page instance into a routing stack and placing the first page data into a data stack;

[0008] Obtaining the first page instance from the routing stack, obtaining the first page data from the data stack, and generating and displaying the first page according to the first page instance and the first page data;

[0009] In response to a jump request from the first page to the second page, placing the second page instance into a routing stack and placing the second page data into a data stack;

[0010] Obtaining the second page instance from the routing stack, obtaining the second page data from the data stack, and generating and displaying the second page according to the second page instance and the second page data;

[0011] In response to a jump back request from the second page to the first page, popping the second page instance from the routing stack and popping the second page data from the data stack;

[0012] The first page instance is again obtained from the routing stack, the first page data is obtained from the data stack, and the first page is again generated and displayed based on the first page instance and the first page data.

[0013] In one embodiment, in response to an initial jump request of a first page, the steps of placing the first page instance into a routing stack and placing the first page data into a data stack include:

[0014] In response to the initial jump request of the first page, the first page instance is placed in the react-navigation routing stack;

[0015] Generate a push action through the action object of the react-redux model, and distribute the push action to the reducer object of the react-redux model;

[0016] The push action is processed by the reducer object, and the first page data is put into the data stack in the store object.

[0017] In one embodiment, before the step of responding to the initial jump request of the first page, the method further includes:

[0018] Allocating a plurality of routing location intervals in the routing stack, each routing location interval including at least two routing locations, each routing location being used to store a page instance, the page instances corresponding to the same routing location interval being associated with each other, and the page instances corresponding to different routing location intervals being unassociated with each other;

[0019] Allocating a plurality of data location intervals in the data stack, each of the data location intervals including at least two data locations, each of the data locations being used to store one page of data, the pages of data corresponding to the same data location interval being associated with each other, and the pages of data corresponding to different data location intervals being unassociated with each other;

[0020] A position correspondence is established between each routing position interval of the routing stack and each data position interval of the data stack.

[0021] In one embodiment, the steps of obtaining the first page instance from the routing stack and obtaining the first page data from the data stack include:

[0022] Obtaining a target routing location interval of the first page instance in the routing stack, and determining a target data location interval of the first page data in the data stack according to the target routing location interval and the location correspondence;

[0023] Obtaining a first page index, determining a target routing location from the target routing location interval according to the first page index, and obtaining the first page instance from the target routing location;

[0024] According to the target routing position and the position correspondence, a target data position of the first page data in the target data position interval is determined, and the first page data is acquired from the target data position.

[0025] In one embodiment, the step of obtaining the first page data from the data stack and generating and displaying the first page according to the first page data and the first page instance includes:

[0026] Obtaining a first page index, and passing the first page index to each component of the first page instance, so that each component searches for each portion of sub-data in the first page data from the data stack based on the first page index;

[0027] Fill each part of the sub-data of the first page data into each of the components respectively to display the first page.

[0028] In one embodiment, in response to a bounce request from the second page to the first page, the steps of popping the second page instance from the routing stack and popping the second page data from the data stack include:

[0029] In response to a bounce request from the second page to the first page, popping the second page instance from the react-navigation routing stack;

[0030] Generate a pop action through the action object, and distribute the pop action to the reducer object;

[0031] The reducer object processes the pop action to pop the second page data from the data stack in the store object.

[0032] In one embodiment, after the step of generating and displaying the first page, the method further includes:

[0033] In response to a page data management request for a target page, generating an in-stack element management action through the action object, and distributing the in-stack element management action to a corresponding reducer object;

[0034] The reducer object processes the stack element management action, determines the target page data in the data stack as the target stack element, and performs a management operation on the target stack element.

[0035] At the same time, the embodiment of the present application also provides a page display device, including:

[0036] A first stacking module, configured to, in response to an initial jump request of the first page, place the first page instance into the routing stack and place the first page data into the data stack;

[0037] a first display module, configured to obtain the first page instance from the routing stack, obtain the first page data from the data stack, and generate and display the first page according to the first page instance and the first page data;

[0038] A second stacking module, configured to, in response to a jump request from the first page to the second page, place the second page instance into the routing stack and place the second page data into the data stack;

[0039] a second display module, configured to obtain the second page instance from the routing stack, obtain the second page data from the data stack, and generate and display the second page according to the second page instance and the second page data;

[0040] a popping module, configured to pop the second page instance from the routing stack and the second page data from the data stack in response to a bounce request from the second page to the first page;

[0041] A third display module is configured to obtain the first page instance from the routing stack again, obtain the first page data from the data stack, and generate and display the first page again based on the first page instance and the first page data.

[0042] The present application also provides an electronic device, comprising a memory and a processor; the memory stores an application, and the processor is used to run the application in the memory to execute the steps in any of the above-mentioned page display methods.

[0043] An embodiment of the present application provides a computer-readable storage medium, which stores a plurality of instructions suitable for loading by a processor to execute the steps in the above-mentioned page display method.

[0044] Beneficial effect: The present application provides a page display method, device, electronic device and storage medium. The method first responds to an initial jump request of a first page, puts a first page instance into a routing stack, puts the first page data into a data stack, then obtains the first page instance from the routing stack, obtains the first page data from the data stack, generates and displays the first page according to the first page instance and the first page data, and then responds to a jump request from the first page to the second page, puts the second page instance into the routing stack, puts the second page data into the data stack, obtains the second page instance from the routing stack, obtains the second page data from the data stack, generates and displays the second page according to the second page instance and the second page data, and finally responds to a back jump request from the second page to the first page, pops the second page instance from the routing stack, pops the second page data from the data stack, then obtains the first page instance from the routing stack again, obtains the first page data from the data stack, and generates and displays the first page again according to the first page instance and the first page data. This application sets up a data stack and puts the page data corresponding to each page into the data stack when each page initially jumps. When it is necessary to jump back to this page from other pages, the page data can be directly obtained from the data stack for display. By converting the overwriting and clearing operations of page data in the current single storage mode into push and pop operations in the data stack, multiple sets of page data can coexist in the data stack, which can meet the display requirements of any page when jumping back. BRIEF DESCRIPTION OF THE DRAWINGS

[0045] The following detailed description of the specific embodiments of the present application in conjunction with the accompanying drawings will make the technical solutions and other beneficial effects of the present application apparent.

[0046] Figure 1 It is a flow chart of the page display method provided in an embodiment of the present application.

[0047] Figure 2 The diagram is a schematic diagram of the architecture of a page display method in the prior art.

[0048] Figure 3 Schematic diagram of the architecture of the page display method in the embodiment of the present application.

[0049] Figure 4 The figure is a schematic diagram of the process of an error occurring when a page jumps back in the prior art.

[0050] Figure 5 This is a schematic diagram of the correct process when the page jumps back in an embodiment of the present application.

[0051] Figure 6 This is a schematic diagram of a display interface showing an error when a page jumps back in the prior art.

[0052] Figure 7This is a schematic diagram of the correct display interface when the page jumps back in an embodiment of the present application.

[0053] Figure 8 A schematic diagram of the structure of a page display device provided in an embodiment of the present application.

[0054] Figure 9 A schematic diagram of the structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0055] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the embodiments described are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without making creative efforts are within the scope of protection of this application.

[0056] Embodiments of the present application provide a page display method, device, electronic device, and computer-readable storage medium, wherein the page display device can be integrated into an electronic device, which can be a server, a terminal, or other device.

[0057] See also Figure 1 , Figure 1 : is a flow chart of a page display method provided in an embodiment of the present application, which specifically includes:

[0058] S1: In response to an initial jump request of a first page, the first page instance is placed in a routing stack, and the first page data is placed in a data stack.

[0059] When a page needs to be redirected, the page instance and page data of the page must be obtained first. The page instance is used to describe the page structure, and the page data is used to describe the specific content of the page. The page data is then filled into the page structure to generate and display the page. For example, the page structure includes a page title module, a page image module, and a page text module. The page data includes a specific title, a specific image, and specific text. The specific title is filled into the page title module, the specific image is filled into the page image module, and the specific text is filled into the page text module. Finally, a page with a specific structure and specific content can be generated and displayed.

[0060] Before a page is initially redirected, the page data is stored in the original storage location such as a database or other location, and the page instance has not yet been created. Therefore, when the page is initially redirected and displayed, it is necessary to first create a page instance and provide a location to store the page instance. At the same time, the page data of the page is requested from the database or other location, and a location is provided to store the corresponding page data. In an embodiment of the present application, a routing stack is set in the application architecture where the page is located to store the page instance, and a data stack is set to store the page data. The first page can be any page that can be redirected. When the server receives the initial redirect request for the first page, it first creates the first page instance, puts the first page instance into the routing stack, and puts the first page data into the data stack. When creating the first page instance, the preset instance template can be copied by the instance creator.

[0061] In one embodiment, S1 specifically includes: responding to the initial jump request of the first page, placing the first page instance into the react-navigation routing stack; generating a push action through the action object of the react-redux model, and distributing the push action to the reducer object of the react-redux model; processing the push action through the reducer object, and placing the first page data into the data stack in the store object.

[0062] In the embodiment of the present application, the application where the page is located is based on the react-navigation and react-redux architectures, wherein react-navigation is a navigation component, which itself provides the function of a routing stack, which is referred to as the react-navigation routing stack in this embodiment. In the routing stack, the elements in the stack are page instances of each page, and the routing of the page can be realized by reading a certain page instance from the routing stack. The react-redux architecture is also called the react-redux model, which includes an action object, a store object, and a reducer object. The react-redux model is used to realize state sharing between components. The specific working principle is: if component m needs to update the state of the data, it can first tell the action object the task that needs to be performed on the data. The action object creates an action (that is, the action that needs to be completed), and the store object binds the reducer object responsible for executing the task, and distributes the old state of the action and the data to the reducer object. The reducer object can execute the action corresponding to the action and return the new state of the data to the store object. Finally, component m can obtain the new state from the store object, and other components can also share the state from the store object.

[0063] Based on this principle, in response to the initial jump request of the first page, the server first puts the first page instance into the react-navigation routing stack, and tells the action object that it needs to perform the task of the initial jump of the first page. The action object will abstract the task into a push operation on the data stack and create a push action. The store object will distribute the push action to the reducer object of the react-redux model. The reducer object will obtain the first page data from the original storage location of the first page data and perform a push operation on the data stack. After completion, the status result of the successful push of the first page data is returned to the store object. Any subsequent component that wants to obtain the first page data can directly obtain the first page data from the data stack of the store object.

[0064] Applications typically contain many pages, which are categorized by whether they are related. A relationship refers to a page that provides a jump entry to another page, allowing users to jump from that entry to the other page. For example, the details page of product A may contain recommended content for products B and C. Clicking on the recommended content directly redirects users to the details page of either product B or C. These three product details pages are related, and can be denoted as page A1, page A2, and page A3, respectively. These pages are collectively referred to as page A. In real-world scenarios, the page instance structures of multiple related pages A are identical, but the corresponding page data content is different. For another example, the details page of product A is accessed from channel 1 on the homepage, while the details page of store T is accessed from channel 2 on the homepage. These two channels are independent, so the two pages are unrelated. These two pages can be denoted as page A1 and page B1, respectively, with page A1 belonging to page A and page B1 belonging to page B. In real-world scenarios, the page instance structures of unrelated pages A and B are different, and the corresponding page data content is also different.

[0065] In the prior art, for pages A and B that are not related to each other, when jumping, the page data A and page data B corresponding to the two types of pages can both be stored in the store object, but for pages A1 and A2 that are related to each other, the page data corresponding to the two pages can only exist in one store object at a time. Specifically, Figure 2As shown, in the prior art, there is no data stack in the store object. When jumping to page A1, page data A will be stored in the store object. When jumping to page B, page data B will be stored in the store object. When jumping to page A2, new page data A will be stored in the store object. The new page data A will overwrite the old page data A, so that there is only one page data A in the store object.

[0066] In the embodiments of this application, Figure 3 As shown, since a data stack is set in the store object, each time a new page is jumped to, the page data of the page will be pushed into the data stack once, so that it is stored in the data stack of the store object, and each page data in the data stack will not overwrite other page data. Specifically, when jumping to page A1, page data A1 will be pushed into the store object, when jumping to page B1, page data B1 will be pushed into the store object, and when jumping to page A2, page data A2 will be pushed into the store object. The newly stacked page data A2 and the old stacked page data A1 can coexist, realizing the simultaneous existence of multiple sets of interrelated page data in the store object, which is different from the existing technology.

[0067] S2: Obtain a first page instance from the routing stack, obtain first page data from the data stack, and generate and display the first page according to the first page instance and the first page data.

[0068] The server obtains the first page instance from the routing stack, obtains the first page data from the data stack, fills the first page data into the page structure of the first page instance, and can generate and display the first page.

[0069] In one embodiment, before S1, it also includes: allocating multiple routing location intervals in the routing stack, each routing location interval includes at least two routing locations, each routing location is used to store a page instance, the page instances corresponding to the same routing location interval are mutually related, and the page instances corresponding to different routing location intervals are not related to each other; allocating multiple data location intervals in the data stack, each data location interval includes at least two data locations, each data location is used to store a page of data, the page data corresponding to the same data location interval are mutually related, and the page data corresponding to different data location intervals are not related to each other; establishing a position correspondence between each routing location interval of the routing stack and each data location interval of the data stack.

[0070] For several related pages, their corresponding page instances are related to each other, and their corresponding page data are also related to each other. For several unrelated pages, their corresponding page instances are not related to each other, and their corresponding page data are also unrelated to each other. First, multiple routing location intervals are allocated in the routing stack, each routing location interval includes at least two routing locations, the same routing location interval is used to store page instances of each related page, and different routing location intervals are used for page instances of each unrelated page. For example, 10 routing locations can be divided into 2 routing location intervals, of which the 1st to 4th routing locations belong to the first routing location interval, and are respectively used to store page instances of pages A1 to A4, and the 5th to 10th routing locations belong to the second routing location interval, and are respectively used to store page instances of pages B1 to B6.

[0071] For the data stack, multiple data location intervals are allocated based on the same principle. Each data location interval includes at least two data locations. The same data location interval is used to store page data of mutually related pages, and different data location intervals are used to store page data of mutually unrelated pages. For example, 10 data locations can be divided into 2 data location intervals, where the 1st to 4th data locations belong to the first data location interval and are used to store page data of pages A1 to A4 respectively. Figure 3 As shown, the data position interval forms the page A data stack, and the 5th to 10th data positions belong to the second data position interval, which are used to store page data of page B1 to page B6 respectively. Figure 3 As shown, the data location interval forms the page B data stack. The page A data stack and the page B data stack can be independent of each other. When page data is pushed into the stack, all page data belonging to page A will be pushed into the page A data stack, and all page data belonging to page B will be pushed into the page B data stack.

[0072] After allocation, a position correspondence is established between each routing position interval and each data position interval. The position correspondence is a one-to-one correspondence. Specifically, the first routing position interval corresponds to the first data position interval, and the i-th routing position in the first routing position interval corresponds to the i-th data position in the first data position interval. The second routing position interval corresponds to the second data position interval, and the j-th routing position in the second routing position interval corresponds to the j-th data position in the second data position interval, and so on.

[0073] Since there are usually a large number of pages in an application, you can first allocate routing location intervals and data location intervals, and establish a location correspondence, so that you can quickly narrow the search scope from the data stack based on the location correspondence and quickly obtain the required page data.

[0074] In one embodiment, S2 specifically includes: obtaining the target routing location interval of the first page instance in the routing stack, and determining the target data location interval of the first page data in the data stack based on the target routing location interval and the position correspondence; obtaining the first page index, determining the target routing location from the target routing location interval based on the first page index, and obtaining the first page instance from the target routing location; determining the target data location of the first page data in the target data location interval based on the target routing location and the position correspondence, and obtaining the first page data from the target data location.

[0075] Since the first page instance and the first page data are pushed and popped synchronously, the target routing location interval of the first page instance in the routing stack corresponds to the target data location interval of the first page data in the data stack, and the target routing location of the first page instance in the target routing location interval corresponds to the target data location of the first page data in the target data location interval. Therefore, the target routing location can be first determined from the routing stack, then mapped to the data stack, and the corresponding target data location can be determined from the data stack, thereby achieving accurate acquisition of the first page instance and the first page data.

[0076] When obtaining the first page instance, it can be found through the first page index. When generating the initial jump request for the first page, the first page index will be generated synchronously. The first page index is used to identify the uniqueness of the page. Its content can be defined as needed, such as consisting of page feature information and page type, for example: xx application homepage, product a details page, etc., or it can also be represented by a page URL, for example; xx application homepage URL, product a details page URL. Since each page has its own unique page index, a correspondence can be established in advance between the page index and the page instance. After obtaining the first page index, the corresponding relationship can be used to first determine which routing location interval of the routing stack the first page instance is located in, and this interval can be determined as the target routing location interval. Then, further, the first page index can be used to determine the first page instance's ranking among all routing locations in the target routing location interval, and this location can be determined as the target routing location. The first page instance can then be obtained from this location. Since there is a positional correspondence between each routing location interval and each data location interval, after determining the target routing location interval where the first page instance is located, the target data location interval where the first page data is located can be directly determined in the data stack. When the first page instance is located at the kth position in the target routing location interval, the first page data will also be located at the kth position in the target data location interval. Therefore, the kth position can be directly determined as the target data position in the data stack, and the first page data can be obtained from the target data position.

[0077] Through the above method, unified management of page instances and page data of mutually related pages is achieved, and page instances and page data of unrelated pages are managed separately. Moreover, through position correspondence and page index, it is convenient to quickly find the required page instances and page data, thereby improving the page jump and display speed.

[0078] In one embodiment, S2 specifically includes: obtaining the first page index, passing the first page index to each component of the first page instance, so that each component searches for each part of the sub-data in the first page data from the data stack based on the first page index; filling each part of the sub-data of the first page data into each component respectively to display the first page.

[0079] The first page instance describes the page structure, which contains multiple components. Each component needs to display a portion of the first page data, and all components together display the complete first page data. Therefore, each component needs to obtain the required portion of sub-data from the store object. To do this, the first page index can be passed to each component of the first page instance via the context function. Each component can then retrieve the required portion of data from the store object based on the first page index. Each sub-data portion can then be populated into each component, ultimately completing the display of the first page.

[0080] S3: In response to a jump request from the first page to the second page, the second page instance is placed in the routing stack, and the second page data is placed in the data stack.

[0081] The second page refers to a page associated with the first page. Its jump order is after the initial jump of the first page, and is the same as the initial jump process of the first page. When jumping from the first page to the second page, the second page instance will also be created first, the second page instance will be placed in the routing stack, and the second page data will be placed in the data stack.

[0082] S4: Obtain a second page instance from the routing stack, obtain second page data from the data stack, and generate and display the second page according to the second page instance and the second page data.

[0083] The server obtains the second page instance from the routing stack, obtains the second page data from the data stack, fills the second page data into the page structure of the first page instance, and generates and displays the second page.

[0084] S5: In response to a jump back request from the second page to the first page, the second page instance is popped from the routing stack, and the second page data is popped from the data stack.

[0085] Jumping back from the second page to the first page is called a bounce. When a bounce request is received, the second page instance is first popped from the routing stack, and the second page data is simultaneously popped from the data stack. After the pop, the current jump to the second page has ended. If you need to jump to the second page again, it will be treated as an initial jump to the second page, and the second page instance and second page data must be pushed into the stack again.

[0086] In one embodiment, S5 specifically includes: in response to a jump back request from the second page to the first page, popping the second page instance from the react-navigation routing stack; generating a pop action through the action object, and distributing the pop action to the reducer object; processing the pop action through the reducer object, and popping the second page data from the data stack in the store object.

[0087] In response to the request to jump back from the second page to the first page, the server first pops the second page instance from the react-navigation routing stack and tells the action object that it needs to perform the task of returning from the second page. The action object abstracts this task into a pop operation on the data stack and creates a pop action. The store object distributes the pop action to the reducer object of the react-redux model. The reducer object performs a pop operation on the second page data previously stored in the data stack. After completion, the status result of the successful pop of the second page data is returned to the store object. If you want to jump to the second page again later, the status obtained from the store object is that the second page is not currently in the data stack, which means that you need to re-execute the push operation of the second page instance and the second page data.

[0088] S6: Obtain the first page instance from the routing stack again, obtain the first page data from the data stack, and generate and display the first page again based on the first page instance and the first page data.

[0089] In the process of jumping from the first page to the second page, the first page instance is always in the routing stack, and the first page data is always in the data stack. When the second page instance is popped from the routing stack and the second page data is popped from the data stack, the first page instance can be directly obtained from the routing stack, and the first page data can be obtained from the data stack at the same time. Then, based on the same method in step S2, the first page data can be filled into the first page instance, so as to realize the display of the first page again.

[0090] Through the above method, when a page initially jumps, its corresponding page instance and page data are placed in the routing stack and data stack respectively. In the process of jumping from this page to other pages, the page instance and page data are always saved in the routing stack and data stack. Then, the required page instance and page data can be directly found from the routing stack and data stack to achieve normal display of the page. When the current display of a page ends and it needs to jump back to another page, the corresponding page instance and page data can be popped from the routing stack and data stack respectively to timely free up the space in the routing stack and data stack. Therefore, while ensuring the normal display of the page jump back, it also makes rational use of storage resources.

[0091] like Figure 4 As shown, in the prior art, when jumping to page A1 for the first time, page instance A1 is pushed into the routing stack, page data A is stored in the store object, and then it is determined whether to jump to a new page. If so, it is determined whether the new page is page A, that is, whether the new page is a page associated with page A1. If so, page instance A2 is pushed into the routing stack, and the page is jumped to. At this time, new page data A is stored in the store object, and the new page data A will overwrite the old page data A. If not, it returns to other pages. Then, it is determined again whether to jump to a new page. If not, it means that the current page is not jumping to a new page, but returning from page A2. At this time, page instance A2 is popped out of the routing stack, and it is determined whether the returned page is page A associated with page A2. If so, it returns from page A2 and clears the page data A in the store object. If not, it returns to other pages. Finally, it checks again whether to redirect to a new page. If not, it indicates that the page is not being redirected to a new page, but rather returning from page A2. It then checks whether the returned page is page A associated with page A2. If so, it returns to page A1; if not, it returns to another page. However, since page A2 cleared the store object's data for page A when it was returned, the old page data A, which was added when page A1 was first redirected, does not exist in the store object. Consequently, page A1 displays an error.

[0092] like Figure 5As shown, in an embodiment of the present application, when jumping to page A1 for the first time, page instance A1 is pushed into the routing stack, and page data A1 is stored in the data stack of the store object. Then, it is determined whether to jump to a new page. If so, it is determined whether the new page is page A, that is, whether the new page is a page associated with page A1. If so, page instance A2 is pushed into the routing stack, and jump to new page A2. At this time, page data A2 is stored in the data stack of the store object. The new page data A2 will not overwrite the old page data A1, and the two will coexist in the data stack. If not, it returns to other pages. Then, it is determined again whether to jump to a new page. If not, it means that the current page is not jumping to a new page, but returning from page A2. At this time, it is determined whether the returned page is page A associated with page A2. If so, page instance A2 is popped out of the routing stack, page data A2 is popped out of the data stack, and return from page A2. If not, it returns to other pages. Finally, it determines whether to jump to a new page. If not, it means that the current page is not jumping to a new page, but returning from page A2. At this time, it is necessary to determine whether the returned page is page A associated with page A2. If so, it returns to page A1. If not, it returns to another page. At this time, since page A2 only popped the page data A2 from the data stack when it returned, while page data A1 is still in the data stack, it can directly obtain page instance A1 from the routing stack and page data A1 from the data stack, and combine the two to generate and display page A1.

[0093] like Figure 6 and Figure 7 As shown in the figure, the profile page of an application has an association relationship between the main profile page and the sub-profile page. From the profile details of one page, you can jump to view the details of other profiles that are associated with it. Figure 4 When using the page display method in , for example, jumping from sub-profile page A1 to view the related main profile page A2, and then returning to sub-profile page A1, the sub-profile data in the sub-profile page A1 that was viewed initially will be cleared, and the display will be as follows Figure 6 When the page display method of the present application is used, the user jumps from the sub-file page A1 to view the related main file page A2, and then returns to the sub-file page A1. At this time, the sub-file data in the sub-file page A1 can still be directly obtained from the data stack and fully displayed, as shown in the following figure. Figure 7 The correct page is shown.

[0094] In one embodiment, after S6, it also includes: in response to a page data management request for the target page, generating an in-stack element management action through an action object, and distributing the in-stack element management action to a corresponding reducer object; processing the in-stack element management action through the reducer object, determining the target page data in the data stack as a target stack element, and performing management operations on the target stack element.

[0095] The target page can be any one or several pages whose page data has been stored in the data stack. In this embodiment, after the page data of the target page is stored in the data stack, the original management operations on the page data can also be abstracted into management operations on the elements in the target stack in the data stack. Specifically, the server generates an in-stack element management action through an action object in response to a page data management request for a target page. The specific content of the generated in-stack element management action varies depending on the content of the page data management request. For example, the jump order of the mutually related pages A is page A1-page A2-page A3, and the elements from the bottom to the top of the stack in the data stack are page data A1-page data A2-page data A3. At this time, if the page data management request is to modify page data A3, the content of the in-stack element management action may be to modify the top element in the data stack. If the page data management request is to modify page data A2, the content of the in-stack element management action may be to modify the second element in the data stack. If the page data management request is to modify all page data A1 to A3, the content of the in-stack element management action may be to modify all elements in the data stack. The generated stack element management action is distributed to the corresponding reducer object. The reducer object processes the stack element management action, determines the target page data to be managed in the data stack as the target stack element, and then performs the corresponding management operation based on the specific content of the action.

[0096] like Figure 2 As shown, in the prior art, if it is necessary to perform management operations on a certain page data, such as initialization, modification and clearing, an initialization action, a modification action and a clearing action will be directly generated in the action object. Taking the modification action as an example, when it is necessary to modify the title content of page data A, an action for modifying the title content will be generated. When it is necessary to modify the text content of page data A, an action for modifying the text content will be generated. In other words, each specific modification requires a specific action to be defined in the code in advance, which makes the management and operation of page data more cumbersome.

[0097] In the embodiment of the present application, Figure 3 As shown, by setting up a data stack, various modification operations on page data can be abstracted into a unified action for modifying elements in the stack. It is only necessary to define an action for modifying elements in the stack in the code. Subsequently, it is only necessary to pass in different parameters to use the action for modifying elements in the stack to complete various modification operations. There is no need to define multiple modification actions for each page data separately. The parameters passed in can specify the modification object and the modification content. For example, it can specify to modify the title of the top element of the stack, or to modify the titles of all elements in the stack. In this way, it is achieved that various management operations on page data are replaced by a unified stack element management operation, making the management of page data more efficient.

[0098] It can be seen from the above embodiments that the page display method provided by the present application, by setting a data stack, puts the page data corresponding to the page into the data stack when each page initially jumps. When it is necessary to jump back to the page from other pages, the page data can be directly obtained from the data stack for direct display. By converting the overwriting and clearing operations of the page data in the current single storage mode into push and pop operations in the data stack, multiple sets of page data can coexist in the data stack, which can meet the display requirements of any page when jumping back.

[0099] Based on the method described in the above embodiment, this embodiment will be further described from the perspective of the page display device. Figure 8 , the page display device may include:

[0100] A first stacking module 10 is configured to, in response to an initial jump request of a first page, place the first page instance into a routing stack and place the first page data into a data stack;

[0101] A first display module 20 is configured to obtain the first page instance from the routing stack, obtain the first page data from the data stack, and generate and display the first page according to the first page instance and the first page data;

[0102] A second stacking module 30 is configured to, in response to a jump request from the first page to the second page, place the second page instance into the routing stack and place the second page data into the data stack;

[0103] A second display module 40 is configured to obtain the second page instance from the routing stack, obtain the second page data from the data stack, and generate and display the second page according to the second page instance and the second page data;

[0104] A pop module 50 is configured to pop the second page instance from the routing stack and the second page data from the data stack in response to a bounce request from the second page to the first page.

[0105] The third display module 60 is configured to obtain the first page instance from the routing stack again, obtain the first page data from the data stack, and generate and display the first page again based on the first page instance and the first page data.

[0106] In one embodiment, the first stacking module 10 includes:

[0107] A first stacking submodule is used to put the first page instance into the react-navigation routing stack in response to the initial jump request of the first page;

[0108] A first distribution submodule is used to generate a stacked action through the action object of the react-redux model, and distribute the stacked action to the reducer object of the react-redux model;

[0109] The second push submodule is used to process the push action through the reducer object and put the first page data into the data stack in the store object.

[0110] In one embodiment, the page display device further includes:

[0111] a first allocation module, configured to allocate a plurality of routing location intervals in the routing stack, each routing location interval including at least two routing locations, each routing location being configured to store a page instance, the page instances corresponding to the same routing location interval being associated with each other, and the page instances corresponding to different routing location intervals being independent of each other;

[0112] a second allocation module, configured to allocate a plurality of data location intervals in the data stack, each data location interval including at least two data locations, each data location being used to store one page of data, the pages of data corresponding to the same data location interval being associated with each other, and the pages of data corresponding to different data location intervals being unassociated with each other;

[0113] An establishing module is used to establish a position correspondence between each routing position interval of the routing stack and each data position interval of the data stack.

[0114] In one embodiment, the first display module 20 includes:

[0115] a first acquisition submodule, configured to acquire a target routing location interval of the first page instance in the routing stack, and determine a target data location interval of the first page data in the data stack according to the target routing location interval and the location correspondence;

[0116] a second acquisition submodule, configured to acquire a first page index, determine a target routing location from the target routing location interval according to the first page index, and acquire the first page instance from the target routing location;

[0117] A third acquisition submodule is configured to determine a target data position of the first page data in the target data position interval according to the target routing position and the position correspondence, and acquire the first page data from the target data position.

[0118] In one embodiment, the first display module 20 includes:

[0119] a fourth acquisition submodule, configured to acquire a first page index, and pass the first page index to each component of the first page instance, so that each component searches for each portion of sub-data in the first page data from the data stack based on the first page index;

[0120] The display submodule is configured to fill each portion of the sub-data of the first page data into each of the components respectively, so as to display the first page.

[0121] In one embodiment, the pop module 50 includes:

[0122] A first popping submodule is configured to pop the second page instance from the react-navigation routing stack in response to a bounce request from the second page to the first page;

[0123] A second distribution submodule is used to generate a pop action through the action object and distribute the pop action to the reducer object;

[0124] The second popping submodule is configured to process the popping action through the reducer object, and pop the second page data from the data stack in the store object.

[0125] In one embodiment, the page display device further includes:

[0126] a generation module, configured to generate an in-stack element management action through the action object in response to a page data management request for a target page, and distribute the in-stack element management action to a corresponding reducer object;

[0127] A management module is used to process the stack element management action through the reducer object, determine the target page data in the data stack as the target stack element, and perform management operations on the target stack element.

[0128] Different from the existing technology, the page display device provided by the present application sets up a data stack. When each page initially jumps, the page data corresponding to the page is placed in the data stack. When it is necessary to jump back to the page from other pages, the page data can be directly obtained from the data stack for display. By converting the overwriting and clearing operations of the page data in the current single storage mode into push and pop operations in the data stack, multiple sets of page data can coexist in the data stack, which can meet the display requirements of any page when jumping back.

[0129] Accordingly, the embodiment of the present application further provides an electronic device, such as Figure 9 As shown, the electronic device may include components such as a radio frequency (RF) circuit 101, a memory 102 including one or more computer-readable storage media, an input unit 103, a display unit 104, a sensor 105, an audio circuit 106, a WiFi module 107, a processor 108 including one or more processing cores, and a power supply 109. It will be understood by those skilled in the art that Figure 9 The electronic device structure shown in the figure does not constitute a limitation of the electronic device, and may include more or fewer components than shown in the figure, or combine certain components, or arrange components differently.

[0130] The RF circuit 101 can be used to receive and transmit signals during information transmission or calls. Specifically, it receives downlink information from the base station and transmits it to one or more processors 108 for processing. It also transmits uplink data to the base station. The memory 102 can be used to store software programs and modules. The processor 108 executes the software programs and modules stored in the memory 102 to execute various functional applications and display web pages. The input unit 103 can be used to receive digital or character input and generate keyboard, mouse, joystick, optical, or trackball signal input related to user settings and function control.

[0131] The display unit 104 may be used to display information input by a client or information provided to a client, as well as various graphical client interfaces of the server. These graphical client interfaces may be composed of graphics, text, icons, videos, or any combination thereof.

[0132] The electronic device can also include at least one sensor 105, such as a light sensor, a motion sensor, and other sensors. The audio circuit 106 includes a speaker, which can provide an audio interface between the customer and the electronic device.

[0133] WiFi belongs to a short-range wireless transmission technology, and the electronic device can help the customer send and receive emails, browse web pages, and follow streaming media through the WiFi module 107, which provides the customer with wireless broadband Internet access. Although Figure 9 The WiFi module 107 is shown, but it is understood that it is not a necessary component of the electronic device and can be omitted as needed without changing the essence of the application.

[0134] The processor 108 is the control center of the electronic device, which connects all parts of the mobile phone through various interfaces and lines, executes various functions of the electronic device and processes data by running or executing software programs and / or modules stored in the memory 102 and calling data stored in the memory 102, thereby overall monitoring the mobile phone.

[0135] The electronic device also includes a power supply 109 (such as a battery) for powering various components. Preferably, the power supply can be logically connected to the processor 108 through a power management system, so that the power management system can realize functions such as charge management, discharge management, and power consumption management.

[0136] Although not shown, the electronic device can also include a camera, a Bluetooth module, and the like, which will not be described here. In this embodiment, the processor 108 in the server will load one or more executable files corresponding to the processes of one or more application programs into the memory 102 according to the following instructions, and run the application programs stored in the memory 102 by the processor 108, thereby realizing the following functions:

[0137] In response to an initial jump request of the first page, the first page instance is put into the route stack, and the first page data is put into the data stack;

[0138] The first page instance is obtained from the route stack, the first page data is obtained from the data stack, and the first page is generated and displayed according to the first page instance and the first page data;

[0139] In response to a jump request from the first page to the second page, the second page instance is put into the route stack, and the second page data is put into the data stack;

[0140] The second page instance is obtained from the route stack, the second page data is obtained from the data stack, and the second page is generated and displayed according to the second page instance and the second page data;

[0141] in response to a back request from the second page to the first page, popping the second page instance from the routing stack and popping the second page data from the data stack;

[0142] again obtaining the first page instance from the routing stack and obtaining the first page data from the data stack, and generating and displaying the first page again according to the first page instance and the first page data.

[0143] In the above embodiments, the description of each embodiment has its own focus, and the parts not described in detail in a certain embodiment can be referred to the detailed description above, which will not be repeated here.

[0144] Those skilled in the art can understand that all or part of the steps in the various methods of the above embodiments can be completed by instructions, or by related hardware controlled by the instructions, which can be stored in a computer readable storage medium and loaded and executed by a processor.

[0145] To this end, an embodiment of the present application provides a computer readable storage medium, which stores a plurality of instructions capable of being loaded by a processor to implement the following functions:

[0146] in response to an initial jump request of a first page, putting a first page instance into a routing stack and putting first page data into a data stack;

[0147] obtaining the first page instance from the routing stack and obtaining the first page data from the data stack, and generating and displaying the first page according to the first page instance and the first page data;

[0148] in response to a jump request from the first page to a second page, putting a second page instance into the routing stack and putting second page data into the data stack;

[0149] obtaining the second page instance from the routing stack and obtaining the second page data from the data stack, and generating and displaying the second page according to the second page instance and the second page data;

[0150] in response to a back request from the second page to the first page, popping the second page instance from the routing stack and popping the second page data from the data stack;

[0151] again obtaining the first page instance from the routing stack and obtaining the first page data from the data stack, and generating and displaying the first page again according to the first page instance and the first page data.

[0152] The above is a detailed introduction to a page display method, device, electronic device and computer-readable storage medium provided in the embodiments of the present application. Specific examples are used in this article to illustrate the principles and implementation methods of the present application. The description of the above embodiments is only used to help understand the technical solutions and core ideas of the present application. Ordinary technicians in this field should understand that they can still modify the technical solutions recorded in the aforementioned embodiments, or replace some of the technical features therein with equivalents; and these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of the present application.

Claims

1. A page display method, characterized in that: include: Allocating multiple routing location intervals in the routing stack, each of the routing location intervals including at least two routing locations, each of the routing locations being used to store a page instance, the page instances corresponding to the same routing location interval being associated with each other, and the page instances corresponding to different routing location intervals being independent of each other; Allocating a plurality of data location intervals in the data stack, each of the data location intervals including at least two data locations, each of the data locations being used to store one page of data, the page data corresponding to the same data location interval being associated with each other, and the page data corresponding to different data location intervals being unassociated with each other; Establishing a position correspondence between each routing position interval of the routing stack and each data position interval of the data stack; In response to an initial jump request for a first page, placing the first page instance into the routing stack and placing the first page data into the data stack; Obtaining the first page instance from the routing stack, obtaining the first page data from the data stack, and generating and displaying the first page according to the first page instance and the first page data; In response to a jump request from the first page to the second page, placing the second page instance into the routing stack and placing the second page data into the data stack; Obtaining the second page instance from the routing stack, obtaining the second page data from the data stack, and generating and displaying the second page according to the second page instance and the second page data; In response to a jump back request from the second page to the first page, popping the second page instance from the routing stack and popping the second page data from the data stack; The first page instance is again obtained from the routing stack, the first page data is obtained from the data stack, and the first page is again generated and displayed based on the first page instance and the first page data.

2. The page display method according to claim 1, characterized in that: In response to an initial jump request for a first page, the step of placing the first page instance into the routing stack and placing the first page data into the data stack comprises: In response to the initial jump request of the first page, the first page instance is placed in the react-navigation routing stack; Generate a push action through the action object of the react-redux model, and distribute the push action to the reducer object of the react-redux model; The push action is processed by the reducer object, and the first page data is put into the data stack in the store object.

3. The method according to claim 1, characterized in that The step of establishing a position correspondence between each routing position interval of the routing stack and each data position interval of the data stack comprises: A position correspondence between the routing positions in the routing position interval and the data positions in the data position interval is established.

4. The page display method according to any one of claims 1 to 3, characterized in that: The steps of obtaining the first page instance from the routing stack and obtaining the first page data from the data stack include: Obtaining a target routing location interval of the first page instance in the routing stack, and determining a target data location interval of the first page data in the data stack according to the target routing location interval and the location correspondence; Obtaining a first page index, determining a target routing location from the target routing location interval according to the first page index, and obtaining the first page instance from the target routing location; According to the target routing position and the position correspondence, a target data position of the first page data in the target data position interval is determined, and the first page data is acquired from the target data position.

5. The page display method according to claim 1, characterized in that: The step of acquiring the first page data from the data stack and generating and displaying the first page according to the first page data and the first page instance includes: Obtaining a first page index, and passing the first page index to each component of the first page instance, so that each component searches for each portion of sub-data in the first page data from the data stack based on the first page index; Fill each part of the sub-data of the first page data into each of the components respectively to display the first page.

6. The page display method according to claim 2, characterized in that: In response to a bounce request from the second page to the first page, the step of popping the second page instance from the routing stack and popping the second page data from the data stack includes: In response to a bounce request from the second page to the first page, popping the second page instance from the react-navigation routing stack; Generate a pop action through the action object, and distribute the pop action to the reducer object; The reducer object processes the pop action to pop the second page data from the data stack in the store object.

7. The page display method according to claim 2, characterized in that: After the step of generating and displaying the first page, the method further includes: In response to a page data management request for a target page, generating an in-stack element management action through the action object, and distributing the in-stack element management action to a corresponding reducer object; The reducer object processes the stack element management action, determines the target page data in the data stack as the target stack element, and performs a management operation on the target stack element.

8. A page display device, characterized in that: include: a first allocation module, configured to allocate a plurality of routing location intervals in a routing stack, each of the routing location intervals including at least two routing locations, each of the routing locations being configured to store a page instance, the page instances corresponding to the same routing location interval being associated with each other, and the page instances corresponding to different routing location intervals being independent of each other; a second allocation module, configured to allocate a plurality of data location intervals in the data stack, each data location interval including at least two data locations, each data location being configured to store one page of data, the pages of data corresponding to the same data location interval being associated with each other, and the pages of data corresponding to different data location intervals being unassociated with each other; An establishing module, configured to establish a position correspondence between each routing position interval of the routing stack and each data position interval of the data stack; A first stacking module, configured to, in response to an initial jump request of a first page, place a first page instance into the routing stack and place first page data into the data stack; a first display module, configured to obtain the first page instance from the routing stack, obtain the first page data from the data stack, and generate and display the first page according to the first page instance and the first page data; a second stacking module, configured to, in response to a jump request from the first page to the second page, place a second page instance into the routing stack and place second page data into the data stack; a second display module, configured to obtain the second page instance from the routing stack, obtain the second page data from the data stack, and generate and display the second page according to the second page instance and the second page data; a popping module, configured to pop the second page instance from the routing stack and the second page data from the data stack in response to a bounce request from the second page to the first page; The third display module is used to obtain the first page instance from the routing stack again, obtain the first page data from the data stack, and generate and display the first page again according to the first page instance and the first page data.

9. An electronic device, characterized in that: It comprises a memory and a processor; the memory stores an application program, and the processor is used to run the application program in the memory to execute the steps in the page display method according to any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that The computer-readable storage medium stores a computer program, and the computer program is executed by a processor to implement the steps in the page display method according to any one of claims 1 to 7.

Images