更新记录

1.0.1(2025-09-26)

支持Harmony平台

1.0.0(2025-09-23)

支持Android & iOS 支付宝极简版SDK所有功能


平台兼容性

uni-app(4.36)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android Android插件版本 iOS iOS插件版本 鸿蒙 鸿蒙插件版本
× × × × - - 5.0 1.0.0 12 1.0.0 10 1.0.1
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
× × × × × × × × × × ×

uni-app x(4.36)

Chrome Safari Android Android插件版本 iOS iOS插件版本 鸿蒙 鸿蒙插件版本 微信小程序
× × 5.0 1.0.0 12 1.0.0 10 1.0.1 ×

tt-alipay-lite

🚀 轻量级支付宝SDK插件,为 uni-app x & uni-app 提供支付宝授权登录解决方案

🎉 限时优惠:前10名用户享受3折优惠!立即体验轻量级支付宝授权登录解决方案!

📖 目录

功能支持矩阵

功能 iOS Android HarmonyOS
支付宝授权登录
电子发票业务
代扣业务

📚 推荐阅读: 支付宝登录使用说明

🚨 重要提示

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

环境配置

前置条件

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

Android平台配置

配置插件AndroidManifest.xml

直接修改插件根目录的 uni_modules/tt-alipay-lite/utssdk/app-android/AndroidManifest.xml 文件:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
    package="uts.sdk.modules.ttAlipayLite">

    <application>
        <activity android:name="uts.sdk.modules.ttAlipayLite.AlipayResultActivity" android:exported="true" tools:node="merge">
            <intent-filter tools:node="replace">
                <action android:name="android.intent.action.VIEW"/>
                <category android:name="android.intent.category.DEFAULT"/>
                <category android:name="android.intent.category.BROWSABLE"/>
                <!-- 这里的 __alipaysdkdemo__ 需要替换成您的App特有的Scheme -->
                <!-- 建议设置为 ali + appid的md5值,确保唯一性 -->
                <data android:scheme="tt-alipay-demo"/>
            </intent-filter>
        </activity>
    </application>
</manifest>

重要说明:

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

HarmonyOS平台配置

配置项目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-lite/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-demo</string>
        </array>
      </dict>
    </array>
  </dict>
</plist>

重要说明:

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

快速开始

1. 导入插件

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

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

功能介绍

支付宝授权登录

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

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

参数说明

TTAliLoginOptions

参数 类型 必填 说明
scheme string 授权业务回跳当前app的scheme
params string 独立签约入参url(已编码)
serviceType number 服务类型,默认为1(三方授权)
success function 成功回调
fail function 失败回调
complete function 完成回调

返回值 TTAliLoginSuccess

参数 类型 说明
authCode string 用于换取access_token的授权码
state string 原样返回的标识符

示例代码

// 支付宝授权登录
handleAlipayLogin() {
    // 构建授权URL
    const authUrl = 'https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=YOUR_APP_ID&scope=auth_user&redirect_uri=YOUR_REDIRECT_URI&state=' + Date.now().toString();

    this.alipay?.login({
        scheme: 'tt-alipay-demo', // 应用回调scheme
        params: authUrl, // 授权URL(已编码)
        serviceType: 1, // 三方授权
        success: (result) => {
            console.log("✅ 获取授权码成功:", result.authCode);
            console.log("✅ 状态参数:", result.state);
            // 将authCode发送到后端服务器
            this.sendAuthCodeToServer(result.authCode, result.state)
        },
        fail: (error) => {
            console.error("❌ 支付宝授权失败:", error);
            this.handleAlipayError(error, '支付宝登录');
        },
        complete: (result) => {
            console.log("📱 授权流程完成:", result);
        }
    } as alipay.TTAliLoginOptions)
}

