Custom Navbar for Mini program

David Yu
David Yu
Mar 31, 2019 · 4 min read
Image for post
Image for post
Photo by Luke Porter on Unsplash

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

Image for post
Image for post

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"}
Image for post
Image for post

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

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

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.

Image for post
Image for post

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.

Image for post
Image for post

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

.
├── 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

Shanghai Coders

Sharing software development required in China

David Yu

Written by

David Yu

Software Freelancer based in Shanghai. More articles at https://shanghaicoders.com Work with me: https://davidyu37.github.io/

Shanghai Coders

Sharing software development required in China

David Yu

Written by

David Yu

Software Freelancer based in Shanghai. More articles at https://shanghaicoders.com Work with me: https://davidyu37.github.io/

Shanghai Coders

Sharing software development required in China

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store