微信小程序常用API详解（路由、tabBar、窗口、事件等）

路由

1. wx.switchTab

• wx.switchTab(Object object)跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

• 参数

属性	类型	默认值	必填	说明
url	string			是
success	function			否
fail	function			否
complete	function			否

• 示例代码

{
  "tabBar": {
    "list": [{
      "pagePath": "index",
      "text": "首页"
    },{
      "pagePath": "other",
      "text": "其他"
    }]
  }
}

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

wx.redirectTo

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

• 参数

属性	类型	默认值	必填	说明
url	string			是
success	function			否
fail	function			否
complete	function			否 接口调用结束的回调函数（调用成功、失败都会执行）

• 示例代码

wx.redirectTo({
  url: 'test?id=1'
})

wx.reLaunch

• wx.reLaunch(Object object)关闭所有页面，打开到应用内的某个页面

• 参数

属性	类型	默认值	必填	说明
url	string		是	需要跳转的应用内页面路径，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'
success	function			否
fail	function			否
complete	function			否

• 示例

wx.reLaunch({
  url: 'test?id=1'
})
// test
Page({
  onLoad (option) {
    console.log(option.query)
  }
})

wx.navigateTo

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

• 参数

属性	类型	默认值	必填	说明
url	string		是	需要跳转的应用内非 tabBar 的页面的路径, 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 'path?key=value&key2=value2'| |events| |Object| || 否 |页面间通信接口，用于监听被打开页面发送到当前页面的数据。基础库 2.7.3 开始支持。
success	function			否
fail	function			否
complete	function			否

• 示例

wx.navigateTo({
  url: 'test?id=1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})


-----------------------------------------------------------------------------------------


Page({
  onLoad: function(option){
    console.log(option.query)
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
    eventChannel.emit('someEvent', {data: 'test'});
    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log(data)
    })
  }
})

wx.navigateBack

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

• 参数 

属性	类型	默认值	必填	说明
success	function			否
fail	function			否
complete	function			否
delta	Number		是	返回的页面数，如果 delta 大于现有页面数，则返回到首页。

• 示例

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码
 
// 此处是A页面
wx.navigateTo({
  url: 'B?id=1'
})
 
// 此处是B页面
wx.navigateTo({
  url: 'C?id=1'
})
 
// 在C页面内 navigateBack，将返回A页面
wx.navigateBack({
  delta: 2
})

路由小结：

1. wx.navigateTo为打开新页面，会增加页面栈大小，直到页面栈大小为10
2. wx.redirectTo为页面重定向，不会增加页面栈大小
3. wx.navigateBack为页面回退，会减少页面栈大小，直到页面栈大小为1
4. wx.switchTab为跳转tabBar页面专用API
5. wx. reLaunch为重新启动，关闭所有页面，可以打开任意页面

TabBar

1. wx.showTabBarRedDot(Object object)   显示 tabBar 某一项的右上角的红点
2. wx.showTabBar(Object object)   显示 tabBar
3. wx.setTabBarStyle(Object object)   动态设置 tabBar 的整体样式
4. wx.setTabBarItem(Object object)   动态设置 tabBar 某一项的内容
5. wx.setTabBarBadge(Object object)   为 tabBar 某一项的右上角添加文本
6. wx.removeTabBarBadge(Object object)  移除 tabBar 某一项右上角的文本
7. wx.hideTabBarRedDot(Object object)   隐藏 tabBar 某一项的右上角的红点
8. wx.hideTabBar(Object object)   隐藏 tabBar

下拉刷新

1. wx.stopPullDownRefresh(Object object)   停止当前页面下拉刷新。
2. wx.startPullDownRefresh(Object object)   开始下拉刷新。调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

滚动

1. wx.pageScrollTo(Object object)   将页面滚动到目标位置

动画

1. wx.createAnimation(Object object)   创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。

菜单

1. wx.getMenuButtonBoundingClientRect()  获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。

窗口

1. wx.onWindowResize(function callback)    监听窗口尺寸变化事件
2. wx.offWindowResize(function callback)    取消监听窗口尺寸变化事件