更新记录

1.0.5（2025-11-24）

支持 支付功能

1.0.4（2025-11-13）

修复已知问题

1.0.3（2025-10-22）

修复已知问题

平台兼容性

uni-app(4.36)

uni-app x(4.36)

tt-alipay-pro

🚀 完整版支付宝SDK插件，为 uni-app x & uni-app 提供支付宝授权登录和支付解决方案

📱 支持平台：uni-app x (TypeScript) 和 uni-app (JavaScript)

🎉 专业版：专为需要支付宝支付功能的项目设计，与官方支付宝支付插件完美兼容！

📖 目录

• 功能支持矩阵
• 环境配置
• 快速开始
• 功能介绍
  • 支付宝授权登录
  • 支付宝支付
• 错误处理
• 常见问题
• 版本对比

功能支持矩阵

📚 推荐阅读

• 支付宝完整版授权使用说明
• 支付宝完整版授权请求参数和返回说明

🚨 重要提示

⚠️ 必须使用自定义基座运行，否则无法找到插件方法

环境配置

前置条件

1. 在支付宝开放平台申请移动应用
2. 获取 AppID
3. 配置应用包名和签名

Android平台配置

✅ 无需额外配置：Android 平台无需修改 AndroidManifest.xml 文件，插件已自动处理相关配置。

HarmonyOS平台配置

⚠️ 重要授权说明:

• uni-app 项目: 由于官方目前不支持试用以及普通授权，建议通过示例中的 uni-app x 项目测通后购买源码授权使用
• uni-app x 项目: 可直接使用

配置项目module.json5

在项目根目录的 harmony-configs/entry/src/main/module.json5 文件中添加支付宝相关配置：

{
  "module": {
    "name": "entry",
    "type": "entry",
    "description": "$string:module_desc",
    "mainElement": "EntryAbility",
    "deviceTypes": [
      "phone",
      "tablet",
      "2in1"
    ],
    "deliveryWithInstall": true,
    "installationFree": false,
    "pages": "$profile:main_pages",
    "querySchemes": [
      "apmqpdispatch"  // 支付宝回调scheme，必须添加
    ],
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ets",
        "description": "$string:EntryAbility_desc",
        "icon": "$media:layered_image",
        "label": "$string:EntryAbility_label",
        "startWindowIcon": "$media:startIcon",
        "startWindowBackground": "$color:start_window_background",
        "exported": true,
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ]
      }
    ],
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ]
  }
}

重要说明：

• 必须在 querySchemes 中添加 "apmqpdispatch"，这是支付宝回调的必要配置
• 确保网络权限已正确配置
• 支付宝授权通过系统服务调用，需要正确的scheme配置
• HarmonyOS平台仅支持授权登录功能，不支持电子发票和代扣业务

iOS平台配置

配置插件Info.plist

直接修改插件根目录的 uni_modules/tt-alipay-pro/utssdk/app-ios/Info.plist 文件：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    <key>CFBundleURLTypes</key>
    <array>
      <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLName</key>
        <string>alipay</string>
        <key>CFBundleURLSchemes</key>
        <array>
           <!-- 建议设置为 ali + appid的md5值，确保唯一性 -->
          <string>tt-alipay-pro</string>
        </array>
      </dict>
    </array>
  </dict>
</plist>

重要说明：

• 将 tt-alipay-pro 替换为您的实际scheme
• 建议使用 ali + appid的md5值 作为scheme，确保唯一性
• scheme必须与代码中使用的完全一致
• 确保在支付宝开放平台配置中保持一致

快速开始

1. 导入插件

uni-app x 平台（推荐使用 Composition API）

import * as alipay from "@/uni_modules/tt-alipay-pro";
import { ref, onMounted, onUnmounted } from 'vue';

export default {
    setup() {
        const alipayImpl = ref<alipay.TTAliOpenSDK | null>(null);

        onMounted(() => {
            // 获取支付宝SDK实例
            alipayImpl.value = alipay.getTTAliOpenSDK();
        });

        onUnmounted(() => {
            alipayImpl.value = null;
        });

        return {
            alipayImpl
        };
    }
}

uni-app x 平台（Options API）

