小程式實現頁面跳轉與資料傳遞方案

2022-09-08 18:03:11

頁面跳轉和資料傳遞

介面的跳轉有兩種方式：通過navigator元件和通過wx的API跳轉

這裡我們先以wx的API作為講解：

wx的API跳轉

上面API中, 我們最常用的就是wx.navigateTo和wx.navigateBack

wx.navigateTo(Object object)

保留當前頁面，跳轉到應用內的某個頁面；

但是不能跳到 tabbar 頁面；

引數屬性

屬性	型別	預設值	必填	說明
path	string	無	是	需要跳轉的應用內非tabBar的頁面的路徑(程式碼包路徑), 路徑後可以帶引數. 引數與路徑直接使用 ? 分隔, 引數鍵與引數值用 = 連線, 不同引數用 & 分隔; 如: path?key=value&key2=value2
events	Object	{}	否	頁面間通訊介面，用於監聽被開啟頁面傳送到當前頁面的資料。基礎庫 2.7.3 開始支援。
success	function	無	否	介面呼叫成功的回撥函數，
fail	function	無	否	介面呼叫失敗的回撥函數
complete	function	無	否	介面呼叫結束的回撥函數（呼叫成功、失敗都會執行）

演示程式碼

通過查詢字串可以傳遞引數

wx.navigateTo({
  // 跳轉的同時傳遞一些引數
  url: "/pages/about/about?name=chenyq&age=18&height=1.88",
})

在頁面的onLoad生命週期可以獲取到引數

onLoad(options) {
  console.log(options.name);
  console.log(options.age);
  console.log(options.height);
}

wx.navigateBack(Object object)

關閉當前頁面，返回上一頁面或多級頁面。

<button bindtap="btnTap">返回</button>

btnTap() {
  // 返回上一級頁面
  wx.navigateBack()
  // 返回多級頁面
  wx.navigateBack({
    delta: 2
  })
}

如何在介面跳轉過程中我們需要相互傳遞一些資料，應該如何完成呢？

剛剛我們演示過, 從首頁跳轉到詳情頁：可以使用URL中的query欄位

那在詳情頁點選返回按鈕時, 想要將資料傳遞迴首頁該如何傳遞呢

有兩種方式可以做到

方式一

btnTap() {
  // 1.返回上一級
  wx.navigateBack()

  // 2.給上一級傳遞資料
  // 2.1獲取到上一級頁面的範例
  const pages = getCurrentPages()
  const page = pages[pages.length - 2]
  // 2.2在上一個頁面提前定義好變數用於儲存資料
  page.setData({
    message: "呵呵呵"
  })
}

上面早期資料的傳遞方式只能通過上述的方式來進行，在小程式基礎庫 2.7.3 開始支援events引數，也可以用於資料的傳遞。

在首頁中通過event定義一個接收資料的回撥函數

wx.navigateTo({
  // 跳轉的同時傳遞一些引數
  url: "/pages/about/about?name=chenyq&age=18&height=1.88",
  events: {
    // 獲取返回頁面時傳遞過來的資料
    backEvent(data) {
      console.log(data);
    }
  }
})

再詳情頁中回撥首頁events中定義的回撥函數

btnTap() {
  // 返回上一級
  wx.navigateBack()

  // 1.拿到eventChannel
  const eventChannel = this.getOpenerEventChannel()

  // 2.通過eventChannel拿到回撥函數, 並傳回資料
  eventChannel.emit("backEvent", {name: "aaa", age: 110})
},

navigator元件(瞭解)

navigator元件主要就是用於介面的跳轉的，甚至也可以跳轉到其他小程式中：

屬性	型別	預設值	必填	說明
target	string	self	否	在哪個目標上發生跳轉，預設當前小程式
url	string		否	當前小程式內的跳轉連結
open-type	string	navigate	否	跳轉方式
delta	number	1	否	當 open-type 為 ‘navigateBack’ 時有效，表示回退的層數
app-id	string		否	當`target="miniProgram"`且`open-type="navigate"`時有效，要開啟的小程式 appId
path	string		否	當`target="miniProgram"`且`open-type="navigate"`時有效，開啟的頁面路徑，如果為空則開啟首頁
extra-data	object		否	當`target="miniProgram"`且`open-type="navigate/navigateBack"`時有效，需要傳遞給目標小程式的資料，目標小程式可在 `App.onLaunch()`，`App.onShow()` 中獲取到這份資料。
version	string	release	否	當`target="miniProgram"`且`open-type="navigate"`時有效，要開啟的小程式版本
short-link	string		否	當`target="miniProgram"`時有效，當傳遞該引數後，可以不傳 app-id 和 path。連結可以通過【小程式選單】->【複製連結】獲取。
hover-class	string	navigator-hover	否	指定點選時的樣式類，當`hover-class="none"`時，沒有點選態效果

<navigator url="/pages/index/index?name=chenyq&age=18">跳轉</navigator>

總結

到此這篇關於小程式實現頁面跳轉與資料傳遞的文章就介紹到這了,更多相關小程式頁面跳轉與資料傳遞內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

小程式實現頁面跳轉與資料傳遞方案

目錄

頁面跳轉和資料傳遞

wx的API跳轉

navigator元件(瞭解)

總結

熱門文章