小程序页面跳转---导航，路由

小程序中所有页面的跳转都是通过路由的方式进行页面切换，又框架进行管理。

页面栈

框架以栈的形式维护当前所有页面，当需要路由切换时，页面栈表现如下

  1、初始化页面  新页面入栈  小程序打开时会自动创建

  2、打开新页面 新页面入栈  

  3、页面重定向 当前页面出栈，新页面入栈 

  4、页面返面 页面不断出栈，直到返回Tab页面

  5、Tab切换   页面全部出栈，只留下新的Tab页面

  6、重加载     页面全部出栈，只留下新的页面

路由切换方式(.JS，.wxml)

    通过在.js调用微信API者.wxml中使用微信组件实现页面的跳转。

   一、.js中实现页面的跳转，可使用的方法如下：

    1、wx.navigateTo(object):保留当前页面，跳转到应用的某个页面；打开新页面（新页面入栈）

    2、wx.redirectTo(object):关闭当前页面，跳转到应用内的某个页面。页面重定向（当前页面出栈，新页面入栈）

    3、wx.reLauch(object)：关闭所有页面，打开到应用内的某个页面 。重加载 （页面全部出栈，只留下新的页面）；

    4、wx.navigateBack（object）关闭当前页面，返回上一页面或者多级页面。返回上一页面，页面返回（页面不断出栈）

    5、wx.switchTab(object),跳转到新的tabBar页面。并关闭其他页面；（页面全部出栈，只留下新的Tabar页面）

   详情请查看官方网址：https://developers.weixin.qq.com/miniprogram/dev/api/ui-navigate.html#wxrelaunchobject；

  示例如下：

1、页面切换

  wx.navigateTo({

     url: '../index/index'

})

  

 2、页面重定向

wx.redirectTo({

     url: '../index/index'
'

})

  3、重加载

wx.reLaunch({

   url: '../index/index' //跳转路径

})

  4、页面返回

wx.navigateBack({

    delta: 2 //返回页面数

})

   5、tabBar页面切换：

wx.switchTab({
  url: '../others/others'
})

   二、、.wxml中页面跳转

     https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

     使用navigator组件实现页面跳转，示例如下：

< view class= "btn-area">

< navigator url= "../logs/logs?title=navigate" hover-class= "navigator-hover">跳转到新页面 </ navigator >

< navigator url= "../logs/logs??title=redirect" open-type= "redirect" hover-class= "other-navigator-hover">在当前页打开 </ navigator >

< navigator url= "../others/others" open-type= "switchTab" hover-class= "other-navigator-hover">切换 Tab </ navigator >

</ view >

我的文件结构：

app.json配置如下

{

"pages":[

"pages/login/login",

"pages/index/index",

"pages/logs/logs",

"pages/others/others"

],

"tabBar": {

"list": [

{

"pagePath": "pages/index/index",

"text": "首页"

},

{

"pagePath": "pages/others/others",

"text": "日志"

}

]

},

"window":{

"backgroundTextStyle": "light",

"navigationBarBackgroundColof": "#fff",

"navigationBarTitleText": "WeChat",

"navigationBarTextStyle": "white"

}

}

gitHub代码如下：

https://github.com/xiaoyaoyao/wx-xiaochengxu.git

https://github.com/xiaoyaoyao/wx-xiaochengxu.git

https://github.com/xiaoyaoyao/wx-xiaochengxu.gitggitgit

https://github.com/xiaoyaoyao/wx-xiaochengxu.gi