Files
happy-life-star/docs/superpowers/plans/2026-03-18-mini-program-diagnostic-logs-plan.md
T
peanut 6a423da5f0 docs: 创建小程序诊断日志实现计划
- 添加 env.js 环境配置日志任务
- 添加 request.js API 请求日志任务
- 定义验证步骤和故障排查指南

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-18 22:44:26 +08:00

6.4 KiB
Raw Blame History

小程序体验版诊断日志功能实现计划

For agentic workers: REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (- [ ]) syntax for tracking.

Goal: 在小程序 env.js 和 request.js 中添加诊断日志,用于定位体验版无法调用接口的问题

Architecture: 在两个关键位置添加条件日志:env.js 的 getConfig() 函数输出环境配置解析结果,request.js 的请求/响应回调输出 API 调用详情,仅在 DEBUG=true 时打印

Tech Stack: UniApp, Vue 3, JavaScript, console.log, uni.request


Chunk 1: env.js 环境配置日志

Task 1: 在 env.js 中添加环境配置诊断日志

Files:

  • Modify: mini-program/src/config/env.js:35-46 (getConfig 函数)

前置检查: 确认当前 env.js 的 getConfig 函数结构

  • Step 1: 读取 env.js 当前内容

读取文件确认 getConfig() 函数的确切代码结构

  • Step 2: 修改 getConfig 函数添加日志

getConfig() 函数的 return 语句之前添加:

  // 添加诊断日志
  if (debug) {
    console.log('[ENV] 环境配置:', {
      rawEnv: import.meta.env.VITE_APP_ENV,
      normalizedEnv: currentEnv,
      API_BASE_URL: apiBaseUrl,
      WS_URL: wsUrl,
      DEBUG: debug,
      isFromEnvFile: import.meta.env.VITE_API_BASE_URL ? 'yes' : 'fallback-to-config'
    })
  }
  • Step 3: 验证代码语法

运行:

cd mini-program
npm run dev:h5

预期:开发服务器启动,无语法错误

  • Step 4: 提交
git add mini-program/src/config/env.js
git commit -m "feat: 添加 env.js 环境配置诊断日志

- 在 getConfig() 函数中添加条件日志输出
- 输出原始环境变量、解析后配置、来源标识
- 仅在 DEBUG=true 时打印"

Chunk 2: request.js API 请求日志

Task 2: 在 request.js 中添加请求日志

Files:

  • Modify: mini-program/src/services/request.js:25-56 (request 函数)

前置检查: 确认 request.js 的当前结构和 import 语句

  • Step 1: 读取 request.js 当前内容

确认 request() 函数的确切代码结构和导入语句

  • Step 2: 添加 debug 变量获取和请求日志

request() 函数开头添加:

const request = (options) => {
  const debug = getEnvValue('DEBUG')
  const fullUrl = `${API_BASE_URL}${options.url}`

  // 请求日志
  if (debug) {
    console.log('[API Request]', {
      method: options.method || 'GET',
      url: fullUrl,
      path: options.url,
      env: import.meta.env.VITE_APP_ENV
    })
  }

  return new Promise((resolve, reject) => {
    uni.request({
      url: fullUrl,
      // ... 其余代码
  • Step 3: 修改 success 回调添加响应日志

在 success 回调中,const { data, statusCode } = res 之后添加:

// 响应日志
if (debug) {
  console.log('[API Response]', {
    path: options.url,
    status: statusCode,
    code: data?.code,
    success: data?.code === 200 || data?.code === 0
  })
}
  • Step 4: 修改 fail 回调添加错误日志

在 fail 回调中添加:

fail: (err) => {
  // 错误日志
  if (debug) {
    console.error('[API Error]', {
      path: options.url,
      error: err.errMsg,
      env: import.meta.env.VITE_APP_ENV
    })
  }
  reject(new Error(err.errMsg || '网络错误'))
}
  • Step 5: 验证代码语法

运行:

cd mini-program
npm run dev:h5

预期:开发服务器启动,无语法错误,浏览器 Console 可见日志输出

  • Step 6: 提交
git add mini-program/src/services/request.js
git commit -m "feat: 添加 request.js API 请求诊断日志

- 在 request() 函数中添加请求/响应/错误日志
- 输出完整 URL、状态码、错误信息
- 仅在 DEBUG=true 时打印"

Chunk 3: 验证和测试

Task 3: 编译体验版并验证日志输出

Files:

  • Test: 手动验证编译后的体验版

  • Step 1: 编译体验版代码

cd mini-program
npm run build:mp-weixin:test

预期:编译成功,输出目录 unpackage/dist/test/mp-weixin

  • Step 2: 微信开发者工具导入
  1. 打开微信开发者工具
  2. 导入目录:unpackage/dist/test/mp-weixin
  3. 打开调试面板(Console
  • Step 3: 触发登录请求
  1. 在登录页面输入手机号(如 19928748688
  2. 点击"获取验证码"按钮
  3. 观察 Console 输出
  • Step 4: 检查日志输出

确认看到以下日志:

[ENV] 环境配置:{
  rawEnv: "test",
  normalizedEnv: "test",
  API_BASE_URL: "https://lifescript.happylifeos.com/api",  ← 确认是 HTTPS
  WS_URL: "wss://lifescript.happylifeos.com/ws",
  DEBUG: true,
  isFromEnvFile: "yes"
}
[API Request] {
  method: "GET",
  url: "https://lifescript.happylifeos.com/api/auth/sms-code",
  path: "/auth/sms-code",
  env: "test"
}
  • Step 5: 记录诊断结果

根据日志输出判断:

  • 如果 API_BASE_URL 是 HTTP IP → .env.test 未注入,检查构建配置

  • 如果 API_BASE_URL 正确但连接失败 → 微信域名白名单或 SSL 问题

  • 如果无日志输出 → DEBUG 标志或编译模式问题

  • Step 6: 提交验证报告

将日志输出截图或文本记录到 issue 或文档中


完成标准

  • env.js 添加了环境配置诊断日志
  • request.js 添加了请求/响应/错误日志
  • 日志仅在 DEBUG=true 的环境(dev/test)打印
  • 体验版编译成功
  • 微信开发者工具中可见日志输出
  • 能够确认 API_BASE_URL 的实际值

故障排查指南

问题 1:没有日志输出

可能原因:

  1. DEBUG 标志未正确设置
  2. 编译模式不正确(应使用 test 模式)

解决方法:

# 确认使用 test 模式编译
npm run build:mp-weixin:test

问题 2API_BASE_URL 是 HTTP IP 而非 HTTPS 域名

可能原因: .env.test 文件未被 Vite 正确读取

解决方法:

  1. 检查 .env.test 文件是否存在且格式正确
  2. 检查 vite.config.js 中的 env 配置
  3. 尝试清理缓存后重新编译

问题 3:日志显示连接错误

可能原因: 微信域名白名单未配置或 SSL 证书问题

解决方法:

  1. 确认微信公众平台已配置 request 合法域名
  2. 确认 SSL 证书有效且未过期
  3. 尝试在微信开发者工具中勾选"不校验合法域名"