如何实现全屏小程序及自定义左上角胶囊

我们在做一些譬如视频播放等功能的时候，有时候是期望可以全屏展示视频的，微信小程序为我们提供了这样的功能。

我们可以在选择将整个小程序设置为全屏或者只把某个页面设置为全屏。

需要注意的点是

有些时候，我们需要在全屏状态下，自定义一个左上角胶囊或者返回按钮，来实现页面的返回或别的功能。为了美观，我们需要把这个按钮和右上角的胶囊对齐。

从图中我们可以看到，小程序顶部的标题栏，主要包括红色的手机状态栏和绿色的页面标题栏部分。我们需要获取到的是手机状态栏的高度，以及绿色部分的高度，好让我们自己的控件和标题对齐。

PS：小程序在 wx.getSystemInfo 这个方法的[2.7.0]基础库上新增了几个属性，其中有一个如下：

由于我们使用的是2.6的基础库，并不敢升到2.7上去，所以没有办法去试一下，不过大胆猜测一下这几个属性跟这个标题栏高度是不是相关？哈哈哈~

width:胶囊的宽度；

height：胶囊的高度

top:胶囊距离顶部的距离

整体高度：

状态栏高度+胶囊高度+(胶囊距离-胶囊高度）*2

在json文件中定义custom，自定义导航栏样式.

拿到相应的导航栏信息

自定义导航栏的样式，设置fixed布局

---