小程序教学七（页面导航和参数传递）

页面导航

现在的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);//我们传递的参数，会以键值对的格式传递过来
    }
})

持续更新中...