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

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

 更新時間:2018年09月18日 08:32:19   作者:西嶺千秋雪  
這篇文章主要介紹了微信小程序開發(fā)之路由切換頁面重定向問題,又通過實例代碼給大家介紹了微信小程序的路由跳轉(zhuǎn)方法,需要的朋友可以參考下

這段時間開發(fā)了一個微信小程序,雖然小程序的導(dǎo)航API 官方文檔寫得很詳細,但是在具體開發(fā)過程中還是會遇到很多不明白,或者一時轉(zhuǎn)不過彎的地方。

1、頁面切換傳參,參數(shù)讀取 

  1.1  wx.navigateTo(Object)

  功能:保留當(dāng)前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面,但是不能跳到 tabbar 頁面。使用 wx.navigateBack 可以返回到當(dāng)前頁面。

wx.navigateTo({  //當(dāng)前頁面對應(yīng)的JS文件內(nèi) 控制模板
 url: 'test?id=1'  //需要切換到的頁面路勁,此處為相對路勁,id為傳遞的參數(shù)
})
//test.js   //test頁面對應(yīng)的JS文件,名字必須相同
Page({ 
 onLoad: function(option){  //通過路由傳遞過來的參數(shù),只能在onLoad方法內(nèi)收到,option就是路由參數(shù)的一個組合對象
 console.log(option.id)
 }
}) 

  1.2   wx.navigateBack(object)

  功能:關(guān)閉當(dāng)前頁面,與 wx.navigateTo({ })功能相對。返回上一頁面或多級頁面。可通過 getCurrentPages() 獲取當(dāng)前的頁面棧,決定需要返回幾層。

   1.3  wx.redirectTo(object)    

  功能:關(guān)閉當(dāng)前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面【這里的跳轉(zhuǎn)最好寫絕對路勁,當(dāng)然如果只是從當(dāng)前頁面往一個具體頁面跳轉(zhuǎn)(次數(shù)不多),相對路勁也可以。但如果是 wx.request(object) 請求返回狀態(tài)進行頁面跳轉(zhuǎn),那就最好寫絕對路勁】,但是不允許跳轉(zhuǎn)到 tabbar 頁面。

    1.4  wx.switchTab(Object object)

  功能:跳轉(zhuǎn)到 tabBar 頁面,并關(guān)閉其他所有非 tabBar 頁面,與wx.redirectTo(object)方法功能互補。

   1.5  wx.reLaunch(Object object)

  功能:關(guān)閉所有頁面,打開到應(yīng)用內(nèi)的某個頁面【這種情況最好用絕對定位,因為是關(guān)閉所有頁面,已經(jīng)不需要知道當(dāng)前所處頁面了,直接重定向到某個具體頁面。這種一般都是重定向到登錄或者初始頁面】

wx.reLaunch({  //token失效,界面重定向到登錄頁,絕對路勁
 url: "/pages/login/login",
});

2、相對路徑和絕對路徑

  2.1、絕對路徑;

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

    /pages/login/login

  2.2、相對路徑

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

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

  或者:

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

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

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

1.打開新頁面

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

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

       屬性用法:

          url:         類型是String     跳轉(zhuǎn)非 tabBar 的頁面的路徑 , 路徑后可以帶參數(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)用成功、失敗都會執(zhí)行)

例 :

wx.navigateTo({
   url: 'test?id=1'
   })
  //test.js
  Page({
  onLoad: function(option){
   console.log(option.query)
  }
  }) 

     目前頁面路徑最多只能十層。

2.頁面重定向

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

       屬性用法:

          url:         類型是String     跳轉(zhuǎn)非 tabBar 的頁面的路徑 , 路徑后可以帶參數(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)用成功、失敗都會執(zhí)行)

例 :

wx.redirectTo({
   url: 'test?id=1'
   })
  //test.js

3.頁面返回

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

     關(guān)閉當(dāng)前頁面,返回上一頁面或多級頁面。可通過 getCurrentPages()) 獲取當(dāng)前的頁面棧,決定需要返回幾層。

       屬性用法:

          url:         類型是String     跳轉(zhuǎn)非 tabBar 的頁面的路徑 , 路徑后可以帶參數(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)用成功、失敗都會執(zhí)行)

例 :

// 此處是A頁面
 wx.navigateTo({
   url: 'B?id=1'
  })
  // 此處是B頁面
 wx.navigateTo({
   url: 'C?id=1'
 })
 // 在C頁面內(nèi) navigateBack,將返回A頁面
 wx.navigateBack({
   delta: 2
 })
 }) 

4.Tab 切換

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

       屬性用法:

          url:         類型是String     需要跳轉(zhuǎn)的 tabBar 頁面的路徑(需在 app.json 的 [tabBar]字段定義的頁面),路徑后不能帶參數(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)用成功、失敗都會執(zhí)行)
例 :

