小程序用户授权后怎么返回首页
在小程序开发中,通常会出现需要获取用户的一些信息或是进行一些需要用户授权的操作。在用户授权完成后,如何返回到小程序的首页呢?
1. 点击左上角返回按钮
小程序的顶部通常会自带一个左上角返回按钮,在用户授权完成后,点击该按钮即可回到首页。
// 在小程序页面中显示返回按钮
wx.setNavigationBar({
backgroudColor: '#ffffff',
title: '授权页面',
showBackButton: true,
success: function (res) {
// 添加返回按钮事件监听
wx.onBacakButtonTap(function () {
// 返回首页
wx.navigateTo({
url: '/pages/index/index'
})
})
}
})
注意:在小程序中使用wx.setNavigationBar()方法可以设置小程序导航栏的样式,使用wx.navigateTo()方法可以进行页面跳转。
2. 在授权页面进行指定时间的等待
在授权页面进行指定时间的等待后,自动跳转到首页。可以通过使用setTimeout()方法或是小程序官方提供的API——wx.hideLoading()方法实现。
wx.showLoading({
title: '请稍等...',
mask: true
});
setTimeout(function(){
// 等待完成后返回到首页
wx.navigateTo({
url: '/pages/index/index'
});
}, 2000); // 等待2秒钟后执行回到首页操作
注意:使用wx.showLoading()方法可以在页面中显示“加载中”的提示信息,让用户等待的过程变得更加友好。
3. 使用wx.navigateBack方法返回到首页
如果在用户授权过程中不需要跳转到其他页面,可以考虑直接使用wx.navigateBack()方法返回到首页。
wx.getUserInfo({
success: function(res){
console.log(res);
wx.navigateBack({
// 返回的页面数,如果传入大于现有页面数的值,则返回到首页
delta: 1
});
},
fail: function(res){
console.log(res);
}
});
注意:使用wx.navigateBack()方法可以返回到上一个页面,其中delta参数表示返回的级别。
4. 在授权页面中使用wx.reLaunch()方法跳转到首页
在授权完成后直接使用wx.reLaunch()方法进行跳转也是一种方法。该方法可以关闭所有页面,跳转到应用程序的非 tabBar 页面,并且不允许跳转到 tabbar 页面。
wx.getUserInfo({
success: function(res){
console.log(res);
wx.reLaunch({
url: '/pages/index/index'
});
},
fail: function(res){
console.log(res);
}
});
注意:使用wx.reLaunch()方法跳转到最顶层的页面,没有历史记录。
总结
以上四种方法均可根据不同的需求来选择使用,都可以在用户授权后返回到小程序的首页。但如果用户授权完成后需要跳转到其他页面,则应该通过返回按钮或是使用wx.navigateBack()方法回到上一个页面。
个人建议:在用户授权过程中使用等待的方式,将提示信息加入到页面中,提高用户体验。