Detailed explanation of WeChat applet page jump and data transfer examples

WeChat applet page jump and data transfer

1. Pilot

In Android, our Activity and Fragment have stacks The concept of stack is in it, and the WeChat applet page also has the concept of stack in it. There are four ways to jump to the WeChat applet page:

1.wx.navigateTo(OBJECT);
2.wx.redirectTo(OBJECT);
3.wx.switchTab( OBJECT);
4.wx.navigateBack(OBJECT)
5. Use to implement the corresponding jump function;

Analysis:

1. where navigateTo is Save the original page in the page stack. When jumping to the next page, the target page is also pushed into the stack. Only in this case can you click the return button on the phone to jump to the previous page;

2. RedirectTo and switchTab both clear the original page in the stack first, and then push the target page into the stack. Using these two jump methods, you cannot return to the previous page through the system's return key, but exit directly. Mini program;

3. When using redirectTo, it must be used with the tabBar or the jump button in the page, otherwise you cannot return to the previous page;

4. The page that switchTab jumps to must be the page declared in tabBar;

5. The fields defined in tabBar cannot exceed 5 pages, and the page stack level of the applet cannot exceed 5 layers. .

6. navigateBack can only return to the specified page in the page stack, and is generally used in conjunction with navigateTo.

7. wx.navigateTo and wx.redirectTo are not allowed to jump to the tabbar page, only wx.switchTab can be used to jump to the tabbar page
   

2. Specific operations for page jump

(1)wx.navigateTo(OBJECT)

Keep the current page and jump Go to a page in the application and use wx.navigateBack to return to the original page.

wx.navigateTo({
 url: 'test?id=1'//实际路径要写全
})

//test.js
Page({
 onLoad: function(option){
 console.log(option.query) 
 }
})

Note: In order not to cause trouble to users when using the mini program, we stipulate that the page path can only be five levels. Please try to avoid multi-level interactions.

Close the current page and jump to a page within the application.

wx.redirectTo({
 url: 'test?id=1'
})

( 3) wx.switchTab(OBJECT)

Jump to the tabBar page and close all other non-tabBar pages

{
 "tabBar": {
 "list": [{
  "pagePath": "index",
  "text": "首页"
 },{
  "pagePath": "other",
  "text": "其他"
 }]
 }
}

wx.switchTab({
 url: '/index'
})

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面
wx.navigateTo({
 url: 'B?id=1'
})

// 此处是B页面
wx.navigateTo({
 url: 'C?id=1'
})

// 在C页面内 navigateBack，将返回A页面
wx.navigateBack({
 delta: 2
})

<navigator url="navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
 <navigator url="redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
 <navigator url="index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>

"
wx.navigateTo({
 url: 'test?id=1'//实际路径要写全
})

//test.js
Page({
 onLoad: function(option){
 console.log(option.id) 
 }
})