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

建行生活前端测试指南

测试环境准备

1. 前端项目结构确认

确认以下文件已正确创建：

frontend/
├── sheep/platform/
│   ├── provider/ccblife/
│   │   ├── index.js          ✅ 已创建
│   │   └── api.js             ✅ 已创建
│   ├── index.js               ✅ 已修改（添加建行支持）
│   └── pay.js                 ✅ 已修改（添加建行支付）
├── pages/ccblife/
│   └── index.vue              ✅ 已创建
├── static/
│   └── ccb-test.html          ✅ 已创建（测试页面）
└── pages.json                 ✅ 已修改（添加路由配置）

2. 检查文件完整性

cd /Users/billy/Code/fengketrade.com/frontend

# 检查建行模块文件
ls -l sheep/platform/provider/ccblife/

# 检查建行页面
ls -l pages/ccblife/

# 检查测试页面
ls -l static/ccb-test.html

测试方法

方法一：使用 HBuilderX（推荐）

这是 uni-app 项目的标准开发方式。

步骤 1: 打开项目

1. 启动 HBuilderX
2. 文件 → 打开目录 → 选择 frontend 目录
3. 等待项目加载完成

步骤 2: 运行到浏览器

1. 点击工具栏的"运行"按钮
2. 选择"运行到浏览器" → "Chrome"（或其他浏览器）
3. 等待编译完成，会自动打开浏览器

步骤 3: 访问测试页面

在浏览器中访问：

http://localhost:8080/static/ccb-test.html

或访问建行专属页面：

http://localhost:8080/#/pages/ccblife/index

步骤 4: 模拟建行环境

在 URL 后添加参数模拟建行环境：

http://localhost:8080/#/pages/index/index?from=ccblife&ccbParamSJ=test123

方法二：使用 Vite 开发服务器

如果项目配置了 Vite，可以使用命令行运行。

步骤 1: 安装依赖

cd frontend
npm install

步骤 2: 启动开发服务器

# 如果有 dev:h5 脚本
npm run dev:h5

# 或者直接使用 vite
npx vite

步骤 3: 访问测试页面

默认地址：http://localhost:3000（端口以实际为准）

方法三：使用测试服务器

将前端代码部署到测试服务器。

步骤 1: 访问后端静态测试页面

http://fengketrade.test/ccblife-demo.html

这个页面已经在后端 public 目录创建，可以直接访问。

步骤 2: 访问测试接口

http://fengketrade.test/addons/shopro/ccbtest

测试项目清单

1. 模块加载测试

测试目标

验证建行模块是否正确导入和初始化。

测试步骤

1. 打开浏览器开发者工具（F12）
2. 访问测试页面
3. 在 Console 中输入：

// 检查 sheep 对象
console.log(window.$shop || window.sheep);

// 检查平台对象
console.log(sheep.$platform);

// 检查平台名称
console.log(sheep.$platform.name);

// 检查提供商
console.log(sheep.$platform.provider);

预期结果

• 在非建行环境：name 应该是 H5 或 WechatOfficialAccount
• 在建行环境：name 应该是 CcbLife，provider 应该是 ccb

2. 环境检测测试

测试目标

验证系统能否正确识别建行生活 App 环境。

测试步骤

情况 1：普通浏览器

访问: http://localhost:3000/
预期: 识别为 H5 或 WechatOfficialAccount 环境

情况 2：模拟建行环境（URL 参数）

访问: http://localhost:3000/?from=ccblife
预期: 识别为 CcbLife 环境

情况 3：模拟建行参数

访问: http://localhost:3000/?ccbParamSJ=test123
预期: 识别为 CcbLife 环境

验证方法

在 Console 中执行：

// 方法1：通过平台对象
console.log(sheep.$platform.provider === 'ccb' ? '建行环境' : '非建行环境');

// 方法2：直接导入模块（在实际项目中）
// import CcbLifePlatform from '@/sheep/platform/provider/ccblife/index';
// console.log(CcbLifePlatform.isInCcbApp);

3. 页面路由测试

测试目标

验证建行专属页面是否可以正常访问。

测试步骤

1. 访问首页

http://localhost:3000/#/pages/index/index

2. 访问建行专属页面

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

3. 使用路由跳转

在任意页面的 Console 中执行：

uni.navigateTo({
    url: '/pages/ccblife/index'
});

预期结果

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

4. API 接口测试

测试目标

验证前端能否正确调用后端建行接口。

测试步骤

在 Console 中执行：

// 测试1：URL跳转登录接口
fetch('/addons/shopro/ccblife/login?ccbParamSJ=test')
    .then(res => res.json())
    .then(data => console.log('登录接口:', data))
    .catch(err => console.error('登录接口错误:', err));

// 测试2：环境检查
fetch('/addons/shopro/ccbtest/checkConfig')
    .then(res => res.json())
    .then(data => console.log('配置检查:', data))
    .catch(err => console.error('配置检查错误:', err));

// 测试3：数据库检查
fetch('/addons/shopro/ccbtest/checkDatabase')
    .then(res => res.json())
    .then(data => console.log('数据库检查:', data))
    .catch(err => console.error('数据库检查错误:', err));

预期结果

• 接口返回 JSON 格式数据
• 不应该出现 404 或 500 错误

5. 支付功能测试

