PC渠道配置

概述

PC是桌面网页应用的重要平台，具有大屏幕、高分辨率、丰富交互的特点。本文档描述了PC渠道的完整配置流程。

基本信息

渠道标识: pc
渠道名称: PC
渠道类型: 桌面网页
所属分组: 网页端 (web)

配置要素

1. 基本配置

// 渠道基本信息
'channel' => 'pc',
'name' => 'PC',
'status' => true, // 开启/关闭
'description' => 'PC桌面网页应用平台接入'

2. 网页平台配置

必填参数

域名: 应用访问域名
CDN配置: 静态资源CDN（可选）
SSL证书: HTTPS证书配置

配置示例

'pc_config' => [
    'domain' => 'https://www.yourdomain.com',
    'cdn_domain' => 'https://cdn.yourdomain.com',
    'ssl_enabled' => true,
    'cache_config' => [
        'enable' => true,
        'expire' => 3600, // 缓存过期时间
    ],
    'seo_config' => [
        'title' => '应用标题',
        'keywords' => '关键词',
        'description' => '应用描述'
    ],
    'analytics' => [
        'google_analytics' => 'UA-XXXXXXXX-X',
        'baidu_analytics' => 'your_baidu_id'
    ]
]

获取方式

购买域名并完成备案
配置DNS解析
申请SSL证书
配置CDN加速（可选）

3. 支付配置

PC支持以下支付方式：

3.1 支付宝支付 ✅ (推荐)

状态: 开启
优先级: 1
配置要求:
- 需要开通支付宝商户号
- 配置即时到账
- 设置支付证书

'payment_config' => [
    'alipay' => [
        'enabled' => true,
        'app_id' => '支付宝应用ID',
        'private_key' => '应用私钥',
        'public_key' => '支付宝公钥',
        'notify_url' => '支付回调地址',
        'return_url' => '支付返回地址'
    ]
]

3.2 线下支付 ✅

状态: 开启
优先级: 2
说明: 用户选择线下支付方式，如银行转账、现金等

'payment_config' => [
    'offline' => [
        'enabled' => true,
        'methods' => [
            'bank_transfer' => '银行转账',
            'cash' => '现金支付',
            'pos' => 'POS机刷卡'
        ]
    ]
]

3.3 余额支付 ✅

状态: 开启
优先级: 3
说明: 用户使用账户余额进行支付

'payment_config' => [
    'balance' => [
        'enabled' => true,
        'min_amount' => 0.01, // 最小支付金额
        'max_amount' => 100000, // 最大支付金额
    ]
]

3.4 不支持的支付方式 ❌

微信支付
货到付款

4. 登录配置

4.1 自动登录

状态: 开启/关闭
说明: 进入应用后，用户将会自动授权登录，未注册用户将会自动注册

'login_config' => [
    'auto_login' => false, // PC通常不建议自动登录
    'auto_register' => true,
    'remember_login' => true, // 记住登录状态
]

4.2 绑定手机号

状态: 开启/关闭
说明: 授权登录后，未绑定手机号的用户，将会立即提醒绑定手机号

'login_config' => [
    'force_mobile' => true,
    'mobile_verify' => true, // 手机号验证
]

4.3 第三方登录

QQ登录: 推荐使用
微信登录: 需要配置微信开放平台
其他第三方登录: 根据需要配置

'login_config' => [
    'qq_login' => [
        'enabled' => true,
        'app_id' => 'QQ互联AppID',
        'app_key' => 'QQ互联AppKey'
    ],
    'wechat_login' => [
        'enabled' => true,
        'app_id' => '微信开放平台AppID',
        'app_secret' => '微信开放平台AppSecret',
        'scope' => 'snsapi_login'
    ]
]

5. 功能特性

功能	支持状态	说明
支付功能	✅	支持支付宝支付、线下支付、余额支付
分享功能	❌	不支持原生分享功能
定位功能	❌	不支持获取用户地理位置
拍照功能	❌	不支持调用摄像头拍照
推送功能	❌	不支持推送通知

配置流程

1. 域名与服务器配置

域名配置
- 购买域名并完成备案
- 配置DNS解析到服务器
- 申请SSL证书
服务器配置
- 配置Web服务器（Nginx/Apache）
- 配置HTTPS
- 配置Gzip压缩
CDN配置（可选）
- 配置静态资源CDN
- 配置缓存策略
- 配置缓存刷新

2. 系统后台配置

基本信息配置

渠道状态: 开启
渠道名称: PC
渠道描述: PC桌面网页应用平台

平台参数配置

域名: https://www.yourdomain.com
CDN域名: https://cdn.yourdomain.com
SSL状态: 开启

支付方式配置

微信支付: 关闭
支付宝支付: 开启
余额支付: 开启
线下支付: 开启

登录方式配置

自动登录: 关闭
绑定手机号: 开启
QQ登录: 开启
微信登录: 开启

