微信小程序全屏显示以及导航栏问题

我们在做Android的时候想改变整个布局的颜色很简单,但是在微信小程序中如果你的内容没填充屏幕的话,你想改变整个布局的颜色在view的属性中去设置background-color是没有用的,这就相当于我们Android中设置的额wrap-parent

我的布局如下：

属性：

.container{

display: flex;

flex-direction: column;

align-items: center;

background-color: #eeeeee;

}

.user_image{

width: 200rpx;

height: 200rpx;

margin-top: 160rpx;

}

.user_name{

font-size: 34rpx;

margin-top: 100rpx;

}

.user_msg{

font-size: 40rpx;

font-weight: bold;

color: #405f80;

margin-top: 100rpx;

}

.top_container{

margin-top: 100rpx;

border: 1px solid #405f80;

height: 80rpx;

line-height: 80rpx;

text-align: center;

width: 300rpx;

border-radius: 5px;

}

你发现我设置了background-color: #eeeeee; 颜色    如图：

发现有二个问题

第一：没全屏 上面导航栏还是黑色的

第二:设置了背景颜色 下面的区域无效

怎么解决呢？点击调试器,找到wxml，

发现在我们的上层加了page这个标签,那么我们只要在page这个标签添加属性即可.

在wxss文件中添加标签选择器：

page{

background-color: #eeeeee

}

如果不知道选择器的话 可以去查下css文档,好像有四种选择器

这个时候再预览下效果;

现在就是修改导航栏黑色部分了,

在全局配置中，有一个window属性,查看文档：

ok,有了这个我们在app.json中添加就可以了：

只要把导航栏颜色设置成和view的背景颜色一样就ok了.预览：