微信小程序全局导航栏样式设置及单页面弹性盒子布局

1. 全局导航栏样式设置
   在微信小程序项目的app.json中对全局的页面配置进行设置，json中有一项配置window可设置上方导航栏的属性，在json文件中写上window，按table键补全即会出现navigationBar的各项属性，如下

  "window": {
    "navigationBarBackgroundColor": "#000000",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "About",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "dark",
    "enablePullDownRefresh": true
  } 

查阅微信开发者简易教程可知，以上各项属性的作用分别为背景颜色，字体颜色，导航栏标题，页面的背景颜色，下拉刷新时字体样式（只有dark和light两种选择），是否允许下拉刷新。在app.json文件中进行的配置均是针对全局的，即所有的页面都将应用这样的属性，如果在一个单独页面的json文件中单独进行配置，则其配置会将app.json中的配置覆盖。
2. 页面弹性盒子布局
弹性盒子是一种应用于容器的类（微信小程序中的view），可以快速对页面的布局进行配置，首先在wxml文件中为页面添加需要展示的内容，示例如下

<image class = "picture" src= '/images/movie.jpg'></image>
<text>电影周周看</text>
<text>我每周推荐一部好电影</text>

添加了一张图片和两个text文字组件。此时显示出来的页面是挤在一起的。定义一个view容器将这些内容放进去

<view class = "container">
<image class = "picture" src= '/images/movie.jpg'></image>
<text>电影周周看</text>
<text>我每周推荐一部好电影</text>
</view>

view所属的类为container，在wxss中定义这个类的样式，如下

.container{
  background-color: "#eeeeee";
  align-items: center;
  height:100vh;
  display:flex;
  flex-direction: column;
  justify-content: space-around;
}

其中定义了这个容器的内容的背景颜色和其对齐方式，以及这个容器在整个窗口中所占的高度（vh为比例单位，100vh代表全部高度），将display属性设置为flex表示启用弹性盒子布局，选择其方向为column（垂直方向），可选row（水平方向）以及它们的reverse（如column-reverse），将justify-content属性设置为space-around代表让所有的内容均匀分布。