uni-app打包app时内部webview被软键盘遮盖

在 uni-app 打包成 App 时，如果内部 WebView 被软键盘遮盖，这通常是由于软键盘弹出的高度和布局调整不当导致的。以下是一些常见的解决方案：

1. 使用 manifest.json 配置

在 manifest.json 文件中，可以配置 softinputMode 来调整软键盘的显示模式。常用的配置有：

{
  "app-plus": {
    "softinputMode": "adjustResize"
  }
}

• adjustResize：当软键盘弹出时，页面内容会自动调整大小，避免被软键盘遮盖。
• adjustPan：当软键盘弹出时，页面内容会向上平移，避免被软键盘遮盖。

2. 监听软键盘事件

你可以通过监听软键盘的弹出和收起事件，手动调整页面布局。

uni.onKeyboardHeightChange(res => {
  const keyboardHeight = res.height;
  // 根据键盘高度调整页面布局
});

3. 使用 CSS 进行布局调整

确保你的页面布局是灵活的，可以使用 flexbox 或 vh 单位来确保页面元素能够根据屏幕大小进行调整。

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.content {
  flex: 1;
  overflow-y: auto;
}

.input-container {
  position: fixed;
  bottom: 0;
  width: 100%;
}

4. 使用 scrollIntoView 方法

当输入框获得焦点时，可以使用 scrollIntoView 方法将输入框滚动到可视区域。

const input = document.getElementById('myInput');
input.scrollIntoView({ behavior: 'smooth', block: 'center' });

5. 使用 uni.pageScrollTo 方法

在 uni-app 中，你可以使用 uni.pageScrollTo 方法来滚动页面到指定位置。

uni.pageScrollTo({
  scrollTop: 100, // 滚动到指定位置
  duration: 300   // 滚动动画时间
});

6. 使用 uni-app 的 input 组件

uni-app 的 input 组件在获取焦点时会自动调整页面布局，避免被软键盘遮盖。确保你使用的是 uni-app 的原生 input 组件。

<input type="text" placeholder="请输入内容" />

7. 使用 webview 的 resize 事件

如果你在 WebView 中嵌入了网页，可以监听 resize 事件，根据 WebView 的大小调整网页布局。

window.addEventListener('resize', () => {
  // 根据 WebView 大小调整布局
});

8. 使用 uni-app 的 textarea 组件

textarea 组件在获取焦点时也会自动调整页面布局，避免被软键盘遮盖。

<textarea placeholder="请输入内容"></textarea>

9. 使用 uni-app 的 keyboard 插件

uni-app 提供了 keyboard 插件，可以更方便地处理软键盘的弹出和收起事件。

uni.requireNativePlugin('keyboard').onKeyboardShow(res => {
  console.log('键盘高度：', res.height);
});