One: demand

Turn the title bar of the WeChat applet into a search bar.
Customize to return to the parent page.

Two: needs analysis

First, set the title bar of the applet to be customizable.
Then calculate the height of the original title bar to form the structure.
Sets the layout of the search box and the back button based on the computed height.
Finally, implement the code function.

Three: function realization

1: Set the title bar to be customizable

usingComponents is related components used

{
    "usingComponents": {
        "van-uploader": "@vant/weapp/uploader/index",
        "van-button": "@vant/weapp/button/index",
         "van-search": "@vant/weapp/search/index"
      },
    "navigationStyle": "custom"
}

2: Calculate the title bar height

The components of the title bar height: the top status bar height statusBarHeight and the height of the middle button getMenuButtonBoundingClientRect and the upper and lower margins of the middle button

Get the status bar height wx.getSystemInfo.statusBarHeight
Get the height of the middle button wx.getMenuButtonBoundingClientRect() (there are four values top, width, height, and right, which correspond to specific WeChat development documents)
Get the upper and lower margins of the middle button margin = top (coordinates of the upper border of the middle button) - statusBarHeight

 onLoad: function (options) {
        this.setData({
            menuButtonInfo: wx.getMenuButtonBoundingClientRect()
          })
        //   console.log(this.data.menuButtonInfo)
          const { top, width, height, right } = this.data.menuButtonInfo
          wx.getSystemInfo({
            success: (res) => {
              const { statusBarHeight } = res
              const margin = top - statusBarHeight
              this.setData({
                navHeight: (height + statusBarHeight + (margin * 2)),
                searchMarginTop: statusBarHeight + margin, // 状态栏 + 胶囊按钮边距
                searchHeight: height,  // 与胶囊按钮同高
                searchWidth: right - width // 胶囊按钮右边坐标 - 胶囊按钮宽度 = 按钮左边可使用宽度
              })
            },
          })
        // 生命周期函数--监听页面加载
    },

Four: code implementation

1:js

Page({
    data：{
        navHeight: '',
        menuButtonInfo: {},
        searchMarginTop: 0, // 搜索框上边距
        searchWidth: 0, // 搜索框宽度
        searchHeight: 0, // 搜索框高度
    },
    goBack(){
        wx.navigateBack({
            delta: 1, // 回退前 delta(默认为1) 页面
        })
    },
    onLoad: function (options) {
        this.setData({
            menuButtonInfo: wx.getMenuButtonBoundingClientRect()
          })
        //   console.log(this.data.menuButtonInfo)
          const { top, width, height, right } = this.data.menuButtonInfo
          wx.getSystemInfo({
            success: (res) => {
              const { statusBarHeight } = res
              const margin = top - statusBarHeight
              this.setData({
                navHeight: (height + statusBarHeight + (margin * 2)),
                searchMarginTop: statusBarHeight + margin, // 状态栏 + 胶囊按钮边距
                searchHeight: height,  // 与胶囊按钮同高
                searchWidth: right - width // 胶囊按钮右边坐标 - 胶囊按钮宽度 = 按钮左边可使用宽度
              })
            },
          })
        // 生命周期函数--监听页面加载
    },
})

2:wxss

/* 自定义导航栏 */
view {
  box-sizing: border-box;
  overflow: hidden;
}
.custom-bar {
  /* background-color: #aaa; */
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  background-color: #fafafa;
  z-index: 9;
}
.custom-bar__wrapper {
  padding: 0 10rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-group {
  width: 88%;
  height: 100%;
  border: 1px solid #666;
  background-color: #fafafa;
  border-radius: 60rpx;
}
.van-search {
  font-size: 25rpx;
  margin: 0 -15rpx;
  height: 100%;
}
.goback {
  justify-content: flex-start;
  width: 40rpx;
  height: 40rpx;
  margin-left: 20rpx;
}
.search-btn {
  width: 100rpx;
  font-size: 35rpx;
}

3:wxml

<!-- 自定义导航栏 -->
<view class="custom-bar" style="height:{
   
   {navHeight}}px">
    <view class="custom-bar__wrapper" style="margin-top:{
   
   {searchMarginTop}}px; height: {
   
   {searchHeight}}px;width: {
   
   {searchWidth}}px" >
        <image src="../../../images/assetsImg/img5.png" class="goback" bindtap="goBack"></image>
      <view class="search-group">
        <van-search use-action-slot="true" background="#fafafa" shape="round" field-class="van-search" focus  value="{
   
   { inputValue }}" placeholder="请输入关键字" bind:change="changeValue"> <view class="search-btn" slot="action" bind:tap="onClick">搜索</view></van-search>
    </view>
    </view>
  </view>

WeChat applet custom search title bar