蝙蝠岛资源网 Design By www.hbtsch.com

小程序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+=`"color: #ff0000">总结

小程序的路由跳转有很多方法,但具体场景下合适的只有一个,选择合适的路由跳转方式会提高用户体验,封装主要是提升开发效率,减少后期维护成本

小程序代码片段地址 https://developers.weixin.qq.com/s/CsoJwDmR7B8N

github,如果帮到了你,就给一颗star吧

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

标签:
小程序,封装路由文件,小程序,路由封装

蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

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

暂无小程序封装路由文件和路由方法(5种全解析)的评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。