fastadmin_tailored/docs/channel/h5.md

H5渠道配置

概述

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

基本信息

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

配置要素

1. 基本配置

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

2. 网页平台配置

必填参数

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

配置示例

'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支付
  • 设置支付域名

'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
• 配置要求:
  • 需要开通支付宝商户号
  • 配置手机网站支付
  • 设置支付证书

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

3.3 余额支付 ✅

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

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

3.4 不支持的支付方式 ❌

• 线下支付
• 货到付款

4. 登录配置

4.1 自动登录

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

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

4.2 绑定手机号

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

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

4.3 第三方登录

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

'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. 前端代码配置

   // config.js
   const config = {
    apiUrl: 'https://api.yourdomain.com',
    cdnUrl: 'https://cdn.yourdomain.com',
    channel: 'h5',
    payment: {
      wechat: true,
      alipay: true,
      balance: true
    }
   };
   

   1. 登录授权 ``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; } ```

2. 支付调用

   // 微信支付
   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. 接口测试

   # 测试登录接口
   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文档
• 支付宝手机网站支付文档
• QQ互联文档
• HTML5规范
• 移动Web开发指南