微信小程序开发 （二）页面跳转

页面跳转主要可以分为三种方式，如下目录

1、tabbar

最基础的跳转方式，通过底部导航栏的tabbar进行跳转。
在app.json中配置tabbar

{
  "pages": [
    "pages/home/home",
    "pages/other/other",
    "pages/navigator/navigator"
  ],
  "window": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "无忧",
    "navigationBarBackgroundColor": "#444444",
    "navigationStyle": "default"
  },
  "style": "v2",
  "renderer": "webview",
  "rendererOptions": {
    "skyline": {
      "defaultDisplayBlock": true,
      "disableABTest": true,
      "sdkVersionBegin": "3.0.0",
      "sdkVersionEnd": "15.255.255"
    }
  },
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents",
  "tabBar": {
    "list": [{
      "pagePath": "pages/home/home",
      "text": "home"
    },{
      "pagePath": "pages/other/other",
      "text": "other"
    }]
  }
}

给出tabbar的每一项list的配置参数

2、navigator组件

navigator组件跳转的区别主要是参数"open-type"的选择

（1）navigateTo

<navigator url="../navigator/navigator?title=helloworld" open-type="navigate" hover-class="navigator-hover">
  方法一、navigate--->保留当前页面，跳转到新页面，可以后退返回 ====》wx.navigateTo()
  最多到达十层后退
</navigator>

（2）redirectTo

<navigator url="../navigator/navigator?title=helloworld" open-type="redirect" hover-class="navigator-hover">
  方法二、redirect--->关闭当前页面，跳转到新页面，不能返回，只能返回主界面 ====》wx.redirectTo()
</navigator>

（3）switchTab

<navigator url="../other/other" open-type="switchTab" hover-class="navigator-hover">
  方法三、switchTab--->只能跳转tabbar，无法返回 ====》wx.switchTab
</navigator>

3、button中集成bindtap函数

点击button，即执行bindtap函数项，跳转方式还是上面哪三种，只不过上面是调用组件，这次是调用微信api接口。
bindtap调用的函数写在js文件data项的后面。
wxml文件

<button type="primary" bindtap="navigateTo">navigateTo</button>
<button type="primary" bindtap="redirectTo">redirectTo</button>
<button type="primary" bindtap="switchTabTo">switchTabTo</button>

js文件

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
//导航跳转
navigateTo:function(){
  wx.navigateTo({
    url: '../navigator/navigator?title=helloworld',
    success:function(res){
      console.log(res)
    }
  })
},
//重定向跳转
redirectTo:function(){
  wx.redirectTo({
    url: '../navigator/navigator?title=helloworld',
    success:function(res){
      console.log(res)
    }
  })
},
//switch跳转
switchTabTo:function(){
  wx.switchTab({
    url: '../other/other',
  })
},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

4、关于页面跳转传参和返回

在跳转的目标页面可以配置一个button，点击即返回

<button type="primary" bindtap="backBtn">后退到第n层</button>

点击函数backBtn，以及接收上个页面传过来的参数并进行使用的函数一并在js页面“监听页面加载”项里配置。

// pages/navigator/navigator.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad:function(options){
    console.log("navigator:")
    console.log(options)
    //通过上个页面传过来的参数设置当前页面的导航栏标题
    wx.setNavigationBarTitle({
      title: options.title
    })
  },
  backBtn:function(){
    //后退到第n个页面（跳转时存入的页面）
    //console.log("navigateBack");
    wx.navigateBack({
      delta: 0
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})