Uniapp 安卓端真机运行报错：Cannot read property ‘children‘ of null 的解决方案

在 Uniapp 开发中，当在安卓端真机运行项目时，可能会遇到以下报错：
[JS Framework] Failed to execute the callback function: TypeError: Cannot read property 'children' of null
该问题通常与页面路由配置或键盘弹起时的页面布局调整有关

问题描述

• ​报错信息：Cannot read property 'children' of null
• ​触发场景：在安卓端真机运行时，使用底部自适应弹起的键盘高度时出现。
• ​原因分析：
  1. 页面路由配置未正确处理键盘弹起时的布局调整。
  2. 键盘弹起时，页面布局发生异常，导致 DOM 元素无法正确获取。

---

​解决方案

​1. 修改 pages.json 配置

在 pages.json 中，为相关页面添加 softinputMode 和 softinputNavBar 配置，确保键盘弹起时页面布局不会异常。

​配置示例

{
  "path": "pages/Ai",
  "style": {
    "navigationStyle": "custom",
    "navigationBarTitleText": "大业AI",
    "app-plus": {
      "softinputMode": "adjustResize", // 键盘弹起时调整页面布局
      "softinputNavBar": "none" // 取消 iOS 中软键盘上方的完成按钮
    }
  }
}

​参数说明

• ​**softinputMode**：
  指定键盘弹起时的页面调整模式。

  • adjustResize：键盘弹起时，页面内容自动调整高度。
  • adjustPan：键盘弹起时，页面整体上移。

• ​**softinputNavBar**：
  指定 iOS 中软键盘上方的导航栏显示方式。

  • none：隐藏导航栏，避免遮挡输入框。

​2. 确保 DOM 元素正确获取

在代码中，确保获取 DOM 元素时，元素已正确渲染。例如：

this.$nextTick(() => {
  const element = document.querySelector('.input-container');
  if (element) {
    // 操作 DOM 元素
  }
});

---

​注意事项

1. ​平台差异

   • softinputMode 和 softinputNavBar 配置在 iOS 和 Android 上的表现可能不同，需根据实际需求调整。

2. ​键盘弹起时的布局调整

   • 使用 adjustResize 或 adjustPan 时，确保页面布局不会因键盘弹起而发生异常。

3. ​DOM 操作时机

   • 在 this.$nextTick 中操作 DOM 元素，确保元素已渲染完成。