获取用户信息后跳转首页的实现方法
getUserInfo:function(e){ console.log('点击加载+'+e) app.globalData.userInfo = e.detail.userInfo let timer = setTimeout(function () { wx.reLaunch({ url: '/pages/index/index', fail: function () { Tools.showModal("支付界面 reLaunch调用失败,请重试"); wx.redirectTo({ url: '/pages/index/index', }) } }); }, 500) this.setData({ userInfo: e.detail.userInfo, hasUserInfo: true }) }
在实现"点击获取用户信息,然后跳转到首页"功能时,需要注意几个关键点。首先,建议在获取用户信息后设置0.5秒的定时器延迟跳转,这是为了确保页面有足够的时间完成加载和缓存处理。开发者也可以选择预加载的方式优化体验。
页面跳转方法选择
小程序中常用的跳转方法有wx.navigateTo和wx.redirectTo两种主要方式。wx.navigateTo会保留当前页面,跳转到应用内的某个页面(但不能跳转到tabBar页面),使用wx.navigateBack可以返回到原页面。这个方法是可逆的跳转,与wx.redirectTo最大的区别在于原页面的保留状态。
参数传递的注意事项
wx.navigateTo({ //目的页面地址 url: 'pages/logs/index', success: function(res){}, ... })
当需要跳转到带参数的页面时,开发者需要注意一个常见的坑:直接在.js文件中可能无法获取到传递的参数。正确的处理方式是:在跳转时先在全局变量中设置一个变量,在目标页面.js中调用全局变量获取数据,使用完毕后及时清除这个变量。
页面栈管理
toCategory:function(event){ var cate_id = event.currentTarget.dataset.cate_id; wx.switchTab({ url: '../category/category?cate_id='+cate_id, }); },
页面栈是小程序开发中需要理解的重要概念。小程序最多支持5层页面栈,可以通过getCurrentPages()函数获取当前页面栈。第一个元素为首页,最后一个元素为当前页面。使用wx.navigateTo每新开一个页面,页面栈大小加1,直到达到5层限制。
onLoad:function(options){ console.log(options); }
特殊跳转情况处理
有两种特殊情况需要注意:
toCategory:function(event){ var cate_id = event.currentTarget.dataset.cate_id; app.globalData.cate_id=cate_id;//设置全局变量(app已经定义 var app=getApp()) wx.switchTab({ url: '../category/category' }); },
1. 使用wx.navigateTo从四级页面跳转到二级页面时,会在页面栈顶添加一个与二级页面初始状态相同的界面,但两个页面状态独立。此时页面栈大小会加1,如果已达5层则跳转无效。
onLoad:function(options){ var that = this var cate_id=app.globalData.cate_id wx.request({ url: app.globalData.httpsurl +'public/index.php?s=product/index', data:{ cate_id:cate_id, }, success:function(res){ //清除全局变量cate_id app.globalData.cate_id="" that.setData({ alldata:res.data, }) } }) },
2. 使用wx.redirectTo从四级页面重定向到二级页面时,会关闭四级页面并使用二级页面替换,页面栈大小保持不变。
返回页面控制
通过getCurrentPages()可以获取当前页面栈,据此决定需要返回几层。如果指定的返回层数大于现有页面数,则会直接返回到首页。需要注意的是,调用跳转方法时,调用该方法的页面会被加入堆栈,而重定向方法则不会。
实践建议
// 此处是A页面 wx.navigateTo({ url: 'B?id=1' }) // 此处是B页面 wx.navigateTo({ url: 'C?id=1' }) // 在C页面内 navigateBack,将返回A页面 wx.navigateBack({ delta: 2 })
为了更好地理解页面栈的运行机制,建议开发者自己创建DEMO项目,在每次页面跳转和返回时打印当前的页面栈信息。通过实际观察页面栈的变化,能够更直观地掌握不同跳转方式的效果和区别。这种方法比单纯阅读文档要有效得多,能帮助开发者避免在实际开发中遇到页面栈相关的各种问题。
let pages = getCurrentPages();//当前页面 let prevPage = pages[pages.length-2];//上一页面 prevPage.setData({//直接给上移页面赋值 item: e.currentTarget.dataset.item, selAddress:'yes' }); wx.navigateBack({//返回 delta:1 })
版权声明:本文为 “博览广文网” 原创文章,转载请附上原文出处链接及本声明;
工作时间:8:00-18:00
客服电话
0755-88186625
电子邮件
admin@lanyu.com
扫码二维码
获取最新动态