【小程序】wx.getSystemInfo() 、自定义状态栏

wx.getSystemInfo(Object object) / 自定义状态栏

wx.getSystemInfo(Object object)

获取系统信息

参数

Object object（红色框为常用）

object.success 回调函数（列举常用的几个，具体看官方文档）

Object res

示例代码

wx.getSystemInfo({
    success({
        console.log(res.windowWidth);
        console.log(res.windowHeight);
    })
})

自定义状态栏

首先，了解下图：

第一步

1、开启配置自定义顶部

{ 
"window": 
     { "navigationStyle":"custom" }
}

在app.json的文件window配置"navigationStyle": "custom"属性即可

第二步

2.自定义顶部计算原理

2.1 获取系统状态栏的高度和屏幕宽度

使用wx.getSystemInfo这个函数获取系统状态栏的高度和屏幕宽度。

2.2 获取右上角胶囊位置信息

使用wx.getMenuButtonBoundingClientRect()方法获取右上角胶囊位置信息。
关键问题在于自定义胶囊的上、下和左边距。

2.3 自定义顶部距离计算代码

wx.getSystemInfo({ // 获取系统信息
      success: e => {
        this.globalData.StatusBar = e.statusBarHeight;  // 手机系统状态栏的高度
        let capsule = wx.getMenuButtonBoundingClientRect(); // 获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
		if (capsule) {
		 	this.globalData.Custom = capsule;
			this.globalData.CustomBar = capsule.bottom + capsule.top - e.statusBarHeight; // 获取自定义状态栏高度
		} else {
			this.globalData.CustomBar = e.statusBarHeight + 50;
		}
      }
    })

项目中使用：

"window":{
    "navigationStyle": "custom",
    "navigationBarBackgroundColor": "#7cab99",
    "navigationBarTitleText": "定旅",
    "navigationBarTextStyle":"white"
}

App({
    onLaunch: function() {
         wx.getSystemInfo({ // 获取系统信息
      success: e => {
        this.globalData.StatusBar = e.statusBarHeight;  // 手机系统状态栏的高度
        let capsule = wx.getMenuButtonBoundingClientRect(); // 获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
		if (capsule) {
		 	this.globalData.Custom = capsule;
			this.globalData.CustomBar = capsule.bottom + capsule.top - e.statusBarHeight; // 获取自定义状态栏高度
		} else {
			this.globalData.CustomBar = e.statusBarHeight + 50;
		}
      }
    })
    }
})

配合Color UI 使用自定义状态栏（导航栏）

使用自定义导航栏

导航栏作为常用组件有做简单封装，当然你也可以直接复制代码结构自己修改，达到个性化目的。

App.js 获得系统信息

 onLaunch: function() {
    wx.getSystemInfo({
      success: e => {
        this.globalData.StatusBar = e.statusBarHeight;
        let custom = wx.getMenuButtonBoundingClientRect();
        this.globalData.Custom = custom;  
        this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
      }
    })
},

App.json 配置取消系统导航栏,并全局引入组件

"window": {
	"navigationStyle": "custom"
},
"usingComponents": {
    "cu-custom":"/colorui/components/cu-custom"
}

page.wxml 页面可以直接调用了

<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
	<view slot="backText">返回</view>
	<view slot="content">导航栏</view>
</cu-custom>