获取用户信息后跳转首页的实现方法
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
扫码二维码
获取最新动态
