滚雪球学支付宝小程序开发(2.4讲)：从支付到服务：支付宝 API 与网络通信的全面解析

2024-11-25 来源：个人技术集锦

✨ 上期回顾

在上一期内容中，我们探讨了 页面逻辑的处理，主要围绕 JavaScript 的实际应用展开，包括：

使用 JavaScript 处理页面逻辑：
我们学习了如何通过 JS 操控页面元素，实现动态更新，比如用户点击按钮时，页面内容会发生相应变化。这不仅提升了页面的交互性，还让用户体验更加友好。
数据绑定与事件处理：
数据绑定的核心是将界面展示与逻辑数据联动起来，省去繁琐的更新操作。同时，我们还深入学习了事件处理机制，包括如何绑定、解绑事件，以及常见事件的使用技巧。

通过这些知识，你应该对前端页面逻辑的构建有了更全面的认识。是不是觉得自己在编写交互逻辑时更得心应手了？?

? 前言

嘿，大家好！不知道你有没有遇到过这样的场景：在饭店结账时突然发现没带钱包，或者想买点东西结果手机支付提示“余额不足”。是不是有点尴尬？但别慌，我们今天的主题不聊余额，而是聊聊支付宝 API，这个让支付变得方便又灵活的“万能工具箱”。
对于开发者来说，支付宝 API 绝不仅仅是一个支付接口，它更像是一整套生态系统，为你提供从支付到服务的一站式解决方案。而且，要想灵活掌控它，必须掌握背后支持它运行的两大网络通信技术：HTTP 请求 和 WebSocket 实时通信。别害怕，这不是枯燥的技术文，而是一次诙谐有趣的“技术探秘之旅”。无论你是刚入门的菜鸟，还是有一定经验的开发者，这篇文章都能让你学到新东西！

? 什么是支付宝 API？

支付宝 API 是由支付宝官方提供的一套接口服务，可以帮助开发者在应用中集成支付宝的各种功能。不只是支付，它还覆盖了账单查询、交易管理、用户授权等多种业务场景。它就像一个“工具箱”，让你的应用更加智能、高效。

支付宝 API 的主要特点是安全性高、功能丰富且兼容性强，无论你是在 PC 端还是移动端开发，都可以轻松接入。以下是一些常见的应用场景：

在线支付：支持从商品购买到账单缴费的多种支付形式。
交易查询：快速查询交易记录和资金流水，方便对账。
用户授权：用 OAuth 机制帮助你获取用户的授权信息，比如姓名、手机号等。
回调通知：支付完成后，系统可以自动通知你订单状态。

? 初探支付宝 API 的核心功能

支付宝 API 的接口非常丰富，但对于大部分开发者来说，这几个功能是最常用的：

? 当面付

当面付是专为线下商铺设计的支付方式，用户通过扫码完成支付。它适用于奶茶店、小吃摊、商超等人流密集场景，是“扫码支付”最经典的应用之一。

? 网页支付

如果你在做电商网站或者需要在线支付的服务，比如订票、会员充值等，网页支付就是你的最佳选择。用户通过页面跳转到支付宝完成支付，支付完成后自动返回商户页面。

? App 支付

App 支付针对的是移动应用，比如外卖平台、共享单车等场景。在用户体验上，它更注重快捷性，用户点击“确认支付”后，几乎无缝完成付款。

? 查询与回调

支付完成后，系统可以自动通过回调通知你订单状态，或者你也可以主动查询支付结果。无论哪种方式，都能帮助你及时了解交易信息，方便后续业务处理。

? HTTP 请求：网络通信的基石

3.1 什么是 HTTP 请求？

HTTP，全称 HyperText Transfer Protocol（超文本传输协议），是网络通信中最常用的协议。你每天打开网页、刷微博、网购时，背后都是 HTTP 请求在默默支撑。简单来说，它的工作原理就是 “客户端发起请求，服务器返回响应”。

HTTP 请求的常见类型：

GET：用于获取资源，比如查询订单状态。
POST：用于提交数据，比如发起支付请求。
PUT：用于更新资源，比如修改订单内容。
DELETE：用于删除资源，适合处理取消订单等场景。

### 3.2 使用 HTTP 与支付宝 API 打交道

要使用支付宝 API，第一步就是构造 HTTP 请求。以下是一个示例，展示如何发起支付请求：

代码示例：

import requests

# 配置支付宝 API 的请求地址
api_url = "https://openapi.alipay.com/gateway.do"

# 请求参数
params = {
    "app_id": "your_app_id",
    "method": "alipay.trade.page.pay",
    "charset": "utf-8",
    "sign_type": "RSA2",
    "sign": "your_signature",
    "biz_content": {
        "out_trade_no": "order12345678",
        "total_amount": "100.00",
        "subject": "Test Order",
        "product_code": "FAST_INSTANT_TRADE_PAY"
    }
}

