# H5渠道配置

## 概述

H5是移动网页应用的重要形态，具有跨平台、免安装、易传播的特点。本文档描述了H5渠道的完整配置流程。

## 基本信息

- **渠道标识**: `h5`
- **渠道名称**: H5
- **渠道类型**: 移动网页
- **所属分组**: 网页端 (web)

## 配置要素

### 1. 基本配置

```php
// 渠道基本信息
'channel' => 'h5',
'name' => 'H5',
'status' => true, // 开启/关闭
'description' => 'H5移动网页应用平台接入'
```

### 2. 网页平台配置

#### 必填参数
- **域名**: 应用访问域名
- **CDN配置**: 静态资源CDN（可选）
- **SSL证书**: HTTPS证书配置

#### 配置示例
```php
'h5_config' => [
    'domain' => 'https://h5.yourdomain.com',
    'cdn_domain' => 'https://cdn.yourdomain.com',
    'ssl_enabled' => true,
    'cache_config' => [
        'enable' => true,
        'expire' => 3600, // 缓存过期时间
    ],
    'seo_config' => [
        'title' => '应用标题',
        'keywords' => '关键词',
        'description' => '应用描述'
    ]
]
```

#### 获取方式
1. 购买域名并完成备案
2. 配置DNS解析
3. 申请SSL证书
4. 配置CDN加速（可选）

### 3. 支付配置

H5支持以下支付方式：

#### 3.1 微信支付 ✅ (推荐)
- **状态**: 开启
- **优先级**: 1
- **配置要求**: 
  - 需要开通微信支付商户号
  - 配置H5支付
  - 设置支付域名

```php
'payment_config' => [
    'wechat' => [
        'enabled' => true,
        'app_id' => '微信公众号AppID',
        'mch_id' => '商户号',
        'key' => '商户密钥',
        'cert_path' => '证书路径',
        'notify_url' => '支付回调地址',
        'scene_info' => [
            'h5_info' => [
                'type' => 'Wap',
                'wap_url' => 'https://h5.yourdomain.com',
                'wap_name' => 'H5应用'
            ]
        ]
    ]
]
```

#### 3.2 支付宝支付 ✅
- **状态**: 开启
- **优先级**: 2
- **配置要求**: 
  - 需要开通支付宝商户号
  - 配置手机网站支付
  - 设置支付证书

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

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

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

#### 3.4 不支持的支付方式 ❌
- 线下支付
- 货到付款

### 4. 登录配置

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

```php
'login_config' => [
    'auto_login' => false, // H5通常不建议自动登录
    'auto_register' => true,
]
```

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

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

#### 4.3 第三方登录
- **微信登录**: 推荐使用
- **QQ登录**: 需要配置QQ互联
- **其他第三方登录**: 根据需要配置

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

### 5. 功能特性

| 功能 | 支持状态 | 说明 |
|------|---------|------|
| 支付功能 | ✅ | 支持微信支付、支付宝支付、余额支付 |
| 分享功能 | ✅ | 支持分享到各种平台 |
| 定位功能 | ✅ | 支持获取用户地理位置 |
| 拍照功能 | ✅ | 支持调用摄像头拍照 |
| 推送功能 | ❌ | 不支持推送通知 |

## 配置流程

### 1. 域名与服务器配置

1. **域名配置**
   - 购买域名并完成备案
   - 配置DNS解析到服务器
   - 申请SSL证书

2. **服务器配置**
   - 配置Web服务器（Nginx/Apache）
   - 配置HTTPS
   - 配置Gzip压缩

3. **CDN配置**（可选）
   - 配置静态资源CDN
   - 配置缓存策略
   - 配置缓存刷新

### 2. 系统后台配置

1. **基本信息配置**
   ```
   渠道状态: 开启
   渠道名称: H5
   渠道描述: H5移动网页应用平台
   ```

2. **平台参数配置**
   ```
   域名: https://h5.yourdomain.com
   CDN域名: https://cdn.yourdomain.com
   SSL状态: 开启
   ```

3. **支付方式配置**
   ```
   微信支付: 开启
   支付宝支付: 开启
   余额支付: 开启
   货到付款: 关闭
   ```

4. **登录方式配置**
   ```
   自动登录: 关闭
   绑定手机号: 开启
   微信登录: 开启
   QQ登录: 开启
   ```

### 3. 开发配置

1. **前端代码配置**
   ```javascript
   // config.js
   const config = {
     apiUrl: 'https://api.yourdomain.com',
     cdnUrl: 'https://cdn.yourdomain.com',
     channel: 'h5',
     payment: {
       wechat: true,
       alipay: true,
       balance: true
     }
   };
   ```

2. **登录授权**
   ```javascript
   // 微信登录
   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.location.href = authUrl;
   }
   ```

3. **支付调用**
   ```javascript
   // 微信支付
   function payWithWechat(orderInfo) {
     if (typeof WeixinJSBridge === 'undefined') {
       alert('请在微信中打开');
       return;
     }
     
     WeixinJSBridge.invoke('getBrandWCPayRequest', {
       appId: orderInfo.appId,
       timeStamp: orderInfo.timeStamp,
       nonceStr: orderInfo.nonceStr,
       package: orderInfo.package,
       signType: orderInfo.signType,
       paySign: orderInfo.paySign
     }, function(res) {
       if (res.err_msg == 'get_brand_wcpay_request:ok') {
         // 支付成功
       }
     });
   }
   ```

## 测试验证

### 1. 开发环境测试
- 使用Chrome开发者工具
- 测试移动设备适配
- 测试支付功能

### 2. 真机测试
- 在各种移动设备上测试
- 测试不同浏览器兼容性
- 验证支付功能

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

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

## 注意事项

1. **移动适配**
   - 使用响应式设计
   - 适配不同屏幕尺寸
   - 优化触摸交互

2. **性能优化**
   - 压缩静态资源
   - 使用CDN加速
   - 优化图片加载

3. **SEO优化**
   - 设置合适的meta标签
   - 优化页面标题和描述
   - 使用语义化HTML

4. **安全配置**
   - 使用HTTPS
   - 配置CSP策略
   - 防止XSS攻击

## 常见问题

### Q1: 如何在微信中调用支付？
A: 需要配置微信JSSDK，使用WeixinJSBridge调用支付接口。

### Q2: 为什么支付宝支付跳转后没有返回？
A: 检查return_url配置，确保返回地址可访问。

### Q3: 如何优化H5页面加载速度？
A: 使用CDN、压缩资源、优化图片、开启Gzip压缩。

### Q4: 如何处理跨域问题？
A: 配置CORS头部，或使用代理服务器。

## 相关链接

- [微信JS-SDK文档](https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html)
- [支付宝手机网站支付文档](https://opendocs.alipay.com/open/203/105285)
- [QQ互联文档](https://wiki.connect.qq.com/)
- [HTML5规范](https://www.w3.org/TR/html52/)
- [移动Web开发指南](https://developers.google.com/web/fundamentals)