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

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

 更新時間:2019年05月26日 11:32:23   作者:前端李會旺  
這篇文章主要介紹了小程序5種路由方法使用場景,封裝路由文件和路由方法,提升小程序體驗和開發(fā)效率,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

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

明確要解決的問題

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

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

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


  /** 
  * function
  * @param {string} url 目標(biāo)頁面的路由
  * @param {Object} param 傳遞給目標(biāo)頁面的參數(shù),只有頁面棧無目標(biāo)頁面調(diào)用navigateTo時,參數(shù)才會生效,單單返回不能設(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返回出錯',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)出錯',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)出錯',err) 
   },
  })
 }
}

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

總結(jié)

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

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

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

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

相關(guān)文章

最新評論