# 发起 HTTP POST 请求
response = requests.post(api_url, json=params)
print(response.json())

这个示例中，我们向支付宝服务器发送了一个支付请求，成功后会返回一个支付链接供用户跳转。你可能会问：“这不复杂啊？” 是的，但要注意的是，请求签名 和 响应验证 是这类接口的重点，稍有疏漏可能会导致支付失败。

#### 代码解析

接着我将对上述代码逐句进行一个详细解读，希望能够帮助到同学们，能以最快的速度对其知识点掌握于心，这也是我写此文的初衷，授人以鱼不如授人以渔，只有将其原理摸透，日后应对场景使用，才能得心应手，如鱼得水。所以如果有基础的同学，可以略过如下代码解析，针对没基础的同学，还是需要加强对代码的逻辑与实现，方便日后的你能更深入理解它并常规使用不受限制。以下是对我对这段代码的详细解析：

1. 引入依赖库

import requests

我们使用 requests 库发起 HTTP 请求，这是 Python 中非常流行的网络请求库。它简单易用，支持 GET、POST 等多种请求方法。

2. 配置支付宝 API 的请求地址

api_url = "https://openapi.alipay.com/gateway.do"

3. 构造请求参数

params = {
    "app_id": "your_app_id",
    "method": "alipay.trade.page.pay",
    "charset": "utf-8",
    "sign_type": "RSA2",
    "sign": "your_signature",
    "biz_content": {
        "out_trade_no": "order12345678",
        "total_amount": "100.00",
        "subject": "Test Order",
        "product_code": "FAST_INSTANT_TRADE_PAY"
    }
}

参数解析：

顶层参数：
- app_id：应用 ID，由支付宝分配，用于标识商户的应用，类似于唯一的身份标识。
- method：调用的接口名称，这里是 alipay.trade.page.pay，表示发起网页支付。
- charset：字符集，支付宝要求一般设置为 utf-8。
- sign_type：签名算法类型，推荐使用 RSA2，比 RSA 更安全。
- sign：签名字符串，用于验证请求的合法性，避免数据被篡改。需结合私钥进行计算。
业务参数（biz_content）：
- out_trade_no：商户订单号，必须唯一，用于标识这笔交易。
- total_amount：交易金额，单位为元，精确到小数点后两位。
- subject：订单标题，例如“测试订单”。
- product_code：产品码，此处为 FAST_INSTANT_TRADE_PAY，表示即时到账模式。

注意事项：

4. 发起 HTTP POST 请求

response = requests.post(api_url, json=params)

方法：
- 使用 requests.post 方法向支付宝网关发送 POST 请求。
- json=params 将参数以 JSON 格式传递，requests 会自动将其转为 HTTP 请求体。
支付宝的响应：
- 请求成功后，支付宝会返回一个 JSON 格式的响应，包含订单的处理结果或错误信息。

5. 打印响应结果

print(response.json())

将服务器返回的 JSON 数据解析为 Python 字典，并打印出来。
响应内容可能包括以下信息：
- 交易处理结果：如果支付请求成功，返回订单支付链接等信息。
- 错误信息：如果请求参数有误（如签名错误、金额无效），会返回对应的错误代码和描述。

6. 完整运行流程

构造请求参数，包括签名和业务参数。
使用 requests 发起 POST 请求。
接收并解析支付宝的响应结果。
将支付链接返回给前端供用户跳转，或者根据错误信息修正问题。

? WebSocket：实时通信的魔法

4.1 WebSocket 基础知识

WebSocket 是一种双向通信协议，允许客户端和服务器之间实时传输数据。与 HTTP 不同，它不需要频繁建立连接，而是一次连接后保持通信，这种“实时对话”特别适合需要快速更新的场景，比如：

实时支付通知：用户完成支付后，后台立刻通知前端刷新订单状态。
物流状态跟踪：每一步更新都能立即反馈到用户界面。
聊天系统：用户输入消息后，瞬间推送到对方窗口。

4.2 WebSocket 与支付宝服务交互的实战

下面是一个用 Python 实现的 WebSocket 示例，展示如何实时接收订单状态更新：

import websocket
import json

# 连接到 WebSocket 服务器
ws = websocket.WebSocket()
ws.connect("wss://alipay.com/realtime")

# 发送订阅请求
ws.send(json.dumps({
    "type": "subscribe",
    "order_id": "order12345678"
}))

# 接收订单状态更新
while True:
    response = ws.recv()
    print(f"订单状态更新：{response}")

这个例子模拟了一个在线订餐系统的实时订单推送。比如，用户支付完成后，厨房的屏幕上会立刻弹出订单信息，这种无缝体验就是 WebSocket 的魅力！

? 一个综合案例：支付宝支付+实时订单状态更新

