微信小程序标题栏放logo 搜索框

效果图如下：

如果做成这样，标题栏上面放置自己的logo，绝对逼格满满，话不多说看操作：
第一步；选择你想要放置logo的页面，例如，index页面，找到此页面的json子页面，放置代码：

{
  "navigationStyle": "custom"
  
}

第二步，首先我们要获取你手机顶部栏的高度，这时候需要在app.js文件里面写一个全局数据，

globalData: {
     // 头部的自定义的高度
     statusBarHeight: wx.getSystemInfoSync()['statusBarHeight'],
  }

第三步，这个时候我们要回到我们index页面的子页面index.js中，通过操作获取到我们的全局数据，

const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 头部导航栏的高度
    statusBarHeight: app.globalData.statusBarHeight,
    }
    }）
 

这个时候我们已经获取了你手机顶部栏的高度，现在我们开始使用这个高度数据，
第四步，当然是index.wxml 文件和 index.wxss文件的代码敲写，
index.wxml

<view class="custom flex_center" style="padding-top:{{statusBarHeight}}px">
  <image class='nav_logo' src='/Icon/logo/dangpu.png'></image>
  <view class='navInput' bindtap="schoolName" >
    <image src='/Icon/add_icon/address.png'></image>
    <text>中国人民解放军武装警擦部队武汉武警指挥学院</text>
  </view>
</view>
<view class="empty_custom" style="padding-top:{{statusBarHeight}}px"></view>

index.wxss

/* 自定义导航栏开始 */
.custom{
  position: absolute;
  width: 100%;
  /* top: 0;
  left: 0; */
  height: 70px;
  /* background: #c00; */
  z-index: 999;
  background: #FFC640;
}
.nav_logo{
  float: left;
  margin-left: 22rpx;
  margin-top: 22rpx;
  margin-right: 15rpx;
  display: block;
  width:61rpx;
  height:47rpx;
}
.navInput{
  float: left;
  margin-top: 16rpx;
  /* width: 440rpx; */
  width: 60%;
  height: 58rpx;
  overflow: hidden;
  /* box-sizing: border-box; */
  padding-left: 60rpx;
  /* background: #eeeeee; */
  /* border-radius: 40rpx; */
  position: relative;
  overflow: hidden;  /* 超出一行文字自动隐藏 */
  text-overflow: ellipsis;  /*文字隐藏后添加省略号*/
  white-space: nowrap;   /*强制不换行*/
}
.navInput image{
  position: absolute;
  left: 12rpx;
  top: 13rpx;
  width:40rpx;
  height:40rpx;
}
.navInput text{
  font-size: 33rpx;
  color: white;
}
.empty_custom{
  height: 45px;
  width: 100%;
}

/* 自定义导航栏结束 */

本人QQ：993583566 欢迎个人伙伴添加 分享资源，共同学习。