小程序如何實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)與數(shù)據(jù)傳遞

今天小編給大家分享一下小程序如何實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)與數(shù)據(jù)傳遞的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

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

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

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

wx的API跳轉(zhuǎn)

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

wx.navigateTo(Object object)

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

但是不能跳到 tabbar 頁(yè)面；

參數(shù)屬性

演示代碼

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

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

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

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

wx.navigateBack(Object object)

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

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

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

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

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

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

有兩種方式可以做到

方式一

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

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

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

在首頁(yè)中通過(guò)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: {
    // 獲取返回頁(yè)面時(shí)傳遞過(guò)來(lái)的數(shù)據(jù)
    backEvent(data) {
      console.log(data);
    }
  }
})

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

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

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

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

navigator組件(了解)

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

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

以上就是“小程序如何實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)與數(shù)據(jù)傳遞”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。