小程序的navigation-bar组件高度的计算与使用

博主只是想实现一个听写的小功能，所以并不需要过多的拓展，官方导航组件就很好用。就是从网页端换到了小程序端，不太清楚如何去计算这个navigation-bar的高度，好在现在有ai工具，特别deepseek是触手可及的好工具。白天刷到一条新闻，说有对一行代码不会写的父子，成功利用ai开发了一个小游戏。好家伙，其他行业都是新品淘汰旧品，先进淘汰落后，程序员就比较狠了，自己淘汰自己：）。

高度的计算

虽然ai好用，但是因为软件版本迭代会导致早期的函数逐步实效，所以还是需要使用者反复调试检查一下的：

// app.js
App({
  globalData: {
    appName: "小鸟听写",
    appVersion: "1.2.0",
    appAuthor: "Alphonse",
    navBarHeight: 0
  },

  onLaunch() {
    try {
      const deviceInfo = wx.getDeviceInfo();
      const windowInfo = wx.getWindowInfo();
      const isIOS = deviceInfo.platform === 'ios';
      this.globalData.navBarHeight = windowInfo.statusBarHeight + (isIOS ? 40 : 44);
    } catch (error) {
      this.globalData.navBarHeight = 88;
    }
  }
});

高度的计算

实际应用，最初的想法是把值写入css变量里，然后在css（wxss）文件里利用calc来计算，但实际情况是微信小程序并不支持博主这样异想天开的操作，于是只能在js文件里计算出实际需要的高度，然后在wxml以行内css的方式写入，以下是在index页面实现计算的案例：

  onLoad(){
    const app = getApp();
    this.setData({
      appName: app.globalData.appName,
      appVersion: app.globalData.appVersion,
      appAuthor: app.globalData.appAuthor,
      contentHeight: `calc(100vh - ${app.globalData.navBarHeight}px)`
    });

在wxml文件里以行内方式应用：

<view class="container" style="height: {{contentHeight}};">
......
</view>