微信小程序：路由

• 路由跳转
• 页面数据通讯

 一、路由跳转

1.先来一个最简单的示例：

//index.wxml 部分关键代码
 <text class="welcome" catchtap="toNextPageTap">跳转到inside页面</text>
//index.js
Page({
  toNextPageTap: function(event) {
    wx.reLaunch({
      url: "/pages/inside/inside"
    })
  }
})

catchtap是事件监听属性，详细了解官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

以上的代码就可以实现一个页面跳转了，示例中的目标页面没有演示了。小程序的路由目前有五个页面跳转API，还有一组EventChannel页面数据通讯API，这一节先来介绍一下路由跳转API。

wx.switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

wx.reLaunch：关闭所有页面，打开到应用内的某个页面。

wx.redirectTo：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

wx.navigateTo：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

wx.navigateBack：关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。

关于路由跳转API值得注意的问题：

1.什么是tabBar页面：就是页面是否被配置为底边栏的跳转页面，如果被配置了就不能被wx.redirectTo、wx.navigateTo跳转（报错）。

{
  "pages": [
    "pages/index/index",
    "pages/inside/inside"
  ],
  "tabBar": {
    "list":[{
      "pagePath": "pages/index/index",
      "text": "首页"
    },{
      "pagePath": "pages/inside/inside",
      "text": "日志"
    }]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

2.关闭页面是什么意思？

所谓关闭页面相当于将页面数据清除，就不能使用回退图标回退或者wx.navigateBack跳转了，因为关闭清除也就是将其从页面栈中清除，并且页面栈最多也只能保存十个页面。

 

 二、页面数据通讯：EventChannel

 我当前的开发环境是2.12.1，还不能测试这个API，这个API最低兼容的版本是2.7.3。现在官方文档也就只有介绍，没有示例代码：https://developers.weixin.qq.com/miniprogram/dev/api/route/EventChannel.html

如果有兴趣可以参考这篇博客：https://blog.csdn.net/lqw200931116/article/details/100775320

虽然不能测试，这里我可以提示一下，这个API有点类是vue中使用自定义事件实现组件传值的效果，不过这里是页面之间传值。