小程序navigationBar高度

### 获取微信小程序 `navigationBar` 高度

在微信小程序开发过程中，为了更好地适配不同设备屏幕尺寸以及实现页面布局优化，了解并获取 `navigationBar` 的高度是非常重要的。通过调用微信提供的 API 函数 `wx.getSystemInfoSync()` 可以同步获得系统的相关信息，其中包括状态栏的高度和其他参数[^1]。

然而，值得注意的是，直接从该接口返回的数据中并不能找到确切的 `navigationBar` 高度值。这是因为 `navigationBar` 的实际显示高度会受到多种因素影响，比如是否存在沉浸式状态栏设计或是不同的操作系统版本差异等。因此，在实践中通常采用如下方式来间接计算：

#### 方法一：基于经验值设定固定数值
对于大多数情况而言，可以依据官方文档给出的经验数据设置一个相对固定的 `navigationBarHeight` 值作为默认配置。例如 iOS 设备上一般为 44px 或者 Android 上约为 48px 左右（具体取决于是否有虚拟按键等因素）。这种方式虽然不够精确，但在很多场景下已经能够满足需求。

#### 方法二：动态测量法
更推荐的做法是在应用启动时利用 JavaScript 动态地去测算这个区域的实际占用空间大小。可以通过创建一个隐藏元素模拟 `navigationBar` 并将其放置于页面顶端位置，之后读取其外边距矩形(`getBoundingClientRect`) 来得到准确的高度信息。下面是一个简单的代码片段用于演示这一过程:

// 在合适的地方执行此函数以初始化获取导航栏高度
function getNavigationBarHeight() {
    const query = wx.createSelectorQuery();
    let navBarHeight;

    try {
        // 创建一个绝对定位且不可见的div用来充当临时占位符
        document.body.insertAdjacentHTML('beforeend', '<div id="nav-height-measurer" style="position:absolute;top:0;left:-9999px;height:auto;width:1px;"></div>');
        
        // 查询刚刚插入DOM中的节点，并尝试获取它相对于视窗的位置信息
        query.select('#nav-height-measurer').boundingClientRect(function(rect){
            if (rect) {
                navBarHeight = rect.top; // 此处假设顶部距离即为我们所需的navigation bar高度
            }
        }).exec();

        // 清理工作 - 移除之前添加的辅助dom结构
        setTimeout(() => {document.getElementById('nav-height-measurer')?.remove();}, 0);
    
    } catch(e){console.error("Failed to measure navigation bar height", e);}

    return navBarHeight;
}

需要注意上述方法适用于 webview 类型的小程序环境；而对于原生渲染模式下的小程序，则应考虑使用其他更适合的技术方案来进行相应的处理。

另外一种更为简便的方式是借助第三方库或框架的帮助完成此类操作，许多成熟的 UI 组件库都内置了对各种平台特性的良好支持，可以直接引用这些资源减少重复造轮子的工作量。