微信小程序教程系列之頁面跳轉(zhuǎn)和參數(shù)傳遞(6)
關(guān)于頁面的跳轉(zhuǎn),微信小程序提供了3種方法:
方法一:
使用API wx.navigateTo()函數(shù)
示例:
首先先新建一個(gè)test頁面
如何新建頁面?
請(qǐng)到先閱讀下面教程
index.wxml:
在index.wxml新建一個(gè)button組件,并使用bindtap事件綁定一個(gè)函數(shù)
index.js:
在index.js中的Page函數(shù)內(nèi)部,添加changeToTest 函數(shù),函數(shù)里面使用wx.navigateTo,寫上需要跳轉(zhuǎn)的頁面,里面?zhèn)魅氲氖且粋€(gè)對(duì)象,對(duì)象內(nèi)使用url屬性,對(duì)應(yīng)的就是需要跳轉(zhuǎn)的頁面的路徑(注意:這是接收的是一個(gè)相對(duì)路徑,并且頁面不需要使用.wxml后綴)
運(yùn)行:
方法二:
使用API wx.redirectTo()函數(shù)
示例:
首先先新建一個(gè)test頁面
如何新建頁面?
請(qǐng)到先閱讀下面教程
index.wxml:
在index.wxml新建一個(gè)button組件,并使用bindtap事件綁定一個(gè)函數(shù)
index.js:
運(yùn)行:
備注:
wx.navigateTo()和wx.redirectTo()的區(qū)別:
wx.navigateTo()是保留當(dāng)前頁面,跳轉(zhuǎn)到某個(gè)頁面,跳轉(zhuǎn)頁面后可以返回上一頁。
wx.redirectTo()是關(guān)閉當(dāng)前頁面,跳轉(zhuǎn)到某個(gè)頁面,跳轉(zhuǎn)頁面后不能返回上一頁。
方法三:
使用組件 <navigator>
示例:
首先先新建一個(gè)test頁面
如何新建頁面?
請(qǐng)到先閱讀下面教程
index.wxml:
在index.wxml頁面添加一個(gè)<navigator>元素,在元素里面使用屬性u(píng)rl就可以
運(yùn)行:
跳轉(zhuǎn)的數(shù)據(jù)傳遞
以wx.navigateTo為例:
上面講述,wx.navigateTo傳入的url是跳轉(zhuǎn)的頁面(使用相對(duì)路徑)
wx.navigateTo({ url:"pages/home/home" });
那么參數(shù)傳遞至下一頁面,則只需要在路徑后面,添加?問號(hào),?后面接的是參數(shù),以key-value的方式。
這里傳了個(gè)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)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序 動(dòng)態(tài)修改頁面數(shù)據(jù)及參數(shù)傳遞過程詳解
- 微信小程序?qū)崿F(xiàn)頁面跳轉(zhuǎn)傳遞參數(shù)(實(shí)體,對(duì)象)
- 微信小程序?qū)崿F(xiàn)傳遞多個(gè)參數(shù)與事件處理
- 微信小程序?qū)W習(xí)筆記之跳轉(zhuǎn)頁面、傳遞參數(shù)獲得數(shù)據(jù)操作圖文詳解
- 微信小程序之頁面跳轉(zhuǎn)和參數(shù)傳遞的實(shí)現(xiàn)
- 微信小程序開發(fā)之?dāng)?shù)據(jù)存儲(chǔ) 參數(shù)傳遞 數(shù)據(jù)緩存
- 微信小程序 navigator 跳轉(zhuǎn)url傳遞參數(shù)
- 微信小程序之間的參數(shù)傳遞、獲取的操作方法
相關(guān)文章
微信小程序?qū)崿F(xiàn)canvas分享朋友圈海報(bào)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)canvas分享朋友圈海報(bào),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06淺談js在html中的加載執(zhí)行順序,多個(gè)jquery ready執(zhí)行順序
下面小編就為大家?guī)硪黄獪\談js在html中的加載執(zhí)行順序,多個(gè)jquery ready執(zhí)行順序。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11酷! 不同風(fēng)格頁面布局幻燈片特效js實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了超酷不同風(fēng)格頁面布局幻燈片特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08bootstrap提示標(biāo)簽、提示框?qū)崿F(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了bootstrap提示標(biāo)簽、提示框的實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12原生javascript實(shí)現(xiàn)分享到朋友圈功能 支持ios和android
本文主要介紹網(wǎng)上一個(gè)牛人寫的js可以實(shí)現(xiàn)在UC瀏覽器和QQ瀏覽器中調(diào)用瀏覽器內(nèi)置的分享組件進(jìn)行分享。2016-05-05javascript 利用Image對(duì)象實(shí)現(xiàn)的埋點(diǎn)(某處的點(diǎn)擊數(shù))統(tǒng)計(jì)
統(tǒng)計(jì)用戶頁面某處的點(diǎn)擊數(shù)或者執(zhí)行到程序中某個(gè)點(diǎn)的次數(shù);根據(jù)實(shí)際情況,創(chuàng)建多個(gè)Image對(duì)象,原則誰空閑誰做事,解下來詳細(xì)介紹,需要了解的朋友可以參考下2012-12-12