研究目标

我们在开发微信小程序时，是否碰到过这样一个问题，如果给搜索框设置了固定的长宽高，以及在开发时对位置进行好了调整，但是在手机上显示时，由于机型的不同导致搜索框的位置歪了。

那么如何让搜索框能够自动适应所有手机的显示比例，从而保证界面能够一直整齐呢？

首先我们在所有页面渲染前，获得系统的数据。也就是在app.json中的 onLaunch里面调用wx.getSystemInfo()这个API获取系统的基本信息。然后调用wx.getMenuButtonBoundingClientRect()获取胶囊的尺寸及位置。

代码实现：

onLaunch() {
    wx.getSystemInfo({
      success:res => {
        // 获得胶囊的尺寸及位置
        let menuButtonObject =
          wx.getMenuButtonBoundingClientRect()
        console.log(menuButtonObject);
        }
    })
  },

打印结果如下

然后我们继续获得状态栏高度,胶囊顶部距离并打印

// 获取状态栏高度
        let statusBarHeight = res.statusBarHeight
        console.log(statusBarHeight); // 20
        let navTop = menuButtonObject.top;
        console.log(navTop); // 24

获得以上数据后我们就可以开始计算navigationBar的高度了

// 计算navigationBar高度
        let navHeight = statusBarHeight
          + menuButtonObject.height
          + (menuButtonObject.top - statusBarHeight) * 2; // h1+h3+h2*2
        console.log(navHeight); // 60

最后我们将以上数据存到全局数据中

Object.assign(this.globalData,{
     navHeight,
     navTop,
     menuButtonObject,
     statusBarHeight
})

然后我们就可以在page页内调用getApp()来使用这些数据

const app = getApp();
page({
    data{
        sizeData: app.globalData
    },
    onLoad() {
    console.log(app.globalData);
  },
})

成功打印，表示我们在页面上拿到这些数据，并存到data中

然后我就可以开始写html以及css来实现搜索框以及navigationBar的结构和样式了

html代码：

<view class="search-container" style="height: {{sizeData.navHeight}}px;">
  <view class="search-input" style="height: {{sizeData.navHeight-sizeData.statusBarHeight}}px; padding-top: {{sizeData.statusBarHeight}}px;">
    <input type="text" placeholder="{{hotTopic}}" style="height: {{sizeData.menuButtonObject.height}}px; padding: 0 {{sizeData.navTop*2}}px; margin: 0 {{sizeData.navTop}}px;"/>
  </view>
</view>

css代码：

.search-container {
  background-color: #ffffff;
  width: 100vw;
}
.search-input {
  display: flex;
  align-items: center;
}
.search-input input {
  background-color: #f7f8fa;
  border-radius: 16px;
  text-align: center;
}

如何让微信小程序的搜索框自适应所有机型

研究目标

代码实现：

最终效果