小程序如何實現頁面跳轉與數據傳遞

今天小編給大家分享一下小程序如何實現頁面跳轉與數據傳遞的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

頁面跳轉和數據傳遞

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

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

wx的API跳轉

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

wx.navigateTo(Object object)

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

但是不能跳到 tabbar 頁面；

參數屬性

演示代碼

通過查詢字符串可以傳遞參數

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組件主要就是用于界面的跳轉的，甚至也可以跳轉到其他小程序中：

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

以上就是“小程序如何實現頁面跳轉與數據傳遞”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。