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

更新時(shí)間：2019年05月26日 11:32:23 作者：前端李會(huì)旺

這篇文章主要介紹了小程序5種路由方法使用場(chǎng)景，封裝路由文件和路由方法，提升小程序體驗(yàn)和開發(fā)效率，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

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

明確要解決的問題

每次使用路由時(shí)，總是粘貼復(fù)制路徑，這樣在路徑有修改時(shí)，需要修改所有用到該路徑的地方，維護(hù)成本高
路由跳轉(zhuǎn)時(shí)拼接參數(shù)讓人頭大，業(yè)務(wù)復(fù)雜時(shí)要拼接十幾個(gè)參數(shù)
路由返回，只會(huì)返回一層，不能直接返回到目標(biāo)頁面，因?yàn)椴恢滥繕?biāo)頁面是否在路由棧中，也不知道在第幾層

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

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

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

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

解決了第一個(gè)問題

封裝路由方法

路由方法有五個(gè)，常用的有三個(gè)switchTab、navigateTo、navigateBack
簡(jiǎn)單介紹一下這五個(gè)方法及使用場(chǎng)景

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

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

// 封裝路由方法
export default {

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


  /** 
  * function
  * @param {string} url 目標(biāo)頁面的路由
  * @param {Object} param 傳遞給目標(biāo)頁面的參數(shù)，只有頁面棧無目標(biāo)頁面調(diào)用navigateTo時(shí)，參數(shù)才會(huì)生效，單單返回不能設(shè)置參數(shù)
  * @description 先取出頁面棧，頁面棧最多十層，判斷目標(biāo)頁面是否在頁面棧中，如果在，則通過目標(biāo)頁的位置，返回到目標(biāo)頁面，否則調(diào)用navigateTo方法跳轉(zhuǎn)到目標(biāo)頁
  */  
 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返回出錯(cuò)',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跳轉(zhuǎn)出錯(cuò)',err) 
   },
  })
 },
 reLaunch(url,param={}){ // 封裝reLaunch，和navigateTo沒啥區(qū)別
  if(param){
   url+=`?param=${JSON.stringify(param)}`要根據(jù)具體業(yè)務(wù)來，該返回就返回，該跳轉(zhuǎn)就用跳轉(zhuǎn)，不能一直跳轉(zhuǎn)！
  }
  wx.reLaunch({
   url:url,
   fail(err) {
    console.log('reLaunch跳轉(zhuǎn)出錯(cuò)',err) 
   },
  })
 }
}

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

總結(jié)

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

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: