What is navigationBar?
- WeChat applets generally have two bars, a navigation bar, and a tabbar (a row of switching buttons below the applet). The method of customizing the tabbar below is generally relatively simple. Now we will focus on the realization of the custom navigation bar above. .
Applet layout
- When it comes to the navigation bar and custom navigation bar, we need to explain the layout of the WeChat applet. Use wx.getSystemInfo() method in applet development to get system information.
- Part of the obtained information is shown in the figure above (taken from the WeChat applet developer documentation). The useful information for us to understand the layout is the above properties related to width and height, such as the screen height and width of the current device, available height and width, and saveArea.
- The figure above shows the actual performance of the data we obtained from systemInfo, taking the notch screen of Apple X as an example (all Android notch screens have similar principles): the outermost red box is the screen size, and the blue box is the safe area. It is the page area that developers can manipulate. The yellow box above is the status bar of the mobile phone, and the green area is the navigationBar we want to customize .
- It can be seen that the navigation bar is close to the upper part of the safeArea. If the native navigation bar is used, the lower part of the navigation bar is the real controllable range.
- In fact, our custom navigation bar is also most harmoniously aligned with the capsule in this safeArea. The key reason is that WeChat uses the capsule button in the upper right corner as a built-in component, which only has two colors: black and white, that is, we cannot change its size, position, transparency, etc. Same location as pictured above.
Why customize the navigationBar?
Native Navigation Bar Limitations
- In addition to the capsule button, the native navigation bar will only display the back button and the "Back to Home" button that is displayed by default when the bottom-level page of the Mini Program opened by the user is not the home page.
- The color of the title text of the native navigation bar is only black and white.
- The layout cannot be changed and cannot be customized.
product demand
-
If the limitations of the native navbar weren’t enough to get you into custom navbars, product demand is definitely the bigger driver.
-
Except that the capsule button cannot be customized in the custom navigation bar, other areas are under the control of the programmer, so using the custom navigation bar can undoubtedly meet the various needs of the product.
figure 1
figure 2
- If your product has the requirements in the picture above, obviously you can't say no, you can only meet the requirements and add a custom navigationBar.
How to customize navigationBar?
Remove the native navigation bar.
- Remove the navigationBarTitleText of page.json that needs to customize the navigationBar page.
- Add "navigationStyle": "custom", so that the original navigation bar has disappeared, and even the back key will not appear and need to be customized.
- In addition, as early as 2016, WeChat has begun to adapt to the immersive status bar. At present, almost all models of WeChat have an immersive status bar. That is to say, while removing the native navigation bar, the entire screen has become a programmable area .
Calculate navigationBarHeight.
- Of course, the native capsule button exists, so the next step is to locate the height and position of the custom navigation bar.
- For different models and systems, the positions of the status bar and the capsule button are uncertain, so certain calculations are required, so that you can calmly judge any model.
- Use "wx.getSystemInfo()" to get "statusBarHeight", which determines the most basic distance of the navigation bar from the top of the screen.
- Use "wx.getMenuButtonBoundingClientRect()" to get the capsule information of the applet (note that there are various problems in this api, and the performance is inconsistent at different ends, and the handling of the failure of this api call will be described later), as shown in the figure below, the following coordinate information is displayed on the screen The upper left corner is the origin.
- Take the following picture as an example, the upper red box is the statusBar, and the height is known; the lower red box is the text content, and the one in the middle is the navigationBarHeight; and the yellow one is the original capsule button, which is also in the vertical center position, and the height is the capsule The button is known based on the coordinate information of the upper left corner, it is not difficult to get, navigationBarHeight = blue box height × 2 + capsule button.height. (blue box height = capsule button.top - statusBarHeight)
-
The final calculation formula is: navigationBarHeight = (capsule button.top - statusBarHeight) × 2 + capsule button.height. The distance between the navigationBar and the top of the screen is the navigationBarHeight.
-
This calculation method is applicable to various models and Android ios.
-
For the very few cases where "wx.getMenuButtonBoundingClientRect()" gets an error or the data is 0, it can only be simulated. For Android, the general navigationBarHeight is 48px, while for iOS it is generally 40px, and the capsule button height of all models is 32px. It is also obtained through many articles and self-tests on the Internet, and this error can generally be ignored. Of course, the most ideal is that WeChat can hold all models, huh, huh. Finally, I would like to remind that only the real device shall prevail, not to mention the bugs of developer tools.
Code
To obtain local machine information, the author generally writes it in the onLaunch of the App.
App.js
// App.js
...
onLaunch(){
const { statusBarHeight, platform, windowHeight }=wx.getSystemInfoSync()
const { top, height } = wx.getMenuButtonBoundingClientRect()
// 状态栏高度
wx.setStorageSync('statusBarHeight', statusBarHeight)
// 屏幕高度
wx.setStorageSync('windowHeight', windowHeight)
// 胶囊按钮高度 一般是32 如果获取不到就使用32
wx.setStorageSync('menuButtonHeight', height ? height : 32)
// 判断胶囊按钮信息是否成功获取
if (top && top !== 0 && height && height !== 0) {
const navigationBarHeight = (top - statusBarHeight) * 2 + height
// 导航栏高度
wx.setStorageSync('navigationBarHeight', navigationBarHeight)
} else {
wx.setStorageSync('navigationBarHeight', platform === 'android' ? 48 : 40)
}
}
...- The author stores these height information in stroage, and then creates a navigationBar custom component, which will use these data in the component.
navigationBar.js
// navigationBar.js
...
data: {
// 状态栏高度
statusBarHeight: wx.getStorageSync('statusBarHeight') + 'px',
// 导航栏高度
navigationBarHeight: wx.getStorageSync('navigationBarHeight') + 'px',
// 胶囊按钮高度
menuButtonHeight: wx.getStorageSync('menuButtonHeight') + 'px',
// 导航栏和状态栏高度
navigationBarAndStatusBarHeight: wx.getStorageSync('statusBarHeight') + wx.getStorageSync('navigationBarHeight') + 'px'
}
...- The layout in navigationBar.wxml will not be described in detail. Generally speaking, the navigation bar uses fixed positioning, and the custom return button is positioned in the vertical center of the line, and the navigation title is centered, and the ellipsis is displayed when there are too many words.
navigationBar.wxml
<!--Components/navigationBar.wxml-->
<view class="navigation-container" style="{
{'height: ' + navigationBarAndStatusBarHeight}}">
<!--空白来占位状态栏-->
<view style="{
{'height: ' + statusBarHeight}}"></view>
<!--自定义导航栏-->
<view class="navigation-bar" style="{
{'height:' + navigationBarHeight}}">
<image class="nav-img" src='/icon/edit.png' />
<view class="navigation-title" style="{
{'line-height:' + navigationBarHeight}}">{
{title}}</view>
</view>
</view>
<!--空白占位fixed空出的位置-->
<view style="{
{'height: ' + navigationBarAndStatusBarHeight}}"></view>navigationBar.wxss
/* Components/navigationBar.wxss */
.navigation-container {
position: fixed;
width: 100%;
z-index: 99;
top: 0;
left: 0;
}
.navigation-bar {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
}
.navigation-buttons {
display: flex;
align-items: center;
margin-left: 10px;
border: 1px solid rgba(0, 0, 0, 0.05);
box-sizing: border-box;
border-radius: 15px;
background-color: transparent;
}
.nav-img {
height: 22px;
margin-left: 28rpx;
width: 22px;
}
.navigation-title {
position: absolute;
left: 104rpx;
right: 104rpx;
text-align: center;
font-size: 16px;
font-weight: bold;
color: #ffffff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Summarize
- The core of the custom navigation bar is the height positioning of the navigation bar, so that the position of the custom back button and other buttons can be accurately positioned, which is consistent with the native capsule. As for the various layout methods of wxml, the above is just a way of writing written by the author.
- Learning applets and customizing the navigation bar are very important skills, and the logic is not complicated. Just like learning the front end, you need to be very careful and patient to do the details.