【无标题】

1.配置tabbar：打开app.json  在pages中写下：

  "tabBar": {
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "/images/tabs/home.png",
      "selectedIconPath": "/images/tabs/home-active.png"
    },{
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "/images/tabs/message.png",
      "selectedIconPath": "/images/tabs/message-active.png"
    },{
      "pagePath": "pages/contact/contact",
      "text": "联系我们",
      "iconPath": "/images/tabs/contact.png",
      "selectedIconPath": "/images/tabs/contact-active.png"
    }
  ]
   },

注意：tabbar标签在app.json配置中必须放在前列

2.页面配置：在页面.json文件中

3.声明式导航

导航到非tabbar页面

<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>
<navigator url="/pages/info/info" open-type="navigate">导航到info页面</navigator>

后退导航

<navigator open-type="navigateBack" delta="1">后退</navigator>

4.编程式导航

 导航到tabbar页面

.html文件里

<button bind:tap="gotoMessage">跳转到message页面</button>

.js文件里

  gotoMessage(){
    wx.switchTab({
      url: '/pages/message/message',
    })
  },

导航到非tabbar页面

后退导航

  goBack(){
    wx.navigateBack({
      delta:1
    })
  },

5.导航传参

（1）声明式导航传参

<navigator url="/pages/info/info?name=zs&age=20">跳转到info页面</navigator>

（2）编程式导航传参 

.html文件中

<button bind:tap="gotoInfo2">跳转到info页面</button>

.js文件中

  gotoInfo2(){
    wx.navigateTo({
      url: '/pages/info/info?name=ls&gender=男',
    })
  },

 

 （3）在onLoad中接收导航参数

info.js中 第一步： 

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    console.log(options)
    this.setData({
      query: options      
    })
  },

第二步放入data即可在其他地方显示appdata：

  data: {
    // 导航传递过来的参数对象
    query:{}
  },