微信小程序--窗口背景颜色铺满页面

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/LuuvyJune/article/details/88815228

编写一个页面 welcome.wxml文件：

<view class="container">
  <image src="/images/avatar/1.png" class='user-avatar'></image>
  <!--text \n可进行换行 包含在这个标签里面的文字在手机上才可以常摁复制 -->
  <text class='user-name'>hello,<text style='color:red'>world</text></text>
  <view class='moto-container' bindtap='onTap'>
    <text class='moto'>开启小程序之旅</text>
  </view>
</view>

welcome.wxss文件：

/*静态样式，建议写在wxss文件中，动态样式可以写在wxml中用style*/

.container{
    display: flex;
    flex-direction:column;
    align-items: center;
    background-color:#b3d4db;
}
.user-avatar{
  height:200rpx;
  width:200rpx;
  margin:30rpx;
}

.user-name{
  margin-top: 200rpx;
  font-size: 42rpx;
  font-weight: bold;
}

.moto{
  font-size: 32rpx;
  font-weight: bold;
  line-height: 80rpx;
  color:#405f80;
}

.moto-container{
  margin-top: 200rpx;
  border: 1rpx solid #405f80;
  width:250rpx;
  height:80rpx;
  border-radius: 5px;
  text-align: center;
}

welcome.json:

{
  "navigationBarBackgroundColor": "#b3d4db"
}

显式的效果如下

：

设置了background-color，但是效果不是我想要的那样

此处background-color设置的只是<view>标签里边container的背景，通过调试工具可以看到，其实wxml页面还有一个隐藏的page标签，所以在wxss中加上以下代码：

page{
  height:100%;
  background-color: #b3d4db; 
}

效果如图：