萧寂

Appearance

微信小程序控制台打印当前页面参数和数据 ​

微信小程序真机调试完全手册：页面 & 组件数据/方法速查 ​

目录 ​

  1. #一页面操作
  2. #二组件操作
  3. #三组件间通信
  4. #四特殊场景
  5. #五常见问题排查

一、页面操作 ​

1.1 当前页面（最顶层页面） ​

js
const page = getCurrentPages()[getCurrentPages().length - 1]

// === 获取数据 ===
page.options         // 页面跳转传入的参数（onLoad 的 options）
page.data            // 页面 data 数据
page.route           // 页面路径，如 "pages/index/index"

// === 更新数据 ===
page.setData({ title: '新标题' })

// === 调用方法 ===
page.onLoad()        // 生命周期
page.onShow()
page.onReady()
page.onHide()
page.onUnload()

page.myFunction()                 // 自定义函数（无参）
page.updateData({ name: '张三' }) // 自定义函数（有参）

1.2 上层页面（上一级页面） ​

js
const prevPage = getCurrentPages()[getCurrentPages().length - 2]

// 获取数据
console.log(prevPage.options)
console.log(prevPage.data)
console.log(prevPage.route)

// 更新数据
prevPage.setData({ title: '新标题' })

// 调用方法
prevPage.onShow()
prevPage.myFunction()
prevPage.updateData({ name: '张三' })

1.3 任意层级页面 ​

js
// length - 3 = 上上层页面
// length - 4 = 上上上层页面
// 以此类推...

const targetPage = getCurrentPages()[getCurrentPages().length - N]

1.4 获取整个页面栈 ​

js
const pages = getCurrentPages()
console.log(pages.length)           // 页面栈深度
console.log(pages[0].route)         // 首页路径
console.log(pages[pages.length-1])  // 当前页面

二、组件操作 ​

2.1 获取组件实例 ​

前置条件：在页面的 WXML 中给组件设置 id 或 class

xml
<my-component id="myComp" />
<other-component class="otherComp" />
js
const page = getCurrentPages()[getCurrentPages().length - 1]

// 通过 id 获取（推荐）
const comp = page.selectComponent('#myComp')

// 通过 class 获取
const comp = page.selectComponent('.otherComp')

// 通过标签名获取
const comp = page.selectComponent('my-component')

// 获取所有匹配的组件（返回数组）
const comps = page.selectAllComponents('.my-class')

2.2 读取组件数据 ​

js
const comp = page.selectComponent('#myComp')

console.log(comp.data)                // 全部 data
console.log(comp.data.innerMsg)       // 指定字段
console.log(comp.properties)          // 外部传入的属性

2.3 调用组件方法 ​

js
const comp = page.selectComponent('#myComp')

comp.refresh([1, 2, 3])              // 调用方法
const result = comp.getPrivateData() // 获取返回值
comp.setData({ title: '新标题' })     // 直接更新组件 data

2.4 组件自身操作（组件内部） ​

js
// 在组件 methods 中
Component({
  properties: {
    itemId: Number
  },
  data: {
    list: []
  },
  methods: {
    myMethod() {
      // 获取自身
      const self = this

      // 获取父页面实例
      const pages = getCurrentPages()
      const parentPage = pages[pages.length - 1]

      // 获取父页面数据
      console.log(parentPage.data)

      // 调用父页面方法
      parentPage.someMethod()

      // 获取兄弟组件
      const sibling = this.selectComponent('#siblingComp')

      // 获取祖先组件（需配合 relations）
      this.getRelationNodes('../parentComp/parentComp')
    }
  }
})

三、组件间通信 ​

3.1 父组件 → 子组件（properties） ​

xml
<!-- 父组件 WXML -->
<child-comp prop-a="{{dataA}}" prop-b="{{dataB}}" />
js
// 子组件 JS
Component({
  properties: {
    propA: String,
    propB: Number
  }
})

3.2 子组件 → 父组件（triggerEvent） ​

js
// 子组件中触发
Component({
  methods: {
    onTap() {
      this.triggerEvent('customevent', { value: 'hello' }, { bubbles: true })
    }
  }
})
xml
<!-- 父组件 WXML -->
<child-comp bind:customevent="onChildEvent" />
js
// 父组件 JS
Page({
  onChildEvent(e) {
    console.log(e.detail.value)  // "hello"
  }
})

3.3 兄弟组件通信 ​

方式一：通过共同的父组件中转

js
// 父组件 JS
Page({
  data: {
    sharedData: {}
  },
  // A 组件通知父组件
  onAEvent(e) {
    this.setData({ sharedData: e.detail })
    // B 组件通过 properties 接收
  }
})

方式二：通过事件总线（EventBus）

