无标题

核心实现

统一结果弹窗

项目最重要的公共组件是 miniprogram/components/api-result-popup/。

所有测试页面的 success 和 fail 回调都会走同一个结果展示组件。组件接收 API 名称、调用结果和原始数据，然后按以下规则显示：

• 字符串直接显示
• undefined 显示为 undefined
• null 显示为 null
• 对象和数组通过 JSON.stringify(value, null, 2) 格式化
• 无法序列化时显示明确的降级信息
• 复制时复制当前完整展示内容

这个设计保证了工具不会为了“展示好看”而修改微信 API 的返回结构。开发者看到的内容，和回调实际收到的数据保持一致。

历史数据与回调数据分离

历史服务位于：

miniprogram/services/history-store.js

它只负责本地历史的读取、写入、删除和清理。每条记录的外层保存 API、成功/失败状态和时间，API 原始回调单独放在 data 字段中。

写入时会自动限制为 50 条：

const record = {
  id: createId(),
  api,
  outcome,
  createdAt: Date.now(),
  data
}

wx.setStorageSync(HISTORY_KEY, [record, ...history].slice(0, MAX_HISTORY))

这样既可以按照工具维度筛选历史，也不会污染微信 API 原始数据。

参数校验与能力检测

公共工具位于：

miniprogram/utils/format.js

目前包含：

• formatRaw：格式化 API 原始结果
• isObject：判断对象类型
• parseNumber：将表单字符串转换为数字并校验范围
• notify：统一错误提示
• canUse：封装 wx.canIUse

例如订阅消息页面会先确认当前基础库支持目标 API，再清理空值、检查重复模板 ID 和数量，校验通过后才调用微信接口。

这种处理方式适合调试工具：错误尽可能在调用之前说明，而不是让用户面对一个难以理解的底层异常。

项目结构

开发测试小程序/
├── miniprogram/
│   ├── app.js                       # 小程序入口
│   ├── app.json                     # 页面路由、权限和组件注册
│   ├── app.wxss                     # 全局样式
│   ├── components/
│   │   ├── api-result-popup/        # 公共原始结果弹窗
│   │   └── vant/                    # 本地 Vant Weapp 组件
│   ├── pages/
│   │   ├── index/                   # 首页工具分类
│   │   ├── auth/                    # 登录与身份入口
│   │   ├── login/                   # wx.login
│   │   ├── phone/                   # getPhoneNumber 事件
│   │   ├── location/                # 位置与地图入口
│   │   ├── current-location/        # wx.getLocation
│   │   ├── choose-location/         # wx.chooseLocation
│   │   ├── open-location/           # wx.openLocation
│   │   ├── subscribe/               # 订阅消息
│   │   ├── permissions/             # 权限与隐私
│   │   ├── environment/             # 设备与环境
│   │   ├── clipboard/               # 剪贴板
│   │   ├── history/                 # 调用历史
│   │   └── settings/                # 本地设置
│   ├── services/
│   │   └── history-store.js         # 最近 50 条本地记录
│   ├── utils/
│   │   └── format.js                # 格式化、校验和能力检测
│   ├── package.json                 # 小程序依赖
│   └── sitemap.json                 # 页面索引配置
├── scripts/
│   ├── build-miniprogram-npm.js     # 生成本地 npm 组件
│   └── check-project.js             # 项目完整性和凭证检查
├── project.config.json              # 可共享的开发者工具配置
├── project.private.config.json      # 本地私有配置，不提交
├── package.json                     # 根目录脚本
├── README.md                        # 使用说明
└── LICENSE                          # MIT License

Vant Weapp 的使用方式

项目使用 Vant Weapp 提供基础交互组件，包括按钮、单元格、输入框、弹窗、单选框、开关、图标、标签、分割线和空状态等。

为了降低导入项目时的依赖问题，仓库已经在 miniprogram/components/vant/ 中保留本地组件源码。项目同时保留 npm 依赖和构建脚本：

npm install --prefix miniprogram
npm run build:miniprogram-npm

构建脚本会从：

miniprogram/node_modules/@vant/weapp/lib

复制到：

miniprogram/miniprogram_npm/@vant/weapp

