微信小程序沉浸式布局实现，兼容性强，容易理解

1.何为沉浸式布局

用户角度：程序页面布局和手机的状态栏融为一体，视觉效果较好。
开发角度：重新定义系统状态（一般只修改背景），状态栏部分的定位position：absolute。即后续的布局可以延申的系统的顶部。从小程序的角度来说，navigationBar包含了状态了和标题栏两个部分。所以小程序的沉浸式布局，也就是DIY navigationBar的一个过程。

截图有点丑，将就着，红线上面部分为状态栏，下部分为标题栏。

2.怎么沉浸式

1. 修改全局配置文件app.json

 "window": {
    "navigationStyle":"custom"
  }

将window对象替换成上述所示。这时你会发现你之前写好的布局已经乱套。且标题也已经不在了。如下所示，布局已经跑到状态栏上面去了。

2. 在app.js配置全局变量globalData

 globalData: {
    statusBarHeight: 0, //状态栏高度
    menuButtonSizeInfo:{} //胶囊的尺寸，位置信息
  }

3. 在app.js里为全局变量赋值