businessCard/xiaochengxu/App.vue

<script>
	export default {
		 globalData: {
		    statusBarHeight: 0, // 状态导航栏高度
		    navHeight: 0, // 总体高度
		    navigationBarHeight: 0, // 导航栏高度(标题栏高度)
		},
		onLaunch: function() {
			console.warn('当前组件仅支持 uni_modules 目录结构 ，请升级 HBuilderX 到 3.1.0 版本以上！')
			console.log('App Launch')
			    console.log("App Launch")
			 
			    // 状态栏高度
			    this.globalData.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			 
			    // #ifdef MP-WEIXIN
			    // 获取微信胶囊的位置信息 width,height,top,right,left,bottom
			    const custom = wx.getMenuButtonBoundingClientRect()
			    // console.log(custom)
			 
			    // 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
			    this.globalData.navigationBarHeight = custom.height + (custom.top - this.globalData.statusBarHeight) * 2
			    // console.log("导航栏高度："+this.globalData.navigationBarHeight)
			 
			    // 总体高度 = 状态栏高度 + 导航栏高度
			    this.globalData.navHeight = this.globalData.navigationBarHeight + this.globalData.statusBarHeight
			 
			    // #endif
			 
			    console.log(this.globalData)
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">
	/*每个页面公共css */
	@import "@/uni_modules/uview-ui/index.scss";
	@import '@/uni_modules/uni-scss/index.scss';
	// @import '/static/iconfont/iconfont.css';
	@import '@/static/styles/index.scss';
	/* #ifndef APP-NVUE */
	@import '@/static/customicons.css';
	// 设置整个项目的背景色
	page {
		background-color: #f5f5f5;
	}

	/* #endif */
	.example-info {
		font-size: 14px;
		color: #333;
		padding: 10px;
	}
	.footer{
		display:fixed;
		bottom:40px;
		text-align:center;
	}
	.flex{
		display:flex;
	}
</style>