前言

本期我們將學習頁面跳轉功能，頁面跳轉功能主要使用小程序的導航API來實現。

實現效果

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

事件

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

如何實現事件

• 在組件上注冊事件。注冊事件將告訴小程序，我們要監(jiān)聽哪個組件的什么事件。
• 在js中編寫事件處理函數響應事件。監(jiān)聽到事件后，需要編寫自己的業(yè)務。

如下，我們調用MINA框架中的導航API，來實現頁面跳轉

welcome.wxml

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

welcome.js

思路：

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

2、使用redirectTo實現頁面跳轉。

3、定義跳轉成功、失敗、完成時的函數，并進行調試。

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

小程序的導航API

wx.redirectTo

關閉當前頁面，跳轉到指定頁面

我們加入onUnload和onHide進行調試

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

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

wx.navigateTo

保留當前頁面，跳轉到指定頁面

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

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

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

wx.switchTap

只能用于跳轉到帶tabBar的頁面，并關閉其他所有非tabBar頁面。

Object參數可接受的方法

• success：跳轉頁面成功時MINA框架將調用的函數
• fail：跳轉頁面失敗時MINA框架將調用的函數
• complete：無論成功或者失敗，MINA框架都將調用此函數。

總結

到此這篇關于微信小程序如何實現頁面跳轉功能詳解的文章就介紹到這了,更多相關微信小程序頁面跳轉功能內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論