Page display method and device, electronic equipment and storage medium

Abstract

The invention provides a page display method and device, electronic equipment and a storage medium, and the method comprises the steps: firstly responding to an initial jump request of a first page, putting a first page instance into a routing stack, putting first page data into a data stack, then obtaining the first page instance from the routing stack, obtaining the first page data from the data stack, and displaying the first page instance and the first page data in the routing stack; the method comprises the steps of generating and displaying a first page according to a first page instance and first page data, then responding to a rebound request from a second page to the first page, popping a second page instance from a routing stack, popping second page data from a data stack, and finally obtaining the first page instance from the routing stack and the first page data from the data stack again. And regenerating and displaying the first page according to the first page instance and the first page data. According to the method and the device, the coverage and emptying operation of the page data is converted into the in-stack and out-stack operation of the data stack, so that coexistence of multiple sets of page data in the data stack is realized, and the rebound display requirement of the page can be met.

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 functions of various applications grow, many types of pages require multiple page instances in the routing link and multiple sets of page data, such as product details page, video details page, etc. Currently, for systems developed using react-redux and react-navigation architecture, only one page data is stored in the store object of the react-redux model at a time. In this way, when jumping from page A1 to page A2, the page data of A2 will overwrite the page data of A1 to achieve the complete display of page A2. When jumping back to page A1 from page A2, the page data of page A2 will be cleared. At this time, there is no page data of page A2 or page A1 in the store object, resulting in page A1 being unable to display normally and an error. If you want to display normally, you need to refresh or reinitialize, re-store the page data of page A1 in the store object, and then read the page data for display, which will affect the display effect 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] The 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 present application provides the following technical solutions:

[0006] The present application provides a page display method, comprising:

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

[0008] Acquire the first page instance from the routing stack, acquire 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;

[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] Acquire the second page instance from the routing stack, acquire 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;

