更新记录

1.0.0（2026-04-15） 下载此版本

1.0.0 首次发布，支持Data实时查看、Network请求拦截、可拖拽浮动按钮、enabled开关控制

平台兼容性

uni-app(3.7.6)

📋 微信小程序 Page Data 查看器

解决微信开发者工具中 UniApp / 原生小程序页面 data 看不懂的问题。

在页面上直接显示一个可视化浮层面板，清晰展示当前页面的 data 数据。

功能

• 🔍 实时查看当前页面 data
• 🎨 按类型高亮（string/number/boolean/array/object）
• 📂 支持展开/折叠嵌套数据
• 🔎 支持按 key 搜索
• 📋 一键复制 JSON 到剪贴板
• 🧹 自动过滤 UniApp 框架内部字段（$vm, __wxExparserNodeId__ 等）
• 🗂 支持路径导航，逐层深入查看
• 🔄 支持手动/自动刷新

使用方式

1. 复制组件

将 components/data-viewer 文件夹复制到你的小程序项目中。

2. 在页面中引入

原生小程序 — 在页面的 .json 中：

{
  "usingComponents": {
    "data-viewer": "/components/data-viewer/data-viewer"
  }
}

UniApp — 在页面的 .vue 中（需要条件编译）：

<template>
  <view>
    <!-- 你的页面内容 -->

    <!-- #ifdef MP-WEIXIN -->
    <data-viewer />
    <!-- #endif -->
  </view>
</template>

UniApp 项目需要将组件放到 src/wxcomponents/data-viewer/ 目录下。

3. 在 WXML / template 中使用

<!-- 放在页面最底部即可 -->
<data-viewer />

页面右下角会出现一个绿色的 D 按钮，点击即可打开数据面板。

组件属性

示例

<!-- 基础用法 -->
<data-viewer />

<!-- 每秒自动刷新 -->
<data-viewer autoRefresh="{{1000}}" />

<!-- 不过滤框架字段（查看全部原始数据） -->
<data-viewer filterUniApp="{{false}}" />

仅开发环境使用

建议配合条件编译，只在开发环境引入：

<!-- #ifdef MP-WEIXIN -->
<data-viewer v-if="isDev" />
<!-- #endif -->

data() {
  return {
    isDev: process.env.NODE_ENV === 'development'
  }
}

效果预览

点击右下角绿色 D 按钮 → 弹出深色面板 → 展示所有业务 data 字段，按类型着色，支持展开对象/数组查看内部结构。