小程序5種路由方法使用場景，封裝路由文件和路由方法，提升小程序體驗和開發效率
明確要解決的問題
這些問題都可以通過封裝路由文件和路由方法解決，提供開發效率，減少BUG，省下來的時間可以多陪陪女朋友
封裝路由文件，對路由進行統一管理
在根目錄創建router.js
// 這是路由管理頁面，在此統一配置路由export default { 'index':'/index/index', // 首頁 'list':'/list/list', // list頁面 'top':'/top/top', // top頁面}解決了第一個問題
封裝路由方法
路由方法有五個，常用的有三個switchTab、navigateTo、navigateBack
簡單介紹一下這五個方法及使用場景
開始封裝，在根目錄創建utils.js
// 封裝路由方法export default { /** * function * @param {string} url 目標頁面的路由 * @param {Object} param 傳遞給目標頁面的參數 * @description 處理目標頁面的參數，轉成json字符串傳遞給param字段，在目標頁面通過JSON.parse(options.param)接收 */ navigateTo(url,param={}){ if(param){ url+=`?param=${JSON.stringify(param)}` } wx.navigateTo({ url:url, fail(err) { console.log('navigateTo跳轉出錯',err) }, }) }, /** * function * @param {string} url 目標頁面的路由 * @param {Object} param 傳遞給目標頁面的參數，只有頁面棧無目標頁面調用navigateTo時，參數才會生效，單單返回不能設置參數 * @description 先取出頁面棧，頁面棧最多十層，判斷目標頁面是否在頁面棧中，如果在，則通過目標頁的位置，返回到目標頁面，否則調用navigateTo方法跳轉到目標頁 */ navigateBack(url,param={}){ const pagesList = getCurrentPages() let index = pagesList.findIndex(e=>{ return url.indexOf(e.route)>=0 }) if(index == -1){ // 沒有在頁面棧中，可以調用navigateTo方法 this.navigateTo(url,param) }else{ wx.navigateBack({ delta: pagesList.length-1-index, fail(err){ console.log('navigateBack返回出錯',err) } }) } }, switchTab(url){ // 封裝switchTab，switchTab不能有參數 wx.switchTab({ url:url }) }, redirectTo(url,param={}){ // 封裝redirectTo，和navigateTo沒啥區別 if(param){ url+=`?param=${JSON.stringify(param)}` } wx.redirectTo({ url:url, fail(err) { console.log('redirectTo跳轉出錯',err) }, }) }, reLaunch(url,param={}){ // 封裝reLaunch，和navigateTo沒啥區別 if(param){ url+=`?param=${JSON.stringify(param)}`要根據具體業務來，該返回就返回，該跳轉就用跳轉，不能一直跳轉！ } wx.reLaunch({ url:url, fail(err) { console.log('reLaunch跳轉出錯',err) }, }) }}以上對參數的封裝解決了第二個問題，對navigateBack的封裝解決了第三個問題
總結
小程序的路由跳轉有很多方法，但具體場景下合適的只有一個，選擇合適的路由跳轉方式會提高用戶體驗，封裝主要是提升開發效率，減少后期維護成本
小程序代碼片段地址 https://developers.weixin.qq.com/s/CsoJwDmR7B8N
github,如果幫到了你，就給一顆star吧
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答
