页面导航
现在的APP中我们已经习惯了点击按钮,然后跑到下一个页面,点击返回,返回到我们上次浏览的页面,这里面的页面跳转在小程序中叫做导航,所以微信的导航,并不是地图里面的位置导航,而且用来控制页面与页面之间的跳转关系的导航。
我们可以把导航理解为控制页面显示的队列,队列最上面的就是显示给用户看到的页面
微信在导航中为我们提供了几个API来满足我们的需求
这些API都有success(跳转成功回调方法)、fail(跳转失败回调方法)、complete(跳转完成回调方法),同时还有一个url(跳转到哪里的属性)。
wx.navigateTo
保留当前页面,跳转到应用内某个页面
使用
wx.navigateTo({
url: '跳转的页面',
success:function(){
//跳转成功
},
faile: funcation(){
//跳转失败
},
complete: funcation(){
//跳转完成
}
})
注意:当前的页面最多可以跳转10层
wx.navigateBack
与wx.navigateTo相对应,关闭当前的页面,返回上一级页面,也可以通过deltas
属性设置一下返回多少页
使用
wx.navigateBack({
deltas: 2
})
wx.redirectTo
关闭当前页面,跳转到某个页面
使用
wx.redirectTo({
url:'跳转的页面'
})
如果是tabbar的我们就要使用wx.switchTab来控制了
wx.switchTab
使用
wx.redirectTo({
url:'跳转的页面'
})
注意:所有跳转的页面都要在app.json里面的pages里面存在。
页面传值
有时候我们会要求在页面跳转的时候进行参数的传递,由于小程序页面间的跳转是靠url来传递的,所以当想要传递参数的时候,要像发送get请求一样,在url后面进行拼接
url: 'text?id=1&name=cf&age=18' //传递参数
在每个页面显示的时候回调取onload方法,所以接收的参数要在这个方法里面获取
//获取参数
Page({
onLoad: function(option){
console.log(option);//我们传递的参数,会以键值对的格式传递过来
}
})
持续更新中...