The WeChat applet developed by uni-app - when you return to the login page, a house icon will appear in the upper left corner (return to the home page) - what's going on - how to solve it

Preface

• Discover the project, and return to the login page when entering for the first time, a house button will appear on the left side of the original navigation bar to return to the home page directly

• Finally, I checked around and found that after the WeChat version is updated, it will appear when we enter a page that is not the home page or tabbar

• WeChat also has a solution for this, you can disable it in the WeChat environment (it will not appear in the h5 environment, only WeChat has it)

• There is another way, it will only appear in the native navigation bar, if we disable the native navigation bar, we will solve the problem fundamentally

understand by yourself

Since the inception of WeChat mini programs, WeChat mini programs have been pursuing lightweight, focusing on user self-determination, and having user information (obsolete) mobile phone number authorization, etc., in order to achieve an imperceptible user experience (different from h5). If As soon as we get up, we go back to the login page and need to log in. This goes against his philosophy. That’s why this button appears when we enter the homepage or tabbar page. In this way, we find that many small programs come in. It is the home page, and you can browse information, and only need to log in for key operations. Even some applets do not have a dedicated login page to directly authorize without perception. But it's not a one-shot kill. For special needs, WeChat also reserves APIs to solve this problem.

WeChat Developer Documentation-uni-app Documentation-Search hideHomeButton to view instructions

solution

1. In the -onShow life cycle of the login page, judge whether the WeChat environment has this api, and hide the button if it exists

Disadvantages: If there is a title - it will cause the title to move to the left and the button will appear for a moment and then disappear when returning to the login page (obvious during real machine testing - the user experience is not good)

onShow() {
             if (uni.hideHomeButton) {
                console.log('uni.hideHomeButton');
                wx.hideHomeButton();
             }
        },

2. Solve the problem directly from the source

The reason why there is a home button in the upper left corner - because the source code is judging - and a button is added to the left of the native navigation bar when it matches the situation. If we directly disable the native navigation bar - the problem will be solved fundamentally, and there will be no flashover - the user experience is good

{
            "path": "pages/login",
            "style": {
                "navigationBarTitleText": "登录页",
                // 禁用原生导航栏
                "navigationStyle": "custom"
            }
        },

---

Summarize:

After going through this process, I believe you will also have a deep impression on the WeChat applet developed by uni-app - when you return to the login page, a house icon will appear in the upper left corner (return to the homepage) - what happened - and how to solve it. But in actual development, the situation we encounter must be different, so we need to understand its principle, and it is always the same. Come on, hit the workers!

Please point out any shortcomings, thank you - Feng Guo Wuhen