import * as alipay from "@/uni_modules/tt-alipay-pro";

export default {
    data() {
        return {
            alipayImpl: null as alipay.TTAliOpenSDK | null,
        }
    },
    onLoad() {
        // 初始化支付宝SDK实例
        this.alipayImpl = alipay.getTTAliOpenSDK();
    }
}

uni-app 平台

// 在页面中引入插件
import * as alipay from "@/uni_modules/tt-alipay-pro";

export default {
    data() {
        return {
            alipayImpl: null
        }
    },
    onLoad() {
        // 初始化支付宝SDK实例
        this.alipayImpl = alipay.getTTAliOpenSDK();
    }
}

功能介绍

• 支付宝授权登录
• 支付宝支付

支付宝授权登录

💡 支付宝登录是一个两步过程：先获取authCode，再通过后端接口换取用户信息

第一步：获取授权码 (authCode)

参数说明

TTAliLoginOptions

scheme参数说明：

• iOS/Android平台：传空字符串 "" 即可
• HarmonyOS平台：需要传入实际的scheme值，如 "tt-alipay-pro"，需与 module.json5 中配置的 querySchemes 一致

params参数说明： params 参数需要传入完整的授权请求URL，该URL需要包含以下必填参数：

• apiname: 服务对应的名称，常量值为 com.alipay.account.auth
• method: 接口名称，常量值为 alipay.open.auth.sdk.code.get
• app_id: 支付宝分配给开发者的应用ID
• app_name: 调用来源方的标识，常量值为 mc
• biz_type: 调用业务的类型，常量值为 openservice
• pid: 签约的支付宝账号对应的支付宝唯一用户号，以2088开头的16位纯数字组成
• product_id: 产品码，常量值为 APP_FAST_LOGIN
• scope: 授权范围，常量值为 kuajjie

📖 详细参数说明：请参考完整版授权请求参数和返回说明查看完整的参数列表和参数说明。

| success | function | ❌ | 成功回调 | | fail | function | ❌ | 失败回调 | | complete | function | ❌ | 完成回调 |

返回值 TTAliLoginSuccess

示例代码

uni-app x 平台（Composition API - 推荐）

<script setup>
import * as alipay from "@/uni_modules/tt-alipay-pro";
import { ref, onMounted, onUnmounted } from 'vue';

const alipayImpl = ref<alipay.TTAliOpenSDK | null>(null);
const loginResult = ref<string>('');

onMounted(() => {
    // 获取支付宝SDK实例
    alipayImpl.value = alipay.getTTAliOpenSDK();
});

onUnmounted(() => {
    alipayImpl.value = null;
});

// 支付宝授权登录
const handleAlipayLogin = () => {
    // 构建完整的授权请求URL
    // params参数需要包含完整的授权请求参数，包括apiname、method、app_id、app_name、biz_type、pid、product_id、scope等
    // 详细参数说明请参考: https://opendocs.alipay.com/open/218/105327
    const authUrl = 'alipays://platformapi/startapp?saId=***&' + 
        'apiname=com.alipay.account.auth&' +
        'method=alipay.open.auth.sdk.code.get&' +
        'app_id=YOUR_APP_ID&' +
        'app_name=mc&' +
        'biz_type=openservice&' +
        'pid=YOUR_PID&' +
        'product_id=APP_FAST_LOGIN&' +
        'scope=kuajjie&' +
        'state=' + Date.now().toString();

    alipayImpl.value?.login({
        scheme: '', // iOS/Android平台传空字符串，HarmonyOS平台需要传入scheme
        params: authUrl, // 完整的授权请求URL
        success: (result) => {
            console.log("✅ 获取授权码成功:", result.authCode);
            loginResult.value = `授权成功，授权码: ${result.authCode}`;
            // 将authCode发送到后端服务器
            sendAuthCodeToServer(result.authCode);
        },
        fail: (error) => {
            console.error("❌ 支付宝授权失败:", error);
            loginResult.value = `授权失败: ${error.errMsg}`;
            uni.showToast({
                title: '授权失败',
                icon: 'error'
            });
        },
        complete: (result) => {
            console.log("📱 授权流程完成:", result);
        }
    } as alipay.TTAliLoginOptions);
};