js
// utils/eventBus.js
const EventBus = {
  listeners: {},
  on(event, callback) {
    if (!this.listeners[event]) this.listeners[event] = []
    this.listeners[event].push(callback)
  },
  emit(event, data) {
    (this.listeners[event] || []).forEach(cb => cb(data))
  },
  off(event, callback) {
    this.listeners[event] = (this.listeners[event] || []).filter(cb => cb !== callback)
  }
}

module.exports = EventBus
js
// 组件 A
const bus = require('../../utils/eventBus')
bus.emit('dataChange', { value: 'new data' })

// 组件 B
const bus = require('../../utils/eventBus')
bus.on('dataChange', (data) => {
  console.log(data.value) // "new data"
})

3.4 跨页面通信 ​

方式一：通过全局数据（app.globalData）

js
// app.js
App({
  globalData: {
    userInfo: null,
    token: ''
  }
})

// 任意页面
const app = getApp()
app.globalData.userInfo = { name: '张三' }
console.log(app.globalData.userInfo)

方式二：通过页面栈直接操作

js
// 当前页面修改上一个页面的数据
const pages = getCurrentPages()
const prevPage = pages[pages.length - 2]
prevPage.setData({ refreshed: true })
prevPage.onRefresh()

四、特殊场景 ​

4.1 自定义 TabBar 页面 ​

js
// 获取 tabBar 组件
const page = getCurrentPages()[getCurrentPages().length - 1]
const tabBar = page.selectComponent('#tabBar')

// 注意：switchTab 跳转不会触发 onLoad，options 为空对象

4.2 分包页面 ​

js
// 分包页面获取方式相同
const page = getCurrentPages()[getCurrentPages().length - 1]
console.log(page.route)  // 会显示完整分包路径，如 "packageA/pages/detail/detail"

4.3 插件页面 ​

js
// 插件内获取页面实例
const pages = getCurrentPages()
const currentPage = pages[pages.length - 1]

// 插件内获取主包全局数据
const app = getApp()
console.log(app.globalData)

4.4 WebView 页面 ​

js
// 小程序侧向 webview 传数据
const page = getCurrentPages()[getCurrentPages().length - 1]

// 通过 postMessage（需在特定时机触发）
// webview 中：wx.miniProgram.postMessage({ data: 'hello' })
// 小程序侧监听：bindmessage="onMessage"

// 通过 URL 传参
// <web-view src="https://xxx.com?from=mini" />

4.5 获取页面内所有组件 ​

js
const page = getCurrentPages()[getCurrentPages().length - 1]

// 获取页面内所有自定义组件
const allComps = page.selectAllComponents('.custom-component')

// 遍历操作
allComps.forEach((comp, index) => {
  console.log(`组件 ${index}:`, comp.data)
  comp.someMethod()
})

五、常见问题排查 ​

问题原因解决方案
selectComponent 返回 null忘记加 id在 WXML 中添加 id="xxx"
selectComponent 返回 null组件未渲染完成在 onReady 或 setTimeout 后调用
selectComponent 返回 null组件被 wx:if 隐藏改为 hidden 或确保条件为 true
拿不到组件 data/methods直接用了页面实例必须通过 selectComponent 获取组件实例
options 为空对象页面通过 switchTab 跳转switchTab 不会触发 onLoad，改用 navigateTo
getCurrentPages() 为空在 App.onLaunch 中调用页面栈还未初始化，延迟调用
控制台打印 undefined上下文不对用 Sources 面板打断点，或直接在代码中 console.log
手机端看不到日志未开启调试模式手机端右上角 ... → 勾选"打开调试"
真机调试不生效调试版本不匹配开发者工具 → 详情 → 本地设置 → 切换真机调试版本（1.0/2.0）

附录：Console 一键调试模板 ​

将以下代码复制到真机调试的 Console 面板中，快速查看当前页面和组件信息：

js
(function(){
  const pages = getCurrentPages()
  const page = pages[pages.length - 1]

  console.group('📄 当前页面信息')
  console.log('路径:', page.route)
  console.log('参数:', page.options)
  console.log('数据:', page.data)
  console.groupEnd()

  // 如果有已知组件 id，替换下面的 'myComp'
  const comp = page.selectComponent('#myComp')
  if (comp) {
    console.group('🧩 组件信息 (#myComp)')
    console.log('数据:', comp.data)
    console.log('属性:', comp.properties)
    console.groupEnd()
  }

  // 页面栈概览
  console.group('📚 页面栈 (' + pages.length + ' 层)')
  pages.forEach((p, i) => {
    console.log(`[${i}] ${p.route}`, p.options)
  })
  console.groupEnd()
})()

萧寂173专属博客，v1.0.0.4