[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 obtained again from the routing stack, the first page data is obtained from the data stack, and the first page is generated and displayed again according to 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 position intervals in the routing stack, each of the routing position intervals including at least two routing positions, each of the routing positions being used to store a page instance, the page instances corresponding to the same routing position interval being associated with each other, and the page instances corresponding to different routing position intervals being not associated with each other;

[0019] Allocating a plurality of data position intervals in the data stack, each of the data position intervals including at least two data positions, each of the data positions being used to store a page of data, the page data corresponding to the same data position interval being associated with each other, and the page data corresponding to different data position intervals being not associated 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 step of obtaining the first page instance from the routing stack and obtaining the first page data from the data stack includes:

[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 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:

[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 a second page to the first page, popping a 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 pop action is processed by the reducer object 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 a stack element management action through the action object, and distributing the 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 a routing stack and place the first page data into a 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 a routing stack and place the second page data into a 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 pop module, configured to pop the second page instance from the routing stack and pop the second page data from the data stack in response to a bounce request from the second page to the first page;

[0041] 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.

[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 page display methods described above.

[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 effects: 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, 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 technical solution and other beneficial effects of the present application will be made apparent by describing in detail the specific implementation methods of the present application in conjunction with the accompanying drawings.

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

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

[0048] Figure 3 It is a 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 a process in which an error occurs when a page jumps back in the prior art.

[0050] Figure 5 This is a schematic diagram of the correct process when a 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] Fig. 9 A schematic diagram of the structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0055] The technical solutions in the embodiments of the present application will be described clearly and completely below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, rather than all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative work are within the scope of protection of the present application.

[0056] The 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 in an electronic device, and the electronic device 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, the method specifically includes:

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

[0059] When a page needs to be jumped and displayed, it is necessary to first obtain the page instance and page data of the page, where the page instance is used to describe the page structure, and the page data is used to describe the specific content of the page, and then fill the page data into the page structure to generate and display the page. For example, the page structure includes a page title module, a page image module, a page text module, etc., and 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 certain 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 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, and at the same time request the page data of the page from a database or other location, and provide a location 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 a 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: in response 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] The application in which the page is located in the embodiment of the present application is based on react-navigation and react-redux architecture, wherein react-navigation is a navigation component, which itself provides the function of the routing stack, which is referred to as the react-navigation routing stack in the present embodiment, in which 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 later. 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, and 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 at present, and 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, and the reducer object can execute the action corresponding to the action, and return the new state of the data to the store object, and 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 abstracts the task into a push operation on the data stack and creates a push action. The store object distributes the push action to the reducer object of the react-redux model. The reducer object obtains the first page data from the original storage location of the first page data and performs 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] An application usually contains many pages, which are divided into multiple categories according to whether they are related or not. Association means that a page provides a jump entry to another page, and you can jump from the entry to another page. For example, under the details page of a certain product a, you can associate recommended content of product b and product c. Clicking on the recommended content can directly jump to the details page of product b or product c. Then the details pages of these three products are related. The three pages can be recorded as page A1, page A2 and page A3 respectively, and these pages are collectively referred to as page A. In actual scenarios, the page instance structures of multiple related pages A are the same, but the corresponding page data contents are different. For another example, the details page of product a is entered in channel 1 of the homepage, and the details page of store T is entered in channel 2 of the homepage. The two channels are independent of each other, so the two pages are not related. The two pages can be recorded as page A1 and page B1 respectively, where page A1 belongs to page A and page B1 belongs to page B. In actual scenarios, the page instance structures of unrelated pages A and page B are different, and the corresponding page data contents are 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 the present 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 prior art.

[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 unrelated to each other, and their corresponding page data are also unrelated to each other. First, multiple routing position intervals are allocated in the routing stack, each routing position interval includes at least two routing positions, the same routing position interval is used to store page instances of mutually related pages, and different routing position intervals are used for page instances of mutually unrelated pages. For example, 10 routing positions can be divided into 2 routing position intervals, of which the 1st to 4th routing positions belong to the first routing position interval, which are respectively used to store page instances of pages A1 to A4, and the 5th to 10th routing positions belong to the second routing position interval, which are respectively used to store page instances of pages B1 to B6.

[0071] For the data stack, multiple data position intervals are allocated based on the same principle. Each data position interval includes at least two data positions. The same data position interval is used to store page data of mutually related pages, and different data position intervals are used to store page data of mutually unrelated pages. For example, 10 data positions can be divided into 2 data position intervals, where the 1st to 4th data positions belong to the first data position interval and are used to store page data of pages A1 to A4, respectively. Figure 3 As shown, the data position interval forms a 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 position interval forms a data stack of page B. The data stack of page A and the data stack of page B 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 data stack of page A, and all page data belonging to page B will be pushed into the data stack of page B.

[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 location correspondences, so that you can quickly narrow the search scope from the data stack based on the location correspondences and quickly get the required page data.

[0074] In one embodiment, S2 specifically includes: obtaining a target routing location interval of a first page instance in a routing stack, and determining a target data location interval of first page data in a data stack according to a correspondence between the target routing location interval and the position; 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; determining a target data location of the first page data in the target data location interval according to the correspondence between the target routing location and the position, and obtaining the first page data from the target data location.

[0075] Since the first page instance and the first page data are pushed into and popped out of the stack synchronously, the target routing position interval of the first page instance in the routing stack corresponds to the target data position interval of the first page data in the data stack, and the target routing position of the first page instance in the target routing position interval corresponds to the target data position of the first page data in the target data position interval. Therefore, the target routing position can be first determined from the routing stack, and then mapped to the data stack, and the corresponding target data position 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 of 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 unique page index, a corresponding relationship can be established in advance between the page index and the page instance. After obtaining the first page index, it can be determined according to the corresponding relationship which routing position interval of the routing stack the first page instance is located in, and the interval is determined as the target routing position interval. Then, further, according to the first page index, it is determined which routing position the first page instance ranks in among all routing positions in the target routing position interval, and the position is determined as the target routing position. Then, the first page instance can be obtained from this position. 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. In this way, 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. In addition, 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 is used to describe the page structure, and the page structure contains multiple components. Each component needs to display a part of the sub-data in the first page data, and all components together display the complete first page data. Therefore, each component needs to obtain the part of the sub-data it needs from the store object. At this time, the first page index can be passed to each component of the first page instance through the context function, and then each component can obtain the part of the data it needs from the store object based on the first page index. Each part of the sub-data can be filled in each component, and finally the display of the first page is completed.

[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, which 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 can generate and display 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 from the second page to the first page again is called a back jump. When a back jump request from the second page to the first page is received, the second page instance is first popped from the routing stack, and the second page data is popped from the data stack. After the popping, it means that the current jump display for the second page has ended. If you need to jump to the second page again later, it will be regarded as the initial jump to the second page, and you need to re-execute the stacking operation of the second page instance and the second page data.

[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 an action object, and distributing the pop action to a 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 the task into a pop operation of the data stack and creates a pop action. The store object distributes the pop action to the reducer object of the react-redux model, and 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: obtaining the first page instance from the routing stack again, 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.

[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] In the above manner, when a certain page initially jumps, its corresponding page instance and page data are placed in the routing stack and data stack respectively, and in the process of jumping from the page to other pages, the page instance and page data are always saved in the routing stack and data stack, so that the required page instance and page data can be directly found from the routing stack and data stack later to achieve normal display of the page. When a certain page ends the current display and needs to jump back to other pages, its corresponding page instance and page data can be popped out of the routing stack and data stack respectively to release the space of the routing stack and data stack in time, so that the storage resources can be reasonably used while ensuring the normal display of the page jump back.

[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 jumps to new page A2. 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 from 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 is determined whether to jump to a new page. If not, it means that the current page is not a new page, but a return 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 other pages. However, since page data A in the store object has been cleared when page A2 returns, the old page data A placed in the first jump to page A1 does not exist in the store object at this time, so page A1 will display an error.

[0092] like Figure 5As shown, in the 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 jumps to the 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, determine whether to jump to a new page again. 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, return to page A1, if not, return to other pages. At this time, since only page data A2 in the data stack is popped when page A2 returns, and page data A1 is still in the data stack, the page instance A1 can be directly obtained from the routing stack, and the page data A1 can be obtained from the data stack, and the two can be combined 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 a 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 related to it. Figure 4 For example, if you jump from sub-file page A1 to view the related main file page A2, and then return to sub-file page A1, the sub-file data in the sub-file page A1 you viewed at the beginning will be cleared, and the following will be displayed: Figure 6 When the page display method of the present application is used, the user jumps from sub-file page A1 to view the related main file page A2, and then returns to sub-file page A1. At this time, the sub-file data in 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 a target page, generating a stack element management action through an action object, and distributing the stack element management action to a corresponding reducer object; processing the 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 operation on the page data can also be abstracted into the management operation 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 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 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 stack element management action is processed by the reducer object, the target page data to be managed in the data stack is determined as the target stack element, and then the corresponding management operation is performed 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, initialization action, modification action and 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. Later, only different parameters need to be passed in 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 the above manner, it is realized that various management operations on page data are replaced by unified management operations of elements in the stack, so that the management of page data is 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, and 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, the coexistence of multiple sets of page data is achieved 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, configured to, in response to an initial jump request of a first page, put a first page instance into a routing stack and put first page data into a data stack;

[0101] A first display module 20, 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, configured to, in response to a jump request from the first page to the second page, place the second page instance into a routing stack and place the second page data into a data stack;

[0103] A second display module 40, 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, configured to pop the second page instance from the routing stack and pop 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 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.

[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, used to 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;

[0109] The second stacking submodule is used to process the stacking 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 is used to allocate multiple routing position intervals in the routing stack, each of the routing position intervals includes at least two routing positions, each of the routing positions is used to store a page instance, the page instances corresponding to the same routing position interval are associated with each other, and the page instances corresponding to different routing position intervals are not associated with each other;

[0112] A second allocation module is used to allocate multiple data position intervals in the data stack, each of the data position intervals includes at least two data positions, each of the data positions is used to store a page of data, the page data corresponding to the same data position interval are associated with each other, and the page data corresponding to different data position intervals are not associated 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 is used 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 used to fill each part of the sub-data of the first page data into each component respectively to display the first page.

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

[0122] A first popping submodule, configured to pop a 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, used for generating a pop action through the action object, and distributing the pop action to the reducer object;

[0124] The second popping submodule is used 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 prior art, 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 present application also provides an electronic device, such as Fig. 9 As shown, the electronic device may include 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. Those skilled in the art will appreciate that Fig. 9 The electronic device structure shown in the figure does not constitute a limitation on the electronic device, and may include more or fewer components than shown in the figure, or combine certain components, or arrange the components differently.

[0130] The radio frequency circuit 101 can be used for receiving and sending signals during information transmission or calls. In particular, after receiving the downlink information of the base station, it is handed over to one or more processors 108 for processing; in addition, the data related to the uplink is sent to the base station. The memory 102 can be used to store software programs and modules. The processor 108 executes various functional applications and page displays by running the software programs and modules stored in the memory 102. The input unit 103 can be used to receive input digital or character information, and generate keyboard, mouse, joystick, optical or trackball signal input related to customer 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 and various graphical client interfaces of the server. These graphical client interfaces may be composed of graphics, texts, icons, videos and any combination thereof.

[0132] The electronic device may 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 may provide an audio interface between the user and the electronic device.

[0133] WiFi is a short-range wireless transmission technology. Electronic devices can help customers send and receive emails, browse web pages, and follow streaming media through WiFi modules 107. It provides customers with wireless broadband Internet follow-up. Fig. 9 A WiFi module 107 is shown, but it is understandable that it is not an essential 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. It uses various interfaces and lines to connect various parts of the entire mobile phone. It 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 monitoring the mobile phone as a whole.

[0135] The electronic device also includes a power source 109 (such as a battery) for supplying power to each component. Preferably, the power source can be logically connected to the processor 108 through a power management system, so that the power management system can manage charging, discharging, power consumption and other functions.

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

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

[0138] Acquire the first page instance from the routing stack, acquire 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;

[0139] 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;

[0140] Acquire the second page instance from the routing stack, acquire 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;

[0141] 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;

[0142] The first page instance is obtained again from the routing stack, the first page data is obtained from the data stack, and the first page is generated and displayed 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 emphasis. For the part that is not described in detail in a certain embodiment, please refer to the detailed description above and will not be repeated here.

[0144] A person of ordinary skill in the art will appreciate that all or part of the steps in the various methods of the above embodiments may be completed by instructions, or by controlling related hardware through instructions. The instructions may 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, in which a plurality of instructions are stored, and the instructions can be loaded by a processor to implement the following functions:

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

[0147] Acquire the first page instance from the routing stack, acquire 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;

[0148] 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;

[0149] Acquire the second page instance from the routing stack, acquire 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;

[0150] 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;

[0151] The first page instance is obtained again from the routing stack, the first page data is obtained from the data stack, and the first page is generated and displayed 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 make the essence of the corresponding technical solutions 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: In response to an initial jump request of the first page, placing the first page instance into a routing stack and placing the first page data into a data stack; Acquire the first page instance from the routing stack, acquire 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; 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; Acquire the second page instance from the routing stack, acquire 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; 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 obtained again from the routing stack, the first page data is obtained from the data stack, and the first page is generated and displayed again according to 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 of the first page, the step of placing the first page instance into a routing stack and placing the first page data into a 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 page display method according to claim 2, characterized in that: Before the step of responding to the initial jump request of the first page, the method further includes: Allocating a plurality of routing position intervals in the routing stack, each of the routing position intervals including at least two routing positions, each of the routing positions being used to store a page instance, the page instances corresponding to the same routing position interval being associated with each other, and the page instances corresponding to different routing position intervals being not associated with each other; Allocating a plurality of data position intervals in the data stack, each of the data position intervals including at least two data positions, each of the data positions being used to store a page of data, the page data corresponding to the same data position interval being associated with each other, and the page data corresponding to different data position intervals being not associated with each other; A position correspondence is established between each routing position interval of the routing stack and each data position interval of the data stack.

4. The page display method according to claim 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 comprises: 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 pop action is processed by the reducer object 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 a stack element management action through the action object, and distributing the 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 stacking module, configured to, in response to an initial jump request of the first page, place the first page instance into a routing stack and place the first page data into a 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 the second page instance into a routing stack and place the second page data into a 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 pop module, configured to pop the second page instance from the routing stack and pop 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