小程序navigationStyle: custom 下web-view高度异常填坑

最新推荐文章于 2023-12-11 16:29:20 发布

转载

最新推荐文章于 2023-12-11 16:29:20 发布 · 4.3k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5ba5bc626fb9a05cf3712c35

文章标签：

#移动开发 #ui #javascript #ViewUI

本文介绍了在微信小程序中使用`navigationStyle: custom`时，`web-view`组件在不同微信版本和系统上的高度异常问题。主要情况包括：6.7.2以下版本需在H5模拟导航，6.7.2及以上版本的苹果手机正常，而安卓手机web-view高度不足。解决方案是通过判断微信版本和获取状态栏高度，将信息传递到H5页面进行兼容处理。此外，还讨论了底部悬浮、全屏及键盘弹起时的兼容场景。文章提醒开发者关注官方可能的调整，并优化用户机型版本分布的升级提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官方文档
重点是微信版本6.7.2及以后navigationStyle: custom 自定义导航对web-view组件无效，导致不同系统手机不同微信版本号表现迥异。需要开发考虑到多种情况的兼容。

情况分析

目前我在开发中主要遇到以下几种情况,欢迎留言补充

微信版本号6.7.2以下的手机，需要再h5页面模拟小程序的navigationBar；

微信版本号6.7.2级以上的苹果机型，小程序自带原生navigationBar，无需在h5页面模拟;

微信版本号6.7.2及以上的安卓手机，小程序自带原生navigationBar，无需在h5页面模拟，但是web-view高度非100%，页面内容被截，超出半部分为状态栏高度加自定义navigationBar高度。（如下图所示）

解决方案

在小程序判断微信版本号，获取手机状态栏高度，在使用web-view组件的页面，将需要的信息传递过到h5页面，针对机型做响应的兼容处理。

// 小程序代码 基于wepy框架
// app.wpy
...
    //获取系统相关信息
    onLaunch () {
        try(){
            const sysInfo = wepy.getSystemInfoSync()
            this.statusBarHeight = sysInfo.statusBarHeight
            //以后版本号出现2位情况的话需要末位补0
            this.globalData.h5StatusBarHeight = Number(res.version.replace(/\./g, '')) < 672 ? res.statusBarHeight : 0
        }catch(e){
            console.log('获取系统信息异常',e)
        }
    }
复制代码