前言

微信小程序頁(yè)面跳轉(zhuǎn)的各種方法總結(jié)，備查。

方式一：wx.navigateTo

保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面?？梢酝ㄟ^(guò)調(diào)用 wx.navigateBack 返回到原頁(yè)面。跳轉(zhuǎn)后左上角出現(xiàn)返回小箭頭，點(diǎn)擊后可返回原本頁(yè)面。示例代碼：

wx.navigateTo({
    url: '../carDetails/carDetails'
})

• 使用場(chǎng)景

適用于需要跳轉(zhuǎn)到新頁(yè)面并保留原頁(yè)面狀態(tài)的情況，比如從列表頁(yè)跳轉(zhuǎn)到詳情頁(yè)。

• 優(yōu)點(diǎn)

可以保留原頁(yè)面的狀態(tài)，用戶返回時(shí)可以繼續(xù)操作。

• 缺點(diǎn)

每次跳轉(zhuǎn)都會(huì)創(chuàng)建新頁(yè)面，可能會(huì)占用較多的內(nèi)存資源。

方式二：wx.redirectTo

關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面，不能跳轉(zhuǎn) tabbar 頁(yè)面，跳轉(zhuǎn)后左上角出現(xiàn)返回首頁(yè)圖標(biāo)，點(diǎn)擊后可返回首頁(yè)面。示例代碼：

wx.redirectTo({
  url: '../carDetails/carDetails'
})

• 使用場(chǎng)景

適用于需要關(guān)閉當(dāng)前頁(yè)面并跳轉(zhuǎn)到新頁(yè)面的情況，比如登錄成功后跳轉(zhuǎn)到首頁(yè)。

• 優(yōu)點(diǎn)

可以直接關(guān)閉當(dāng)前頁(yè)面，減少內(nèi)存占用。

• 缺點(diǎn)

無(wú)法保留原頁(yè)面的狀態(tài)，用戶返回時(shí)會(huì)重新加載頁(yè)面。

方式三：wx.reLaunch

關(guān)閉所有頁(yè)面，打開(kāi)應(yīng)用內(nèi)的某個(gè)頁(yè)面，跳轉(zhuǎn)后左上角出現(xiàn)返回首頁(yè)圖標(biāo)，點(diǎn)擊后可返回首頁(yè)面。示例代碼：

wx.reLaunch({
  url: '../carDetails/carDetails'
})

• 使用場(chǎng)景

適用于需要關(guān)閉所有頁(yè)面并打開(kāi)新頁(yè)面的情況，比如用戶退出登錄后跳轉(zhuǎn)到登錄頁(yè)。

• 優(yōu)點(diǎn)

可以清空頁(yè)面棧，減少內(nèi)存占用。

• 缺點(diǎn)

無(wú)法保留原頁(yè)面的狀態(tài)，用戶返回時(shí)會(huì)重新加載頁(yè)面。

方式四：wx.switchTab

跳轉(zhuǎn)到 tabBar 頁(yè)面，并關(guān)閉其他所有非 tabBar 頁(yè)面，該方法只能跳轉(zhuǎn) tabbar 頁(yè)面。 示例代碼：

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

• 使用場(chǎng)景

適用于需要跳轉(zhuǎn)到 tabBar 頁(yè)面的情況，比如從其他頁(yè)面跳轉(zhuǎn)到首頁(yè)。

• 優(yōu)點(diǎn)

可以直接跳轉(zhuǎn)到 tabBar 頁(yè)面，方便用戶導(dǎo)航。

• 缺點(diǎn)

無(wú)法保留原頁(yè)面的狀態(tài)，用戶返回時(shí)會(huì)重新加載頁(yè)面。

方式五：wxml中navigator標(biāo)簽跳轉(zhuǎn)

通過(guò)設(shè)置 url 屬性來(lái)指定跳轉(zhuǎn)的目標(biāo)頁(yè)面。 示例代碼：

<navigator url="../carDetails/carDetails"><button>我是A頁(yè)面，點(diǎn)擊跳轉(zhuǎn)到B頁(yè)面</button></navigator>

• 使用場(chǎng)景

適用于需要在頁(yè)面中添加跳轉(zhuǎn)鏈接的情況，比如在列表頁(yè)中點(diǎn)擊某個(gè)項(xiàng)跳轉(zhuǎn)到詳情頁(yè)。

• 優(yōu)點(diǎn)

使用簡(jiǎn)單，可以直接在頁(yè)面中添加跳轉(zhuǎn)鏈接。

• 缺點(diǎn)

無(wú)法保留原頁(yè)面的狀態(tài)，用戶返回時(shí)會(huì)重新加載頁(yè)面。

• 注意

<navigator> 組件只能跳轉(zhuǎn)到小程序內(nèi)的頁(yè)面，無(wú)法跳轉(zhuǎn)到外部鏈接。如果需要跳轉(zhuǎn)到外部鏈接，可以使用 <a> 標(biāo)簽，并設(shè)置 open-type 屬性為 navigate。

頁(yè)面回退

wx.navigateBack(Object object)

• 功能描述

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

• wx.navigateBack的作用

wx.navigateBack函數(shù)是微信小程序提供的一個(gè)API接口，用于實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn)回退功能。具體來(lái)說(shuō)，它可以用來(lái)回到歷史記錄中的上一個(gè)頁(yè)面。

例如，在一個(gè)小程序中，用戶從頁(yè)面A跳轉(zhuǎn)到頁(yè)面B，此時(shí)在頁(yè)面B中如果使用wx.navigateBack函數(shù)，則可以返回到頁(yè)面A，即上一個(gè)頁(yè)面。

• wx.navigateBack的參數(shù)

wx.navigateBack函數(shù)支持傳入一個(gè)參數(shù)，用來(lái)指定返回的頁(yè)面數(shù)，即返回歷史記錄中的第幾個(gè)頁(yè)面。

例如，如果用戶從頁(yè)面A跳轉(zhuǎn)到頁(yè)面B，再?gòu)捻?yè)面B跳轉(zhuǎn)到頁(yè)面C，此時(shí)在頁(yè)面C中使用wx.navigateBack(2)函數(shù)，則可以返回到頁(yè)面A，因?yàn)闅v史記錄中的第2個(gè)頁(yè)面就是頁(yè)面A。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-756134.html

// 示例代碼
wx.navigateBack({
  delta: 2
})

到了這里，關(guān)于微信小程序頁(yè)面跳轉(zhuǎn)方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！