实现小程序自定义左上角图标(个人笔记)

本文参考：https://www.jianshu.com/p/80bb695f2a81

步骤一：将整个小程序设置为全屏或者只把某个页面设置为全屏。

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

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

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

{
 "navigationStyle":"custom"
}

步骤二：自定义按钮样式

image.png

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

• 获取手机状态栏高度
  我们可以使用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是极好的。
• 写Css代码把按钮放到合适位置。