Wechat applet full stack development practice Chapter 3 Introduction and use of APIs commonly used in wechat applet development -- 3.10 tabbar component (I) how to open and use the default tabbar comp

zero 、 review

 Last class we mainly expanded wxp modular ,
 Finally, the user login is automatically initiated in the interface call .
 And after logging in successfully , Request to continue interface .
 In this class, we begin to learn tabBar Components .
 This is a navigation component at the bottom , Wechat applet has an official tabBar Components .
 But sometimes we need to customize our own tabBar Components , To enhance the user experience .
 stay tabBar The choice of implementation scheme , There are many ways in applets .

1. Use the system default tabBar
2. Use the way customized by the system 
3. Use weui Component library 
4. Customize based on components 

One 、 Use the default system tabBar

"tabBar": {
    
	"list": [
		{
    
			"pagePath": "pages/3-10/index",
			"iconPath":"components/tab-bar/component.png",
			"selectedIconPath":"components/tab-bar/component-on.png",
			"text": "⾸⻚"
		},
		{
    
			"pagePath": "pages/3-10/custom/index",
			"iconPath":"components/tab-bar/component.png",
			"selectedIconPath":"components/tab-bar/component-on.png",
			"text": "⾃ Definition "
		}
	]
}

It's important to point out that , When a page is tabBar.list When the page in ,
We use it wx.navigateTo, Page Jump is invalid .
You have to use wx.switchTab.

⽆ effect ：
<navigator opentype="navigate" url="/pages/3-10/ index2">navigate to inex2</
navigator>

 It works ：
<navigator opentype="switchTab" url="/pages/ 3-10/index2">switchtab to inex2</
navigator>

 It's not just the interface that has restrictions on use ,
 Use directly on components navigate There are also restrictions on jumping components .

 Because there is a tabBar, The effective area of its window becomes smaller ,
 stay tabBar The following is not suitable for content .
 from wx.getSystemInfo In this interface, we can get the effective screen height .


var data = wx.getMenuButtonBoundingClientRect()
console.log(' Capsule button ', data);
console.log(' Capsule button ⾼ degree ：', data.height) //32
console.log(' Upper boundary coordinates ：', data.top) //24
console.log(' Lower boundary coordinates ：', data.bottom) //56

let res = wx.getSystemInfoSync()
// Screen height 
console.log("screenHeight", res.screenHeight);
console.log("statusBarHeight", res.statusBarHeight);
// Effective area , Subtract the status bar of the system , Capsule button navigation area and tabBar Height 
console.log("windowHeight", res.windowHeight)

app.js

//app.js

//  Initialization only needs to be initialized once , Only need app.js Just initialize once , In this way, each page can apply wxp object 

// import { promisifyAll } from 'miniprogram-api-promise';
// const wxp = {}
// promisifyAll(wx, wxp)

// wxp.request2 = function (args) {
    
// let token = wx.getStorageSync('token');
// if (token) {
    
// if (!args.header) args.header = {}
// args.header["Authorization"] = `Bearer ${token}`
// }
// return wxp.request(args).catch(err => console.log("err", err))
// }

import wxp from "./lib/wxp.js";
import Event from "./lib/event.js"

// getApp() Informed App Example 
// getApp().globalEvent 
App({
    
  wxp: wxp,
  globalEvent:new Event(),// hold Event new An example , And mount it on App On ,
  onLaunch: function () {
    
    console.log('App Launch')
    // call API Get data from local cache 
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo: function (cb) {
    
    var that = this
    if (this.globalData.userInfo) {
    
      typeof cb == "function" && cb(this.globalData.userInfo)
    } else {
    
      // Invoke login interface 
      wx.login({
    
        success: function () {
    
          wx.getUserInfo({
    
            success: function (res) {
    
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  testHeight(){
    
    var data = wx.getMenuButtonBoundingClientRect()
    console.log(' Capsule button ', data);
    console.log(' Capsule button ⾼ degree ：', data.height) //32
    console.log(' Upper boundary coordinates ：', data.top) //24
    console.log(' Lower boundary coordinates ：', data.bottom) //56

   
    let res = wx.getSystemInfoSync()
    // Screen height , The bright part 
    console.log("screenHeight", res.screenHeight);
    // Time percentage , Height of system status bar 
    console.log("statusBarHeight", res.statusBarHeight);
    // Effective area , Subtract the status bar of the system , Capsule button navigation area and tabBar Height 
    console.log("windowHeight", res.windowHeight)
 

  },
  onShow: function () {
    
    console.log('App Show')
  },
  onHide: function () {
    
    console.log('App Hide')
  },
  globalData: {
    
    userInfo: null
  }
})

index/index.js

 onReady: function () {
    
    console.log("index----")
    getApp().testHeight()
  },

custom/index.js

 onReady: function () {
    
    console.log("custom----")
    getApp().testHeight()
  },

app.json

"pages": [
  "pages/3-10/index",
  "pages/3-10/index2",
  "pages/3-10/index3",
  "pages/3-10/custom/index",
  "pages/3-api/index",
  "pages/3-api/other/other"
],
"tabBar": {
    
    "list": [
      {
    
        "pagePath": "pages/3-10/index",
        "iconPath": "static/tab-bar/component.png",
        "selectedIconPath": "static/tab-bar/component-on.png",
        "text": " home page "
      },
      {
    
        "pagePath": "pages/3-10/index2",
        "iconPath": "static/tab-bar/component.png",
        "selectedIconPath": "static/tab-bar/component-on.png",
        "text": " home page 2"
      },
      {
    
        "pagePath": "pages/3-10/index3",
        "iconPath": "static/tab-bar/component.png",
        "selectedIconPath": "static/tab-bar/component-on.png",
        "text": " home page 3"
      }
    ]
  }

Use tabBar The page of

Use non tabBar The page of

tabBar Page and non tabBar page ,
windowHeight Values are 555.

 It is called in the page wx.getSystemInfo You can get the screen height of the current page ,
 If it is written in app.js Inside or with system tab Inside the page , Acquired windowHeight Will be better than not tab Fewer pages 48; 

` Contains TabBar The page of `
var app = getApp();
data:{
    
　windowHeight: app.globalData.windowHeight,
}


　　
` Not included TabBar The page of `
var app = getApp();
data:{
    
　　windowHeight: app.globalData.windowHeight + 48
}


 Screen height  screenHeight  667
 status bar  statusBarHeight   20
 Developable areas  windowHeight 555 + 48

 The navigation bar  667-20-555-48 = 44


 Navigation bar height  =  Capsule button height  +  Space from status bar to capsule button  * 2
Android Navigation bar height  = 32px + 8px * 2 = 48px
iOS Navigation bar height  = 32px + 6px * 2 = 44px

Two 、 Use the default system tabBar, Problems encountered in the community

2.1 Applet native tabBar The selected state has a background color , Why? ？

 Not necessarily , In the default tabBar In the configuration of ,
 And none of them selectedBackgroundColor Such a property ,
 Previously, in Chapter 2, when we introduced components , I have rewritten the style of system components ,
 As long as we search in the system wx-conponents.css This filename ,
 Find the relevant component style name . You can rewrite the style , Achieve the purpose of modifying the background .
 But this method is not feasible at this time , because tabBar It is a native component ,
 Its style is not defined in the style file .
tabBar Components as native components , Its hierarchy is above other components by default .

3、 ... and 、 summary

 In this class, we mainly introduce ,
 By default tabBar How to open and use .
 Next class, we'll see how to follow the way provided by the system ,
 Custom implementation of a tabBar Components