在開發(fā)過程中經(jīng)常會(huì)遇到在微信小程序的頁面跳轉(zhuǎn)以及數(shù)據(jù)傳遞的知識(shí)點(diǎn),所以下面這篇文章主要給大家介紹了關(guān)于小程序?qū)崿F(xiàn)頁面跳轉(zhuǎn)與數(shù)據(jù)傳遞的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

頁面跳轉(zhuǎn)和數(shù)據(jù)傳遞

界面的跳轉(zhuǎn)有兩種方式：通過navigator組件和通過wx的API跳轉(zhuǎn)

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

wx的API跳轉(zhuǎn)

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

wx.navigateTo(Object object)

保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面；

但是不能跳到 tabbar 頁面；

參數(shù)屬性

屬性	類型	默認(rèn)值	必填	說明
path	string	無	是	需要跳轉(zhuǎn)的應(yīng)用內(nèi)非tabBar的頁面的路徑(代碼包路徑), 路徑后可以帶參數(shù). 參數(shù)與路徑直接使用 ? 分隔, 參數(shù)鍵與參數(shù)值用 = 連接, 不同參數(shù)用 & 分隔; 如: path?key=value&key2=value2
events	Object	{}	否	頁面間通信接口，用于監(jiān)聽被打開頁面發(fā)送到當(dāng)前頁面的數(shù)據(jù)。基礎(chǔ)庫 2.7.3 開始支持。
success	function	無	否	接口調(diào)用成功的回調(diào)函數(shù)，
fail	function	無	否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	function	無	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）

演示代碼

通過查詢字符串可以傳遞參數(shù)

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

在頁面的onLoad生命周期可以獲取到參數(shù)

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

wx.navigateBack(Object object)

關(guān)閉當(dāng)前頁面，返回上一頁面或多級(jí)頁面。

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

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

如何在界面跳轉(zhuǎn)過程中我們需要相互傳遞一些數(shù)據(jù)，應(yīng)該如何完成呢？

剛剛我們演示過, 從首頁跳轉(zhuǎn)到詳情頁：可以使用URL中的query字段

那在詳情頁點(diǎn)擊返回按鈕時(shí), 想要將數(shù)據(jù)傳遞回首頁該如何傳遞呢

有兩種方式可以做到

方式一

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

  // 2.給上一級(jí)傳遞數(shù)據(jù)
  // 2.1獲取到上一級(jí)頁面的實(shí)例
  const pages = getCurrentPages()
  const page = pages[pages.length - 2]
  // 2.2在上一個(gè)頁面提前定義好變量用于保存數(shù)據(jù)
  page.setData({
    message: "呵呵呵"
  })
}

上面早期數(shù)據(jù)的傳遞方式只能通過上述的方式來進(jìn)行，在小程序基礎(chǔ)庫 2.7.3 開始支持events參數(shù)，也可以用于數(shù)據(jù)的傳遞。

在首頁中通過event定義一個(gè)接收數(shù)據(jù)的回調(diào)函數(shù)

wx.navigateTo({
  // 跳轉(zhuǎn)的同時(shí)傳遞一些參數(shù)
  url: "/pages/about/about?name=chenyq&age=18&height=1.88",
  events: {
    // 獲取返回頁面時(shí)傳遞過來的數(shù)據(jù)
    backEvent(data) {
      console.log(data);
    }
  }
})

再詳情頁中回調(diào)首頁events中定義的回調(diào)函數(shù)

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

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

  // 2.通過eventChannel拿到回調(diào)函數(shù), 并傳回?cái)?shù)據(jù)
  eventChannel.emit("backEvent", {name: "aaa", age: 110})
},

navigator組件(了解)

navigator組件主要就是用于界面的跳轉(zhuǎn)的，甚至也可以跳轉(zhuǎn)到其他小程序中：

屬性	類型	默認(rèn)值	必填	說明
target	string	self	否	在哪個(gè)目標(biāo)上發(fā)生跳轉(zhuǎn)，默認(rèn)當(dāng)前小程序
url	string		否	當(dāng)前小程序內(nèi)的跳轉(zhuǎn)鏈接
open-type	string	navigate	否	跳轉(zhuǎn)方式
delta	number	1	否	當(dāng) open-type 為 ‘navigateBack’ 時(shí)有效，表示回退的層數(shù)
app-id	string		否	當(dāng)`target="miniProgram"`且`open-type="navigate"`時(shí)有效，要打開的小程序 appId
path	string		否	當(dāng)`target="miniProgram"`且`open-type="navigate"`時(shí)有效，打開的頁面路徑，如果為空則打開首頁
extra-data	object		否	當(dāng)`target="miniProgram"`且`open-type="navigate/navigateBack"`時(shí)有效，需要傳遞給目標(biāo)小程序的數(shù)據(jù)，目標(biāo)小程序可在 `App.onLaunch()`，`App.onShow()` 中獲取到這份數(shù)據(jù)。
version	string	release	否	當(dāng)`target="miniProgram"`且`open-type="navigate"`時(shí)有效，要打開的小程序版本
short-link	string		否	當(dāng)`target="miniProgram"`時(shí)有效，當(dāng)傳遞該參數(shù)后，可以不傳 app-id 和 path。鏈接可以通過【小程序菜單】->【復(fù)制鏈接】獲取。
hover-class	string	navigator-hover	否	指定點(diǎn)擊時(shí)的樣式類，當(dāng)`hover-class="none"`時(shí)，沒有點(diǎn)擊態(tài)效果

<navigator url="/pages/index/index?name=chenyq&age=18">跳轉(zhuǎn)</navigator>

總結(jié)

到此這篇關(guān)于小程序?qū)崿F(xiàn)頁面跳轉(zhuǎn)與數(shù)據(jù)傳遞的文章就介紹到這了,更多相關(guān)小程序頁面跳轉(zhuǎn)與數(shù)據(jù)傳遞內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: