小程序封裝路由文件和路由方法(5種全解析)
小程序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)文章
Javascript DOM的簡介,節(jié)點和獲取元素詳解
下面小編就為大家分享一篇詳談DOM的簡介,節(jié)點和獲取元素,具有非常好的參考價值,一起跟隨小編過來看看吧,希望對大家有所幫助2021-11-11JavaScript實現(xiàn)的一個計算數(shù)字步數(shù)的算法分享
這篇文章主要介紹了JavaScript實現(xiàn)的一個計算數(shù)字步數(shù)的算法分享,本文先是講解了算法描述與實現(xiàn)原理,然后給出實現(xiàn)代碼,需要的朋友可以參考下2014-12-12Javascript中獲取瀏覽器類型和操作系統(tǒng)版本等客戶端信息常用代碼
跟蹤一些最基本的客戶端訪問信息,這里將一些公用的代碼總結(jié)下來,需要的朋友可以參考下2016-06-06