// 发送authCode到后端服务器
const sendAuthCodeToServer = (authCode: string) => {
    uni.request({
        url: 'https://your-server.com/api/alipay/login',
        method: 'POST',
        data: { 
            authCode: authCode
        },
        success: (res) => {
            console.log('登录成功:', res.data);
            uni.showToast({
                title: '登录成功',
                icon: 'success'
            });
        },
        fail: (err) => {
            console.error('登录请求失败:', err);
            uni.showToast({
                title: '登录失败',
                icon: 'error'
            });
        }
    });
};
</script>

uni-app x 平台（Options API）

import * as alipay from "@/uni_modules/tt-alipay-pro";

export default {
    data() {
        return {
            alipayImpl: null as alipay.TTAliOpenSDK | null,
            loginResult: ''
        }
    },
    onLoad() {
        // 初始化支付宝SDK实例
        this.alipayImpl = alipay.getTTAliOpenSDK();
    },
    methods: {
        // 支付宝授权登录
        handleAlipayLogin() {
            // 构建完整的授权请求URL
            // params参数需要包含完整的授权请求参数，包括apiname、method、app_id、app_name、biz_type、pid、product_id、scope等
            // 详细参数说明请参考: https://opendocs.alipay.com/open/218/105327
            const authUrl = 'alipays://platformapi/startapp?saId=***&' + 
                'apiname=com.alipay.account.auth&' +
                'method=alipay.open.auth.sdk.code.get&' +
                'app_id=YOUR_APP_ID&' +
                'app_name=mc&' +
                'biz_type=openservice&' +
                'pid=YOUR_PID&' +
                'product_id=APP_FAST_LOGIN&' +
                'scope=kuajjie&' +
                'state=' + Date.now().toString();

            this.alipayImpl?.login({
                scheme: '', // iOS/Android平台传空字符串，HarmonyOS平台需要传入scheme
                params: authUrl, // 完整的授权请求URL
                success: (result) => {
                    console.log("✅ 获取授权码成功:", result.authCode);
                    this.loginResult = `授权成功，授权码: ${result.authCode}`;
                    // 将authCode发送到后端服务器
                    this.sendAuthCodeToServer(result.authCode);
                },
                fail: (error) => {
                    console.error("❌ 支付宝授权失败:", error);
                    this.loginResult = `授权失败: ${error.errMsg}`;
                    uni.showToast({
                        title: '授权失败',
                        icon: 'error'
                    });
                },
                complete: (result) => {
                    console.log("📱 授权流程完成:", result);
                }
            } as alipay.TTAliLoginOptions);
        },

        // 发送authCode到后端服务器
        sendAuthCodeToServer(authCode: string) {
            uni.request({
                url: 'https://your-server.com/api/alipay/login',
                method: 'POST',
                data: { 
                    authCode: authCode
                },
                success: (res) => {
                    console.log('登录成功:', res.data);
                    uni.showToast({
                        title: '登录成功',
                        icon: 'success'
                    });
                },
                fail: (err) => {
                    console.error('登录请求失败:', err);
                    uni.showToast({
                        title: '登录失败',
                        icon: 'error'
                    });
                }
            });
        }
    }
}

uni-app 平台

// 支付宝授权登录
handleAlipayLogin() {
    // 构建完整的授权请求URL
    // params参数需要包含完整的授权请求参数，包括apiname、method、app_id、app_name、biz_type、pid、product_id、scope等
    // 详细参数说明请参考: https://opendocs.alipay.com/open/218/105327
    const authUrl = 'alipays://platformapi/startapp?saId=***&' + 
        'apiname=com.alipay.account.auth&' +
        'method=alipay.open.auth.sdk.code.get&' +
        'app_id=YOUR_APP_ID&' +
        'app_name=mc&' +
        'biz_type=openservice&' +
        'pid=YOUR_PID&' +
        'product_id=APP_FAST_LOGIN&' +
        'scope=kuajjie&' +
        'state=' + Date.now().toString();

    this.alipay.login({
        scheme: '', // iOS/Android平台传空字符串，HarmonyOS平台需要传入scheme
        params: authUrl, // 完整的授权请求URL
        success: (result) => {
            console.log("✅ 获取授权码成功:", result.authCode);
            // 将authCode发送到后端服务器
            this.sendAuthCodeToServer(result.authCode)
        },
        fail: (error) => {
            console.error("❌ 支付宝授权失败:", error);
            this.handleAlipayError(error, '支付宝登录');
        },
        complete: (result) => {
            console.log("📱 授权流程完成:", result);
        }
    })
}

