小程序封装路由文件和路由方法(5种全解析)

 更新时间:2019年05月26日 11:32:23   作者:前端李会旺  
这篇文章主要介绍了小程序5种路由方法使用场景,封装路由文件和路由方法,提升小程序体验和开发效率,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

小程序5种路由方法使用场景,封装路由文件和路由方法,提升小程序体验和开发效率

明确要解决的问题

  • 每次使用路由时,总是粘贴复制路径,这样在路径有修改时,需要修改所有用到该路径的地方,维护成本高
  • 路由跳转时拼接参数让人头大,业务复杂时要拼接十几个参数
  • 路由返回,只会返回一层,不能直接返回到目标页面,因为不知道目标页面是否在路由栈中,也不知道在第几层

这些问题都可以通过封装路由文件和路由方法解决,提供开发效率,减少BUG,省下来的时间可以多陪陪女朋友

封装路由文件,对路由进行统一管理

在根目录创建router.js

// 这是路由管理页面,在此统一配置路由
export default {
 'index':'/index/index', // 首页
 'list':'/list/list', // list页面
 'top':'/top/top', // top页面
}

解决了第一个问题

封装路由方法

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

  • switchTab,跳转tabBar页面专用,其他页面出栈,新页面入栈
  • navigateTo最常用的路由跳转,会加入到页面栈,允许返回,也就是新页面不断入栈
  • navigateBack返回,只能返回到页面栈中存在的页面,页面不断出栈,直到到达目标页
  • redirectTo关闭当前页面,跳转某个页面,当前页面不会加入到页面栈,也就是说当前页面不能通过返回到达,比如付款页面,付款完成后,最好不要再让用户返回到付款页,再比如一些无法修改的操作,比如删除商品,商品删除后再通过navigateBack返回再删除一次商品,体验肯定不好,表现为当前页面出栈,新页面入栈
  • reLaunch关闭所有页面,打开某个页面,可以打开任意页面包括tabBar,适合强制完成某个操作的页面,比如登录页,当已登录的用户点击退出后,进入登录页,那么就不能通过返回再回去了,就必须留下来登录或注册,适合用这个,表现为所有页面出栈,新页面入栈

开始封装,在根目录创建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吧

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • GreyBox技术总结(转)

    GreyBox技术总结(转)

    GreyBox是一个遮罩层的组件也称模式窗口或模态窗口(所谓模态窗口,就是指除非采取有效的关闭手段,用户的鼠标焦点或者输入光标将一直停留在其上的窗口),它运行以后可以产生不错的界面。
    2010-11-11
  • js计算系统当前日期是星期几的方法

    js计算系统当前日期是星期几的方法

    这篇文章主要为大家详细介绍了js计算系统当前日期是星期几4种方法,需要的朋友可以参考下
    2016-07-07
  • JS在一定时间内跳转页面及各种刷新页面的实现方法

    JS在一定时间内跳转页面及各种刷新页面的实现方法

    这篇文章主要介绍了JS在一定时间内跳转页面及各种刷新页面的实现方法的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-05-05
  • JavaScript NodeTree导航栏(菜单项JSON类型/自制)

    JavaScript NodeTree导航栏(菜单项JSON类型/自制)

    利用闲暇时间自己做了个JavaScript NodeTree,网上有很多类似的效果,本例主要是练练手,巩固下知识,感兴趣的朋友可以了解下,或许对你学习NodeTree导航栏有所帮助,认为好的就分享喽
    2013-02-02
  • js调用设备摄像头的方法

    js调用设备摄像头的方法

    这篇文章主要为大家详细介绍了js调用设备摄像头的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • 让html元素随浏览器的大小自适应垂直居中的实现方法

    让html元素随浏览器的大小自适应垂直居中的实现方法

    下面小编就为大家带来一篇让html元素随浏览器的大小自适应垂直居中的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • JavaScript实现从数组中选出和等于固定值的n个数

    JavaScript实现从数组中选出和等于固定值的n个数

    这篇文章主要介绍了JavaScript实现从数组中选出和等于固定值的n个数的方法,需要的朋友可以参考下
    2014-09-09
  • JavaScript 中处理 null和 undefined的常见方法

    JavaScript 中处理 null和 undefined的常见方法

    文章介绍了可选链操作符(?.)和空值合并操作符(??)的使用方法,并对比了它们与逻辑非运算符(!)的区别,还讨论了使用宽松比较运算符(==)和自定义函数来优化判断的几种方法,以提高代码的可读性和性能,感兴趣的朋友跟随小编一起看看吧
    2025-01-01
  • 浅谈JavaScript 中的延迟加载属性模式

    浅谈JavaScript 中的延迟加载属性模式

    改善性能的最好方法之一是避免重复两次相同的工作。因此,只要可以缓存结果供以后使用,就可以加快程序的速度。延迟加载属性模式技术使任何属性都可以成为缓存层以提高性能。这里说到的延迟加载属性模式就是利用的访问器属性,将计算昂贵的操作推迟到需要时再使用
    2021-06-06
  • 使用JS前端技术实现静态图片局部流动效果

    使用JS前端技术实现静态图片局部流动效果

    本文使用前端开发技术,结合 SVG 和 CSS 来实现类似的液化流动效果,包含的知识点主要包括:mask-image 遮罩、feTurbulence 和 feDisplacementMap 滤镜、filter 属性、canvas 绘制方法、TimelineMax 动画及input[type=file] 本地图片资源加载,需要的朋友可以参考下
    2022-08-08

最新评论