Custom applet navigation bar

Recently we do small programs, but I never touched applet small white, so we have to study, but also their own opened a project try water, in the process of doing it met the needs of custom navigation, well behind the thought of project may also have such demand, decided to further discuss about WeChat small program how to customize the navigation bar.

The basic concept

First of all, understand a basic concept, what is called the navigation bar (small program old players can ignore by themselves, thought I was really stupid as a small white can not distinguish ah…)

This is a picture from the official WeChat document

Default navigation bar

The applet has default navigation bar

(The example diagram is, of course, the best Zelda in the world)

So that’s what the default navigation bar looks like, and you should be familiar with it, but when you go to another page, you’ll have a little arrow in the top left corner that goes back to you, but I’m not going to put the image in there

Small programs have no default navigation bar

When there is no default navigation bar, the page takes up the entire phone screen, including the phone status bar. , to achieve immersion, in fact, this is more aesthetic, but the corresponding development cost is also higher

How to remove the default navigation bar?

Change the NavigationStyle field in the JSON file of the Page to “Custom”. The default is “Default”. See WeChat official documentation for details

{
  "navigationStyle": "custom"
}

Note that the small app capsule in the upper right corner is impossible to remove, and it will always be there whether you customize the navigation bar or not

How to customize the navigation bar

Now let’s get into our main topic today. First of all, let me show you the final effect

The final result

Define two buttons, return to previous page and return to home page, of course, you can also make a search box, or do a drop-down or something is ok, provided it is not too ugly…

1. Development ideas

The navigation bar we just talked about can actually be broken down into two parts, the top part is called the status bar, the bottom part is the real navigation bar

Status bar section

The actual navigation bar section

2. Get the status bar height

So to make an empty view occupy the position of the status bar, can not let the content of our Page Page and the system status bar overlap, WeChat official provides relevant API so that we can easily get the height of the status bar wx.getSystemInfo

Code sample 

Wx.getSystemInfo ({success (res) {console.log(res.statusBarHeight) // unit px}})

Calculate the height of the navigation bar

Status bar solved, and then is the navigation bar, my idea here is a small program on the upper right corner of the capsule for reference, the approximate formula is as follows

Get the height of the capsule Get the height of the status bar (as mentioned above) Then the height of the navigation bar CustomNavHeight = (top - statusBarHeight) * 2 + height

Information such as coordinates for acquiring capsule width, WeChat official is also provides the relevant API wx. GetMenuButtonBoundingClientRect

Code sample 

/ / this is a synchronized method const. The rect = wx getMenuButtonBoundingClientRect const () {/ / on the coordinates of the top border, / / high height, / / wide width} = the rect

Problem 4.

And then the problem seems to be solved perfectly, right? Nonono When I finish a meal, I always feel something is wrong, always feel a bit out of place, and then I resort to Photoshop

On the WeChat developer tool, the simulation model I chose is iPhone 5, which is the information obtained from the WeChat API

Then go to Photoshop and use the guide to verify (don’t lose a pixel when you cut the entire simulated Page).

And then the odd thing happens, the right boundary coordinates are exactly the same as the left boundary coordinates, and the upper boundary coordinates are completely different from the lower boundary coordinates2 p!(In PS can be very convenient to measure, but different models estimate the error may be different), no wonder just I always feel a little misplaced, in fact, someone has found this problem, I just stepped on the pit again, the following is the small program official forum screenshot

There is no way but to improve the formula, but it should be noted that the error should be different for different models, and only a rough value can be given here

customNavHeight = (top - statusBarHeight + 2) * 2 + height

conclusion

After the tutorial, you should also know about how to customize the small program navigation, but also some pit inside, want to accurately control the height of the navigation bar is almost impossible, must be some deviation, so I think the custom navigation can be used to make the background of the immersion, or can be, for example the following xi tea home page, so that we can improve the user experience, The overall aesthetic of the program has also been improved

Xi tea home page

But if you want to customize some buttons to align with the applet capsule, this may be difficult, and if your product manager asks you, you’ll have to throw the kettle at WeChat, and hope the WeChat authorities fix the problem soon

Post code

index.wxml 

<view class="container" style="height: {{ windowHeight }}px;" > <view class="container-top"> <view class="custom-header" style="height: {{ statusBarHeight + navBarHeight }}px;" > <! <view class="custom-header__status-bar" style="height: {{statusBarHeight}}px;" style="height: {{statusBarHeight}} "; ></view> <view style="height: {{ navBarHeight }}px; line-height: {{ navBarHeight }}px;" class="u-flex u-p-l-30 u-p-r-30" > <view style="height: {{ menuButtonHeight }}px; line-height: {{ menuButtonHeight }}px; width: {{ menuButtonWidth }}px; border-radius: {{ menuButtonHeight / 2 }}px;" class="u-flex u-p-l-20 u-p-r-20 custom-header__opt-button" > <text class="iconfont icon-arrow-left u-flex-1" bind:tap="goBack"></text> <text class="iconfont iconvertical_line custom-header__opt-button-interval u-flex-1"></text> <text class="iconfont icon-home-fill u-flex-1" bind:tap="goHome"></text> </view> </view> </view> </view> </view>

index.js 

// pages/index/index.js Page({/** * Page initial data */ data: {windowhEight: 0, windowWidth: 0, // statusBarHeight (px) statusBarHeight: 0) 0, navBarHeight: 0, menuButtonHeight: 0, menuButtonWidth: 0,}, /** * Lifetime function -- listen for page loading */ onLoad: Function (options) {}, /** * Lifetime function -- Listen for page first render */ onReady: function () { this.getSystemInfo().then(({ info, rect }) => { console.log(info) console.log(rect) const { windowHeight, windowWidth, statusBarHeight } = info let { top, height, width } = rect top += 2 const navBarHeight = (top - statusBarHeight) * 2 + height this.setData({ windowHeight, windowWidth, statusBarHeight, navBarHeight, menuButtonHeight: height, menuButtonWidth: width, }) }) const rect = wx.getMenuButtonBoundingClientRect() let { top, height, width } = rect }, getSystemInfo() { return new Promise((resolve, reject) => { const rect = wx.getMenuButtonBoundingClientRect() wx.getSystemInfo({ success: info => { resolve({ info, rect }) } }) }) }, goBack() { wx.navigateBack() }, goHome() { wx.reLaunch({ url: '/pages/home/home' }) }, })

index.wxss 

.container { } .container-top { widows: 100%; height: 400rpx; background: url(https://read-1252195440.cos.ap-guangzhou.myqcloud.com/%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%8A%B 6%E6%80%81%E6%A0%8F/%E5%A1%9E%E5%B0%94%E8%BE%BE%E5%A4%A7%E5%B8%88%E4%B9%8B%E5%89%91.jpg) center center / cover no-repeat; } .custom-header__opt-button { border: 1px #dcdcdc solid; /* border: 1px #FF0000 solid; */ } .custom-header__opt-button .icon-arrow-left { color: #000000; text-align: center; font-weight: 600; } .custom-header__opt-button .icon-home-fill { color: #000000; text-align: center; font-weight: 600; } .custom-header__opt-button-interval { color: #dcdcdc; font-weight: 600; text-align: center; } .icon-arrow-left { vertical-align: middle; }

There are still some files that haven’t been posted, so you need to go to GitHub to get them

Project Warehouse Address

Project Warehouse Address