# H5 登录卡住问题分析与小程序端修复方案

---

## 一、问题描述

### 1.1 现象

从小程序跳转到 H5 页面后，页面一直显示"正在获取登录信息..."，无法正常加载首页或引导页。

### 1.2 调试信息

H5 调试面板（`?debug=1`）输出：

```
url        https://mp.yizhezhe.com/app_03/
isWxMp     (空 — 实际为 true，因 false 渲染为空)
hasTokenParam  (空 — URL 中无 token 参数)
step       wx-postMessage-done  (已发送 NEED_TOKEN 请求)
```

### 1.3 根因分析

H5 登录流程有三个路径：

| 分支 | 触发条件 | 预期行为 |
|------|---------|---------|
| URL 有 token | `?token=***` | 解码 token → 登录 → 跳首页 |
| 小程序环境 | 检测到 `MicroMessenger` + `miniprogram` | 发 `postMessage({NEED_TOKEN})` 等小程序响应 |
| 浏览器开发 | 其他情况 | 调 `dev-login` 自动登录 |

当前状态：URL **没有 token**，而是进入了第 2 条路。H5 向小程序发送了 `postMessage({ type: "NEED_TOKEN" })`，但**小程序侧没有监听和处理这条消息**，导致 H5 永远停在"正在获取登录信息..."。

---

## 二、修复方案

### 方案 A（推荐）：打开 web-view 时直接带上 token

H5 不需要发 `NEED_TOKEN` 消息。每次打开 web-view 时，小程序直接把 token 拼到 URL 里。

```javascript
// 小程序侧 — 打开 web-view 的页面中
Page({
  data: {
    // 小程序自己的 token（通过 wx.login / 微信登录获取）
    token: 'eyJ0e...Egnk',
  },

  onLoad() {
    // 确保 token 已就绪后再打开 web-view
    this.ensureToken().then(token => {
      this.setData({ token });
    });
  },

  async ensureToken() {
    // 此处用小程序自己的登录逻辑获取 token
    // 示例：如果已有缓存则用缓存，否则先登录
    const cached = wx.getStorageSync('auth_token');
    if (cached) return cached;
    // 登录逻辑...
    return token;
  },

  // WXML: <web-view src="{{webviewUrl}}">
  get webviewUrl() {
    const base = 'https://mp.yizhezhe.com/app_03/';
    const token = this.data.token;
    // 有 token 就加 ?token=，没有就不加（H5 会 fallback 到 dev-login）
    return token ? `${base}?token=${encodeURIComponent(token)}` : base;
  },
});
```

**优点：**
- 最简单直接，无额外消息通信
- H5 拿到 token 后一步到位完成登录
- 不需要修改 H5 端代码

---

### 方案 B：监听 NEED_TOKEN 消息后回传

如果 web-view 先打开（URL 不带 token），H5 检测到小程序环境后发 `NEED_TOKEN` 消息，小程序接收后把 token 写回 URL。

```javascript
// 小程序侧 — web-view 所在的页面
Page({
  onLoad() {
    // 确保小程序侧准备好接收 postMessage
  },

  // web-view 的 bindmessage 回调
  onMessage(e) {
    const data = e.detail.data || e.detail; // 兼容不同版本
    console.log('web-view 消息:', data);

    if (data.type === 'NEED_TOKEN') {
      // 获取 token 并传递回 web-view
      const token = this.getToken();
      if (!token) {
        console.error('token 未就绪，无法响应 NEED_TOKEN');
        return;
      }

      // 方式 1: 重新加载 web-view 的 src（推荐）
      const base = 'https://mp.yizhezhe.com/app_03/';
      const webview = this.selectComponent('#webview');
      // 注意: 小程序 web-view 不支持直接改 src，需要用 navigateTo 重新打开
      wx.navigateTo({
        url: `/pages/webview/webview?token=${encodeURIComponent(token)}`,
      });

      // 方式 2: 如果 web-view 通过页面参数传递 token（适合小程序自定义导航）
      // 见方案 A，在打开时直接带上 token
    }
  },

  getToken() {
    return wx.getStorageSync('auth_token');
  },
});
```

对应 WXML：

```html
<web-view 
  id="webview" 
  src="https://mp.yizhezhe.com/app_03/"
  bindmessage="onMessage"
/>
```

**缺点：**
- 需要额外一轮消息通信，H5 会先显示"正在获取登录信息..."再刷新
- 小程序 `web-view` 组件没有直接修改 `src` 的 API，只能重新 `navigateTo`
- 用户体验不如方案 A 顺滑

---

## 三、推荐方案对比

| 维度 | 方案 A（URL 带 token） | 方案 B（消息回调） |
|------|-----------------------|------------------|
| 实现复杂度 | 低 | 中 |
| 用户体验 | 流畅（一步到位） | 有闪烁（页面刷新） |
| H5 端改动 | 不需要 | 不需要 |
| 小程序端改动 | 加 URL 拼接 | 加 bindmessage 回调 |
| 额外通信 | 无 | 一轮 postMessage |
| token 过期处理 | 打开时即携带最新 token | 可能携带过期 token 再等 NEED_TOKEN |

**结论：采用方案 A。**

---

## 四、H5 端问题关联修改

### 4.1 Debug 面板布尔值修复

当前 `DebugPanel` 渲染布尔值 `false` 时会因为 `{v || "(空)"}` 显示为空。需要改：

```tsx
// 当前（有 bug）：
<td>{v || <span className="text-gray-500">(空)</span>}</td>

// 修复后：
<td>{v === false ? 'false' : v === true ? 'true' : v || <span className="text-gray-500">(空)</span>}</td>
```

### 4.2 `isWechatMiniProgram()` 废弃

如果小程序采用方案 A（打开时直接带 token），H5 不再需要 `isWechatMiniProgram` 检测和 `NEED_TOKEN` 消息发送逻辑。上线后可清理：

```typescript
// LoginPage.tsx — 删除以下代码段
if (isWechatMiniProgram()) {
  try {
    (window as any).wx?.miniProgram?.postMessage({ type: "NEED_TOKEN" });
  } catch {}
  setError("正在获取登录信息...");
  return;
}
```

---

## 五、验证步骤

1. 小程序侧按方案 A 修改，确保打开 web-view 时 URL 带 `?token=***`
2. 访问 `https://mp.yizhezhe.com/app_03/?token=***&debug=1`
3. 检查调试面板：`hasTokenParam=true`、`step=decode-ok` 或 `step=fetch-ok`
4. 确认跳转到 `/home` 或 `/onboarding`
5. 关闭 `?debug=1` 正常使用
6. （可选）清理 DebugPanel 和 `isWechatMiniProgram` 相关代码