小程序遇到的手机屏幕问题

一，包括状态栏设置背景图及刘海屏的处理：
（1）app.js中获取状态栏高度wx.getSystemInfoSync()[‘statusBarHeight’]方便全局使用
（2）使用背景页面的json配置"navigationStyle": “custom”,
（3）页面和刘海屏处理的样式也给大家贴出来：
/wxml/

<view class="topbar" style="padding-top:{{statusBarHeight}}px">
		<image class='bg' src="../../image/xxx.png"></image>
		</view>

	/wxss/ 

.topbar {
  width: 100%;
  height: 460rpx;
  position: relative;
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

二，获取手机的屏幕或设置满屏显示
页面xxx.js

 onLoad: function (options) {
 // 设置满屏显示  
      //this.setData({         
         // infowidth: 100vw //宽度撑满屏幕可视区域
         // infoHeight: 100vh //高度撑满屏幕可视区域   
      //  })
  // 或者获取当前手机屏幕宽高
    wx.getSystemInfo({
      success: function (res) {
        // 获取设备宽度和高度
        let infoWidth = res.screenWidth;
        let infoHeight = res.screenHeight;
        console.log(infoWidth, infoHeight)       
      }
    })
    //又或许你有根据手机屏幕让图片等比例显示的需求可以看这里
     wx.getSystemInfo({
      success: function (res) {
        let bili = 4 / 3;
        // 图片高度
        let $height = infoWidth / bili;
        this.setData({
          imgheight: $height, //图片高度
          imgwidth:infoWidth,//图片宽度
          })
        }
    })
        
  },

希望我的小分享能帮助到遇到这些问题的人，来了就点个赞呗~