微信小程序開(kāi)發(fā)之路由切換頁(yè)面重定向問(wèn)題
這段時(shí)間開(kāi)發(fā)了一個(gè)微信小程序,雖然小程序的導(dǎo)航API 官方文檔寫(xiě)得很詳細(xì),但是在具體開(kāi)發(fā)過(guò)程中還是會(huì)遇到很多不明白,或者一時(shí)轉(zhuǎn)不過(guò)彎的地方。
1、頁(yè)面切換傳參,參數(shù)讀取
1.1 wx.navigateTo(Object)
功能:保留當(dāng)前頁(yè)面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面,但是不能跳到 tabbar 頁(yè)面。使用 wx.navigateBack 可以返回到當(dāng)前頁(yè)面。
wx.navigateTo({ //當(dāng)前頁(yè)面對(duì)應(yīng)的JS文件內(nèi) 控制模板 url: 'test?id=1' //需要切換到的頁(yè)面路勁,此處為相對(duì)路勁,id為傳遞的參數(shù) }) //test.js //test頁(yè)面對(duì)應(yīng)的JS文件,名字必須相同 Page({ onLoad: function(option){ //通過(guò)路由傳遞過(guò)來(lái)的參數(shù),只能在onLoad方法內(nèi)收到,option就是路由參數(shù)的一個(gè)組合對(duì)象 console.log(option.id) } })
1.2 wx.navigateBack(object)
功能:關(guān)閉當(dāng)前頁(yè)面,與 wx.navigateTo({ })功能相對(duì)。返回上一頁(yè)面或多級(jí)頁(yè)面。可通過(guò) getCurrentPages() 獲取當(dāng)前的頁(yè)面棧,決定需要返回幾層。
1.3 wx.redirectTo(object)
功能:關(guān)閉當(dāng)前頁(yè)面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面【這里的跳轉(zhuǎn)最好寫(xiě)絕對(duì)路勁,當(dāng)然如果只是從當(dāng)前頁(yè)面往一個(gè)具體頁(yè)面跳轉(zhuǎn)(次數(shù)不多),相對(duì)路勁也可以。但如果是 wx.request(object) 請(qǐng)求返回狀態(tài)進(jìn)行頁(yè)面跳轉(zhuǎn),那就最好寫(xiě)絕對(duì)路勁】,但是不允許跳轉(zhuǎn)到 tabbar 頁(yè)面。
1.4 wx.switchTab(Object object)
功能:跳轉(zhuǎn)到 tabBar 頁(yè)面,并關(guān)閉其他所有非 tabBar 頁(yè)面,與wx.redirectTo(object)方法功能互補(bǔ)。
1.5 wx.reLaunch(Object object)
功能:關(guān)閉所有頁(yè)面,打開(kāi)到應(yīng)用內(nèi)的某個(gè)頁(yè)面【這種情況最好用絕對(duì)定位,因?yàn)槭顷P(guān)閉所有頁(yè)面,已經(jīng)不需要知道當(dāng)前所處頁(yè)面了,直接重定向到某個(gè)具體頁(yè)面。這種一般都是重定向到登錄或者初始頁(yè)面】
wx.reLaunch({ //token失效,界面重定向到登錄頁(yè),絕對(duì)路勁 url: "/pages/login/login", });
2、相對(duì)路徑和絕對(duì)路徑
2.1、絕對(duì)路徑;
以 “/” 開(kāi)頭代表根目錄,
/pages/login/login
2.2、相對(duì)路徑
以 “../” 開(kāi)頭,從當(dāng)前頁(yè)面一級(jí)一級(jí)往上級(jí)目錄倒退
../../module/customer/main/main
或者:
以 “./” 開(kāi)頭,直接在當(dāng)前目錄
./registered
補(bǔ)充:下面看下微信小程序的路由跳轉(zhuǎn)方法
路由跳轉(zhuǎn)的方法
1.打開(kāi)新頁(yè)面
1.wx.navigateTo 或使用組件 <navigator open-type="navigateTo"/>
保留當(dāng)前頁(yè)面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面,使用 wx.navigateBack 可以返回到原頁(yè)面。
屬性用法:
url: 類(lèi)型是String 跳轉(zhuǎn)非 tabBar 的頁(yè)面的路徑 , 路徑后可以帶參數(shù)。參數(shù)與路徑之間使用?分隔,參數(shù)鍵與參數(shù)值用=相連,不同參數(shù)用&分隔;如 'path?key=value&key2=value2'
success: 類(lèi)型Function 接口調(diào)用成功的回調(diào)函數(shù)
fail: 類(lèi)型Function 接口調(diào)用失敗的回調(diào)函數(shù)
complete: 類(lèi)型Function 接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會(huì)執(zhí)行)
例 :
wx.navigateTo({ url: 'test?id=1' }) //test.js Page({ onLoad: function(option){ console.log(option.query) } })
目前頁(yè)面路徑最多只能十層。
2.頁(yè)面重定向
1.wx.redirectTo 或使用組件 <navigator open-type="redirectTo"/>
屬性用法:
url: 類(lèi)型是String 跳轉(zhuǎn)非 tabBar 的頁(yè)面的路徑 , 路徑后可以帶參數(shù)。參數(shù)與路徑之間使用?分隔,參數(shù)鍵與參數(shù)值用=相連,不同參數(shù)用&分隔;如 'path?key=value&key2=value2'
success: 類(lèi)型Function 接口調(diào)用成功的回調(diào)函數(shù)
fail: 類(lèi)型Function 接口調(diào)用失敗的回調(diào)函數(shù)
complete: 類(lèi)型Function 接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會(huì)執(zhí)行)
例 :
wx.redirectTo({ url: 'test?id=1' }) //test.js
3.頁(yè)面返回
1. wx.navigateBack 或使用組件 <navigator open-type="navigateBack">
關(guān)閉當(dāng)前頁(yè)面,返回上一頁(yè)面或多級(jí)頁(yè)面。可通過(guò) getCurrentPages()) 獲取當(dāng)前的頁(yè)面棧,決定需要返回幾層。
屬性用法:
url: 類(lèi)型是String 跳轉(zhuǎn)非 tabBar 的頁(yè)面的路徑 , 路徑后可以帶參數(shù)。參數(shù)與路徑之間使用?分隔,參數(shù)鍵與參數(shù)值用=相連,不同參數(shù)用&分隔;如 'path?key=value&key2=value2'
success: 類(lèi)型Function 接口調(diào)用成功的回調(diào)函數(shù)
fail: 類(lèi)型Function 接口調(diào)用失敗的回調(diào)函數(shù)
complete: 類(lèi)型Function 接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會(huì)執(zhí)行)
例 :
// 此處是A頁(yè)面 wx.navigateTo({ url: 'B?id=1' }) // 此處是B頁(yè)面 wx.navigateTo({ url: 'C?id=1' }) // 在C頁(yè)面內(nèi) navigateBack,將返回A頁(yè)面 wx.navigateBack({ delta: 2 }) })
4.Tab 切換
1.wx.switchTab 或使用組件 <navigator open-type="switchTab "/>
屬性用法:
url: 類(lèi)型是String 需要跳轉(zhuǎn)的 tabBar 頁(yè)面的路徑(需在 app.json 的 [tabBar]字段定義的頁(yè)面),路徑后不能帶參數(shù)
success: 類(lèi)型Function 接口調(diào)用成功的回調(diào)函數(shù)
fail: 類(lèi)型Function 接口調(diào)用失敗的回調(diào)函數(shù)
complete: 類(lèi)型Function 接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會(huì)執(zhí)行)
例 :
{ "tabBar": { "list": [{ "pagePath": "index", "text": "首頁(yè)" },{ "pagePath": "other", "text": "其他" }] } } wx.switchTab({ url: '/index' })
5.Tab 切換
1.wx.reLaunch 或使用組件 <navigator open-type="reLaunch"/>
閉所有頁(yè)面,打開(kāi)到應(yīng)用內(nèi)的某個(gè)頁(yè)面
屬性用法:
url: 需要跳轉(zhuǎn)的應(yīng)用內(nèi)頁(yè)面路徑 , 路徑后可以帶參數(shù)。參數(shù)與路徑之間使用?分隔,參數(shù)鍵與參數(shù)值用=相連,不同參數(shù)用&分隔;如 'path?key=value&key2=value2',如果跳轉(zhuǎn)的頁(yè)面路徑是 tabBar 頁(yè)面則不能帶參數(shù)
success: 類(lèi)型Function 接口調(diào)用成功的回調(diào)函數(shù)
fail: 類(lèi)型Function 接口調(diào)用失敗的回調(diào)函數(shù)
complete: 類(lèi)型Function 接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會(huì)執(zhí)行)
例 :
wx.reLaunch({ url: 'test?id=1' }) //test.js Page({ onLoad: function(option){ console.log(option.query) } })
tip: wx.navigateTo 和 wx.redirectTo 不允許跳轉(zhuǎn)到 tabbar 頁(yè)面,只能用 wx.switchTab 跳轉(zhuǎn)到 tabbar 頁(yè)面
總結(jié)
以上所述是小編給大家介紹的微信小程序開(kāi)發(fā)之路由切換頁(yè)面重定向問(wèn)題 ,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
比較全面的event對(duì)像在IE與FF中的區(qū)別 推薦
整理的比較全的event對(duì)像在ie與firefox瀏覽器中的區(qū)別。2009-09-09JavaScript實(shí)現(xiàn)上下浮動(dòng)的窗口效果代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)上下浮動(dòng)的窗口效果代碼,可實(shí)現(xiàn)自定義窗口在垂直方向上彈性移動(dòng)的效果,代碼備有完整的注釋說(shuō)明供讀者參考學(xué)習(xí),需要的朋友可以參考下2015-10-10JavaScript中常見(jiàn)的Polyfill介紹
在多姿多彩的JavaScript世界,Polyfill如同一座架在瀏覽器兼容性鴻溝之上的橋梁,本文將介紹常見(jiàn)的JavaScript Polyfill兼容方案,并舉例說(shuō)明它們的應(yīng)用,需要的可以參考下2023-12-12js實(shí)現(xiàn)iframe框架取值的方法(兼容IE,firefox,chrome等)
這篇文章主要介紹了js實(shí)現(xiàn)iframe框架取值的方法,可兼容IE,firefox,chrome等瀏覽器.涉及JavaScript針對(duì)框架元素取值的相關(guān)技巧,需要的朋友可以參考下2015-11-11JS常見(jiàn)構(gòu)造模式實(shí)例對(duì)比分析
這篇文章主要介紹了JS常見(jiàn)構(gòu)造模式,結(jié)合實(shí)例形式對(duì)比分析了工廠模式、構(gòu)造函數(shù)模式、原型模式、寄生構(gòu)造函數(shù)模式、穩(wěn)妥構(gòu)造函數(shù)模式等相關(guān)概念、原理、實(shí)現(xiàn)方法與相關(guān)操作技巧,需要的朋友可以參考下2018-08-08JS中Eval解析JSON字符串的一個(gè)小問(wèn)題
JSON (JavaScript Object Notation)一種簡(jiǎn)單的數(shù)據(jù)格式,比xml更輕巧,下面通過(guò)本文給大家介紹JS中Eval解析JSON字符串的一個(gè)小問(wèn)題,需要的朋友參考下吧2016-02-02JavaScript實(shí)現(xiàn)獲取dom中class的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)獲取dom中class的方法,涉及javascript操作dom節(jié)點(diǎn)的使用技巧,需要的朋友可以參考下2015-02-02