更新记录
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 |
---|---|---|---|
支付宝授权登录 | ✅ | ✅ | ✅ |
电子发票业务 | ✅ | ✅ | ❌ |
代扣业务 | ✅ | ✅ | ❌ |
📚 推荐阅读: 支付宝登录使用说明
🚨 重要提示
⚠️ 必须使用自定义基座运行,否则无法找到插件方法
环境配置
前置条件
- 在支付宝开放平台申请移动应用
- 获取
AppID
- 配置应用包名和签名
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'
})
}
})
}
第二步:后端换取用户信息
📖 详细流程请参考: 支付宝授权服务端接入
后端需要完成的步骤:
- 使用authCode换取access_token
- 使用access_token获取用户信息
- 返回用户信息给前端
错误处理
错误码说明
错误码 | 错误信息 | 适用场景 | 解决方案 |
---|---|---|---|
基础错误 | |||
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
📞 技术支持
如果在使用过程中遇到问题,请:
- 查阅上方常见问题
- 参考支付宝官方开发文档
- 检查配置是否正确
- 确认支付宝客户端版本
- 联系技术支持获取帮助
祝您开发愉快! 🎉