小程序开发—第五弹：整体页面布局

底部导航

主要使用 app.json中tabbar 控制

实现方式：只需要在app.json中设置即可

// app.json
{
    
    
  "tabBar": {
    
    
    "list": [{
    
    
      "pagePath": "pages/index/index",   //页面连接地址
      "iconPath": "img/icon/index.png",  //图标
      "selectedIconPath": "img/icon/index-active.png",  //选中后图标
      "text": "首页"			//标题
    },{
    
    
      "pagePath": "pages/test/test",
      "iconPath": "img/icon/sort.png",
      "selectedIconPath": "img/icon/sort-active.png",
      "text": "测试页"
    }]
  }
}

页面路由

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

course.wxml

<!--index.wxml-->
<view bindtap="goTo">
   <button>
     Go to Next page
   </button>
 </view>

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

<!--course.html-->
<text>课程信息</text>

//course.js
/**
 * 生命周期函数--监听页面加载
 */
onLoad: function(option){
    
    
  console.log(option.query)
  const eventChannel = this.getOpenerEventChannel()
  eventChannel.emit('acceptDataFromOpenedPage', {
    
    data: 'acceptDataFromOpenedPage'});
  eventChannel.emit('someEvent', {
    
    data: 'someEvent'});
  // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
  eventChannel.on('acceptDataFromOpenerPage', function(data) {
    
    
    console.log(data)
  })
},