微信小程序教程系列之頁面跳轉(zhuǎn)和參數(shù)傳遞(6)
關(guān)于頁面的跳轉(zhuǎn),微信小程序提供了3種方法:
方法一:
使用API wx.navigateTo()函數(shù)

示例:
首先先新建一個test頁面
如何新建頁面?
請到先閱讀下面教程
index.wxml:
在index.wxml新建一個button組件,并使用bindtap事件綁定一個函數(shù)

index.js:
在index.js中的Page函數(shù)內(nèi)部,添加changeToTest 函數(shù),函數(shù)里面使用wx.navigateTo,寫上需要跳轉(zhuǎn)的頁面,里面?zhèn)魅氲氖且粋€對象,對象內(nèi)使用url屬性,對應(yīng)的就是需要跳轉(zhuǎn)的頁面的路徑(注意:這是接收的是一個相對路徑,并且頁面不需要使用.wxml后綴)

運行:

方法二:
使用API wx.redirectTo()函數(shù)

示例:
首先先新建一個test頁面
如何新建頁面?
請到先閱讀下面教程
index.wxml:
在index.wxml新建一個button組件,并使用bindtap事件綁定一個函數(shù)

index.js:

運行:

備注:
wx.navigateTo()和wx.redirectTo()的區(qū)別:
wx.navigateTo()是保留當(dāng)前頁面,跳轉(zhuǎn)到某個頁面,跳轉(zhuǎn)頁面后可以返回上一頁。
wx.redirectTo()是關(guān)閉當(dāng)前頁面,跳轉(zhuǎn)到某個頁面,跳轉(zhuǎn)頁面后不能返回上一頁。
方法三:
使用組件 <navigator>
示例:
首先先新建一個test頁面
如何新建頁面?
請到先閱讀下面教程
index.wxml:
在index.wxml頁面添加一個<navigator>元素,在元素里面使用屬性url就可以

運行:

跳轉(zhuǎn)的數(shù)據(jù)傳遞
以wx.navigateTo為例:
上面講述,wx.navigateTo傳入的url是跳轉(zhuǎn)的頁面(使用相對路徑)
wx.navigateTo({
url:"pages/home/home"
});
那么參數(shù)傳遞至下一頁面,則只需要在路徑后面,添加?問號,?后面接的是參數(shù),以key-value的方式。
這里傳了個value為2的參數(shù)
wx.navigateTo({
url:"pages/home/home?type=2"
});
然后在home.js中的onLoad()函數(shù)中得到值:option.type就可以得到了,如下:
onLoad: function (option) {
this.setData({
type:option.type,
});
console.log(option.type);
}
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序 動態(tài)修改頁面數(shù)據(jù)及參數(shù)傳遞過程詳解
- 微信小程序?qū)崿F(xiàn)頁面跳轉(zhuǎn)傳遞參數(shù)(實體,對象)
- 微信小程序?qū)崿F(xiàn)傳遞多個參數(shù)與事件處理
- 微信小程序?qū)W習(xí)筆記之跳轉(zhuǎn)頁面、傳遞參數(shù)獲得數(shù)據(jù)操作圖文詳解
- 微信小程序之頁面跳轉(zhuǎn)和參數(shù)傳遞的實現(xiàn)
- 微信小程序開發(fā)之?dāng)?shù)據(jù)存儲 參數(shù)傳遞 數(shù)據(jù)緩存
- 微信小程序 navigator 跳轉(zhuǎn)url傳遞參數(shù)
- 微信小程序之間的參數(shù)傳遞、獲取的操作方法
相關(guān)文章
JavaScript?數(shù)據(jù)結(jié)構(gòu)之字典方法
這篇文章主要介紹了JavaScript?數(shù)據(jù)結(jié)構(gòu)之字典方法,字典即Dictionary,是一種以?鍵-值對?形式存儲數(shù)據(jù)的數(shù)據(jù)結(jié)構(gòu),下文更多相關(guān)介紹需要的小伙伴可以參考一下2022-04-04

