Barra de título de búsqueda personalizada del subprograma WeChat

Uno: demanda

1. Convierta la barra de título del subprograma WeChat en una barra de búsqueda.
2. Personalice para volver a la página principal.

Dos: análisis de necesidades

1. Primero, configure la barra de título del applet para que sea personalizable.
2. Luego calcule la altura de la barra de título original para formar la estructura.
3. Establece el diseño del cuadro de búsqueda y el botón Atrás en función de la altura calculada.
4. Finalmente, implemente la función de código.

Tres: realización de funciones

1: Configure la barra de título para que sea personalizable

usingComponents son los componentes relacionados utilizados

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

2: Calcular la altura de la barra de título

Los componentes de la altura de la barra de título: la altura de la barra de estado superior statusBarHeight y la altura del botón central getMenuButtonBoundingClientRect y los márgenes superior e inferior del botón central

1. Obtenga la altura de la barra de estado wx.getSystemInfo.statusBarHeight
2. Obtenga la altura del botón central wx.getMenuButtonBoundingClientRect() (hay cuatro valores superior, ancho, alto y derecho, que corresponden a documentos de desarrollo específicos de WeChat)
3. Obtenga los márgenes superior e inferior del botón central margin = top (coordenadas del borde superior del botón central) - 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 // 胶囊按钮右边坐标 - 胶囊按钮宽度 = 按钮左边可使用宽度
              })
            },
          })
        // 生命周期函数--监听页面加载
    },

 Cuatro: implementación de código

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>

Cinco: Visualización de efectos