// 发送authCode到后端服务器
sendAuthCodeToServer(authCode: string, state?: string) {
    uni.request({
        url: 'https://your-server.com/api/alipay/login',
        method: 'POST',
        data: { 
            authCode: authCode,
            state: state 
        },
        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. 返回用户信息给前端

错误处理

错误码说明

错误码 错误信息 适用场景 解决方案
基础错误
101 未安装支付宝客户端 登录功能 提示用户安装支付宝客户端
102 授权服务返回值异常 登录功能 检查网络连接和授权参数
103 调用服务 Service 枚举值错误 登录功能 检查serviceType参数是否正确
104 授权回跳 URL 错误 登录功能 检查授权URL格式和参数
105 业务重复调用(3s内) 登录功能 避免频繁调用,等待3秒后重试
106 跳转授权失败 登录功能 检查scheme配置和支付宝客户端
107 缺少 AppId 参数 登录功能 检查授权URL中的app_id参数
108 缺少第三方包名或缺失 scheme 登录功能 检查bundleName和scheme配置
其他错误
999 其他错误 所有功能 查看支付宝原始错误码和详细信息
1000 当前平台暂不支持 所有功能 当前平台不支持此功能

错误处理最佳实践

// 统一错误处理函数
handleAlipayError(error: any, action: string) {
    console.error(`❌ ${action}失败:`, error)

    // 获取错误码和错误信息
    const errCode = error.errCode || error.code
    const errMsg = error.errMsg || error.message

    switch(errCode) {
        case 101:
            uni.showModal({
                title: '支付宝未安装',
                content: '请先安装支付宝客户端后再试'
            })
            break

        case 102:
            uni.showToast({
                title: '授权服务异常',
                icon: 'error'
            })
            break

        case 103:
            uni.showToast({
                title: '服务类型错误',
                icon: 'error'
            })
            break

        case 104:
        case 107:
            uni.showToast({
                title: '授权URL配置错误',
                icon: 'error'
            })
            break

        case 105:
            uni.showToast({
                title: '请勿频繁操作',
                icon: 'error'
            })
            break

        case 106:
            uni.showToast({
                title: '授权跳转失败',
                icon: 'error'
            })
            break

        case 108:
            uni.showToast({
                title: '应用配置错误',
                icon: 'error'
            })
            break

        case 1000:
            uni.showToast({
                title: '当前平台不支持',
                icon: 'error'
            })
            break

        case 999:
            // 其他错误,显示具体错误信息
            uni.showToast({
                title: errMsg || '操作失败',
                icon: 'error'
            })
            break

        default:
            // 支付宝SDK原始错误,可能是用户取消等
            if (errMsg && errMsg !== '用户取消') {
                uni.showToast({
                    title: errMsg,
                    icon: 'error'
                })
            }
            break
    }
}

// 使用示例
this.alipay?.login({
    scheme: 'tt-alipay-demo',
    params: 'YOUR_AUTH_URL',
    success: (result) => {
        console.log('登录成功:', result)
    },
    fail: (error) => {
        this.handleAlipayError(error, '支付宝登录')
    }
} as alipay.TTAliLoginOptions)

常见问题

1. 找不到插件方法?

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

2. iOS平台登录无响应?

解决方案:

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

3. Android平台授权无响应?

解决方案:

  • 检查插件 AndroidManifest.xml 中的 scheme 配置
  • 验证支付宝开放平台的应用配置
  • 确保应用签名与开放平台配置一致

4. 平台scheme配置问题?

解决方案:

  • iOS: 修改 uni_modules/tt-alipay-lite/utssdk/app-ios/Info.plist 文件
  • Android: 修改 uni_modules/tt-alipay-lite/utssdk/app-android/AndroidManifest.xml 文件
  • HarmonyOS: 修改 uni_modules/tt-alipay-lite/utssdk/app-harmony/config.json 文件
  • 建议使用 ali + appid的md5值 作为scheme,确保唯一性
  • 确保支付宝开放平台配置的scheme与代码中一致

5. HarmonyOS平台授权无响应?

解决方案:

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

6. 授权URL配置错误?

解决方案:

  • 确认授权URL格式正确
  • 检查app_id参数是否正确

7. 各平台支持哪些业务类型?

解决方案:

  • iOS平台:支持所有业务类型
    • serviceType = 0: 电子发票业务
    • serviceType = 1: 三方授权业务(推荐)
    • serviceType = 2: 代扣业务
  • Android平台:支持所有业务类型
    • serviceType = 0: 电子发票业务
    • serviceType = 1: 三方授权业务(推荐)
    • serviceType = 2: 代扣业务
    • 代扣业务需要使用 sign_params 参数而非 url 参数
  • HarmonyOS平台:仅支持授权登录
    • serviceType = 1: 三方授权业务(固定)
    • 不支持电子发票和代扣业务

8. 需要支付功能怎么办?

解决方案:

  • 本插件为轻量版,专注于授权登录功能
  • 如需支付功能,请使用支付宝官方支付插件
  • 或集成支付宝官方SDK

📞 技术支持

如果在使用过程中遇到问题,请:

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

祝您开发愉快! 🎉

隐私、权限声明

1. 本插件需要申请的系统权限列表:

暂无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

暂无

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

暂无