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


Posted in Javascript onMay 26, 2019

小程序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吧

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

Javascript 相关文章推荐
javascript 文档的编码问题解决
Mar 01 Javascript
javascript中全局对象的isNaN()方法使用介绍
Dec 19 Javascript
JQuery+CSS实现图片上放置按钮的方法
May 29 Javascript
JS简单实现城市二级联动选择插件的方法
Aug 19 Javascript
jquery form表单获取内容以及绑定数据
Feb 24 Javascript
Bootstrap3制作图片轮播效果
May 12 Javascript
jquery对Json的各种遍历方法总结(必看篇)
Sep 29 Javascript
js实现分页功能
May 24 Javascript
vue自定v-model实现表单数据双向绑定问题
Sep 03 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 Javascript
vue+axios实现post文件下载
Sep 25 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 Javascript
vue2.0 实现富文本编辑器功能
May 26 #Javascript
富文本编辑器vue2-editor实现全屏功能
May 26 #Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
May 26 #Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
May 26 #Javascript
vue指令做滚动加载和监听等
May 26 #Javascript
vxe-table vue table 表格组件功能
May 26 #Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 #Javascript
You might like
php之curl实现http与https请求的方法
2014/10/21 PHP
Zend Framework教程之Bootstrap类用法概述
2016/03/14 PHP
PHP获取用户访问IP地址的5种方法
2016/05/16 PHP
PHP实现随机发扑克牌
2020/04/22 PHP
有关DOM元素与事件的3个谜题
2010/11/11 Javascript
基于json的jquery地区联动效果代码
2011/07/06 Javascript
jQuery使用技巧简单汇总
2013/04/18 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
jquery制作漂亮的弹出层提示消息特效
2014/12/23 Javascript
jQuery统计指定子元素数量的方法
2015/03/17 Javascript
jQuery同步提交示例代码
2015/12/12 Javascript
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
vue 怎么创建组件及组件使用方法
2017/07/27 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
2018/09/30 Javascript
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
Python 两个列表的差集、并集和交集实现代码
2016/09/21 Python
基于python的多进程共享变量正确打开方式
2018/04/28 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
学生如何注册Pycharm专业版以及pycharm的安装
2020/09/24 Python
python与idea的集成的实现
2020/11/20 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
Juicy Couture Beauty官方网站:香水和化妆品
2019/03/12 全球购物
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
意大利在线药房:Saninforma
2021/02/11 全球购物
投标承诺书怎么写
2014/05/24 职场文书
离职保密承诺书
2014/05/28 职场文书
实习生个人总结范文
2015/02/28 职场文书
关于远足的感想
2015/08/10 职场文书
党员公开承诺书2016
2016/03/24 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书
为什么node.js不适合大型项目
2021/04/28 Javascript
深入解析MySQL索引数据结构
2021/10/16 MySQL
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL