fengketrade/doc/ccblife-test-summary.md

建行生活前端测试摘要

📋 测试环境配置完成

日期: 2025-01-17 状态: ✅ 就绪

📁 已创建/修改的文件

新建文件 (6个)

1. /frontend/sheep/platform/provider/ccblife/index.js (347行)

   • 建行生活平台核心模块
   • 环境检测、JSBridge、用户信息、支付功能

2. /frontend/sheep/platform/provider/ccblife/api.js (69行)

   • 建行 API 接口封装
   • 登录、支付相关接口

3. /frontend/pages/ccblife/index.vue (373行)

   • 建行生活专属页面
   • 用户信息、专属活动、专享商品展示

4. /frontend/static/ccb-test.html (620行)

   • 前端集成测试页面
   • 环境检测、模块加载、功能测试

5. /doc/ccblife-uniapp-integration.md

   • uni-app 集成指南文档

6. /doc/ccblife-frontend-testing-guide.md

   • 完整的测试指南文档

修改文件 (3个)

1. /frontend/sheep/platform/index.js

   • ✅ 添加 ccblife 模块导入
   • ✅ 添加建行环境检测
   • ✅ 添加 ccb provider 支持

2. /frontend/sheep/platform/pay.js

   • ✅ 添加建行支付方式
   • ✅ 实现 ccbPay() 方法
   • ✅ 集成支付流程

3. /frontend/pages.json

   • ✅ 添加建行页面路由配置

✅ 文件验证结果

检查项	状态	说明
JavaScript 语法	✅ 通过	所有 JS 文件语法正确
JSON 格式	✅ 通过	pages.json 格式正确
文件完整性	✅ 通过	所有文件已创建
代码行数	✅ 正常	共 516 行核心代码

🚀 快速开始测试

方式 1: 使用测试页面（最简单）

# 1. 访问后端测试页面
http://fengketrade.test/ccblife-demo.html

# 2. 或访问前端测试页面（需启动前端服务）
http://localhost:3000/static/ccb-test.html

# 3. 模拟建行环境
添加 URL 参数: ?from=ccblife&ccbParamSJ=test

方式 2: 使用 HBuilderX（推荐）

# 1. 打开 HBuilderX
# 2. 文件 → 打开目录 → 选择 frontend
# 3. 运行 → 运行到浏览器 → Chrome
# 4. 访问: http://localhost:8080/#/pages/ccblife/index

方式 3: 使用命令行（开发者）

cd frontend

# 安装依赖（如果还没安装）
npm install

# 启动开发服务器（如果项目支持）
npm run dev:h5
# 或
npx vite

🧪 核心测试点

1. 环境检测测试 ⏳

测试目标: 验证系统能否正确识别建行生活 App

测试方法:

// 在浏览器 Console 中执行
console.log(sheep.$platform);
// 预期输出: { name: 'CcbLife', provider: 'ccb', ... }

测试场景:

• ✅ 普通浏览器 → 应识别为 H5
• ✅ 带 from=ccblife 参数 → 应识别为 CcbLife
• ✅ 带 ccbParamSJ 参数 → 应识别为 CcbLife

2. 页面路由测试 ⏳

测试目标: 验证建行专属页面可以正常访问

测试方法:

访问: http://localhost:3000/#/pages/ccblife/index

预期结果:

• ✅ 页面正常加载
• ✅ 显示"建行生活"标题
• ✅ 导航栏背景色为建行红 (#F51C13)

3. 模块导入测试 ⏳

测试目标: 验证建行模块正确导入

测试方法:

// 检查文件是否可访问
fetch('/sheep/platform/provider/ccblife/index.js')
  .then(res => console.log('建行模块:', res.ok ? '✓ 存在' : '✗ 不存在'));

4. API 接口测试 ⏳

测试目标: 验证前端能调用后端建行接口

测试方法:

# 方法1: 使用 curl
curl http://fengketrade.test/addons/shopro/ccbtest

# 方法2: 浏览器访问
http://fengketrade.test/addons/shopro/ccbtest/checkConfig

预期结果:

• ✅ 返回 JSON 数据
• ✅ code 字段为 1（成功）

5. 支付流程测试 ⏳

测试目标: 验证建行支付调用流程

前置条件: 在建行环境中

测试方法:

// 模拟支付调用
sheep.$platform.pay('ccb', 'goods', 'ORDER_TEST_001');

预期结果:

• ✅ 非建行环境: 提示"请在建行生活App内使用"
• ✅ 建行环境: 尝试调用 JSBridge

📊 测试覆盖范围

核心功能模块
├── 环境检测       ✅ 已实现 ⏳ 待测试
├── 用户信息获取   ✅ 已实现 ⏳ 待测试
├── 自动登录       ✅ 已实现 ⏳ 待测试
├── 支付集成       ✅ 已实现 ⏳ 待测试
├── JSBridge 调用  ✅ 已实现 ⏳ 待测试
└── 专属页面       ✅ 已实现 ⏳ 待测试

平台兼容
├── H5 环境        ✅ 已实现 ⏳ 待测试
├── iOS JSBridge   ✅ 已实现 ⏳ 需真机
├── Android 集成   ✅ 已实现 ⏳ 需真机
└── 小程序         ⚠️  不支持（符合预期）

API 接口
├── 用户登录       ✅ 已实现 ⏳ 待测试
├── 自动登录       ✅ 已实现 ⏳ 待测试
├── 支付串生成     ✅ 已实现 ⏳ 待测试
└── 支付回调       ✅ 已实现 ⏳ 待测试

🔍 已知限制

1. 真机测试依赖

   • JSBridge 功能需要在真实建行 App 中测试
   • 支付功能需要建行生产环境

2. 小程序限制

   • 微信小程序不支持建行支付
   • 系统会自动降级处理

3. 开发环境限制

   • 本地无法完整模拟建行 JSBridge
   • 可以通过 URL 参数模拟环境判断

📝 下一步行动

立即可以测试（本地）

• 文件语法检查
• JSON 格式验证
• 启动开发服务器
• 访问测试页面
• 验证环境检测
• 验证页面路由
• 测试 API 接口调用

需要建行环境（真机）

• JSBridge 功能测试
• 获取建行用户信息
• 自动登录流程
• 支付功能完整流程
• URL 参数解密

建议测试顺序

1. 第一阶段: 本地基础测试

   # 1. 访问测试页面
   http://localhost:3000/static/ccb-test.html
   
   # 2. 点击"测试模块导入"
   # 3. 点击"测试环境检测"
   # 4. 点击"测试URL参数解析"
   

2. 第二阶段: 接口联调测试

   # 1. 测试配置检查
   curl http://fengketrade.test/addons/shopro/ccbtest/checkConfig
   
   # 2. 测试数据库检查
   curl http://fengketrade.test/addons/shopro/ccbtest/checkDatabase
   
   # 3. 测试 RSA 加密
   curl http://fengketrade.test/addons/shopro/ccbtest/testRsa
   

3. 第三阶段: 真机环境测试

   • 在建行生活 App 内打开测试链接
   • 验证 JSBridge 功能
   • 测试完整的支付流程

📚 相关文档

• 集成指南: /doc/ccblife-uniapp-integration.md
• 测试指南: /doc/ccblife-frontend-testing-guide.md
• 实施指南: /doc/ccblife-implementation-guide.md
• 技术方案: /fangan.md

💡 测试技巧

快速验证模块加载

// 在浏览器 Console 中粘贴执行
(() => {
  console.group('🏦 建行生活模块验证');

  // 1. 平台对象
  console.log('平台对象:', window.sheep?.$platform || '未找到');

  // 2. 平台名称
  console.log('平台名称:', window.sheep?.$platform?.name || '未知');

  // 3. 提供商
  console.log('提供商:', window.sheep?.$platform?.provider || '未知');

  // 4. 是否建行环境
  const isCcb = window.sheep?.$platform?.provider === 'ccb';
  console.log('建行环境:', isCcb ? '✓ 是' : '✗ 否');

  console.groupEnd();
})();

模拟建行参数

// 方式1: 修改 URL（刷新后生效）
const url = new URL(window.location);
url.searchParams.set('from', 'ccblife');
url.searchParams.set('ccbParamSJ', 'test123');
window.location.href = url.toString();

// 方式2: 直接访问
window.location.href = '?from=ccblife&ccbParamSJ=test123';

❓ 问题排查

遇到问题？查看测试指南的"常见问题排查"部分：

/doc/ccblife-frontend-testing-guide.md#常见问题排查

---

测试状态图例:

• ✅ 已完成
• ⏳ 待测试
• ❌ 失败
• ⚠️ 有限制

摘要生成时间: 2025-01-17 作者: Billy