为了更好地理解，我们通过一个综合案例把 HTTP 和 WebSocket 结合起来。假设你正在开发一个在线订餐系统，用户支付完成后，订单状态需要实时推送到厨房显示屏。以下是代码实现：

代码Coding

# 支付请求函数
def initiate_payment(order_id, amount):
    params = {
        "out_trade_no": order_id,
        "total_amount": amount,
        "subject": "Online Order Payment"
    }
    response = requests.post(api_url, json=params)
    return response.json()

# WebSocket 推送订单状态
def push_order_status(order_id, status):
    ws = websocket.WebSocket()
    ws.connect("wss://alipay.com/realtime")
    ws.send(json.dumps({"order_id": order_id, "status": status}))
    ws.close()

通过这样的实现，用户支付完成后，厨房立即收到订单信息，整个过程流畅高效，简直是“从支付到服务”的典范！

代码解析

1. 支付请求函数：`initiate_payment`

def initiate_payment(order_id, amount):
    params = {
        "out_trade_no": order_id,
        "total_amount": amount,
        "subject": "Online Order Payment"
    }
    response = requests.post(api_url, json=params)
    return response.json()

1.1 函数作用

initiate_payment 是一个发起支付请求的函数，用于向支付宝的支付接口提交订单信息。它接受两个参数：

order_id：订单号，用于标识一笔交易，通常是唯一的。
amount：交易金额，单位为元。

1.2 请求参数

params 是发送给支付宝的支付请求参数，其中包含关键信息：

out_trade_no：商户的订单号，必须唯一，标识这笔交易。
total_amount：交易金额，必须是大于 0 的合法数值，单位为元。
subject：交易标题，用于描述订单的简要信息，比如“在线订单支付”。

注意：

这里的参数只是部分业务参数，还需补充如 app_id、sign 等顶层参数，才能符合支付宝 API 的完整请求格式。

1.3 发送 POST 请求

response = requests.post(api_url, json=params)

api_url：支付宝网关地址，发送请求的目标地址。
json=params：以 JSON 格式发送参数，requests 会将 params 转换为 HTTP 请求体。

1.4 返回结果

return response.json()

使用 response.json() 解析支付宝返回的响应结果，返回一个 Python 字典，包含交易状态或错误信息。

示例调用

result = initiate_payment("order12345678", "99.99")
print(result)

2. WebSocket 推送订单状态：`push_order_status`

def push_order_status(order_id, status):
    ws = websocket.WebSocket()
    ws.connect("wss://alipay.com/realtime")
    ws.send(json.dumps({"order_id": order_id, "status": status}))
    ws.close()

2.1 函数作用

push_order_status 是一个通过 WebSocket 推送订单状态更新的函数，用于通知客户端某笔订单的最新状态。

2.2 参数解析

order_id：订单号，标识需要更新状态的交易。
status：订单的最新状态，如“支付成功”、“支付失败”、“待处理”等。

2.3 WebSocket 通信

ws = websocket.WebSocket()
创建一个 WebSocket 连接对象，允许进行实时通信。
ws.send(...)
使用 send 方法发送订单状态更新数据。数据以 JSON 格式组织，包括两个关键字段：
- order_id：订单号，用于标识需要更新的具体交易。
- status：状态信息，具体值可以根据业务场景定义。
ws.close()
通信完成后关闭 WebSocket 连接，释放资源。

示例调用

push_order_status("order12345678", "支付成功")

3. 代码整体逻辑

支付发起：
用户发起支付请求时，initiate_payment 函数将订单数据发送给支付宝 API，支付宝返回支付链接或错误信息。
状态推送：
订单状态变化时，push_order_status 函数通过 WebSocket 实时将最新状态推送给前端，确保用户及时获取反馈。

4. 改进建议

异常处理：
- 网络异常可能导致 WebSocket 连接失败，应捕获相关异常并处理。
- 如果服务器返回错误状态码（如认证失败、订单不存在），需要做相应的回退逻辑。
状态定义：
- 明确 status 的所有可能值，并在客户端处理这些状态，比如“支付处理中”、“支付失败”等。
安全性：
- 通过加密和认证机制确保推送数据的合法性，防止伪造或篡改。
连接管理：
- 避免频繁建立和关闭 WebSocket 连接，建议通过长连接方式批量推送状态更新。

5. 综合优化后的实现

def initiate_payment(order_id, amount):
    try:
        params = {
            "out_trade_no": order_id,
            "total_amount": amount,
            "subject": "Online Order Payment",
            # 需要补充的完整参数
        }
        response = requests.post(api_url, json=params, timeout=10)  # 超时时间为10秒
        response.raise_for_status()  # 检查响应状态码
        return response.json()
    except requests.exceptions.RequestException as e:
        print(f"支付请求失败：{e}")
        return {"error": str(e)}

