---
title: 支付宝收款码前端动态渲染
published: 2025-05-14
tags: [前端, 教程]
category: 教程
draft: false
---

import AlipayTip from '@/components/alipay/AlipayTip.astro'


# 支付宝收款码使用浏览器动态渲染

无需自己上传收款码图片，用户输入金额后前端自动生成对应金额的转账二维码，个人账户原生支持，只需到官网获取账户ID即可调用。

### 先看成果：

<AlipayTip />

### 技术解析

原理是前端调用`alipays://`支付宝私有协议，是支付宝`Alipay`客户端使用的私有 URL 协议，也叫`URL Scheme`，用于通过网页、App 或其他外部应用调用支付宝客户端，执行特定动作，比如打开某个页面、发起支付、跳转小程序等。

示例：
```
alipays://platformapi/startapp?appId=20000123&actionType=scan&biz_data={"s":"money","u":"2088xxxxxx","a":"10","m":"打赏支持"}
```
然后使用`qrcode`将私有协议链接转换为二维码就行了。

参数解析：

`appId=20000123`：支付宝内置的"转账到个人账户"功能编号

`actionType=scan`：指定操作为扫码支付

`biz_data`：核心业务参数（JSON格式，需URL编码）：

`s: "money"`：固定值，表示转账业务

`u: "2088xxxxxx"`：收款方支付宝UID（用户唯一标识）

`a: "10"`：初始转账金额（单位：元）

`m: "打赏支持"`：转账备注（显示在支付宝账单）