溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

小程序封裝路由文件和路由方法(5種全解析)

發(fā)布時間：2020-08-25 05:12:27 來源：腳本之家 閱讀：214 作者：前端李會旺 欄目：web開發(fā)

小程序5種路由方法使用場景，封裝路由文件和路由方法，提升小程序體驗和開發(fā)效率

明確要解決的問題

  • 每次使用路由時，總是粘貼復制路徑，這樣在路徑有修改時，需要修改所有用到該路徑的地方，維護成本高
  • 路由跳轉時拼接參數(shù)讓人頭大，業(yè)務復雜時要拼接十幾個參數(shù)
  • 路由返回，只會返回一層，不能直接返回到目標頁面，因為不知道目標頁面是否在路由棧中，也不知道在第幾層

這些問題都可以通過封裝路由文件和路由方法解決，提供開發(fā)效率，減少BUG，省下來的時間可以多陪陪女朋友

封裝路由文件，對路由進行統(tǒng)一管理

在根目錄創(chuàng)建router.js

// 這是路由管理頁面，在此統(tǒng)一配置路由
export default {
 'index':'/index/index', // 首頁
 'list':'/list/list', // list頁面
 'top':'/top/top', // top頁面
}

解決了第一個問題

封裝路由方法

路由方法有五個，常用的有三個switchTab、navigateTo、navigateBack
簡單介紹一下這五個方法及使用場景

  • switchTab,跳轉tabBar頁面專用，其他頁面出棧，新頁面入棧
  • navigateTo最常用的路由跳轉，會加入到頁面棧，允許返回，也就是新頁面不斷入棧
  • navigateBack返回，只能返回到頁面棧中存在的頁面，頁面不斷出棧，直到到達目標頁
  • redirectTo關閉當前頁面，跳轉某個頁面，當前頁面不會加入到頁面棧，也就是說當前頁面不能通過返回到達，比如付款頁面，付款完成后，最好不要再讓用戶返回到付款頁，再比如一些無法修改的操作，比如刪除商品，商品刪除后再通過navigateBack返回再刪除一次商品，體驗肯定不好，表現(xiàn)為當前頁面出棧，新頁面入棧
  • reLaunch關閉所有頁面，打開某個頁面，可以打開任意頁面包括tabBar，適合強制完成某個操作的頁面，比如登錄頁，當已登錄的用戶點擊退出后，進入登錄頁，那么就不能通過返回再回去了，就必須留下來登錄或注冊，適合用這個，表現(xiàn)為所有頁面出棧，新頁面入棧

開始封裝，在根目錄創(chuàng)建utils.js

// 封裝路由方法
export default {

 /** 
  * function
  * @param {string} url 目標頁面的路由
  * @param {Object} param 傳遞給目標頁面的參數(shù)
  * @description 處理目標頁面的參數(shù)，轉成json字符串傳遞給param字段，在目標頁面通過JSON.parse(options.param)接收
  */ 
 navigateTo(url,param={}){
  if(param){
   url+=`?param=${JSON.stringify(param)}`
  }
  wx.navigateTo({
   url:url,
   fail(err) {
    console.log('navigateTo跳轉出錯',err) 
   },
  })
 },


  /** 
  * function
  * @param {string} url 目標頁面的路由
  * @param {Object} param 傳遞給目標頁面的參數(shù)，只有頁面棧無目標頁面調(diào)用navigateTo時，參數(shù)才會生效，單單返回不能設置參數(shù)
  * @description 先取出頁面棧，頁面棧最多十層，判斷目標頁面是否在頁面棧中，如果在，則通過目標頁的位置，返回到目標頁面，否則調(diào)用navigateTo方法跳轉到目標頁
  */  
 navigateBack(url,param={}){
  const pagesList = getCurrentPages()
  let index = pagesList.findIndex(e=>{
   return url.indexOf(e.route)>=0
  })
  if(index == -1){ // 沒有在頁面棧中，可以調(diào)用navigateTo方法
   this.navigateTo(url,param)
  }else{
   wx.navigateBack({
    delta: pagesList.length-1-index,
    fail(err){
     console.log('navigateBack返回出錯',err)
    }
   })
  }
 },


 switchTab(url){ // 封裝switchTab，switchTab不能有參數(shù)
  wx.switchTab({
   url:url
  })
 },
 redirectTo(url,param={}){ // 封裝redirectTo，和navigateTo沒啥區(qū)別
  if(param){
   url+=`?param=${JSON.stringify(param)}`
  }
  wx.redirectTo({
   url:url,
   fail(err) {
    console.log('redirectTo跳轉出錯',err) 
   },
  })
 },
 reLaunch(url,param={}){ // 封裝reLaunch，和navigateTo沒啥區(qū)別
  if(param){
   url+=`?param=${JSON.stringify(param)}`要根據(jù)具體業(yè)務來，該返回就返回，該跳轉就用跳轉，不能一直跳轉！
  }
  wx.reLaunch({
   url:url,
   fail(err) {
    console.log('reLaunch跳轉出錯',err) 
   },
  })
 }
}

以上對參數(shù)的封裝解決了第二個問題，對navigateBack的封裝解決了第三個問題

總結

小程序的路由跳轉有很多方法，但具體場景下合適的只有一個，選擇合適的路由跳轉方式會提高用戶體驗，封裝主要是提升開發(fā)效率，減少后期維護成本

小程序代碼片段地址 https://developers.weixin.qq.com/s/CsoJwDmR7B8N

github,如果幫到了你，就給一顆star吧

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。

AI
助
手