微信小程序中頁(yè)面跳轉(zhuǎn)的示例分析

小編給大家分享一下微信小程序中頁(yè)面跳轉(zhuǎn)的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

微信小程序頁(yè)面跳轉(zhuǎn)失敗的原因可能是：1：檢查你跳轉(zhuǎn)的地址是否有誤；2：檢查你要跳轉(zhuǎn)的地址是否在app.js中注冊(cè)過(guò)；3：當(dāng)你跳轉(zhuǎn)的地址位于TabBar中時(shí)，要使用wx.switchTab來(lái)跳轉(zhuǎn)頁(yè)。

接下來(lái)總結(jié)一下跳轉(zhuǎn)的方法：

1.API跳轉(zhuǎn)

• wx.navigateTo({...})

• wx.redirectTo({...})

• wx.switchTab({...})

• wx.reLanch({...})

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

不會(huì)銷毀當(dāng)前頁(yè)面，僅僅是將其hide，使用wx.navigateBack可以返回到原頁(yè)面。

注意：調(diào)用navigateTo 跳轉(zhuǎn)時(shí)，調(diào)用該方法的頁(yè)面會(huì)被加入堆棧中

// 關(guān)閉當(dāng)前頁(yè)面，返回上一頁(yè)面或多級(jí)頁(yè)面?？赏ㄟ^(guò) getCurrentPages() 獲取當(dāng)前的頁(yè)面棧，決定需要返回幾層。

wx.navigateTo({
    url: 'page/home/home'　　    // 頁(yè)面 A
})
wx.navigateTo({
    url: 'page/detail/detail'　　// 頁(yè)面 B
})
// 跳轉(zhuǎn)到頁(yè)面 A
wx.navigateBack({
    delta: 2
})

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

關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)對(duì)應(yīng)的某個(gè)頁(yè)面

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

跳轉(zhuǎn)到tabBar頁(yè)面（在app.json中注冊(cè)過(guò)的tabBar頁(yè)面），同事關(guān)閉其他非tabBar頁(yè)面

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

關(guān)閉所有頁(yè)面，打開(kāi)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。

2.wxml頁(yè)面組件跳轉(zhuǎn)(<navigator>)

// navigator 組件默認(rèn)的 open-type 為 navigate 
<navigator url="/page/navigate/navigate" hover-class="navigator-hover">跳轉(zhuǎn)到新頁(yè)面</navigator>
// redirect 對(duì)應(yīng) API 中的 wx.redirect 方法
<navigator url="../../redirect/redirect/redirect" open-type="redirect" hover-class="other-navigator-hover">在當(dāng)前頁(yè)打開(kāi)</navigator>
// switchTab 對(duì)應(yīng) API 中的 wx.switchTab 方法
<navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切換 Tab</navigator>
// reLanch 對(duì)應(yīng) API 中的 wx.reLanch 方法
<navigator url="../../redirect/redirect/redirect" open-type="redirect" hover-class="other-navigator-hover">關(guān)閉所有頁(yè)面，打開(kāi)到應(yīng)用內(nèi)的某個(gè)頁(yè)面</navigator>
// navigateBack 對(duì)應(yīng) API 中的 wx.navigateBack 方法
<navigator url="/page/index/index" open-type="navigateBack" hover-class="other-navigator-hover">關(guān)閉當(dāng)前頁(yè)面，返回上一級(jí)頁(yè)面或多級(jí)頁(yè)面</navigator>

以上是“微信小程序中頁(yè)面跳轉(zhuǎn)的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！