小程序封裝路由文件和路由方法(5種全解析)
小程序5種路由方法使用場(chǎng)景,封裝路由文件和路由方法,提升小程序體驗(yàn)和開(kāi)發(fā)效率
明確要解決的問(wèn)題
- 每次使用路由時(shí),總是粘貼復(fù)制路徑,這樣在路徑有修改時(shí),需要修改所有用到該路徑的地方,維護(hù)成本高
- 路由跳轉(zhuǎn)時(shí)拼接參數(shù)讓人頭大,業(yè)務(wù)復(fù)雜時(shí)要拼接十幾個(gè)參數(shù)
- 路由返回,只會(huì)返回一層,不能直接返回到目標(biāo)頁(yè)面,因?yàn)椴恢滥繕?biāo)頁(yè)面是否在路由棧中,也不知道在第幾層
這些問(wèn)題都可以通過(guò)封裝路由文件和路由方法解決,提供開(kāi)發(fā)效率,減少BUG,省下來(lái)的時(shí)間可以多陪陪女朋友
封裝路由文件,對(duì)路由進(jìn)行統(tǒng)一管理
在根目錄創(chuàng)建router.js
// 這是路由管理頁(yè)面,在此統(tǒng)一配置路由
export default {
'index':'/index/index', // 首頁(yè)
'list':'/list/list', // list頁(yè)面
'top':'/top/top', // top頁(yè)面
}
解決了第一個(gè)問(wèn)題
封裝路由方法
路由方法有五個(gè),常用的有三個(gè)switchTab、navigateTo、navigateBack
簡(jiǎn)單介紹一下這五個(gè)方法及使用場(chǎng)景
- switchTab,跳轉(zhuǎn)tabBar頁(yè)面專(zhuān)用,其他頁(yè)面出棧,新頁(yè)面入棧
- navigateTo最常用的路由跳轉(zhuǎn),會(huì)加入到頁(yè)面棧,允許返回,也就是新頁(yè)面不斷入棧
- navigateBack返回,只能返回到頁(yè)面棧中存在的頁(yè)面,頁(yè)面不斷出棧,直到到達(dá)目標(biāo)頁(yè)
- redirectTo關(guān)閉當(dāng)前頁(yè)面,跳轉(zhuǎn)某個(gè)頁(yè)面,當(dāng)前頁(yè)面不會(huì)加入到頁(yè)面棧,也就是說(shuō)當(dāng)前頁(yè)面不能通過(guò)返回到達(dá),比如付款頁(yè)面,付款完成后,最好不要再讓用戶(hù)返回到付款頁(yè),再比如一些無(wú)法修改的操作,比如刪除商品,商品刪除后再通過(guò)navigateBack返回再刪除一次商品,體驗(yàn)肯定不好,表現(xiàn)為當(dāng)前頁(yè)面出棧,新頁(yè)面入棧
- reLaunch關(guān)閉所有頁(yè)面,打開(kāi)某個(gè)頁(yè)面,可以打開(kāi)任意頁(yè)面包括tabBar,適合強(qiáng)制完成某個(gè)操作的頁(yè)面,比如登錄頁(yè),當(dāng)已登錄的用戶(hù)點(diǎn)擊退出后,進(jìn)入登錄頁(yè),那么就不能通過(guò)返回再回去了,就必須留下來(lái)登錄或注冊(cè),適合用這個(gè),表現(xiàn)為所有頁(yè)面出棧,新頁(yè)面入棧
開(kāi)始封裝,在根目錄創(chuàng)建utils.js
// 封裝路由方法
export default {
/**
* function
* @param {string} url 目標(biāo)頁(yè)面的路由
* @param {Object} param 傳遞給目標(biāo)頁(yè)面的參數(shù)
* @description 處理目標(biāo)頁(yè)面的參數(shù),轉(zhuǎn)成json字符串傳遞給param字段,在目標(biāo)頁(yè)面通過(guò)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)頁(yè)面的路由
* @param {Object} param 傳遞給目標(biāo)頁(yè)面的參數(shù),只有頁(yè)面棧無(wú)目標(biāo)頁(yè)面調(diào)用navigateTo時(shí),參數(shù)才會(huì)生效,單單返回不能設(shè)置參數(shù)
* @description 先取出頁(yè)面棧,頁(yè)面棧最多十層,判斷目標(biāo)頁(yè)面是否在頁(yè)面棧中,如果在,則通過(guò)目標(biāo)頁(yè)的位置,返回到目標(biāo)頁(yè)面,否則調(diào)用navigateTo方法跳轉(zhuǎn)到目標(biāo)頁(yè)
*/
navigateBack(url,param={}){
const pagesList = getCurrentPages()
let index = pagesList.findIndex(e=>{
return url.indexOf(e.route)>=0
})
if(index == -1){ // 沒(méi)有在頁(yè)面棧中,可以調(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沒(méi)啥區(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沒(méi)啥區(qū)別
if(param){
url+=`?param=${JSON.stringify(param)}`要根據(jù)具體業(yè)務(wù)來(lái),該返回就返回,該跳轉(zhuǎn)就用跳轉(zhuǎn),不能一直跳轉(zhuǎn)!
}
wx.reLaunch({
url:url,
fail(err) {
console.log('reLaunch跳轉(zhuǎn)出錯(cuò)',err)
},
})
}
}
以上對(duì)參數(shù)的封裝解決了第二個(gè)問(wèn)題,對(duì)navigateBack的封裝解決了第三個(gè)問(wèn)題
總結(jié)
小程序的路由跳轉(zhuǎn)有很多方法,但具體場(chǎng)景下合適的只有一個(gè),選擇合適的路由跳轉(zhuǎn)方式會(huì)提高用戶(hù)體驗(yàn),封裝主要是提升開(kāi)發(fā)效率,減少后期維護(hù)成本
小程序代碼片段地址 https://developers.weixin.qq.com/s/CsoJwDmR7B8N
github,如果幫到了你,就給一顆star吧
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
GreyBox技術(shù)總結(jié)(轉(zhuǎn))
GreyBox是一個(gè)遮罩層的組件也稱(chēng)模式窗口或模態(tài)窗口(所謂模態(tài)窗口,就是指除非采取有效的關(guān)閉手段,用戶(hù)的鼠標(biāo)焦點(diǎn)或者輸入光標(biāo)將一直停留在其上的窗口),它運(yùn)行以后可以產(chǎn)生不錯(cuò)的界面。2010-11-11
js計(jì)算系統(tǒng)當(dāng)前日期是星期幾的方法
這篇文章主要為大家詳細(xì)介紹了js計(jì)算系統(tǒng)當(dāng)前日期是星期幾4種方法,需要的朋友可以參考下2016-07-07
JS在一定時(shí)間內(nèi)跳轉(zhuǎn)頁(yè)面及各種刷新頁(yè)面的實(shí)現(xiàn)方法
這篇文章主要介紹了JS在一定時(shí)間內(nèi)跳轉(zhuǎn)頁(yè)面及各種刷新頁(yè)面的實(shí)現(xiàn)方法的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-05-05
JavaScript NodeTree導(dǎo)航欄(菜單項(xiàng)JSON類(lèi)型/自制)
利用閑暇時(shí)間自己做了個(gè)JavaScript NodeTree,網(wǎng)上有很多類(lèi)似的效果,本例主要是練練手,鞏固下知識(shí),感興趣的朋友可以了解下,或許對(duì)你學(xué)習(xí)NodeTree導(dǎo)航欄有所幫助,認(rèn)為好的就分享嘍2013-02-02
讓html元素隨瀏覽器的大小自適應(yīng)垂直居中的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇讓html元素隨瀏覽器的大小自適應(yīng)垂直居中的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
JavaScript實(shí)現(xiàn)從數(shù)組中選出和等于固定值的n個(gè)數(shù)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)從數(shù)組中選出和等于固定值的n個(gè)數(shù)的方法,需要的朋友可以參考下2014-09-09
JavaScript?中處理?null和?undefined的常見(jiàn)方法
文章介紹了可選鏈操作符(?.)和空值合并操作符(??)的使用方法,并對(duì)比了它們與邏輯非運(yùn)算符(!)的區(qū)別,還討論了使用寬松比較運(yùn)算符(==)和自定義函數(shù)來(lái)優(yōu)化判斷的幾種方法,以提高代碼的可讀性和性能,感興趣的朋友跟隨小編一起看看吧2025-01-01
使用JS前端技術(shù)實(shí)現(xiàn)靜態(tài)圖片局部流動(dòng)效果
本文使用前端開(kāi)發(fā)技術(shù),結(jié)合?SVG?和?CSS?來(lái)實(shí)現(xiàn)類(lèi)似的液化流動(dòng)效果,包含的知識(shí)點(diǎn)主要包括:mask-image?遮罩、feTurbulence?和?feDisplacementMap?濾鏡、filter?屬性、canvas?繪制方法、TimelineMax?動(dòng)畫(huà)及input[type=file]?本地圖片資源加載,需要的朋友可以參考下2022-08-08

