微信小程序頁面跳轉方法總結

derek_334892 發布于2019-08-26 11:56 / 991人閱讀

摘要：在我們日常的開發過程中，跳轉頁面是每個項目中必有的需求，包括監聽返回按鈕，回到指定頁面，在小程序中頁面跳轉即頁面路由頁面棧框架以棧的形式維護了當前的所有頁面。

在我們日常的開發過程中，跳轉頁面是每個項目中必有的需求，包括監聽返回按鈕，回到指定頁面，在小程序中頁面跳轉即頁面路由

頁面棧

框架以棧的形式維護了當前的所有頁面。當發生路由切換的時候，頁面棧的表現如下：

getCurrentPages()函數用于獲取當前頁面棧的實例，以數組形式按棧的順序給出，第一個元素為首頁，最后一個元素為當前頁面。
注意：不要嘗試修改頁面棧，會導致路由以及頁面狀態錯誤。

路由方式

在小程序中，路由跳轉大概兩種方式，一種可以利用API跳轉，另外一種就是頁面組件了，下面詳細看下，看看每種跳轉方式區別

利用API跳轉

// 保留當前頁面，跳轉到應用內的某個頁面，使用wx.navigateBack可以返回到原頁面。
// 注意：調用 navigateTo 跳轉時，調用該方法的頁面會被加入堆棧，但是 redirectTo 
wx.navigateTo({
  url: "page/home/home?user_id=1"
})


// 關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages() 獲取當前的頁面棧，決定需要返回幾層。

wx.navigateTo({
  url: "page/home/home?user_id=1"　　// 頁面 A
})
wx.navigateTo({
  url: "page/detail/detail?product_id=2"　　// 頁面 B
})
// 跳轉到頁面 A
wx.navigateBack({
  delta: 2  //返回指定頁面
})


// 關閉當前頁面，跳轉到應用內的某個頁面。
wx.redirectTo({
  url: "page/home/home?user_id=111"
})


// 跳轉到tabBar頁面（在app.json中注冊過的tabBar頁面），同時關閉其他非tabBar頁面。
wx.switchTab({
  url: "page/index/index"
})


// 關閉所有頁面，打開到應用內的某個頁面。
wx.reLanch({
  url: "page/home/home?user_id=111"
})

2.頁面組件跳轉

// redirect 對應 API 中的 wx.redirect 方法
在當前頁打開

// navigator 組件默認的 open-type 為 navigate 
跳轉到新頁面

// switchTab 對應 API 中的 wx.switchTab 方法
切換 Tab

// reLanch 對應 API 中的 wx.reLanch 方法
//關閉所有頁面，打開到應用內的某個頁面

// navigateBack 對應 API 中的 wx.navigateBack 方法
關閉當前頁面，返回上一級頁面或多級頁面

不全的歡迎補充

GPU云服務器云服務器微信小程序微信小程序支付微信小程序部署微信小程序搭建

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/107859.html

微信小程序知識總結及案例集錦

摘要：對微信小程序進行全局配置，決定頁面文件的路徑窗口表現設置網絡超時時間設置多等。微信小程序知識總結及案例集錦微信小程序的發展會和微信公眾號一樣，在某個時間點爆發學習路徑微信小程序最好的教程肯定是官方的文檔啦，點擊這里直達微信官方文檔認真跟著文檔看一遍，相信有vue前端經驗的看下應該就能上手了，然后安裝微信小程序開發者工具新建一個quick start項目，了解代碼結構，...

sean 2019-08-20 17:45 評論0 收藏0
微信小程序初體驗，入門練手項目--通訊錄，后臺是阿里云服務器

摘要：最近微信小程序異常火爆，很多人在學習，下面帶著大家搭建下微信小程序的調試環境，并調試入門練手項目通訊錄和基礎即可微信推薦使用的語言，去菜鳥教程簡單學習下，，，即可，方便大家學習。一、前言（坑爹的玩意）項目源碼：https://github.com/saucxs/wx_... 微信小程序自從2017年，被各種看好，不過一段時間過去了還是反響平平，下半年隨著各項功能的開放，很多企業...

kel 2019-08-23 12:41 評論0 收藏0
微信小程序之啟動頁的重要性

摘要：在小程序啟動的時候自動登錄，目前沒獲取用戶信息，所以不需要用戶授權，這個邏輯放在根目錄下的的方法中。做完之后發現了一個很嚴重的問題，就是的方法確實會在小程序啟動的時候執行，但是首頁也會是在文件的中第一個頁面也會同時執行，它不是阻塞的。啟動頁在APP中是個很常見的需求，為什么對于小程序來說也非常重要呢？首先我描述一下我在開發過程中遇到的一些問題以及解決的步驟，到最后為什么要加啟動頁，看...

Alan 2019-08-16 15:28 評論0 收藏0