支付宝面对面对接个人赞赏页

​🚀 核心功能拆解​#

1. ​动态支付二维码生成​

1
// 调用第三方API生成二维码（示例）
2
<img src="https://api.qrtool.cn/?text=<?php echo urlencode($qrCode); ?>">

• 通过alipays://协议深度链接唤起支付宝APP
• 移动端自动识别设备类型，显示「点击跳转支付宝」按钮

2. ​捐赠记录实时展示​

1
// 数据库查询最新66条记录
2
$sql = "SELECT * FROM donations ORDER BY created_at DESC LIMIT 66";
3
while($row = $result->fetch_assoc()) {
4
    echo '<li>网友'.$row.'赠送：'.$row.'</li>';
5
}

• 采用瀑布流式滚动设计
• 统计总金额和捐赠人次（SQL聚合查询）

3. ​支付状态轮询机制​

1
// 每5秒轮询支付状态
2
setInterval(function() {
3
    $.ajax({ url: "/pay/query.php?action=serve", data: { gid: "<?php echo $orderId; ?>" } });
4
}, 5000);
5

6
// 60秒自动刷新防重复支付
7
setTimeout(() => window.location.reload(), 60000);

• 参考支付宝官方推荐的轮询策略
• 前端使用Layer.js实现支付成功弹窗提示

​🔧 技术亮点​#

1. ​设备自适应设计​
   通过isMobile()函数检测设备类型，动态切换H5/PC布局：

1
function isMobile() {
2
    $ua = $_SERVER ?? '';
3
    return (strpos($ua, 'Mobile') !== false) || (strpos($ua, 'MicroMessenger') !== false);
4
}

2. ​防重复支付设计​

• 生成带时间戳的订单号createNewOrderNo()
• 数据库记录支付请求参数和状态

3. ​安全增强措施​

• 使用htmlspecialchars()过滤用户输入
• 限制二维码有效期为60秒
• 关键参数加密传输（示例未展示具体实现）

​📊 数据统计展示​#

通过底部统计模块直观展示捐赠影响力：

1
$sql_stats = "SELECT COUNT(*) as total_count, SUM(amount) as total_amount FROM donations";
2
echo "共有[{$stats['total_count']}]位暖心人捐赠，总计[{$stats['total_amount']}]元";

• 数字动态更新，增强用户参与感
• 采用「恰饭」「零食」等趣味化文案

​💡 开发心得​#

1. ​支付宝接口选择​
   个人开发者推荐使用「当面付」或「电脑网站支付」接口，前者无需营业执照即可申请
2. ​性能优化点​

• 使用CDN加载Bootstrap/jQuery（减少服务器压力）
• 捐赠记录分页加载（当前示例限制66条）

3. ​扩展可能性​

• 接入微信支付实现双渠道收款
• 添加打赏留言功能（需注意内容审核）
• 数据可视化图表展示

​源码结构参考：

donate ├── config/
│ └── db.php # 数据库配置文件
│
├── pay/
│ ├── pay.php # 支付宝支付核心处理类
│ ├── pay_template.php # 支付页面模板
│ ├── query.php # 支付状态查询处理
│ └── public/ # 支付页面静态资源
│ ├── style.css
│ └── jquery.min.js
│
├── style/
│ ├── css/
│ │ └── style.css # 主页样式文件
│ └── js/
│ ├── jquery-3.2.1.min.js
│ ├── layer/ # layer弹窗组件
│ │ └── layer.js
│ └── style.js # 主页JS逻辑
│
├── sql/
│ ├── donation.sql # 捐赠记录表结构
│ └── orders.sql # 订单表结构
│
├── favicon.ico # 网站图标
└── index.php

​✒️ 修改配置​#

• 修改pay/pay.php中的支付宝参数

1
define('ALIPAY_APPID', '你的支付宝APPID');
2
define('ALIPAY_PRIVATE_KEY', "-----BEGIN RSA PRIVATE KEY-----\n" .
3
    "你的支付宝应用私钥" .
4
    "\n-----END RSA PRIVATE KEY-----");
5

6
define('ALIPAY_PUBLIC_KEY', "-----BEGIN PUBLIC KEY-----\n" .
7
    "你的支付宝公钥" .
8
    "\n-----END PUBLIC KEY-----");

• 修改pay/pay.php中63行的默认值，创建订单的时候，f12查询元素然后复制链接即可

1
  return 'https://qr.alipay.com/你的默认收款标号';

​🌐 效果预览​#

通过这个项目，不仅实现了支付功能的技术验证，更深刻体会到「细节决定体验」—— 从自动换菜名的趣味交互，到支付成功的暖心提示，每一个微小设计都在传递温度

源码获取：

https://github.com/uurani/donate.git”>https://github.com/uurani/donate.git”>https://github.com/uurani/donate.git

演示地址：

https://donate.muxui.com/“>https://donate.muxui.com/“>https://donate.muxui.com/