// 发送authCode到后端服务器
// uni-app x 平台
sendAuthCodeToServer(authCode: string) {
    uni.request({
        url: 'https://your-server.com/api/alipay/login',
        method: 'POST',
        data: { 
            authCode: authCode
        },
        success: (res) => {
            // 处理登录成功逻辑
            console.log('登录成功:', res.data)
            uni.showToast({
                title: '登录成功',
                icon: 'success'
            })
        },
        fail: (err) => {
            console.error('登录请求失败:', err)
            uni.showToast({
                title: '登录失败',
                icon: 'error'
            })
        }
    })
}

// uni-app 平台
sendAuthCodeToServer(authCode) {
    uni.request({
        url: 'https://your-server.com/api/alipay/login',
        method: 'POST',
        data: { 
            authCode: authCode
        },
        success: (res) => {
            // 处理登录成功逻辑
            console.log('登录成功:', res.data)
            uni.showToast({
                title: '登录成功',
                icon: 'success'
            })
        },
        fail: (err) => {
            console.error('登录请求失败:', err)
            uni.showToast({
                title: '登录失败',
                icon: 'error'
            })
        }
    })
}

第二步：后端换取用户信息

📖 详细流程请参考: 支付宝授权服务端接入

后端需要完成的步骤：

1. 使用authCode换取access_token
2. 使用access_token获取用户信息
3. 返回用户信息给前端

支付宝支付

💡 支付宝支付功能，支持 iOS、Android 和 HarmonyOS 平台

参数说明

TTAliPayOptions

返回值 TTAliPaySuccess

空对象，表示支付成功

重要提示

⚠️ 安全提示：

• orderString 必须从服务器端获取，绝不可在客户端生成
• 订单字符串的生成和签名必须在后端完成
• 支付前建议先检测支付宝是否安装（iOS/Android平台）

示例代码

uni-app x 平台（Composition API - 推荐）

<script setup>
import * as alipay from "@/uni_modules/tt-alipay-pro";
import { ref, onMounted, onUnmounted } from 'vue';

const alipayImpl = ref<alipay.TTAliOpenSDK | null>(null);
const payResult = ref<string>('');

onMounted(() => {
    // 获取支付宝SDK实例
    alipayImpl.value = alipay.getTTAliOpenSDK();
});

onUnmounted(() => {
    alipayImpl.value = null;
});

// 支付宝支付
const handleAlipayPay = () => {
    // 从后端获取支付订单字符串
    getPaymentOrderString().then(orderString => {
        alipayImpl.value?.pay({
            orderString: orderString, // 后端返回的订单字符串
            scheme: '', // iOS/Android平台传空字符串，HarmonyOS平台需要传入scheme
            success: (result) => {
                console.log("✅ 支付成功");
                payResult.value = '支付成功';
                uni.showToast({
                    title: '支付成功',
                    icon: 'success'
                });
                // 处理支付成功逻辑
                handlePaymentSuccess(result);
            },
            fail: (error) => {
                console.error("❌ 支付失败:", error);
                payResult.value = `支付失败: ${error.errMsg}`;
                uni.showToast({
                    title: error.errMsg || '支付失败',
                    icon: 'error'
                });
            },
            complete: (res) => {
                console.log("📱 支付流程完成:", res);
            }
        } as alipay.TTAliPayOptions);
    }).catch(err => {
        console.error("获取支付订单失败:", err);
        uni.showToast({
            title: '获取订单失败',
            icon: 'error'
        });
    });
};

