uniAPP·屏幕顶部状态栏刘海安全区

uniAPP·屏幕顶部状态栏刘海安全区 我们需要动态来做，因为每个手机都不一样。

uniAPP·屏幕顶部状态栏刘海安全区
0【思路 构架】
（1）系统状态栏高度 用于适应APP端
（2）iPhone刘海高度 用于适应iso手机
（3）小程序按钮胶囊高度 用于适应小程序
如下的样式css中：head-1 高度整体、head-2 包裹住了head-3 状态栏、head-4刘海、head-5小程序胶囊，当某一项无时它的高度自动为空。

1【view – index.vue】

<view class="head-1"> <!-- 小程序按钮安全高度 -->
			<view class="head-2"> <!-- 一体 -->
				<view  class="head-3" :style = "{height:phoneHeight}"> </view> <!-- 系统状态栏安全高度 -->
				<view  class="head-4"> </view> <!-- 设置刘海安全高度 -->
				<view  class="head-5" :style = "{height:menuTop}"> </view> <!-- 小程序按钮安全高度 -->
			</view>
			<view class="head-view">
				导航业务代码
			</view>
			
		</view>
		<view class="main-view"> 
			我是主内容
		</view>

2【css – index.vue】

.main-view{
		float: left;
		width: 100%;
		height: 100%;
		background-color: #666666;
	}
	
	.head-1 {
		width: 100%;
		/* 置顶浮游定位 */
		position: fixed;
		background-color: #108080;
	}
	.head-2 {/* 安全区高度包裹 */
		width: 100%;
		height: 100%;
	}
	.head-3 {/* 系统状态栏目安全区  动态高度 */
		width: 15%;
		float: left;
	}
	.head-4 {/* iPhone刘海安全区 */
		width: 25%;
		height: env(safe-area-inset-bottom);
		float: left;
	}
	.head-5 {/* 小程序胶囊 动态高度*/
		width: 15%;
		float: right;
	}
	

3【js – index.vue 业务页面】

<script>
	
	export default {
		data() {
			return {
				/* 从缓存获取存储的高度 */
				/* 状态栏高度 */
				phoneHeight: uni.getStorageSync('menuInfo').phoneHeight,
				/* 胶囊顶部 */
				menuTop: uni.getStorageSync('menuInfo').menuTop, 
				/* 胶囊底部 */
				menuBottom: uni.getStorageSync('menuInfo').menuBottom,
				/* 胶囊高度 */
				menuHeight: uni.getStorageSync('menuInfo').menuHeight
				
			}
			
		},
		onHide(){
			
		},
		onLoad(){
			console.log("onLoad home")
		},
		onShow(){
      
	        },
		methods:{
			
		},
		components: {
			
		},
	}
</script>

4【js – App.vue启动页面】

script>
	export default {
		onLaunch: function() {
			// console.log('App Launch')
			
			/* 获得手机状态栏高度 */
			let phoneHeight = uni.getSystemInfoSync().statusBarHeight + "px;";
			/* 获取小程序胶囊安全区 */
			let menuTop = uni.getMenuButtonBoundingClientRect().top + "px;";
			let menuBottom = uni.getMenuButtonBoundingClientRect().bottom + "px;";
			let menuHeight = uni.getMenuButtonBoundingClientRect().height + "px;";
			/* 封装变量 */
			let menuInfo = {
				phoneHeight: phoneHeight,
				menuTop: menuTop,
				menuBottom: menuBottom,
				menuHeight: menuHeight
			}
			/* 存储至缓存 */
			uni.setStorageSync('menuInfo', menuInfo);
			
		},
		onShow: function() {
			// console.log('App Show')
			
		},
		onHide: function() {
			// console.log('App Hide')
		}
	}
</script>

5【完美】