前言

本期我們將學(xué)習(xí)頁(yè)面跳轉(zhuǎn)功能，頁(yè)面跳轉(zhuǎn)功能主要使用小程序的導(dǎo)航API來(lái)實(shí)現(xiàn)。

實(shí)現(xiàn)效果

要從welcome頁(yè)面跳轉(zhuǎn)到post頁(yè)面，需要使用事件來(lái)響應(yīng)點(diǎn)擊“開(kāi)啟小程序之旅”這個(gè)動(dòng)作。

事件

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

如何實(shí)現(xiàn)事件

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

如下，我們調(diào)用MINA框架中的導(dǎo)航API，來(lái)實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)

welcome.wxml

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

welcome.js

思路：

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

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

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

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

小程序的導(dǎo)航API

wx.redirectTo

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

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

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

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

wx.navigateTo

保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到指定頁(yè)面

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

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

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

wx.switchTap

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

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

• success：跳轉(zhuǎn)頁(yè)面成功時(shí)MINA框架將調(diào)用的函數(shù)
• fail：跳轉(zhuǎn)頁(yè)面失敗時(shí)MINA框架將調(diào)用的函數(shù)
• complete：無(wú)論成功或者失敗，MINA框架都將調(diào)用此函數(shù)。

總結(jié)

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

最新評(píng)論