// 从后端获取支付订单字符串
const getPaymentOrderString = (): Promise<string> => {
    return new Promise<string>((resolve, reject) => {
        uni.request({
            url: 'https://your-server.com/api/alipay/pay',
            method: 'POST',
            data: {
                orderId: 'your_order_id',
                amount: 0.01, // 支付金额（元）
            },
            success: (res) => {
                if (res.data.success && res.data.orderString) {
                    resolve(res.data.orderString);
                } else {
                    reject(res.data.message || '获取订单失败');
                }
            },
            fail: (err) => {
                reject(err);
            }
        });
    });
};

// 处理支付成功
const handlePaymentSuccess = (result: alipay.TTAliPaySuccess) => {
    // 可以在这里调用后端接口确认支付结果
    uni.request({
        url: 'https://your-server.com/api/alipay/verify',
        method: 'POST',
        data: {
            orderId: 'your_order_id'
        },
        success: (res) => {
            console.log('支付确认成功:', res.data);
        }
    });
};
</script>

uni-app x 平台（Options API）

import * as alipay from "@/uni_modules/tt-alipay-pro";

export default {
    data() {
        return {
            alipayImpl: null as alipay.TTAliOpenSDK | null,
            payResult: ''
        }
    },
    onLoad() {
        // 初始化支付宝SDK实例
        this.alipayImpl = alipay.getTTAliOpenSDK();
    },
    methods: {
        // 支付宝支付
        handleAlipayPay() {
            // 从后端获取支付订单字符串
            this.getPaymentOrderString().then(orderString => {
                this.alipayImpl?.pay({
                    orderString: orderString, // 后端返回的订单字符串
                    scheme: '', // iOS/Android平台传空字符串，HarmonyOS平台需要传入scheme
                    success: (result) => {
                        console.log("✅ 支付成功");
                        this.payResult = '支付成功';
                        uni.showToast({
                            title: '支付成功',
                            icon: 'success'
                        });
                        // 处理支付成功逻辑
                        this.handlePaymentSuccess(result);
                    },
                    fail: (error) => {
                        console.error("❌ 支付失败:", error);
                        this.payResult = `支付失败: ${error.errMsg}`;
                        uni.showToast({
                            title: error.errMsg || '支付失败',
                            icon: 'error'
                        });
                    },
                    complete: (res) => {
                        console.log("📱 支付流程完成:", res);
                    }
                } as alipay.TTAliPayOptions);
            }).catch(err => {
                console.error("获取支付订单失败:", err);
                uni.showToast({
                    title: '获取订单失败',
                    icon: 'error'
                });
            });
        },

        // 从后端获取支付订单字符串
        getPaymentOrderString(): Promise<string> {
            return new Promise<string>((resolve, reject) => {
                uni.request({
                    url: 'https://your-server.com/api/alipay/pay',
                    method: 'POST',
                    data: {
                        orderId: 'your_order_id',
                        amount: 0.01, // 支付金额（元）
                    },
                    success: (res) => {
                        if (res.data.success && res.data.orderString) {
                            resolve(res.data.orderString);
                        } else {
                            reject(res.data.message || '获取订单失败');
                        }
                    },
                    fail: (err) => {
                        reject(err);
                    }
                });
            });
        },

        // 处理支付成功
        handlePaymentSuccess(result: alipay.TTAliPaySuccess) {
            // 可以在这里调用后端接口确认支付结果
            uni.request({
                url: 'https://your-server.com/api/alipay/verify',
                method: 'POST',
                data: {
                    orderId: 'your_order_id'
                },
                success: (res) => {
                    console.log('支付确认成功:', res.data);
                }
            });
        }
    }
}

uni-app 平台

// 支付宝支付
handleAlipayPay() {
    // 从后端获取支付订单字符串
    this.getPaymentOrderString().then(orderString => {
        this.alipay.pay({
            orderString: orderString, // 后端返回的订单字符串
            scheme: '', // iOS/Android平台传空字符串，HarmonyOS平台需要传入scheme（与登录时使用的scheme一致）
            success: (result) => {
                console.log("✅ 支付成功");
                uni.showToast({
                    title: '支付成功',
                    icon: 'success'
                })
                // 处理支付成功逻辑
                this.handlePaymentSuccess(result)
            },
            fail: (error) => {
                console.error("❌ 支付失败:", error);
                uni.showToast({
                    title: error.errMsg || '支付失败',
                    icon: 'error'
                })
                // 处理支付失败逻辑
                this.handlePaymentFail(error)
            },
            complete: (res) => {
                console.log("📱 支付流程完成:", res);
            }
        })
    }).catch(err => {
        console.error("获取支付订单失败:", err);
        uni.showToast({
            title: '获取订单失败',
            icon: 'error'
        })
    })
}

