欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

小程序?qū)崿F(xiàn)頁(yè)面跳轉(zhuǎn)與數(shù)據(jù)傳遞方案

 更新時(shí)間:2022年09月07日 15:32:19   作者:林有酒  
在開(kāi)發(fā)過(guò)程中經(jīng)常會(huì)遇到在微信小程序的頁(yè)面跳轉(zhuǎn)以及數(shù)據(jù)傳遞的知識(shí)點(diǎn),所以下面這篇文章主要給大家介紹了關(guān)于小程序?qū)崿F(xiàn)頁(yè)面跳轉(zhuǎn)與數(shù)據(jù)傳遞的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

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

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

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

wx的API跳轉(zhuǎn)

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

wx.navigateTo(Object object)

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

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

參數(shù)屬性

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

演示代碼

通過(guò)查詢(xún)字符串可以傳遞參數(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)到其他小程序中:

屬性類(lèi)型默認(rèn)值必填說(shuō)明
targetstringself在哪個(gè)目標(biāo)上發(fā)生跳轉(zhuǎn),默認(rèn)當(dāng)前小程序
urlstring 當(dāng)前小程序內(nèi)的跳轉(zhuǎn)鏈接
open-typestringnavigate跳轉(zhuǎn)方式
deltanumber1當(dāng) open-type 為 ‘navigateBack’ 時(shí)有效,表示回退的層數(shù)
app-idstring 當(dāng)target="miniProgram"open-type="navigate"時(shí)有效,要打開(kāi)的小程序 appId
pathstring 當(dāng)target="miniProgram"open-type="navigate"時(shí)有效,打開(kāi)的頁(yè)面路徑,如果為空則打開(kāi)首頁(yè)
extra-dataobject 當(dāng)target="miniProgram"open-type="navigate/navigateBack"時(shí)有效,需要傳遞給目標(biāo)小程序的數(shù)據(jù),目標(biāo)小程序可在 App.onLaunch()App.onShow() 中獲取到這份數(shù)據(jù)。
versionstringrelease當(dāng)target="miniProgram"open-type="navigate"時(shí)有效,要打開(kāi)的小程序版本
short-linkstring 當(dāng)target="miniProgram"時(shí)有效,當(dāng)傳遞該參數(shù)后,可以不傳 app-id 和 path。鏈接可以通過(guò)【小程序菜單】->【復(fù)制鏈接】獲取。
hover-classstringnavigator-hover指定點(diǎn)擊時(shí)的樣式類(lèi),當(dāng)hover-class="none"時(shí),沒(méi)有點(diǎn)擊態(tài)效果
<navigator url="/pages/index/index?name=chenyq&age=18">跳轉(zhuǎn)</navigator>

總結(jié)

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

相關(guān)文章

最新評(píng)論