小程序5種路由方法使用場(chǎng)景，封裝路由文件和路由方法，提升小程序體驗(yàn)和開(kāi)發(fā)效率
明確要解決的問(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í)有所幫助，也希望大家多多支持VEVB武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
