uni-app H5环境下报错 uni.onKeyboardHeightChange is not a function

在uni-app的H5环境中遇到uni.onKeyboardHeightChange is not a function这个错误，通常是因为uni.onKeyboardHeightChange这个API在H5平台上并不支持。这个API主要用于监听原生键盘高度变化，主要在App和微信小程序等原生环境中有效。在H5环境中，由于使用的是浏览器内置的键盘，所以无法直接获取键盘的高度变化。

为了解决这个问题，并实现在H5环境中对键盘弹出和隐藏的监听，我们可以利用JavaScript中的一些事件监听技巧，比如监听window的resize事件或者focus/blur事件。以下是一个示例代码，展示如何在H5环境下通过监听resize事件来模拟键盘高度变化的处理：

// 在页面脚本中，如 page.vue 文件的 script 部分
export default {
  data() {
    return {
      isKeyboardVisible: false, // 标记键盘是否可见
      keyboardHeight: 0, // 键盘高度
    };
  },
  mounted() {
    // 监听窗口大小变化，用于判断键盘弹出和隐藏
    window.addEventListener('resize', this.handleResize);

    // 监听输入框的焦点变化，用于更精确的判断
    document.querySelectorAll('input, textarea').forEach(input => {
      input.addEventListener('focus', this.handleInputFocus);
      input.addEventListener('blur', this.handleInputBlur);
    });
  },
  beforeDestroy() {
    // 移除监听器
    window.removeEventListener('resize', this.handleResize);
    document.querySelectorAll('input, textarea').forEach(input => {
      input.removeEventListener('focus', this.handleInputFocus);
      input.removeEventListener('blur', this.handleInputBlur);
    });
  },
  methods: {
    handleResize() {
      // 这里的逻辑可以根据实际情况调整，比如通过比较当前窗口高度和初始高度来判断键盘是否弹出
      const viewportHeight = window.innerHeight;
      // 假设在组件挂载时记录了初始的视口高度
      if (viewportHeight < this.$refs.initialViewportHeight) {
        this.isKeyboardVisible = true;
        this.keyboardHeight = this.$refs.initialViewportHeight - viewportHeight;
      } else {
        this.isKeyboardVisible = false;
        this.keyboardHeight = 0;
      }
    },
    handleInputFocus() {
      // 可以在这里做一些预处理，比如记录初始视口高度
      this.$refs.initialViewportHeight = window.innerHeight;
    },
    handleInputBlur() {
      // 可以在这里做一些后处理，比如重置状态
      this.isKeyboardVisible = false;
      this.keyboardHeight = 0;
    }
  }
};

请注意，上述代码中的handleResize方法中的逻辑需要根据具体需求进行调整，因为不同的设备和浏览器可能对键盘的处理有所不同。此外，由于H5环境的复杂性，这种方法可能无法完全准确地反映键盘的实际高度和状态。