微信小程序頁面跳轉的三種方式總結


原文鏈接 https://blog.csdn.net/zgmu/article/details/72123329

首先我們了解到,小程序規定頁面路徑只能有五層,所以我們盡量避免多層級的頁面跳轉


頁面跳轉會涉及到多層級的跳轉:

 

第一種:wx.navigateTo(OBJECT) 

  navigateTo 保留當前頁面,跳轉到應用的某一個頁面,使用wx.navigateBack可以返回到願頁面。

  OBJECT 參數說明:

參數 類型 必填 說明
url String 需要跳轉的應用內頁面的路徑 , 路徑后可以帶參數。參數與路徑之間使用?分隔,參數鍵與參數值用=相連,不同參數用&分隔;如 ‘path?key=value&key2=value2’

success

Function 接口調用成功的回調函數 
fail Function 接口調用失敗的回調函數
complete Function 接口調用結束的回調函數(調用成功/失敗都會執行)
1
2
3
4
5
onLoad:  function (options) {
       wx.navigateTo({
              url:  '../index/index'
       })
}

第二種:wx.redirectTo(OBJECT) 

  redirectTo 關閉當前頁面,跳轉到應用的某個頁面

  OBJECT 參數說明:

參數 類型 必填 說明
url String 需要跳轉的應用內頁面的路徑

success

Function 接口調用成功的回調函數 
fail Function 接口調用失敗的回調函數
complete Function 接口調用結束的回調函數(調用成功/失敗都會執行)
  onLoad: function(options) {
        wx.redirectTo({
               url: '../index/index'
        })
  }

第三種:wx.navigateBack(OBJECT) 

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

  OBJECT參數說明:

參數 類型 默認值 說明
delta Number 1 返回的頁面數,如果 delta 大於現有頁面數,則返回到首頁。
復制代碼
 onLoad: function(options) {
        var pages = getCurrentPages()
        var num = pages.length
        navigateBack:function(){
            wx.navigateBack({
                 delta: num
            })
        }
 }
復制代碼

原文鏈接:https://www.cnblogs.com/caicaizi/p/6652103.html

頁面跳轉攜帶參數:

我們知道,在微信小程序中,從一個頁面轉到另一個頁面,一般情況下可以通過navigate或redirect時候的url來攜帶參數,然后在目標頁面的onLoad函數參數中獲取這些url參數。例如:

// 源頁面A相關代碼
wx.navigateTo({
 // 在url中攜帶值跳轉(?(屬性)=(值))如果兩個參數傳遞就用&隔開 url: "/pages/mypage/mypage?a=1&b=2" })
復制代碼
// 目標頁面B相關代碼
Page({
  onLoad: function (options) {
    var a = options.a; // 值:1
    var b = options.b; // 值:2
  }
})
復制代碼

但是,這種方式只有在目標頁面還沒有創建的時候,才有效。因為一個頁面的onLoad方法在頁面的生命周期中,只執行一次。

考慮一下以下場景:

1. 在【頁面A】中調用wx.navigateTo方法跳轉到【頁面B】 2. 然后從【頁面B】返回【頁面A】, 並將【頁面B】中的一些數據傳回【頁面A】

舉個更實際點的例子,如下圖所示,我在這個表單頁面A中填寫數據:

 

上圖為A頁面

然后這個頁面上,有一個搜索按鈕,點擊該按鈕,將跳轉到另一個證券代碼搜索頁面B

上圖為頁面B

當我在這個搜索列表中選中一個證券代碼后,將返回到上一個表單頁面,繼續我未完成的表單填寫與提交操作。

這種場景是非常合理和常見的。

但是,我們來想一下,怎么在退出頁面B,返回頁面A的時候,把頁面B中選中的證券代碼回傳給頁面A呢?使用navigateTo()中url攜帶參數的方式?

基於Page生命周期的原因,我們的答案是:不行!

那有什么辦法可以做到呢?

方法1:使用全局數據存儲
  • 將要傳遞的數據,存儲在App對象上(比如globalData屬性)。
  • 將要傳遞的數據,存儲在小程序的本地數據緩存(Storage)中。

例如,我們在將要退出頁面B的時候,作如下調用:

復制代碼
//=== 1. 存儲到app對象上的方式 ========
var app = getApp()
app.globalData.mydata = {a:1, b:2};  //存儲數據到app對象上
wx.navigateBack();  //返回上一個頁面

//=== 2.存儲到數據緩存的方式 =========
wx.setStorage({
  key: "mydata",
  data: {a:1, b:2},
  success: function () {
    wx.navigateBack();   //返回上一個頁面
  }
})
復制代碼

這樣一來,當返回到上一個頁面的時候,可以通過讀取這些全局存儲區域,來獲取到我們需要的數據。

不過,這種方式也是有很明顯的缺點的。由於是全局數據存儲,所以當你存入了那些數據后,必須謹慎的去管理這些全局數據(何時被銷毀),否則一不小心,就會產生副作用。

方法2:從頁面路由棧中直接獲取和操作目標Page對象

這種方式,是通過調用小程序的API: getCurrentPages(),來獲取當前頁面路由棧的信息,這個路由棧中按照頁面的路由順序存放着相應的Page對象,我們可以很容易的獲取到上一級頁面的完整Page對象,從而使直接調用Page對象的屬性和方法成為可能。

如下所示:

復制代碼
var pages = getCurrentPages();
var currPage = pages[pages.length - 1];   //當前頁面
var prevPage = pages[pages.length - 2];  //上一個頁面

//直接調用上一個頁面的setData()方法,把數據存到上一個頁面中去
prevPage.setData({
  mydata: {a:1, b:2}
})
復制代碼

比起全局數據存儲的方式,這種方式在邏輯上要清晰得多,也不存在對數據的銷毀有額外的管理工作。

總之,目前來看,如果你遇上了這樣的場景,我推薦你使用方法2來設計你的代碼。也希望小程序框架能推出更好更優雅的方式,來解決這種數據回傳問題。

 

買三送二

就今天還看到其他跳轉的方法:

wx.reLaunch(OBJECT),小程序關閉所有頁面

  reLaunch 小程序關閉所有頁面

  OBJECT參數說明:

參數 類型 必填 說明
url String 需要跳轉的應用內頁面路徑 , 路徑后可以帶參數。參數與路徑之間使用?分隔,參數鍵與參數值用=相連,不同參數用&分隔;如 'path?key=value&key2=value2',如果跳轉的頁面路徑是 tabBar 頁面則不能帶參數

success

Function 接口調用成功的回調函數 
fail Function 接口調用失敗的回調函數
complete Function 接口調用結束的回調函數(調用成功/失敗都會執行)

代碼實例:

wx.reLaunch({
  url: 'test?id=1'
})

wx.switchTab(OBJECT), 小程序跳轉到 tabBar 頁面

  switchTab 跳轉到 tabBar 頁面,並關閉其他所有非 tabBar 頁面

  OBJECT參數說明:

參數 類型 必填 說明
url String 需要跳轉的 tabBar 頁面的路徑(需在 app.json 的 tabBar 字段定義的頁面),路徑后不能帶參數

success

Function 接口調用成功的回調函數 
fail Function 接口調用失敗的回調函數
complete Function 接口調用結束的回調函數(調用成功/失敗都會執行)

代碼實例:

 

    wx.switchTab({
            url: "../advice/advice" //此頁面為tabBar頁面
      });


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2024 CODEPRJ.COM