微信小程序开发自定义状态栏

问题背景

本文将介绍如何在微信小程序开发过程中，自定义状态栏。

问题分析

自定义状态栏效果图如下：

（1）对应页面json文件中 配置：

  "navigationStyle": "custom"

如果是APP全局配置，则在app.json中配置window属性：

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

（2）避免遮挡用户手机顶部状态栏，需要获取用户手机状态栏的高度，并在在每个页面中添加一个占位用的 view标签来防止遮挡用户状态栏。
在页面对应js文件添加如下代码：

  getStatusHeight: function() {
    var that = this;
    wx.getSystemInfo({
      success: res=> {
          that.setData({
            navHeight: res.statusBarHeight,
          })
          console.log("navHeight: " + that.data.navHeight);
      },
  })
  }

问题解决

话不多说，完整代码如下：
（1）index.js文件，代码如下：

// pages/healdata/healthydata.ts
Page({
  /**
   * 页面的初始数据
   */
  data:{
    code:"0",
    location:[],
    imageUrl: "https://profile-avatar.csdnimg.cn/default.jpg!0",
    userName:"",
    userPass:"",
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-06-18'
    },
    // 默认的字符串验证码值
    validateCode:"3721",
    // 默认的base64编码值
    validateImg:"/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAUADwDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD1dpdsoAyQeo7j3x/n/HktA8ZQS2NhFqN8j38+4FVTkkuyqDtGFPT8MH69Q5bPJO1euece/wDnnkGvOhGg+FTHykOX37toyH83buz67ePpSrTlF3XZ/oc3KdtquqNaC2MARhcXEcbBgcgHOSPQ8CmajqE8BstjKWmuo4GBOQVbOSMd+PfrVbWY38q1mt0eXyLqOby1GWYA9AB1PP8AOqs99Bq9zpyWDNL5Fwk0p2MFjC5PJI6nt+VZ1KjTavrpY3UElob1jf216JtkzN5MphZssoDDqO3tzVZ/EFhDYX120rGG0DLNk4O9eqruOCTnA9TisTV7q60PVJrq2SYnUIPJHlJuP2lThM5HTacYHXniptR0GW58CyaJCqJcRwjAGTvcEOQN395h6jGemK0hUlKXK+m/6GcUnKz2K7ar4wOnLqbaZppt/vfY98n2ox5+6T03Y56f8BzxXR2Go2N7p9vdwqHhnQSIcKSAeoOOMg5BHbFcp/wn2nfYgwjuBqv3PsIRvM8zONpOMdT1647Z4rW8N6W2leHLGzmlAlWMs4ZcbWZixHGQcE4znnFbNnROnpqrG9dfuZFdP4s5HY1FcMQyMMLvQE47k5oopS6mMOgnlgWwfJywJxnjggf1pswwSSSSGK8+3/66KKllrcInYyqM8lhyOtSwxiVQzM2WYqTnqMZoopoUijf6ba30LRXMZdY5VZCGKsrDOGDDBB46g+tWVuJVGFbHrx1oopXK30Z//9k=",
    navHeight:0,
    title: '这是一个居中标题'
  },

  onLoad() {
    this.getValidateCode();
    this.getStatusHeight();
  },

  getValidateCode: function() {
    var that = this;
    wx.request({
      url: '******************************',
      success: function(res) {
        console.log(res)
        console.log(res.data.imageCode)
        that.setData({
          validateImg: res.data.imageCode
        });
      }
    })
  },

  /* 登录校验操作 */
  login: function () {
    if (this.data.userName === "baorant" && this.data.userPass === "123123") {
      wx.navigateTo({
        url: '/pages/index2/index',
        success: function(res) {
          console.log('router1 success');
        },
        fail: function(res) {
          console.log('router1 fail');
          console.log(res)
        }
      })
    } else {
      wx.showToast({
        title: '账号密码错误',
        icon: 'none'
      })
    }
  },

  getStatusHeight: function() {
    var that = this;
    wx.getSystemInfo({
      success: res=> {
          that.setData({
            navHeight: res.statusBarHeight,
          })
          console.log("navHeight: " + that.data.navHeight);
      },
  })
  }
})

