微信小程序怎么實現(xiàn)頁面跳轉(zhuǎn)功能

這篇“微信小程序怎么實現(xiàn)頁面跳轉(zhuǎn)功能”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“微信小程序怎么實現(xiàn)頁面跳轉(zhuǎn)功能”文章吧。

實現(xiàn)效果

要從welcome頁面跳轉(zhuǎn)到post頁面，需要使用事件來響應點擊“開啟小程序之旅”這個動作。

事件

事件是視圖層（wxml）到邏輯層（js）的通信方式。通俗些講，事件可以讓我們在js里處理一些用戶在界面上的一些操作，并對這些操作做出反饋。

如何實現(xiàn)事件

• 在組件上注冊事件。注冊事件將告訴小程序，我們要監(jiān)聽哪個組件的什么事件。

• 在js中編寫事件處理函數(shù)響應事件。監(jiān)聽到事件后，需要編寫自己的業(yè)務。

如下，我們調(diào)用MINA框架中的導航API，來實現(xiàn)頁面跳轉(zhuǎn)

welcome.wxml

在按鈕組件上添加catchtap的事件綁定，監(jiān)聽點擊這個動作。當用戶點擊這個動作后，將執(zhí)行一個onTapJump的函數(shù)。

welcome.js

思路：

1、在頁面的js文件中定義onTapJump的函數(shù)。

2、使用redirectTo實現(xiàn)頁面跳轉(zhuǎn)。

3、定義跳轉(zhuǎn)成功、失敗、完成時的函數(shù)，并進行調(diào)試。

可以看到，點擊“開啟小程序之旅”跳轉(zhuǎn)后，控制臺出現(xiàn)了“jump success”和“jump complete”，說明跳轉(zhuǎn)成功了。

小程序的導航API

wx.redirectTo

關(guān)閉當前頁面，跳轉(zhuǎn)到指定頁面

我們加入onUnload和onHide進行調(diào)試

如下，當我們使用redirectTo函數(shù)會發(fā)現(xiàn)，頁面左上角有一個“小房子”，點擊返回后可以再返回到welcome頁面。

如下，我們會發(fā)現(xiàn)，頁面輸出“page id onunload”，所以，redirectTo將關(guān)閉當前頁面并將頁面卸載

wx.navigateTo

保留當前頁面，跳轉(zhuǎn)到指定頁面

如下，當我們使用navigateTo函數(shù)會發(fā)現(xiàn)，頁面左上角有一個返回按鈕，點擊返回后可以再返回到welcome頁面。

navigateTo將執(zhí)行onHide事件回調(diào)，并輸出了“page is onhide”。所以，navigateTo僅僅會隱藏當前頁面，還可以再次返回到被隱藏的頁面。

redirectTo和navigateTo在使用方式上完全相同，他們都接收一個Object對象作為參數(shù)。Object對象中最重要的屬性是url，它將指定要跳轉(zhuǎn)的頁面路徑。

wx.switchTap

只能用于跳轉(zhuǎn)到帶tabBar的頁面，并關(guān)閉其他所有非tabBar頁面。

Object參數(shù)可接受的方法

• success：跳轉(zhuǎn)頁面成功時MINA框架將調(diào)用的函數(shù)

• fail：跳轉(zhuǎn)頁面失敗時MINA框架將調(diào)用的函數(shù)

• complete：無論成功或者失敗，MINA框架都將調(diào)用此函數(shù)。

以上就是關(guān)于“微信小程序怎么實現(xiàn)頁面跳轉(zhuǎn)功能”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。