{
  "tabBar": {
   "list": [{
    "pagePath": "index",
    "text": "首頁"
   },{
   "pagePath": "other",
   "text": "其他"
   }]
   }
  }
 wx.switchTab({
   url: '/index'
 })

5.Tab 切換

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

      閉所有頁面,打開到應(yīng)用內(nèi)的某個頁面

       屬性用法:

          url:        需要跳轉(zhuǎn)的應(yīng)用內(nèi)頁面路徑 , 路徑后可以帶參數(shù)。參數(shù)與路徑之間使用?分隔,參數(shù)鍵與參數(shù)值用=相連,不同參數(shù)用&分隔;如 'path?key=value&key2=value2',如果跳轉(zhuǎn)的頁面路徑是 tabBar 頁面則不能帶參數(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)用成功、失敗都會執(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 頁面,只能用 wx.switchTab 跳轉(zhuǎn)到 tabbar 頁面

總結(jié)

以上所述是小編給大家介紹的微信小程序開發(fā)之路由切換頁面重定向問題 ,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

  • 比較全面的event對像在IE與FF中的區(qū)別 推薦

    比較全面的event對像在IE與FF中的區(qū)別 推薦

    整理的比較全的event對像在ie與firefox瀏覽器中的區(qū)別。
    2009-09-09
  • JavaScript實現(xiàn)上下浮動的窗口效果代碼

    JavaScript實現(xiàn)上下浮動的窗口效果代碼

    這篇文章主要介紹了JavaScript實現(xiàn)上下浮動的窗口效果代碼,可實現(xiàn)自定義窗口在垂直方向上彈性移動的效果,代碼備有完整的注釋說明供讀者參考學(xué)習(xí),需要的朋友可以參考下
    2015-10-10
  • JavaScript中常見的Polyfill介紹

    JavaScript中常見的Polyfill介紹

    在多姿多彩的JavaScript世界,Polyfill如同一座架在瀏覽器兼容性鴻溝之上的橋梁,本文將介紹常見的JavaScript Polyfill兼容方案,并舉例說明它們的應(yīng)用,需要的可以參考下
    2023-12-12
  • JS手寫bind之處理new的情況詳解

    JS手寫bind之處理new的情況詳解

    雖然很少會遇到給bind返回的函數(shù)做new操作的場景,但面試中還是會涉及到的,所以本文將實現(xiàn)一下兼容new操作的bind寫法,順便學(xué)習(xí)一下new操作符,需要的可以參考一下
    2022-07-07
  • js實現(xiàn)iframe框架取值的方法(兼容IE,firefox,chrome等)

    js實現(xiàn)iframe框架取值的方法(兼容IE,firefox,chrome等)

    這篇文章主要介紹了js實現(xiàn)iframe框架取值的方法,可兼容IE,firefox,chrome等瀏覽器.涉及JavaScript針對框架元素取值的相關(guān)技巧,需要的朋友可以參考下
    2015-11-11
  • JS常見構(gòu)造模式實例對比分析

    JS常見構(gòu)造模式實例對比分析

    這篇文章主要介紹了JS常見構(gòu)造模式,結(jié)合實例形式對比分析了工廠模式、構(gòu)造函數(shù)模式、原型模式、寄生構(gòu)造函數(shù)模式、穩(wěn)妥構(gòu)造函數(shù)模式等相關(guān)概念、原理、實現(xiàn)方法與相關(guān)操作技巧,需要的朋友可以參考下
    2018-08-08
  • 詳解JavaScript實現(xiàn)哈希表

    詳解JavaScript實現(xiàn)哈希表

    哈希表是一種非常重要的數(shù)據(jù)結(jié)構(gòu),幾乎所有的編程語言都有直接或者間接的應(yīng)用這種數(shù)據(jù)結(jié)構(gòu)。本文將為大家介紹通過JavaScript如何實現(xiàn)哈希表,以及哈希表的一些常用操作,需要的可以參考一下
    2021-12-12
  • JS中Eval解析JSON字符串的一個小問題

    JS中Eval解析JSON字符串的一個小問題

    JSON (JavaScript Object Notation)一種簡單的數(shù)據(jù)格式,比xml更輕巧,下面通過本文給大家介紹JS中Eval解析JSON字符串的一個小問題,需要的朋友參考下吧
    2016-02-02
  • JavaScript大文件上傳的處理方法之切片上傳

    JavaScript大文件上傳的處理方法之切片上傳

    這篇文章主要介紹了JavaScript大文件上傳的處理方法之切片上傳,切片上傳的原理較為簡單,即獲取文件后切片,切片后整理好每個切片的參數(shù)并發(fā)請求即可
    2022-06-06
  • JavaScript實現(xiàn)獲取dom中class的方法

    JavaScript實現(xiàn)獲取dom中class的方法

    這篇文章主要介紹了JavaScript實現(xiàn)獲取dom中class的方法,涉及javascript操作dom節(jié)點的使用技巧,需要的朋友可以參考下
    2015-02-02

最新評論