微信小程序開發(fā)之路由切換頁(yè)面重定向問(wèn)題

這段時(shí)間開發(fā)了一個(gè)微信小程序，雖然小程序的導(dǎo)航API 官方文檔寫得很詳細(xì)，但是在具體開發(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)最好寫絕對(duì)路勁，當(dāng)然如果只是從當(dāng)前頁(yè)面往一個(gè)具體頁(yè)面跳轉(zhuǎn)(次數(shù)不多)，相對(duì)路勁也可以。但如果是 wx.request(object) 請(qǐng)求返回狀態(tài)進(jìn)行頁(yè)面跳轉(zhuǎn)，那就最好寫絕對(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è)面，打開到應(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ì)路徑；

　　以 “/” 開頭代表根目錄，

　　　　/pages/login/login

　　2.2、相對(duì)路徑

　　以 “../” 開頭，從當(dāng)前頁(yè)面一級(jí)一級(jí)往上級(jí)目錄倒退

　　　　../../module/customer/main/main

　　或者：

　　以 “./” 開頭，直接在當(dāng)前目錄
　　./registered

補(bǔ)充：下面看下微信小程序的路由跳轉(zhuǎn)方法

路由跳轉(zhuǎn)的方法

1.打開新頁(yè)面

   1.wx.navigateTo   或使用組件     <navigator open-type="navigateTo"/>

      保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面，使用   wx.navigateBack  可以返回到原頁(yè)面。

       屬性用法：

          url：         類型是String     跳轉(zhuǎn)非 tabBar 的頁(yè)面的路徑 , 路徑后可以帶參數(shù)。參數(shù)與路徑之間使用?分隔，參數(shù)鍵與參數(shù)值用=相連，不同參數(shù)用&分隔；如 'path?key=value&key2=value2'
          success：     類型Function     接口調(diào)用成功的回調(diào)函數(shù)
          fail：        類型Function     接口調(diào)用失敗的回調(diào)函數(shù)
          complete：    類型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：         類型是String     跳轉(zhuǎn)非 tabBar 的頁(yè)面的路徑 , 路徑后可以帶參數(shù)。參數(shù)與路徑之間使用?分隔，參數(shù)鍵與參數(shù)值用=相連，不同參數(shù)用&分隔；如 'path?key=value&key2=value2'
          success：     類型Function     接口調(diào)用成功的回調(diào)函數(shù)
          fail：        類型Function     接口調(diào)用失敗的回調(diào)函數(shù)
          complete：    類型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：         類型是String     跳轉(zhuǎn)非 tabBar 的頁(yè)面的路徑 , 路徑后可以帶參數(shù)。參數(shù)與路徑之間使用?分隔，參數(shù)鍵與參數(shù)值用=相連，不同參數(shù)用&分隔；如 'path?key=value&key2=value2'
          success：     類型Function     接口調(diào)用成功的回調(diào)函數(shù)
          fail：        類型Function     接口調(diào)用失敗的回調(diào)函數(shù)
          complete：    類型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：         類型是String     需要跳轉(zhuǎn)的 tabBar 頁(yè)面的路徑（需在 app.json 的 [tabBar]字段定義的頁(yè)面），路徑后不能帶參數(shù)
          success：     類型Function     接口調(diào)用成功的回調(diào)函數(shù)
          fail：        類型Function     接口調(diào)用失敗的回調(diào)函數(shù)
          complete：    類型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è)面，打開到應(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：     類型Function     接口調(diào)用成功的回調(diào)函數(shù)
          fail：        類型Function     接口調(diào)用失敗的回調(diào)函數(shù)
          complete：    類型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é)

以上所述是小編給大家介紹的微信小程序開發(fā)之路由切換頁(yè)面重定向問(wèn)題 ，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！