微信小程序安全区域适配问题

问题描述

在微信小程序开发过程中，有些页面的按钮是需要固定在页面底部（如电商详情页中的加入购物车按钮等），如果将底部栏样式直接设置为bottom：0;，那么在iPhone X、iPhone XR、iPhone 12等机型中，就会出现下图所示问题：按钮区域距离底部太近，可点击区域缩小，用户体验感差。

问题复现

解决方案

方案一（最快速）

利用IOS新增的 env() 和 constant() 特性即可解决，开发者不需要自己动态计算高度，只需将如下CSS代码添加至样式中：

示例代码：

<!-- 底部栏 -->
<view class="bottom"></view>

.bottom {
	position: fixed;
	bottom: 0;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}

方案二（动态计算）

<!-- 底部栏 -->
<view class="bottom" style="padding-bottom:{{bottomPadding}}px"></view>

async onLoad() {
	const res = await wx.getSystemInfo({})
	const bottomPadding = res.screenHeight - res.safeArea.bottom
	this.setData({
	  bottomPadding
	})
}

.bottom {
	position: fixed;
	bottom: 0;
}