How to set the background color of the WeChat applet startup page and its full screen?

1. Set the startup page

Open the WeChat applet and you will enter the first page in pages, so you only need to write the startup page in the first item of pages in pages.json

 2. Remove the navigation bar to achieve a full-screen display effect

First clear the global navigation bar title, and add the following code on the page that needs to be full screen:

"style": {
                "navigationStyle": "custom"
            }

  For details, please refer to uniapp related documents: pages.json page routing | uni-app official website 

3. Placeholder navigation bar

If the page content moves up after removing the navigation bar, you can solve it by adding a placeholder element:

The key is to add the following css styles to the placeholder elements:

.status_bar {             height: var(--status-bar-height); // Get the height of the status bar of the mobile phone (the line at the top of the power display)             width: 100%;         }

4. Set the background color of the full screen

Error demonstration: directly set the background color to the root element, height: 100%, does not take effect, only the part that is stretched by the content has the background color

    .content {
        height: 100%;

        background-color: #eaf1ff;
        display: flex;
        flex-direction: column;
        align-items: center;
        }

 

 The correct way: set the minimum screen height to 100% of the screen height

                   The content does not fill the entire screen, and the height is also 100%

                   The content exceeds the entire screen, and the height is determined according to the height of the content

   .content {
        min-height: 100vh;

        background-color: #eaf1ff;
        display: flex;
        flex-direction: column;
        align-items: center;
        }