def push_order_status(order_id, status):
    try:
        ws = websocket.WebSocket()
        ws.connect("wss://alipay.com/realtime")
        ws.send(json.dumps({"order_id": order_id, "status": status}))
        ws.close()
    except websocket.WebSocketException as e:
        print(f"WebSocket 推送失败：{e}")

6. 适用场景

电商平台：实现订单支付与实时状态更新。
订餐系统：支付完成后立即通知商家备餐。
物流系统：实时跟踪订单状态更新并推送给用户。

通过完善以上代码，可以打造一个高效、稳定的支付与通知系统。

? 延伸思考：从支付到服务的未来趋势

支付宝 API 已经在支付领域深入人心，但它的潜力远不止于此。以下是一些可能的应用方向：

**智能

客服系统**：通过 WebSocket 实现实时在线解答，提升用户体验。

IoT 场景支付：智能设备间实现自动结算，比如充电桩扫码付款。
个性化推荐：结合支付数据和用户画像，为用户提供精准的商品推荐。

? 总结与感悟

通过今天的内容，我们不仅了解了支付宝 API 的核心功能，还掌握了 HTTP 和 WebSocket 在实际开发中的应用。技术的魅力就在于，它能将复杂的场景转化为简单的实现。希望你在学习的过程中，不仅能提高技术水平，还能收获开发的乐趣！

“技术改变生活，代码创造未来！”让我们一起用代码赋能世界吧！?

?️ 下期预告

在下一期，我们将深入探讨 本地存储的妙用，主要包括以下内容：

数据缓存的基本操作：
我们会学习如何使用 setStorage 和 getStorage 操作本地存储，实现数据的长期保存和快速读取。
缓存优化实践：
探讨在前端开发中如何通过本地存储提升性能，比如离线状态下的用户数据保持，以及减轻服务器请求压力的最佳实践。

做好准备！下一期的内容不仅让你的项目更加高效，还能让你更好地理解前端性能优化的秘密！?️

?? 福利赠与你 ??

无论你是计算机专业的学生，还是对编程有兴趣的小伙伴，都建议直接毫无顾忌的学习此专栏，bug菌郑重承诺，凡是学习此专栏的同学，均能获取到所需的知识和技能，全网最快速入门小程序编程，就像滚雪球一样，越滚越大，指数级提升。

最后，如果这篇文章对你有所帮助，帮忙给作者来个一键三连，关注、点赞、收藏，您的支持就是我坚持写作最大的动力。

同时欢迎大家关注公众号: ，以便学习更多同类型的技术文章，免费白嫖最新BAT互联网公司面试题、4000G pdf电子书籍、简历模板、技术文章Markdown文档等海量资料。

✨️ Who am I?

我是bug菌， | | | | | | 等社区博客专家，C站博客之星Top30，华为云2023年度十佳博主，掘金多年度人气作者Top40，掘金等各大社区平台签约作者，51CTO年度博主Top12，掘金/InfoQ/51CTO等社区优质创作者；全网粉丝合计 30w+；更多精彩福利点击；硬核微信公众号，欢迎你的加入！免费白嫖最新BAT互联网公司面试真题、4000G PDF电子书籍、简历模板等海量资料，你想要的我都有，关键是你不来拿。

-End-

显示全文

全部栏目

滚雪球学支付宝小程序开发(2.4讲)： 从支付到服务：支付宝 API 与网络通信的全面解析

✨ 上期回顾

? 前言

? 什么是支付宝 API？

? 初探支付宝 API 的核心功能

? 当面付

? 网页支付

? App 支付

? 查询与回调

? HTTP 请求：网络通信的基石

3.1 什么是 HTTP 请求？

代码示例：

1. 引入依赖库

2. 配置支付宝 API 的请求地址

3. 构造请求参数

4. 发起 HTTP POST 请求

5. 打印响应结果

6. 完整运行流程

? WebSocket：实时通信的魔法

4.1 WebSocket 基础知识

4.2 WebSocket 与支付宝服务交互的实战

? 一个综合案例：支付宝支付+实时订单状态更新

代码Coding

代码解析

1. 支付请求函数：initiate_payment

1.1 函数作用

1.2 请求参数

1.3 发送 POST 请求

1.4 返回结果

示例调用

2. WebSocket 推送订单状态：push_order_status

2.1 函数作用

2.2 参数解析

2.3 WebSocket 通信

示例调用

3. 代码整体逻辑

4. 改进建议

5. 综合优化后的实现

6. 适用场景

? 延伸思考：从支付到服务的未来趋势

? 总结与感悟

?️ 下期预告

?? 福利赠与你 ??

✨️ Who am I?

滚雪球学支付宝小程序开发(2.4讲)：从支付到服务：支付宝 API 与网络通信的全面解析

1. 支付请求函数：`initiate_payment`

2. WebSocket 推送订单状态：`push_order_status`