Small tricks with great benefits: a complete guide to setting the status bar of WeChat applets

foreword

When we use WeChat applets, we often find that the status bar of the applet is not consistent with the status bar of our mobile phone. Sometimes the color of the status bar does not match the theme color of our applet, and sometimes the text content of the status bar does not meet our needs. In order to solve these problems, we need to dynamically set the status bar of the WeChat applet. In this article, we will discuss how to realize the dynamic setting of the status bar of the WeChat applet through code, so as to make our applet more beautiful and practical.

---

1. Title

1. Set the general title of the whole applet, set it app.jsonin

"window": {
    
    
    "navigationBarTitleText": "默认标题"
}

2. Set the page title separately, and set it in the corresponding page jsonfile (sub-page settings will override the general settings):

{
    
    
    "navigationBarTitleText": "demo"
}

3. Dynamic settings:

<view>
    <button bindtap="clickOn">点击我改变标题</button>
</view>

Page({
    
    
    clickOn() {
    
    
        wx.setNavigationBarTitle({
    
    
            title: '修改title',
        })
    },
})

Display of results

---

2. Background color

• frontColorThe foreground color value, including the color of buttons, titles, and status bars, only supports #ffffffand#000000
• backgroundColorBackground color value, valid value is hexadecimal color
• animationanimation effect

animationThe structure includes: durationand timingFunc.

durationIndicates the timing of the animation.

timingFunc

• linearThe speed of the animation is the same from start to finish
• easeInAnimation starts at low speed
• easeOutAnimation ends at slow speed
• easeInOutAnimation starts and ends at slow speed

<view>
    <button bindtap="clickOn">点击我改变状态栏背景色</button>
</view>

Page({
    
    
    clickOn() {
    
    
        wx.setNavigationBarColor({
    
    
            frontColor: '#ffffff',
            backgroundColor: '#48D1CC',
            animation: {
    
    
                duration: 1000,
                timingFunc: 'easeInOut'
            }
        })
    },
})

Display of results

---

3. Status bar loading

• wx.showNavigationBarLoading: display the navigation bar loading animation on the current page
• wx.hideNavigationBarLoading: Hide the navigation bar loading animation on the current page

<view>
    <button bindtap="showCartoon">显示加载动画</button>
    <button bindtap="hideCartoon">隐藏加载动画</button>
</view>

Page({
    
    
    // 显示加载动画
    showCartoon() {
    
    
        wx.showNavigationBarLoading()
    },
    // 隐藏加载动画
    hideCartoon() {
    
    
        wx.hideNavigationBarLoading()
    }
})

Display of results

---

4. Back to home button

Hide the back to home button. Starting from WeChat version 7.0.7 , when the bottom-level page of the Mini Program opened by the user is not the home page, the "Back to Home" button is displayed by default, and the developer can call onShowin hideHomeButtonhide it.

wx.hideHomeButton();