h5/App.vue

<script>
	export default {
		globalData: {
			SET_STATUS_BAR: 0,
			SET_CUSTOM_BAR: 0,
			SET_SYSTEM_INFO: {}
		},
		onLaunch: function() {
			console.log('App Launch')
			uni.getSystemInfo({
				success: (e) => {
					let statusBar = 0
					let customBar = 0

					// #ifdef MP
					statusBar = e.statusBarHeight
					customBar = e.statusBarHeight + 45
					if (e.platform === 'android') {
						customBar = e.statusBarHeight + 50
					}
					// #endif
					
					// #ifdef MP-WEIXIN
					statusBar = e.statusBarHeight
			 	const custom = wx.getMenuButtonBoundingClientRect()
					customBar = custom.bottom + custom.top - e.statusBarHeight
					// #endif

					// #ifdef MP-ALIPAY
					statusBar = e.statusBarHeight
					customBar = e.statusBarHeight + e.titleBarHeight
					// #endif

					// #ifdef APP-PLUS
					console.log('app-plus', e)
					statusBar = e.statusBarHeight
					customBar = e.statusBarHeight + 45
					// #endif

					// #ifdef H5
					statusBar = 0
					customBar = e.statusBarHeight + 45
					// #endif

					this.globalData.SET_SYSTEM_INFO = e
					this.globalData.SET_CUSTOM_BAR = customBar
					this.globalData.SET_STATUS_BAR = statusBar
					console.log(this.globalData)
				}
			})
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style>
	/*每个页面公共css */
	@import url("@/utils/style/style.css");
	@import url("@/utils/style/icon.css");
	@import url("@/utils/style/color.css");

	page {
		background: #f5f5f5;
	}

	.my-button {
		border-radius: 0px;
		transform: initial;
		background-color: transparent;
	}

	.my-button:after {
		border-width: 0px;
		border-radius: 0px;
		transform: initial;
		background-color: transparent;
	}
	.bule_line{
		
		width: 10rpx;
		height: 30rpx;
		background-color: #1e8ff9 ;
		border-radius: 6rpx;
		box-shadow: 1px 2px 3px 1px #6ba9f9;
	}
</style>