3. 开发配置

前端代码配置
```
// config.js
const config = {
 apiUrl: 'https://api.yourdomain.com',
 cdnUrl: 'https://cdn.yourdomain.com',
 channel: 'pc',
 payment: {
   wechat: false,
   alipay: true,
   balance: true,
   offline: true
 },
 responsive: {
   minWidth: 1024, // 最小宽度
   maxWidth: 1920  // 最大宽度
 }
};
```
1. 登录授权 ```javascript // QQ登录 function loginWithQQ() { QC.Login.showPopup({ appId: 'your_app_id', redirectURI: 'https://www.yourdomain.com/callback' }); }
// 微信登录 function loginWithWechat() { const redirectUri = encodeURIComponent(window.location.href); const authUrl = https://open.weixin.qq.com/connect/qrconnect?appid=${appId}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect;

window.open(authUrl, '_blank', 'width=400,height=600'); } ```

支付调用

// 支付宝支付
function payWithAlipay(orderInfo) {
 const form = document.createElement('form');
 form.method = 'POST';
 form.action = 'https://openapi.alipay.com/gateway.do';
     
 Object.keys(orderInfo).forEach(key => {
   const input = document.createElement('input');
   input.type = 'hidden';
   input.name = key;
   input.value = orderInfo[key];
   form.appendChild(input);
 });
     
 document.body.appendChild(form);
 form.submit();
}

测试验证

1. 开发环境测试

使用Chrome开发者工具
测试不同分辨率适配
测试支付功能

2. 浏览器兼容性测试

测试Chrome、Firefox、Safari等浏览器
测试IE11等旧版浏览器
验证功能完整性

3. 接口测试

# 测试登录接口
curl -X POST "https://api.yourdomain.com/api/login" \
-H "Content-Type: application/json" \
-d '{"code":"授权code","channel":"pc"}'

# 测试支付接口
curl -X POST "https://api.yourdomain.com/api/payment/create" \
-H "Content-Type: application/json" \
-d '{"amount":100,"channel":"pc","payment_type":"alipay"}'

注意事项

响应式设计
- 适配不同屏幕分辨率
- 考虑最小支持宽度
- 优化大屏幕显示效果
性能优化
- 压缩静态资源
- 使用CDN加速
- 启用浏览器缓存
SEO优化
- 设置合适的meta标签
- 优化页面标题和描述
- 使用语义化HTML
安全配置
- 使用HTTPS
- 配置CSP策略
- 防止XSS攻击
浏览器兼容性
- 考虑IE11等旧版浏览器
- 使用polyfill支持新特性
- 提供降级方案

常见问题

Q1: 如何处理IE浏览器兼容性？

A: 使用polyfill、避免使用ES6+语法、提供降级方案。

Q2: 为什么不支持微信支付？

A: PC端微信支付需要扫码，用户体验不如支付宝，建议使用支付宝支付。

Q3: 如何优化PC端加载速度？

A: 使用CDN、压缩资源、优化图片、启用Gzip压缩。

Q4: 如何实现响应式设计？

A: 使用CSS媒体查询、弹性布局、相对单位等技术。

pc.md 8.4 KB

History Raw

PC渠道配置

概述

基本信息

配置要素

1. 基本配置

2. 网页平台配置

必填参数

配置示例

获取方式

3. 支付配置

3.1 支付宝支付 ✅ (推荐)

3.2 线下支付 ✅

3.3 余额支付 ✅

3.4 不支持的支付方式 ❌

4. 登录配置

4.1 自动登录

4.2 绑定手机号

4.3 第三方登录

5. 功能特性

配置流程

1. 域名与服务器配置

2. 系统后台配置

3. 开发配置

测试验证

1. 开发环境测试

2. 浏览器兼容性测试

3. 接口测试

注意事项

常见问题

Q1: 如何处理IE浏览器兼容性？

Q2: 为什么不支持微信支付？

Q3: 如何优化PC端加载速度？

Q4: 如何实现响应式设计？

相关链接

pc.md 8.4 KB History Raw

PC渠道配置

概述

基本信息

配置要素

1. 基本配置

2. 网页平台配置

必填参数

配置示例

获取方式

3. 支付配置

3.1 支付宝支付 ✅ (推荐)

3.2 线下支付 ✅

3.3 余额支付 ✅

3.4 不支持的支付方式 ❌

4. 登录配置

4.1 自动登录

4.2 绑定手机号

4.3 第三方登录

5. 功能特性

配置流程

1. 域名与服务器配置

2. 系统后台配置

3. 开发配置

测试验证

1. 开发环境测试

2. 浏览器兼容性测试

3. 接口测试

注意事项

常见问题

Q1: 如何处理IE浏览器兼容性？

Q2: 为什么不支持微信支付？

Q3: 如何优化PC端加载速度？

Q4: 如何实现响应式设计？

相关链接

pc.md 8.4 KB

History Raw