WeChat Mini Program Example: Implementation Method of Customizing Navigation Bar

The content of this article is about WeChat applet examples: the implementation method of custom navigation bar, which has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

In the WeChat applet, the color of the navigation bar and some attributes of the copy can be set in the window in app.json, or in a single page. If it is a json file of a certain page For the configuration inside, you need to remove the window. For example, configure in app.json:

{
    "window":{
       "backgroundTextStyle":"light",
       "navigationBarBackgroundColor": "#fff",
       "navigationBarTitleText": "WeChat",
       "navigationBarTextStyle":"black",
       "navigationStyle": "custom"
     } }

Configure in the json file of a certain page:

{
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#405f80",
  "navigationBarTitleText": "文与字",
  "navigationBarTextStyle": "white"}

For details, please refer to the official documentation: https://developers. weixin.qq.com/miniprogram/dev/framework/config.html

But sometimes the navigation bar required by the business is quite special, and the navigation bar provided by the mini program cannot meet the needs. In this case, it can only be customized. .

Let’s talk about the steps to customize the navigation bar first:

• Add "navigationStyle": "custom" attribute to the window in app.json (the default attribute is "navigationStyle": "default"), then the default navigation bar of the mini program will disappear, as shown in the figure:
  

• Then follow your own You need to add your own navigation bar to each page.

#Note: navigationStyle only takes effect in app.json. After custom is turned on, lower version clients need to be compatible. Switching the developer tool base library version to 1.7.0 (does not represent the lowest version, only for debugging) can easily switch to the old vision.
That is to say, this property can only be configured in app.json , if you want to customize the navigation bar in a single page, it is not possible. You must customize the navigation bar for all pages. Personally, I think this is quite confusing. Maybe the mini program will be optimized in the future.

Related recommendations:

Mini program example: Implementation code for paging data loading in mini program

WeChat mini program example: click event and long press event Code implementation

How to clear the default styles of buttons and scroll bars in mini programs (code)

The above is the detailed content of WeChat Mini Program Example: Implementation Method of Customizing Navigation Bar. For more information, please follow other related articles on the PHP Chinese website!