小程序封装路由文件和路由方法,5种路由方法全解析
小程序5种路由方法使用场景,封装路由文件和路由方法,提升小程序体验和开发效率 明确要解决的问题
这些问题都可以通过封装路由文件和路由方法解决,提供开发效率,减少BUG,省下来的时间可以多陪陪女朋友 封装路由文件,对路由进行统一管理在根目录创建router.js // 这是路由管理页面,在此统一配置路由
export default {
'index':'/index/index',// 首页
'list':'/list/list',136);">// list页面
'top':'/top/top',136);">// top页面
}
复制代码
解决了第一个问题 封装路由方法路由方法有五个,常用的有三个? 简单介绍一下这五个方法及使用场景
开始封装,在根目录创建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,0);">'redirectTo跳转出错',reLaunch(url,param={}){ // 封装reLaunch,和navigateTo没啥区别
if(param){
url+=`?param=${JSON.stringify(param)}`要根据具体业务来,该返回就返回,该跳转就用跳转,不能一直跳转!
}
wx.reLaunch({
url:url,0);">'reLaunch跳转出错',})
}
}
复制代码
以上对参数的封装解决了第二个问题,对? (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |