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

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

设置全屏

设置方法

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

• 修改app.json中window属性的navigationStyle属性

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

• 修改index页面的index.json中navigationStyle属性

{
 "navigationStyle":"custom"
}

需要注意的点是

关于navigationStyle

• 客户端 7.0.0 以下版本，navigationStyle 只在 app.json 中生效。
• 客户端 6.7.2 版本开始，navigationStyle: custom 对 [web-view]
• 开启 custom 后，低版本客户端需要做好兼容。开发者工具基础库版本切到 1.7.0（不代表最低版本，只供调试用）可方便切到旧视觉

如何自定义左上角返回按钮

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

小程序标题栏

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

• 获取手机状态栏高度
  我们可以使用wx.getSystemInfo这个接口，来获取手机状态栏的高度，至于同步异步，大家自己选择。

wx.getSystemInfo({
  success (res) {
    console.log(res.statusBarHeight)        //状态栏的高度，单位px
    console.log(res.pixelRatio)
    console.log(res.windowWidth)
    console.log(res.windowHeight)
    console.log(res.language)
    console.log(res.version)
  }
})

• 获取标题栏高度
  这个东西没有办法获取到，经过我们的调查和测量，发现44px是极好的哈哈哈哈。

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

image.png

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