Custom Navbar for Mini program

Photo by Luke Porter on Unsplash

Your designer asked if we could have the user’s profile picture on the navigation bar, like this.

If you just want the code, scroll to the bottom.

Getting Started

Before we build the entire custom navigation bar, let’s look at what we can already achieve with provided options.

In app.json for global settings, you can change the background color, text color, and the text.

"window":{
 "navigationBarBackgroundColor": "#fff",
 "navigationBarTitleText": "WeChat",
 "navigationBarTextStyle":"black"
}

On the individual page ’s file, you can also change the background color, text color, and text.

{
 "navigationBarBackgroundColor": "#000",
 "navigationBarTextStyle": "white",
 "navigationBarTitleText": "Page 1"
}

So Many Options😅…Not!

How to get rid of the original navbar?

In your app.json, there’s a property that is called navigationStyle

"window":{
 "navigationStyle": "custom"
}

This value is default to default, when it’s custom, only the mini-program close button and menu is left.

Wait, does that mean I have to build my own back buttons and dynamic titles?

Yes, unfortunately, you can’t specify which part of the navbar you want to get rid of.

Using a component to avoid repetitive code

In .json file of your page, you can define the component you want to use

*Note: the path to the component is relative to the .json file

"usingComponents": {
 "CustomNav": "../../../components/custom-nav/custom-nav"
}

In the .wxml file, you can use the component like such

<view class="container">
 <CustomNav />
</view>

Similar to React.js, you can pass properties to the component

<CustomNav title="Home" showProfile="{{true}}" profilePic="{{userInfo.avatarUrl}}" />

In the .js file of custom-nav, define the properties

Component({
 properties: {
  title: {
   type: String,
   value: '',
  },
  showProfile: {
   type: Boolean,
   value: false,
  },
  profilePic: {
   type: String,
   value: null,
  }
 }
});

In .wxml of custom-nav, you can use the properties like such

<custom-component>
 <view class="nav-outer-container">
  <view class="outer-container" bindtap="goToProfile" wx:if="{{showProfile}}">
   <view class="profile-container">
    <image mode="aspectFit" src="{{profilePic}}" />
   </view>
  </view>
  <text style="color: {{titleColor}}">{{title}}</text>
 </view>
</custom-component>

Then you should have something like this.

What to do with the back button?

Mini Program provides a function called getCurrentPages to get the page stack, so when your component initializes, you can check the length of the page stack.

In .js file of custom-nav

data: {
 showBackButton: false,
},
ready() {
 if (getCurrentPages().length > 1) {
  this.setData({
   showBackButton: true,
  });
 }
}

In .wxml, you can have logic to determine if you want to show back button

<view class="outer-container" bindtap="goBack" wx:if="{{showBackButton}}">
 <view class="back-btn-container">
  <image src="../../assets/left-arrow-white.png" mode="aspectFit"/>
 </view>
</view>

Caveat

• Be sure to account for the different device’s status bar height

const sysInfo = wx.getSystemInfoSync();
this.setData({
 statusBarHeight: sysInfo.statusBarHeight
});

• Also, if you use position fixed, have an empty container to prevent content collapsing into the navbar.

Conclusion

If you’re just getting started in the world of WeChat, I have compiled a

Free WeChat Glossary for you.

The Code

davidyu37/mp-custom-nav

.
├── app.js
├── app.json
├── app.wxss
├── assets
│   ├── left-arrow-black.png
│   └── left-arrow-white.png
├── components
│   └── custom-nav
│       ├── custom-nav.js
│       ├── custom-nav.json
│       ├── custom-nav.wxml
│       └── custom-nav.wxss
├── pages
│   ├── index
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   ├── logs
│   │   ├── logs.js
│   │   ├── logs.json
│   │   ├── logs.wxml
│   │   └── logs.wxss
│   └── profile
│       ├── profile.js
│       ├── profile.json
│       ├── profile.wxml
│       └── profile.wxss
├── project.config.json
└── utils
    └── util.js