在微信开发者工具中导入后，可以根据项目当前的组件引用方式完成编译；如果需要重新生成 npm 产物，执行上面的脚本即可。

如何运行

环境要求

• 微信开发者工具
• Node.js 18 或更高版本
• npm
• 自己的小程序 AppID

安装依赖

在项目根目录执行：

npm install --prefix miniprogram

导入微信开发者工具

1. 打开微信开发者工具
2. 选择“导入项目”
3. 选择项目根目录
4. 填入自己的小程序 AppID
5. 确认小程序目录为 miniprogram/
6. 编译并按需开启本地调试选项

项目中的 AppID 使用公开占位值，不包含真实 AppID。手机号、位置和订阅消息等能力必须使用自己的 AppID，并根据账号主体、认证状态、服务类目和隐私配置进行验证。

项目检查

根目录提供了一个轻量的项目检查脚本：

npm run check

它会检查：

• app.json 是否可以正常解析
• 14 个页面是否都在路由中声明
• 页面对应的 JavaScript 和 WXML 文件是否存在
• 必需的本地 Vant 组件是否存在
• miniprogram/package.json 是否声明 Vant 依赖
• 源码中是否出现疑似 AppSecret、session_key 或 access_token 的真实凭证

当前项目检查结果为：

Project check passed: 14 pages, app.json valid, no credential-like values.

这个脚本不能替代微信开发者工具编译和真机验证，但可以在提交前快速发现目录、配置和敏感信息问题。

数据安全边界

这个工具定位是前端 API 调试，不是业务后台，因此刻意保持了清晰的边界：

• 不提供后端服务
• 不实现 code2Session
• 不负责手机号换取
• 不发送订阅消息
• 不保存 AppSecret、session_key 或 access_token
• 不主动上传 API 调用历史
• 调用历史只保存在当前小程序本地
• 复制结果会写入系统剪贴板，敏感数据应在使用后自行清理

特别是登录 code、手机号动态令牌、位置数据和授权结果，都可能包含需要谨慎处理的信息。这个项目可以帮助调试和收集结果，但不会替代正式业务中的服务端安全设计。

适用场景

这个小程序适合：

• 开发微信小程序时快速验证某个原生 API
• 联调登录、位置、手机号或订阅消息能力
• 排查权限和隐私配置问题
• 对比开发者工具与真机环境差异
• 收集 API 成功或失败回调
• 给测试人员提供一个可操作的 API 测试入口
• 在没有业务页面的情况下单独验证微信能力

它不适合直接作为生产业务代码，也不应该把这里的测试结果处理方式原样复制到正式业务中。正式项目仍然需要服务端鉴权、敏感数据保护、错误处理和业务级权限控制。

目前的限制

微信小程序 API 的可用性并不只由代码决定，以下因素都可能影响测试结果：

• 小程序主体和认证状态
• 服务类目和微信后台配置
• 用户隐私保护指引
• 微信客户端版本
• 小程序基础库版本
• 开发者工具模拟环境
• iOS 或 Android 系统权限
• 是否由用户主动触发相关能力
• 位置、手机号和订阅消息等接口的平台限制

因此，开发者工具中调用成功，不代表真机、体验版或正式环境一定成功。涉及授权、位置、手机号和订阅消息的功能，应在自己的 AppID 和真实设备上完成最终验证。

总结

微信开发联调工具的核心价值，是把分散在微信官方文档、临时测试页面和控制台日志里的 API 调试工作，集中到一个小程序里完成。

它不是业务模板，也不是后端服务，而是一套专门用于“调用、观察、复制、复盘”的开发辅助工具：

填写参数
   ↓
调用微信原生 API
   ↓
展示 success / fail 原始回调
   ↓
复制结果或保存到本地历史

项目使用原生小程序技术栈，目录清晰、依赖简单，并通过统一结果弹窗、本地历史、参数校验和能力检测，把常见的 API 调试流程做成了可重复使用的工具。

项目源码目录：

/Users/webwlx/Documents/Myself/开发测试小程序

项目协议为 MIT，适合继续添加更多微信 API 测试页面和开发辅助能力。