WeChat applet development custom status bar

problem background

This article will introduce how to customize the status bar during the development of WeChat applets.

problem analysis

The custom status bar effect diagram is as follows:

(1) Configuration in the corresponding page json file:

  "navigationStyle": "custom"

If it is APP global configuration, configure the window property in app.json:

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

(2) To avoid blocking the status bar at the top of the user's mobile phone, it is necessary to obtain the height of the status bar of the user's mobile phone, and add a placeholder view tag to each page to prevent the user's status bar from being blocked.
Add the following code to the js file corresponding to the page:

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

problem solved

Not much to say, the complete code is as follows:
(1) index.js file, the code is as follows:

// 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 file, the code is as follows:

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

(3) index.wxml file, the code is as follows:

<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 file, the code is as follows:

/* 设置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;
}

conclusion of issue

This article introduces how to customize the status bar during the development of WeChat applets. Interested students can further study in depth.