测试目标

验证建行支付流程是否正常。

前置条件

• 已登录用户
• 有可支付的订单

测试步骤

1. 创建测试订单（可选）

访问: http://fengketrade.test/#/pages/goods/index?id=1
添加商品到购物车 → 去结算 → 提交订单

2. 选择建行支付

在支付页面，如果在建行环境中，应该看到"建行支付"选项。

3. 模拟支付调用

在 Console 中执行：

// 注意：这需要有实际的订单
sheep.$platform.pay('ccb', 'goods', 'ORDER202501170001');

预期结果

• 非建行环境：提示"请在建行生活App内使用建行支付"
• 建行环境（模拟）：尝试调用 JSBridge

6. 日志和错误测试

测试目标

验证错误处理和日志记录是否正常。

测试步骤

1. 查看 Console 日志

启动应用后，在 Console 中应该看到：

[CcbLife] 初始化完成, 是否在建行App内: false

2. 触发错误

在非建行环境调用建行功能：

// 应该输出友好的错误提示
sheep.$platform.useProvider('ccb').getUserInfo()
    .catch(err => console.log('预期的错误:', err));

预期结果

• 有清晰的日志输出
• 错误信息友好可读

使用静态测试页面

访问 http://fengketrade.test/static/ccb-test.html（或前端开发服务器对应地址）

测试页面功能

1. 环境信息显示

   • 自动检测当前平台
   • 显示是否在建行App内
   • 显示 User-Agent 和 URL 参数

2. 模块加载测试

   • 点击"测试模块导入"按钮
   • 检查建行模块文件是否存在

3. 环境检测测试

   • 点击"测试环境检测"按钮
   • 查看多种检测方式的结果

4. URL参数测试

   • 点击"测试URL参数解析"按钮
   • 验证参数解析功能

模拟建行环境

在测试页面 URL 后添加参数：

?from=ccblife&ccbParamSJ=testdata123

完整示例：

http://localhost:3000/static/ccb-test.html?from=ccblife&ccbParamSJ=testdata123

常见问题排查

问题1：页面打不开

症状：访问建行页面显示 404

排查步骤：

1. 检查 pages.json 是否正确配置

grep -A 10 "ccblife" pages.json

2. 检查页面文件是否存在

ls -l pages/ccblife/index.vue

3. 重新编译项目（在 HBuilderX 中点击"停止" → "运行"）

问题2：模块导入失败

症状：Console 显示 "Cannot find module" 错误

排查步骤：

1. 检查文件路径

ls -l sheep/platform/provider/ccblife/

2. 检查文件内容是否有语法错误

node --check sheep/platform/provider/ccblife/index.js

3. 清除缓存重新编译

问题3：平台识别错误

症状：在建行环境中仍识别为 H5

排查步骤：

1. 检查 URL 参数

console.log(window.location.search);

2. 检查 User-Agent

console.log(navigator.userAgent);

3. 手动测试检测函数

const urlParams = new URLSearchParams(window.location.search);
console.log('from参数:', urlParams.get('from'));
console.log('ccbParamSJ参数:', urlParams.get('ccbParamSJ'));

问题4：API 请求失败

症状：接口返回 404 或跨域错误

排查步骤：

1. 检查后端服务是否运行

curl http://fengketrade.test/addons/shopro/ccbtest

2. 检查 .env 配置

cat .env | grep SHOPRO_BASE_URL

3. 检查跨域配置（如果前后端分离）

真机测试

iOS 设备测试

1. 使用 Safari 调试

   • Mac 上打开 Safari → 开发 → [设备名] → [页面]
   • 可以查看 Console 和调试

2. HBuilderX 真机运行

   • 连接 iOS 设备
   • 运行 → 运行到手机或模拟器 → iOS

Android 设备测试

1. 使用 Chrome 调试

   • 电脑 Chrome 访问 chrome://inspect
   • 查看设备上的页面

2. HBuilderX 真机运行

   • 连接 Android 设备（开启 USB 调试）
   • 运行 → 运行到手机或模拟器 → Android

性能测试

加载时间

在 Console 中查看：

// 查看性能数据
console.log(performance.timing);

// 计算加载时间
const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart;
console.log('页面加载时间:', loadTime + 'ms');

内存使用

使用 Chrome DevTools：

1. Performance → 录制
2. 操作页面
3. 停止录制
4. 查看内存使用情况

测试报告模板

## 建行生活前端测试报告

**测试日期**: 2025-01-17
**测试环境**: [开发环境/测试环境]
**测试人员**: [姓名]

### 测试结果

| 测试项 | 状态 | 备注 |
|-------|------|------|
| 模块加载 | ✅ 通过 | 所有模块正常加载 |
| 环境检测 | ✅ 通过 | 正确识别建行环境 |
| 页面路由 | ✅ 通过 | 页面可以正常访问 |
| API接口 | ✅ 通过 | 接口返回正常 |
| 支付功能 | ⏳ 待测试 | 需要建行真机环境 |

### 发现的问题

1. [问题描述]
   - **严重程度**: 高/中/低
   - **复现步骤**: ...
   - **预期行为**: ...
   - **实际行为**: ...

### 建议

1. [建议内容]

---

文档版本：1.0.0 最后更新：2025-01-17 作者：Billy