teaching-uniapp/App.vue

<script>
	import Vue from 'vue'
		// import app from './utils/api.js'
		export default {
			onLaunch: function() { 
				uni.getSystemInfo({
					success: function (res) {
						Vue.prototype.screenHeight=res.screenHeight
						Vue.prototype.screenWidth=res.screenWidth
						if (uni.getMenuButtonBoundingClientRect()) {
							console.log('小程序');
							// 小程序状态栏是指显示电量的那一小部分
							thisWechat(res.statusBarHeight)
						}else{
							console.log('app');
							thisApp(res.statusBarHeight)
						}
					}
				});
				
				function thisWechat(statusBarHeight){
					
					// 获取胶囊位置
					let meunButtonInfo=uni.getMenuButtonBoundingClientRect()
					// console.log(meunButtonInfo);
					
					Vue.prototype.meunButtonInfo=meunButtonInfo.height
					
					// 计算出导航栏高度+动态栏
					let  allHeight = meunButtonInfo.bottom + (meunButtonInfo.top - statusBarHeight )*2;
					// console.log(allHeight);
					let navheight;
					Vue.prototype.navheight=allHeight
					
					// 按钮离顶
					let alltop = meunButtonInfo.top 
					Vue.prototype.navTop=alltop
					
					// 动态栏高度
					let statusHeight
					Vue.prototype.statusHeight=statusBarHeight
				};
				
				function thisApp(statusBarHeight){
					// console.log(uni.getSystemInfoSync());
					// 导航栏高度
					// let appAllHeight;console.log();
					// Vue.prototype.appAllHeight=statusBarHeight+44+'px';
					// console.log(statusBarHeight);
					let customBarHeight;
					if (uni.getSystemInfoSync().platform === 'android') {
					     
					      customBarHeight = statusBarHeight + 50;
						  
					    } else if (uni.getSystemInfoSync().platform === 'ios') {
					      // iOS 平台
					      // 在这里根据 iOS 平台的特性计算自定义状态栏高度
					      // ...
					      customBarHeight = statusBarHeight + 45;
					    } else {
					      // 其他平台
					      // ...
					      customBarHeight = statusBarHeight;
					    }
						// console.log(customBarHeight);
					    Vue.prototype.customBar = customBarHeight;
				}
				
			},
			onLoad() {
				
			}
	}
</script>

<style>
	/*每个页面公共css */
	body{
		background-color: #f0f2f5;
	}
	view{
			box-sizing: border-box;
			padding: 0;
		}
</style>