uni-app 小红书小程序 RUNTIME Service ERROR

uni-app 小红书小程序 RUNTIME Service ERROR

开发环境 版本号 项目创建方式
Mac macOS sonoma HBuilderX 
# 产品分类
uniapp/小程序/小红书

## 操作步骤：
hello uni-app示例代码创建体验项目，点击第一个tab扩展组件，点击任意一个item进入

## 预期结果：
功能正常展示

## 实际结果：
RUNTIME Service ERROR，组件不显示或显示不完全

## bug描述：
从官方的hello uni-app示例代码创建体验项目，点击第一个tab扩展组件，点击任意一个item进入，都会报错：

```javascript
VM173:2 [RUNTIME Service ERROR] globalHandle error trace:   

(found in <0.891017678679253>)   
Error in <0.891017678679253>-6: "TypeError: Cannot read properties of undefined (reading '$children')"


更多关于uni-app 小红书小程序 RUNTIME Service ERROR的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

你好 按照你的操作步骤 我本地运行到小红书小程序没有出现错误 hbx版本4.87


更多关于uni-app 小红书小程序 RUNTIME Service ERROR的实战教程也可以访问 https://www.itying.com/category-93-b0.html


hello uni-app示例，第三个tab页，点击任意一个item进入

我重新创建了一下，选择vue 2会出现这个问题，选择vue 3不会

该bug反馈内容基本完整，包含标题、详细描述、错误日志、复现步骤、预期与实际结果及分类信息。但可优化点：复现步骤需更具体（如项目创建方式、具体点击路径），缺少可独立运行的代码片段。分类信息中HBuilderX版本号4.87较旧（当前知识库显示4.45.2025010702-alpha等更新版本），需提示用户升级验证。
经知识库比对，该问题高度匹配小程序平台修复4.41版本引发的访问uni上不存在的属性也会获取到一个方法的Bug。错误Cannot read properties of undefined (reading ‘$children’)表明组件实例未正确初始化，常见于旧版框架对Vue组件树遍历逻辑的兼容问题。小红书小程序虽非微信/支付宝，但同属小程序平台，共享核心框架逻辑。
此bug成立，非误报。原因系HBuilderX 4.87版本存在组件生命周期管理缺陷，当扩展组件快速跳转时可能触发未挂载实例的属性访问。知识库明确提示低版本HBuilderX可能出现组件显示undefined问题，建议用户升级至最新正式版或alpha版（4.45+系列）重试。若仍复现，需检查组件是否在onReady后操作$children，并参考uni统计错误解析文档确认是否为框架运行时异常。 内容为 AI 生成，仅供参考

这是一个典型的 uni-app 在小红书小程序平台上遇到的运行时错误。错误信息 TypeError: Cannot read properties of undefined (reading '$children') 表明在组件内部尝试访问一个未定义的 Vue 组件实例的 $children 属性。

问题根源分析：

  1. 平台差异：小红书小程序的 JavaScript 运行环境（如 V8 引擎版本）或其对 Vue 运行时（uni-app 基于 Vue 2）的适配，可能与微信、支付宝等主流小程序存在细微差异。hello uni-app 示例项目中的某些组件或代码逻辑可能依赖了在特定时机下准确的父子组件关系，而在小红书环境中，这个时机或组件实例的初始化顺序有所不同，导致 this.$children 在访问时为 undefined。

  2. 组件生命周期：错误发生在某个组件的渲染或更新阶段（<0.891017678679253>-6 指向一个内部组件实例）。很可能是父组件试图在子组件尚未完全挂载或初始化完成前，就通过 $children 去访问或操作子组件。

排查与解决方向：

  • 定位具体组件：根据错误栈中的线索（如 found in <0.891017678679253>），你需要确定是哪个自定义组件或 hello uni-app 中的哪个示例组件引发了问题。可以尝试逐个点击“扩展组件”Tab下的不同条目，看是否所有条目都会触发错误，还是仅特定组件。

  • 检查组件代码：找到对应组件后，审查其代码，特别是 mounted、created 生命周期钩子，以及任何模板中直接使用 this.$children 的地方。确保在访问 this.$children 之前，组件本身及其预期的子组件已经处于可用状态。

  • 使用 ref 替代 $children：$children 在 Vue 中本身就不是响应式的，且依赖组件结构的稳定性。更推荐的做法是使用 ref 来获取特定的子组件实例。这样可以更精确、安全地访问子组件，避免因组件结构变化或平台渲染差异导致的问题。

  • 条件访问：如果暂时无法重构代码，可以在访问 this.$children 前增加一个简单的条件判断，例如：

    if (this.$children && this.$children.length > 0) {
    // 你的操作逻辑
}
回到顶部