// 从后端获取支付订单字符串
getPaymentOrderString() {
    return new Promise((resolve, reject) => {
        uni.request({
            url: 'https://your-server.com/api/alipay/pay',
            method: 'POST',
            data: {
                orderId: 'your_order_id',
                amount: 0.01, // 支付金额（元）
            },
            success: (res) => {
                if (res.data.success && res.data.orderString) {
                    resolve(res.data.orderString)
                } else {
                    reject(res.data.message || '获取订单失败')
                }
            },
            fail: (err) => {
                reject(err)
            }
        })
    })
}

// 处理支付成功
handlePaymentSuccess(result) {
    // 可以在这里调用后端接口确认支付结果
    uni.request({
        url: 'https://your-server.com/api/alipay/verify',
        method: 'POST',
        data: {
            orderId: 'your_order_id'
        },
        success: (res) => {
            console.log('支付确认成功:', res.data)
        }
    })
}

支付流程说明

1. 前端发起支付请求：调用后端接口，传入订单信息（订单ID、金额等）
2. 后端生成订单字符串：后端根据订单信息，使用支付宝SDK生成签名的订单字符串
3. 前端调用支付：使用后端返回的订单字符串调用 pay 方法
4. 跳转支付宝：SDK会跳转到支付宝客户端完成支付
5. 支付结果回调：支付完成后，通过 success 或 fail 回调返回结果
6. 后端确认支付：建议在支付成功后，调用后端接口确认支付结果

📖 详细文档：请参考支付宝移动支付文档

错误处理

错误码说明

常见问题

1. 找不到插件方法？

解决方案: 确保使用自定义基座运行，标准基座不包含原生插件。

2. iOS平台登录无响应？

解决方案:

• 检查插件 Info.plist 中的 URL Scheme 配置
• 验证支付宝开放平台的应用配置
• 确保scheme与代码中使用的完全一致

3. Android平台授权无响应？

解决方案:

• 验证支付宝开放平台的应用配置
• 确保应用签名与开放平台配置一致
• 检查网络连接是否正常

4. 平台scheme配置问题？

解决方案:

• iOS: 修改 uni_modules/tt-alipay-pro/utssdk/app-ios/Info.plist 文件
• HarmonyOS: 修改 harmony-configs/entry/src/main/module.json5 文件
• 建议使用 ali + appid的md5值 作为scheme，确保唯一性
• 确保支付宝开放平台配置的scheme与代码中一致

5. HarmonyOS平台授权无响应？

解决方案:

• 检查 harmony-configs/entry/src/main/module.json5 中是否添加了 "apmqpdispatch"
• 确保 querySchemes 数组中包含支付宝回调scheme
• 验证网络权限配置是否正确
• 检查支付宝开放平台的应用配置

6. 支付时提示"订单信息不能为空"？

解决方案:

• 确保 orderString 参数不为空
• 检查后端是否正确返回了订单字符串
• 验证订单字符串格式是否正确

7. 支付失败，状态码 4000？

解决方案:

• 检查订单字符串是否过期（订单字符串有时效性）
• 验证订单金额是否正确
• 检查支付宝商户配置是否正确
• 确认订单状态是否允许支付

8. 与官方支付插件冲突？

解决方案:

• 本插件专为与官方支付宝支付插件兼容设计
• 可以安全地与官方支付插件同时使用
• 避免同时使用 tt-alipay-lite 插件，防止打包冲突

版本对比

📞 技术支持

如果在使用过程中遇到问题，请：

1. 查阅上方常见问题
2. 参考支付宝官方开发文档
3. 检查配置是否正确
4. 确认支付宝客户端版本
5. 联系技术支持获取帮助

祝您开发愉快！ 🎉