小程序5種路由方法使用場(chǎng)景，封裝路由文件和路由方法，提升小程序體驗(yàn)和開(kāi)發(fā)效率
鞍山ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)建站的ssl證書(shū)銷(xiāo)售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書(shū)合作）期待與您的合作！
明確要解決的問(wèn)題
這些問(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)景
開(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ì)提高用戶體驗(yàn)，封裝主要是提升開(kāi)發(fā)效率，減少后期維護(hù)成本
小程序代碼片段地址 https://developers.weixin.qq.com/s/CsoJwDmR7B8N
github,如果幫到了你，就給一顆star吧
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
