小程序如何封装路由?这五个方法及使用场景要了解 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

小程序如何封装路由?这五个方法及使用场景要了解

发表时间:2021-1-4

发布人:葵宇科技

浏览次数:34

封装路由方法

路由方法有五个,常用的有三个switchTabnavigateTonavigateBack 简单介绍一下这五个方法及使用场景

  • switchTab,跳转tabBar页面专用,其他页面出栈,新页面入栈

  • navigateTo最常用的路由跳转,会加入到页面栈,允许返回,也就是新页面不断入栈

  • navigateBack返回,只能返回到页面栈中存在的页面,页面不断出栈,直到到达目标页

  • redirectTo关闭当前页面,跳转某个页面,当前页面不会加入到页面栈,也就是说当前页面不能通过返回到达,比如付款页面,付款完成后,最好不要再让用户返回到付款页,再比如一些无法修改的操作,比如删除商品,商品删除后再通过navigateBack返回再删除一次商品,体验肯定不好,表现为当前页面出栈,新页面入栈

  • reLaunch关闭所有页面,打开某个页面,可以打开任意页面包括tabBar,适合强制完成某个操作的页面,比如登录页,当已登录的用户点击退出后,进入登录页,那么就不能通过返回再回去了,就必须留下来登录或注册,适合用这个,表现为所有页面出栈,新页面入栈

封装

// 封装路由方法
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)  
      },
    })
  }
}

相关案例查看更多