The native page of applets has a hierarchy limit, beyond a certain number of layers will not be able to open new pages. At first the limit was no more than five storeys; now it is no more than 10.

This limitation can be uncomfortable for small programs with large volumes. Especially when you can only open layer 5, the business process is easy to accidentally over, such as: home page – search results page – product details page – chat page – order page – address selection page -… ; More access loop security, such as: product details page – view more pages – product details page – view more pages -… , product details page – chat page – Personal home page – Product details page – chat page – Personal home page – Product details page -… And so on. Even after being relaxed to 10 levels, it is still easy to experience hierarchy overflow.

One approach is to adjust the interaction path and strictly control the number of levels. But the treatment scheme, a lot of time will sacrifice user experience, such as to avoid personal home page and product details page access circuit, or don’t have access to the user in the personal home page, or don’t have access to the seller in the product details page home page, or visit the need to replace the current cannot return to continue browsing, no matter how to choice will sacrifice some users browse appeal; Second, particularly high maintenance costs, more and more complex business logic, spread interactive path is more and more, the unity of the path and planning will be more and more difficult, and the management process is not transparent to the business, the business side by interactive path when the design requirements of the restrictions, even a demand interaction adjustment is likely to be inadvertently caused another demand level overflow, Maintenance costs are high and ballooning.

Therefore, this paper considers and implements another approach: to support unrestricted routing in small programs.

strategy

  • Modify the default navigation behavior of small programs, to maintain a complete history
  • When the page level is less than or equal to 10, the navigation behavior is consistent with the native navigation behavior
  • The logical level records the full history of requests to open layer 11 and above, while the actual level directly replaces layer 10 with the target page each time
  • When returned, the logical hierarchy falls back accordingly; If the logical level of the rollback is greater than or equal to 10, the actual layer replaces the 10th layer with the target page. Otherwise, the actual layer reverts to the corresponding page
  • demo:
Logical level 1-2 -... - 8-9-10 Actual level 1-2 -... - 8-9-10 Open logical level 1-2 -... -8-9-10-11 Actual level 1-2 -... - 8-9-11 Open, open, open Logical level 1-2 -... -8-9-10-11-12-13-14 Actual level 1-2 -... - 8-9-14 Returns logical level 1-2 -... -8-9-10-11-12-13 Actual level 1-2 -... -8-9-13 Back, back, back logical level 1-2 -... - 8-9-10 Actual level 1-2 -... - 8-9-10 Returns logical level 1-2 -... - 8-9 Actual level 1-2 -... - 8-9Copy the code

implementation

Check out the implementation of the above strategy and make it available for open source use at github.com/zhuanzhuanf… , welcome to use or refer to.

Main difficulties and implementation scheme:

  • How to take over the routing process
    • Requires that all pages do not use
      elements and use JS to trigger jumps
    • Wx. NavigateTo, wx. RedirectTo and other routing-related interfaces should not be directly called on all pages, and corresponding interfaces encapsulated by modules should be used in a unified manner
  • How do I listen for return behavior
    • Uniformly listens to the onUnload function of a page to determine whether a user returns using the routing process
  • How to integrate system interaction
    • Fault: The system interaction jumps out of the normal routing process and is difficult to take over or monitor. For example, a user clicks the button in the upper right corner to return to the home page, a user accesses the background from another entry, or a user forcibly closes the small program process
    • Processing: the correction mechanism is introduced to correct the self-maintained routing stack according to the system routing stack at an appropriate time. In this way, routes within layer 10 are correct. System interactions tend to go back to layer 1 and will be corrected successfully.
  • How to avoid/compatibility code leaks
    • Problem: The take-over and listening process requires all pages to follow some coding constraints, how to ensure that these constraints are fully effective; Can you still ensure robustness in case there are pages that do not follow the constraints
    • Process 1: Write and configure esLint rules to ensure that the constraints are followed
    • Treatment 2: The correction mechanism in the previous article ensures that even code omissions will be corrected within 10 layers; Going beyond 10 layers may affect the logical correctness of the return, but it generally does not cause page functionality problems.
  • How do I do state recovery
    • Problem: when the logic level is greater than or equal to 10 after the return, the target page is actually reloaded at level 10; State information such as user input in the form on the previous page is not retained as normally as the system returns
    • Processing: Store the page’s data when appropriate and restore it when returned

The cost of

  • Access to the cost
    • The routing module needs to be imported and configured
    • You need to check and modify all page hopping processes in the project, using the interface encapsulated by the module
    • You need to listen uniformly to the onUnload function for all pages
  • Maintenance costs
    • Added the page hopping process, using the interface encapsulated by the module
    • Added Unified listening for the onUnload function
  • The cost of performance
    • The execution logic of the module is relatively simple, the memory cost is relatively small, and the page performance has not been found obvious loss

earnings

  • Infinite levels
    • Avoid complex/circular access that prevents the page from opening
    • You can safely provide users with suitable access points without worrying too much about path restrictions
  • Complete route control capability
    • You can fully monitor the routing process and implement or introduce additional functionality
    • Additional features: Automatic recovery of instance overwrite
      • Problem: The wepy framework has A single instance problem. When the same path page is opened twice, its data will affect each other, for example: Details page A – Details page B – Return to A, click to view the larger picture – B (instead of the picture of A) See issue: When two levels of the page are on the same route, the data of the latter overwrites the former
      • Policy: If the data on the target page has been overwritten, it will be automatically restored
      • Import: refer to the module instructions
    • Additional features: No concurrency
      • Problem: When users click multiple/multiple buttons in a row, multiple Windows will be opened at one time, which causes hierarchy expansion and affects browsing experience
      • Policy: Ignore the jump request generated by the first click until the jump is complete
      • Import: refer to the module instructions
    • Additional features: data preloading
      • Problem: the page1 of the applet jumps to page2, and there is a delay of 300ms ~ 400ms in the onLoad of page2. The delay will be wasted if the onLoad of page2 starts to get data
      • Policy: fetch data in page1 and use data directly in page2; The WEpy framework implements this well, see wepy’s exploration of performance tuning for applets
      • Import: refer to the module instructions

The effect

Infinite hierarchy routing scheme has been used for a long time in the second-hand trading network applet, welcome to experience:

The infinite hierarchy routing scheme has been extracted and encapsulated into an independent open source module. Welcome to use it directly: github.com/zhuanzhuanf…