记一次微信小程序底部按钮适配全面屏

在我的微信小程序项目 WanAndroid 中有这样一个页面：

创建按钮固定页面底部展示，这样的布局，在正常手机上不会有什么问题，如：iPhone7，8上，但是在屏幕底部带有操作条的手机上，如 iphoneX，iPhoneXR等，按钮会与操作条重叠，这样一来，会有以下几个问题：

1. UI 样式不美观，操作条可能会遮挡文字
2. 在点击按钮的时候，可能会误触发系统的手势操作

在这种情况下，就必须针对类似机型，搞一波适配。

之前我自己使用的方案是在 app.js 的 onLanuch 方法中，使用 wx.getSystemInfo 方法获取设备信息，然后通过计算屏幕分辨率来判断当前设备是否是全面屏，之后在需要适配的页面再次进行相关处理。

这个方案略微有些繁琐，但说实话，我一直以为这是目前比较好的适配方案了。直到上周我接手了一个测试需求，其中的一个页面也涉及到了按钮屏幕吸底，抱着学习和测试的双重目的，我 clone 了项目工程，查看了相应的代码，但令我意外的是，我并没有看到料想中的代码片段，而仅在对应页面的 CSS 文件中看到如下寥寥几行：

height: calc(100vh - 184rpx);
height: calc(100vh - 184rpx - env(safe-area-inset-bottom));

env(safe-area-inset-bottom) 是个什么东西？看起来挺像 var函数的。就这一行就能解决适配？拿模拟器调试了一波，确实是生效的，又找了几个真机，分别测试了一下，结果是：好用！！

呀，牛逼！！

去 MDN 查看了一波文档，看到如下内容：

env() CSS 函数以类似于 var 函数和 custom properties 的方式将用户代理定义的环境变量值插入你的 CSS 中。区别在于，环境变量除了由用户代理定义而不是由用户定义外，还被全局作用在文档中，而自定义属性则限定在声明它们的元素中。

最初由iOS浏览器提供，用于允许开发人员将其内容放置在视口的安全区域中，该规范中定义的safe-area-inset-*值可用于确保内容即使在非矩形的视区中也可以完全显示。

这个 CSS 标准最早还是由 iOS 浏览器提供的？众所周知，Safari 使用的内核是 WebKit，那 WebKit 中应该也会有相关文档

从文档中可以得知，iOS11 中新增了 constant() ，但是从 iOS11.2 开始，env() 又取代了constant()。

了解详情之后，看来得对项目做一波优化，把之前方案的逻辑全部删除，然后在页面 CSS 中对创建按钮增加如下样式即可

padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);