博客

出现场景：

正常进入可以获取得到


但是

进入小程序之后，点击右上角，点击重新进入小程序就会出现获取都为0的情况

console.log('oMenuBtn:',oMenuBtn);//打印 width:0,bottom:0,top:0,...

代码是写在App.vue里面，启动后获取状态栏的高度并存到vuex中使用

oMenuBtn = uni.getMenuButtonBoundingClientRect()
						console.log('oMenuBtn:',oMenuBtn);
						sysTopH = oMenuBtn.bottom + oMenuBtn.top - e.statusBarHeight;
						menuBtnMidlle = oMenuBtn.top + oMenuBtn.height / 2
						menuBtnbottom = oMenuBtn.top + oMenuBtn.height
						console.log('状态栏高度：', sysTopBarH);
						console.log('胶囊中间位置', menuBtnMidlle);
						console.log('胶囊底部位置', menuBtnbottom);

最后看到网上的总结说给套一个定时器于是我照做了，但是仍然得不到解决

setTimeout(() => {
oMenuBtn = uni.getMenuButtonBoundingClientRect()
						console.log('oMenuBtn:',oMenuBtn);
						sysTopH = oMenuBtn.bottom + oMenuBtn.top - e.statusBarHeight;
						menuBtnMidlle = oMenuBtn.top + oMenuBtn.height / 2
						menuBtnbottom = oMenuBtn.top + oMenuBtn.height
						console.log('状态栏高度：', sysTopBarH);
						console.log('胶囊中间位置', menuBtnMidlle);
						console.log('胶囊底部位置', menuBtnbottom);
}）

最后是做了缓存，然后在状态管理里面再获取一次，正常进来获取到的值存缓存，获取不了就取缓存的

if( oMenuBtn.bottom!=0){//如果是0 的换就不存了，否则就刷新了缓存和状态里面的值
							this.setAppData({
								sysTopH,
								sysTopBarH,
								sys,
								menuBtnMidlle,
								menuBtnbottom
							})
							uni.setStorageSync('SYSTEM_INFO',{
								sysTopH,
								sysTopBarH,
								sys,
								menuBtnMidlle,
								menuBtnbottom
							})
						}

 const SYSTEM_INFO= goodStorage.get('SYSTEM_INFO')//获取缓存里面的值
const store= new Vuex.Store({
  state:{
		//系统信息
		sys: SYSTEM_INFO&&SYSTEM_INFO.sys||'h5',
		isX:false,//是否是iPhoneX 为了兼容
		sysTopH:SYSTEM_INFO&&SYSTEM_INFO.sysTopH||0,//系统总高度
		sysTopBarH:SYSTEM_INFO&&SYSTEM_INFO.sysTopBarH||0,//系统 头部 状态栏高度
		menuBtnMidlle:SYSTEM_INFO&&SYSTEM_INFO.menuBtnMidlle||0,
		menuBtnbottom:SYSTEM_INFO&&SYSTEM_INFO.menuBtnbottom||0,
		}

这样就可以正常保证，选择重新进入小程序状态的值是正常OK 的；多谢！