WeChat applet navigation bar status bar modifiable items
In the WeChat applet, the style of the status bar and navigation bar can be modified, only the background color, text color (only white/black is supported), and title text can be modified.
navigationStyleCan control whether to display the navigation bar. If set to custom, there is no status bar, and the navigation bar is also an operable space, that is, the area that the front end can control at this time is the entire phone screen.
Get the height of the status bar of the WeChat applet
The method used to obtain system information wx.getSystemInfoSync(), the status bar height property of this methodstatusBarHeight
let res = wx.getSystemInfoSync();
let statusHeight = res.statusBarHeight; // 注意：此时获取到的值的单位为 'px'
Get the height of the WeChat applet navigation bar
Method 1 (I don’t agree with this method): Many people use to obtain capsule layout information wx.getMenuButtonBoundingClientRect(), and calculate the height of the navigation bar based on the height and the upper and lower positions, combined with the height of the status bar
let res = wx.getSystemInfoSync();
let buttonInfo = wx.getMenuButtonBoundingClientRect()
let navBarHeight = (buttonInfo.top - res.statusBarHeight) * 2 + buttonInfo.height
The principle of this method: This method is used by placing the capsule button of the WeChat applet in the middle of the navigation bar. The distance between the capsule and the top of the navigation bar is subtracted from the height of the status bar to obtain the distance between the capsule and the top of the navigation bar. Consider the distance between the capsule and the navigation bar The bottom is also this distance, plus the height of the capsule button is the overall height of the navigation bar.
**This method is not approved Reason:**The premise that this method is feasible is that the capsule button is located in the middle of the navigation bar. I personally think that the capsule button is not located in the middle of the navigation bar, that is, the height of the capsule button from the top of the navigation bar is different from the bottom of the navigation bar. of.
The above method, in most cases, the height of the navigation bar is the same 40px. Personal observation and testing, the navigation bar of the WeChat applet is the same on most models.44px
Now I take a screenshot of page 1 and set the screenshot to translucent
Situation 1: iPhone 6/7/8 models, the left side is the custom navigation bar, status bar 20px, navigation bar 40px, and the right side is the built-in navigation bar of WeChat, the green square Inside the frame, it can be seen that the left side is a little lower than the right side
Case 2: iPhone6/7/8 models, status bar 20px, navigation bar 44pxThe left side is the custom navigation bar, status bar 20px, navigation bar 44px, and the right side is the built-in navigation of WeChat In the green box, it can be seen that the heights of the two sides are basically the same.
in conclusion
Personal opinion: Under most models, the height of the navigation bar of the WeChat applet 44pxdoes not need wx.getMenuButtonBoundingClientRect()calculated by this method.
When customizing the navbar
Because the height of the status bar of different models of mobile phones is different, but the height of the navigation bar is the same, and the height of the status bar is obtained wx.getSystemInfoSync().statusBarHeightusing unit is px, and the height of the navigation bar is set to 44px.
Because in WeChat applets, it is often used rpxas a unit.
The rpx unit is essentially a percentage unit: 100% is 750rpx, if you want to pxconvert torpx
let navBarHeight = 44；
let navBarHeightNew = navBarHeight * 750 / wx.getSystemInfoSync().windowWidth;
In uniapp, you can use uni.upx2px() pxto convert torpx
uni.upx2px(44)
If there is any mistake, please correct me, thank you!
The above content is for reference only, welcome to discuss.