uniapp 获取 app 软键盘高度 方案 函数代码 封装 兼容性 教程

<think>好的，我现在需要处理用户关于在UniApp中获取软键盘高度的函数代码封装及兼容性教程的问题。首先，我需要回顾用户提供的引用内容，特别是引用[1]和引用[3]，因为它们提到了UniApp的相关内容。 用户的需求是希望在H5和App端都能兼容地获取软键盘高度。根据引用[1]，H5端比较复杂，而App端可以使用uni.onKeyboardHeightChange接口。因此，我需要分别处理这两个平台。 首先，针对App端，直接使用uni.onKeyboardHeightChange监听高度变化。这部分应该比较简单，代码示例中已经给出。然后，H5端需要另一种方法，可能通过监听窗口大小变化或者输入框的滚动位置来估算键盘高度。引用[1]中提到H5端可能使用Vue封装的方法，需要考虑到不同浏览器的差异。 接下来，我需要考虑代码的结构，比如使用条件编译区分平台，H5部分可能需要监听resize事件，并计算视口高度的变化。当键盘弹出时，视口高度减少，这个差值可能就是键盘的高度。但要注意，某些浏览器可能有不同的行为，比如iOS的工具栏可能会影响计算。 然后，需要封装一个通用的函数，可能在Vue的mounted钩子中初始化监听，并在销毁时移除事件监听器，避免内存泄漏。同时，需要处理输入框聚焦和失焦的事件，以确定何时开始计算高度变化。 还要考虑兼容性问题，比如在H5端，某些情况下键盘弹出可能不会改变视口高度，这时候可能需要其他方法，比如检测输入框的位置变化或者使用Intersection Observer API。但根据引用[1]中的方案，基于视口变化的计算已经是一种可行的方法，可能需要在实际测试中验证。 另外，用户可能希望这个函数能够在不同页面复用，所以需要将其封装成可复用的组件或者mixin。在引用[1]中提到了基于Vue的封装，所以可能需要创建一个自定义钩子或者工具函数，供各个页面调用。 最后，测试不同平台和浏览器的表现，确保代码的兼容性。例如，在iOS的Safari和Chrome中，键盘行为可能不同，需要调整计算方式。同时，在Android的WebView中也需要验证。 总结步骤： 1. 使用条件编译区分App和H5环境。 2. App端直接使用uni.onKeyboardHeightChange。 3. H5端监听窗口resize事件，计算视口高度变化。 4. 封装成Vue组件或函数，处理事件绑定和销毁。 5. 处理输入框聚焦和失焦事件以触发计算。 6. 考虑兼容性问题和不同浏览器的差异。 7. 提供示例代码和使用说明，方便用户集成。</think>以下是为您整理的UniApp中获取软键盘高度的函数代码封装方案及兼容性教程，涵盖H5与App端的实现： --- ### 一、核心实现方案 通过**条件编译**和**平台差异处理**实现多端兼容，基于Vue封装可复用函数： ```javascript // keyboard.js export const useKeyboard = () => { let keyboardHeight = 0; // App端实现 if (uni.getSystemInfoSync().platform !== 'h5') { uni.onKeyboardHeightChange(res => { keyboardHeight = res.height; }); return { keyboardHeight }; } // H5端实现 const handleResize = () => { const visualViewport = window.visualViewport; if (visualViewport) { const viewportDiff = window.innerHeight - visualViewport.height; keyboardHeight = viewportDiff > 50 ? viewportDiff : 0; } }; onMounted(() => { window.visualViewport?.addEventListener('resize', handleResize); }); onUnmounted(() => { window.visualViewport?.removeEventListener('resize', handleResize); }); return { keyboardHeight }; }; ``` --- ### 二、使用说明 #### 1. 在Vue组件中调用 ```vue <script setup> import { useKeyboard } from './keyboard.js'; const { keyboardHeight } = useKeyboard(); </script> <template> <input @focus="handleFocus" /> <view :style="{ marginBottom: keyboardHeight + 'px' }"> 底部安全区域 </view> </template> ``` #### 2. 实现原理 - **App端**：直接使用`uni.onKeyboardHeightChange`原生API[^1] - **H5端**：通过`window.visualViewport`监听视口变化，计算窗口高度差值（需注意iOS工具栏的影响） --- ### 三、关键兼容性处理 1. **iOS适配**： 添加`viewport-fit=cover`到HTML meta标签，防止底部安全区域遮挡 ```html <meta name="viewport" content="... viewport-fit=cover"> ``` 2. **安卓WebView**： 部分机型需在`pages.json`配置： ```json "app-plus": { "softinputMode": "adjustResize" } ``` 3. **输入框定位**： 避免使用`position: fixed`布局，推荐使用`position: absolute`+动态计算 --- ### 四、扩展优化建议 1. **防抖处理**：在H5端resize事件中添加100ms延迟 2. **键盘状态判断**：通过`document.activeElement`判断输入框聚焦状态 3. **CSS过渡动画**：为布局变化添加`transition`动画提升体验 ---