Technical solution—page jump in app WeChat applet

WeChatThe reason why the mini program page fails to jump may be: 1: Check whether the address you jump to is wrong; 2: Check the address you want to jump to Whether the address has been registered in app.js; 3: When the address you jump to is in the TabBar, use wx.switchTab to jump to the page.

Next, let’s summarize the jump method:

1.API jump

• wx.navigateTo({...})

• wx.redirectTo({...})

• ##wx.switchTab({. ..})

• wx.reLanch({...})

(1) wx.navigateTo({. ..})

It will not destroy the current page, but just hide it. Use wx.navigateBack to return to the original page.

Note: When calling navigateTo to jump, the page that calls this method will be added to the stack

// 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

wx.navigateTo({
    url: 'page/home/home'　　    // 页面 A
})
wx.navigateTo({
    url: 'page/detail/detail'　　// 页面 B
})
// 跳转到页面 A
wx.navigateBack({
    delta: 2
})

(2) wx.redirectTo({...})

Close the current page and jump to a corresponding page in the application

(3) wx.switchTab({...})

Jump to the tabBar page (in app.json Registered tabBar page), and close other non-tabBar pages

(4) wx.reLanch({...})

Close all pages and open to a page within the application .

2.wxml page component jump (90553a25cfb9c2089e9e88a5e7e05f40)

// navigator 组件默认的 open-type 为 navigate 
<navigator url="/page/navigate/navigate" hover-class="navigator-hover">跳转到新页面</navigator>
// redirect 对应 API 中的 wx.redirect 方法
<navigator url="../../redirect/redirect/redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
// switchTab 对应 API 中的 wx.switchTab 方法
<navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>
// reLanch 对应 API 中的 wx.reLanch 方法
<navigator url="../../redirect/redirect/redirect" open-type="redirect" hover-class="other-navigator-hover">关闭所有页面，打开到应用内的某个页面</navigator>
// navigateBack 对应 API 中的 wx.navigateBack 方法
<navigator url="/page/index/index" open-type="navigateBack" hover-class="other-navigator-hover">关闭当前页面，返回上一级页面或多级页面</navigator>

Related recommendations:

WeChat applet page jump Function

Introduction to navigator page jump in WeChat mini program development

Video tutorial on developing WeChat mini program

The above is the detailed content of Technical solution—page jump in app WeChat applet. For more information, please follow other related articles on the PHP Chinese website!