Small program custom single page, global navigation bar

  Small program

Demand

The product said that it is not very convenient for the applet to return to the home page. If you want to add a button to return to the home page, the UI said that the navigation bar can set up a background picture, because the design is quite good.

clipboard.png

Demand Analysis and Plan Making

This product and UI have both raised demands, and I cannot refute them. Therefore, I began to investigate and analyze the feasibility plan. 1. You can add a suspension button. 2. Customize navigation bar.
Adding a hover button looks simple, but it doesn’t feel very elegant, takes up space on the page, and the experience is not very good. Therefore, I thought about the second scheme. The custom navigation bar can not only meet the needs of the product but also meet the design aesthetic feeling of UI. In the top blank space, I add a button to return to the home page, which is symmetrical with the return button (finally, as shown in the figure, the top navigation bar is a background picture, which is combined in two pieces).

Implementation plan

First, the premise of implementation

1. First of all, check the document to see how the user-defined navigation bar is stipulated and what restrictions it has. There are also WeChat versions and minimum supported versions of debug libraries for applets to customize global configuration and single page configuration of navigation bars.

2. Add navigationStyle:custom to app.json window, and the top navigation bar will disappear, leaving only the capsule button in the upper right corner. How to modify the color of the capsule? At present, the capsule body only supports black and white colors with “navigation bartextstyle”: “white/black” on app.josnwindow.

3. It is also necessary to consider adding a button to return and a button to return to the home page to adapt to different models.

Let’s talk about the following two configuration methods:

① global configuration navigationStyle:

  • Debug base > =1.9.0
  • Wechat client > =6.6.0
app.json
 
 {
 "usingComponents": {
 "navigationBar": "/components/navigationBar/navigationBar"
 },
 "window": {
 "navigationStyle": "custom"
 }
 }

(2) single page configuration navigationStyle

  • Debug base > =2.4.3
  • Wechat client version > =7.0.0
Json
 
 {
 "window": {
 "navigationStyle": "default"
 }
 }
 {
 "navigationStyle": "custom",
 "usingComponents": {
 "navigationBar": "/components/navigationBar/navigationBar"
 }
 }

The difference between the two is that the global configuration is placed in the app.json file and the single page configuration is placed in the custom page configuration file.

Second, the implementation steps

The following are the main points:

1. Customize the navigation bar text, whether to display the return, whether to display the return home page, and the height of the navigation bar

2. statusBarHeight is used to obtain the height of the status bar of the mobile phone. this requires onLaunch in global app.js, calling wx.getSystemInfo to obtain, navigationBarHeight+ the default height, which is to set the height of the entire navigation bar.

3. Also note that px is recommended for writing style distance and size, because the capsule on the right side of the applet is also px, not rpx.

4. Because each page of the custom navigation bar needs to be written, the navigation bar is packaged with common components, so it only needs to be introduced on each page.

The following are encapsulated navigation bar components:

wxml

<view class="navbar" style="{{'height: ' + navigationBarHeight}}">
 <view style="{{'height: ' + statusBarHeight}}"></view>
 <view class='title-container'>
 <view class='capsule' wx:if="{{ back || home }}">
 <view bindtap='back' wx:if="{{back}}">
 <image src='/images/back.png'></image>
 </view>
 <view bindtap='backHome' wx:if="{{home}}">
 <image src='/images/home.png'></image>
 </view>
 </view>
 <view class='title'>{{text}}</view>
 </view>
 </view>
 <view style="{{'height: ' + navigationBarHeight}};  background: white;"  ></view>

There is a problem that should be paid attention to here, that is, custom navigation bar, drop-down page, and navigation bar will drop down along with it. this problem is because the page element moves up navigationBarHeight as a whole after setting fixe d, so setting a blank view element in this component occupies the height of navigationBarHeight at the top.

wxss

.navbar {
 width: 100%;
 background-color: #1797eb;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 999;
 }
 .title-container {
 height: 40px;
 display: flex;
 align-items: center;
 position: relative;
 }
 .capsule {
 margin-left: 10px;
 height: 30px;
 background: rgba(255, 255, 255, 0.6);
 border: 1px solid #fff;
 border-radius: 16px;
 display: flex;
 align-items: center;
 }
 .capsule > view {
 width: 45px;
 height: 60%;
 position: relative;
 .capsule > view:nth-child(2) {
 border-left: 1px solid #fff;
 }
 .capsule image {
 width: 50%;
 height: 100%;
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%,-50%);
 }
 .title {
 color: white;
 position: absolute;
 top: 6px;
 left: 104px;
 right: 104px;
 height: 30px;
 line-height: 30px;
 font-size: 14px;
 text-align: center;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 }

js

const app = getApp()
 
 Component({
 
 properties: {
 text: {
 type: String,
 value: 'Wechat'
 },
 back: {
 type: Boolean,
 value: false
 },
 home: {
 type: Boolean,
 value: false
 }
 },
 data: {
 statusBarHeight: app.globalData.statusBarHeight + 'px',
 navigationBarHeight: (app.globalData.statusBarHeight + 44) + 'px'
 },
 
 methods: {
 backHome: function () {
 let pages = getCurrentPages()
 wx.navigateBack({
 delta: pages.length
 })
 },
 back: function () {
 wx.navigateBack({
 delta: 1
 })
 }
 }
 })

json

{
 "component": true,
 "usingComponents": {}
 }

Finally, the compatibility of the next version needs to be considered. After all, there are still some users. WeChat version has not been updated to the latest version.

First of all, you can get the WeChat version of the current user in app.js and compare the versions. If it is smaller than this version, you can set a global variable, or you can write a method in the component, open and display different top navigation bars on different pages, or you can control whether or not to display navigation bars, which is not detailed here.

I tried it myself. In WeChat below version 7.0, if a single page is used to customize the navigation bar, there will be two navigation bars. At this time, by judging the version number, do not render the customized navigation bar components. Write the title name and the corresponding background color in the page’s configuration file, so that the navigation bar will be displayed.

Summary

Small program development is a place with some holes, from never supporting custom navigation bar to supporting global custom navigation bar, to supporting single page configuration now, it can be seen that it is gradually improving. There is also tabbar at the bottom, which can be configured too little by itself. Although customization is also supported, it is found that the user-defined bottom navigation component experience is not good. Each time the page is opened, the button at the bottom will be re-rendered. If all the buttons are written as tab switches in one page, although the buttons do not need to be reloaded each time, the business is definitely not enough, and there are too many things written in a single page. I hope WeChat can add or release more functions so that developers can better serve products and give users a better experience.