（2）index.json文件吗，代码如下：

{
  "usingComponents": {
    "custom-tab-bar": "/custom-tab-bar",
    "item": "../../component/item/item"
  },
  "navigationBarTitleText": "分类列表",
  "navigationStyle": "custom"
}

（3）index.wxml文件，代码如下：

<view class='navbar'>
    <view class='palce-holder-nav' style="height: {
   
   {navHeight}}px;"></view>
    <view class='title' style="height: {
   
   {2*navHeight}}px;">
        <view class="view">{
   
   {title}}</view>
    </view>
</view>
<view class="container">
  <!-- <view class='palce-holder-nav' style="height: {
   
   {2*navHeight}}px;"></view> -->

  <view class="title">登录页面测试</view>
  <view class="inputRow">
    <View>账号</View>
    <input type="text" model:value="{
   
   {userName}}" placeholder="请输入账号" class="phone_number"></input>
  </view>

  <view class="inputRow1">
    <View>密码</View>
    <input type="text" model:value="{
   
   {userPass}}" placeholder="请输入密码" class="phone_number"></input>
  </view>

  <!-- 字符串方式实现验证码-->
  <view class="inputRow1">
    <View class="codeTitle">图形验证码</View>
    <input type="text" model:value="{
   
   {userPass}}" placeholder="验证码" class="validate_number"></input>
    <view class='yanzhengma'>
      <text class='left'>{
   
   {validateCode}}</text>
      <!-- <text class='right' bindtap='huanyizhang'>换一张</text> -->
    </view>
  </view>

  <!-- basecode64格式生成验证码-->
  <view class="inputRow1">
    <View class="codeTitle">图形验证码</View>
    <input type="text" model:value="{
   
   {userPass}}" placeholder="验证码" class="validate_number"></input>
    <view class='yanzhengma'>
      <image class='fr' src="data:image/png;base64,{
   
   {validateImg}}"></image>
    </view>
  </view>

  <button class="buttonStyle" type="primary" bindtap="login">登录</button>

  <item></item>
</view>

<template name="msgItem">
  <view class="templateItem">
    <text> {
   
   {msg}} </text>
    <text> Time: {
   
   {time}} </text>
  </view>
</template>

<template is="msgItem" data="{
   
   {...item}}" />

（4）index.wxss文件，代码如下：

/* 设置swiper组件的宽高 */
.swiper{
  width: 100%;
  height: 600rpx;
}
/* 设置swiper组件里面图片的宽高 */
.image{
  width: 100%;
  height: 600rpx;
}

.container{
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0 80rpx;
  align-items: stretch;
  font-size: small;
}

.inputRow{
  margin-top: 150rpx;
  display: flex;
  flex-direction: row;
  padding-bottom: 20rpx;
  border-bottom: .5px solid rgba(0, 0, 0, 0.1);
}

.inputRow1{
  height: 120rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: .5px solid rgba(0, 0, 0, 0.1);
}

.codeTitle{
  display: flex;
  flex-direction: row;
  width: 300rpx;
}

.phone_number{
  margin-left:40rpx;
}

.validate_number{
  margin-left:40rpx;
}

.content1{
  /* text-align: center; */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 10rpx;
}

.buttonStyle{
  margin-top: 50rpx;
}

.place{
  font-style: italic;
}

.templateItem{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.yanzhengma {
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.yanzhengma .left {
  font-family: Arial;
  font-style: italic;
  font-weight: bold;
  border: 0;
  letter-spacing: 3px;
  font-size: 18px;
  background-color: #ccc;
  padding: 10rpx;
  margin-right: 20rpx;
  color: blue;
}

.fr{
  height: 80rpx;
  width: 150rpx;
  margin-right: 20rpx;
}

.navbar{
  width: 100%;
  background-color: red;
}
.palce-holder-nav{
  width: 100%;
}
.title{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.title .view{
  width: fit-content;
  color: white;
}

问题总结

本文介绍了如何在微信小程序开发过程中，自定义状态栏，有兴趣的同学可以进一步深入研究。