recyc/fengketrade

Fork 0

mirror of https://gitee.com/liuxioabin/fengketrade.git synced 2026-04-17 12:57:32 +08:00

Billy eee44f2816 bug修复

2025-10-20 15:29:15 +08:00

6.9 KiB

Raw Blame History

建行生活 uni-app 前端集成指南

概述

本文档介绍了如何在 Shopro uni-app 前端项目中集成建行生活功能，包括用户登录、支付、专属页面等功能。

已实现的前端功能

1. 平台集成模块

位置: /frontend/sheep/platform/provider/ccblife/

index.js - 建行生活平台核心模块
- 环境检测（检测是否在建行App内）
- JSBridge 初始化和管理
- 用户信息获取
- 自动登录
- 支付调起
- 原生方法调用
api.js - API 接口封装
- URL 跳转登录
- 自动登录
- 支付串生成
- 支付回调

2. 支付集成

位置: /frontend/sheep/platform/pay.js

已在现有支付系统中添加了建行支付（ccb）支持：

// 支付方式现在支持
payment = ['wechat','alipay','ccb','money','offline']

3. 平台识别

位置: /frontend/sheep/platform/index.js

系统会自动识别建行生活环境：

平台名称：CcbLife
提供商：ccb
平台标识：ccblife

4. 建行专属页面

位置: /frontend/pages/ccblife/index.vue

建行生活专属页面，展示：

建行用户信息
专属优惠活动
专享商品
建行特色功能

使用指南

1. 检测建行环境

import sheep from '@/sheep';

// 检查是否在建行App内
if (sheep.$platform.provider === 'ccb') {
    console.log('在建行生活App内');
}

// 或直接使用平台对象
import CcbLifePlatform from '@/sheep/platform/provider/ccblife/index';

if (CcbLifePlatform.isInCcbApp) {
    console.log('在建行生活App内');
}

2. 获取建行用户信息

import CcbLifePlatform from '@/sheep/platform/provider/ccblife/index';

// 获取用户信息
CcbLifePlatform.getUserInfo().then(result => {
    if (result.code === 0) {
        console.log('用户信息:', result.data);
        // data包含: ccb_user_id, mobile, nickname, avatar
    }
}).catch(error => {
    console.error('获取用户信息失败:', error);
});

3. 自动登录流程

平台会自动处理登录流程，无需手动调用：

用户从建行App进入H5页面
系统自动检测建行环境
自动获取用户信息并登录
保存Token到本地存储

手动触发登录：

import CcbLifePlatform from '@/sheep/platform/provider/ccblife/index';

// 手动触发自动登录
CcbLifePlatform.autoLogin();

4. 建行支付集成

在订单支付页面

// 支付方式选择
const payMethods = [
    {
        value: 'wechat',
        name: '微信支付',
        icon: 'wechat'
    },
    {
        value: 'alipay',
        name: '支付宝',
        icon: 'alipay'
    },
    {
        value: 'ccb',
        name: '建行支付',
        icon: 'ccb',
        // 只在建行App内显示
        show: sheep.$platform.provider === 'ccb'
    }
];

发起支付

import sheep from '@/sheep';

// 调起支付
sheep.$platform.pay('ccb', 'goods', orderSN);

5. 监听事件

// 监听登录成功事件
uni.$on('ccb:login:success', (data) => {
    console.log('建行用户登录成功', data);
    // 更新UI或执行其他操作
});

// 在页面销毁时移除监听
onUnmounted(() => {
    uni.$off('ccb:login:success');
});

6. 条件编译

在需要区分平台的代码中使用条件编译：

// #ifdef H5
import CcbLifePlatform from '@/sheep/platform/provider/ccblife/index';

if (CcbLifePlatform.isInCcbApp) {
    // 建行App内的特殊处理
}
// #endif

页面路由配置

在 pages.json 中添加建行相关页面：

{
    "pages": [
        {
            "path": "pages/ccblife/index",
            "style": {
                "navigationBarTitleText": "建行生活",
                "navigationBarBackgroundColor": "#F51C13",
                "navigationBarTextStyle": "white"
            }
        }
    ]
}

测试流程

1. 本地测试

# 进入前端目录
cd frontend

# 安装依赖
npm install

# 运行H5
npm run dev:h5

2. 模拟建行环境

在浏览器中添加URL参数模拟建行环境：

http://localhost:3000/#/pages/index/index?from=ccblife&ccbParamSJ=xxx

3. 真机测试

使用 HBuilderX 打包H5应用
部署到测试服务器
在建行生活App内访问测试地址

注意事项

1. 平台判断优先级

系统按以下优先级判断平台：

建行生活 (CcbLife)
微信公众号 (WechatOfficialAccount)
普通H5 (H5)

2. JSBridge 兼容性

iOS：使用 WebViewJavascriptBridge
Android：使用 window.mbspay 对象

3. 支付流程

用户选择建行支付
调用后端生成支付串
通过JSBridge调起建行收银台
支付完成后回调通知后端
更新订单状态

4. 错误处理

try {
    const result = await CcbLifePlatform.payment(options);
    // 处理成功
} catch (error) {
    if (error.code === -1) {
        // 不在建行App内
        uni.showToast({
            title: '请在建行生活App内使用',
            icon: 'none'
        });
    } else {
        // 其他错误
        console.error(error);
    }
}

常见问题

Q: 如何判断是否在建行App内？

import sheep from '@/sheep';

// 方式1：通过平台对象
if (sheep.$platform.provider === 'ccb') {
    // 在建行App内
}

// 方式2：直接使用建行平台模块
import CcbLifePlatform from '@/sheep/platform/provider/ccblife/index';
if (CcbLifePlatform.isInCcbApp) {
    // 在建行App内
}

Q: 自动登录失败怎么办？

检查是否在建行App内
确认后端接口正常
查看控制台错误信息
清除本地缓存重试

// 清除缓存
uni.removeStorageSync('token');
uni.removeStorageSync('userInfo');

// 重新触发登录
CcbLifePlatform.autoLogin();

Q: 支付无响应？

确认在建行App内
检查JSBridge是否就绪
验证支付串格式
查看原生日志

// 检查JSBridge状态
CcbLifePlatform.ready(() => {
    console.log('JSBridge已就绪');
});

Q: 如何调试？

在建行平台模块中开启调试模式：

// frontend/sheep/platform/provider/ccblife/index.js
const config = {
    debug: true  // 开启调试
};

扩展开发

添加新的原生方法调用

// 在 CcbLifePlatform 中添加新方法
async customMethod() {
    return new Promise((resolve, reject) => {
        this.callNative('customMethod', {
            // 参数
        }, (result) => {
            if (result.success) {
                resolve(result);
            } else {
                reject(result);
            }
        });
    });
}

添加新的API接口

// 在 api.js 中添加
newApi: (data) => {
    return request({
        url: '/ccblife/newApi',
        method: 'POST',
        data: data
    });
}

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

6.9 KiB Raw Blame History Unescape Escape