技術標籤：微信小程式小程式沉浸式

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裡為全域性變數賦值