小程序5种路由方法使用场景,封装路由文件和路由方法,提升小程序体验和开发效率
鞍山ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联建站的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18982081108(备注:SSL证书合作)期待与您的合作!
明确要解决的问题
这些问题都可以通过封装路由文件和路由方法解决,提供开发效率,减少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吧
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。