更新记录
1.0.4(2025-11-28)
修复已知问题
1.0.3(2025-11-28)
修复安卓平台
1.0.2(2025-11-14)
Harmony 平台SDK更新为 0.0.5版本
查看更多平台兼容性
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 | 12 | 1.0.0 |
| 微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
|---|---|---|---|---|---|---|---|---|---|---|
| × | × | × | × | × | × | × | × | × | × | × |
uni-app x(4.36)
| Chrome | Safari | Android | Android插件版本 | iOS | iOS插件版本 | 鸿蒙 | 鸿蒙插件版本 | 微信小程序 |
|---|---|---|---|---|---|---|---|---|
| × | × | 5.0 | 1.0.0 | 12 | 1.0.0 | 12 | 1.0.0 | × |
tt-douyin-open
🚀 抖音开放平台SDK插件,为 uni-app x & uni-app 提供抖音授权登录功能
📱 支持平台:uni-app x (TypeScript) 和 uni-app (JavaScript)
📖 目录
SDK版本信息
| 平台 | 版本 | 支持状态 |
|---|---|---|
| iOS | 4.2.4 | ✅ 完全支持 |
| Android | 0.2.0.9 | ✅ 完全支持 |
| HarmonyOS | 0.0.5 | ✅ 完全支持 |
📚 推荐阅读: 抖音开放平台集成文档
🚨 重要提示
⚠️ 必须使用自定义基座运行,否则无法找到插件方法
环境配置
前置条件
- 在抖音开放平台申请移动应用
- 获取
ClientKey - 配置应用包名和签名
iOS平台配置
1. 配置 URL Scheme
编辑插件内的 uni_modules/tt-douyin-open/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>DouyinAppID</key>
<string>您的抖音AppID</string>
<!-- 允许查询抖音应用 -->
<key>LSApplicationQueriesSchemes</key>
<array>
<string>douyinopensdk</string>
<string>douyinliteopensdk</string>
<string>douyinsharesdk</string>
<string>snssdk1128</string>
</array>
<!-- URL Scheme 配置 -->
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLName</key>
<string>DouYin</string>
<key>CFBundleURLSchemes</key>
<array>
<!-- 这里填写您在抖音开放平台申请的 ClientKey -->
<string>您的抖音ClientKey</string>
</array>
</dict>
</array>
</dict>
</plist>
Android平台配置
Android平台会自动完成相关配置,确保在抖音开放平台正确配置应用包名和签名即可。
HarmonyOS平台配置
⚠️ 重要授权说明:
- uni-app 项目: 由于官方目前不支持试用以及普通授权,建议通过示例中的 uni-app x 项目测通后购买源码授权使用
- uni-app x 项目: 可直接使用
1. 配置 .ohpmrc 文件
在项目根目录创建 harmony-configs/.ohpmrc 文件:
registry=https://ohpm.byted.org/repos/ohpm/,http://artifact.bytedance.com/repository/byted-ohpm/
2. 配置 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": [
"snssdk1128", // 抖音客户端scheme
"douyinopensdk" // 抖音开放平台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",
"entity.system.browsable"
],
"actions": [
"action.system.home",
"ohos.want.action.viewData"
],
"uris": [
{
"scheme": "your-app", // 与 redirectUri 中的 scheme 保持一致,例如 redirectUri 为 "your-app://callback" 时,这里填写 "your-app"
"host": "callback", // 与 redirectUri 中的 host 保持一致,例如 redirectUri 为 "your-app://callback" 时,这里填写 "callback"
"pathRegex": ".*",
"linkFeature": "Login"
}
]
}
]
}
],
"requestPermissions": [
{
"name": "ohos.permission.INTERNET"
}
]
}
}
重要说明:
- 必须在
querySchemes中添加"snssdk1128"和"douyinopensdk" - 确保网络权限已正确配置
- 抖音授权通过系统服务调用,需要正确的scheme配置
- applinks 配置说明:
- 在
skills中添加"entity.system.browsable"和"ohos.want.action.viewData"用于接收抖音回调 - 在
uris中配置 applinks,scheme和host必须与登录时传入的redirectUri保持一致 - 例如:如果
redirectUri为"your-app://callback",则scheme填写"your-app",host填写"callback" - 此配置用于接收抖音授权完成后的回调,确保应用能正确接收授权结果
- 在
快速开始
1. 导入插件
uni-app x 平台
import * as douyinSDK from "@/uni_modules/tt-douyin-open";
export default {
data() {
return {
douyin: null as douyinSDK.TTDouyinSDK | null,
}
},
onLoad() {
// 初始化抖音SDK实例
this.douyin = douyinSDK.getTTDouyinSDK()
// 注册抖音SDK
this.initDouyinSDK()
},
methods: {
// 初始化抖音SDK
initDouyinSDK() {
// SDK初始化代码见下方
}
}
}
uni-app 平台
// 在页面中引入插件
import * as douyinSDK from "@/uni_modules/tt-douyin-open";
export default {
data() {
return {
douyin: null
}
},
onLoad() {
// 初始化抖音SDK实例
this.douyin = douyinSDK.getTTDouyinSDK()
// 注册抖音SDK
this.initDouyinSDK()
},
methods: {
// 初始化抖音SDK
initDouyinSDK() {
// SDK初始化代码见下方
}
}
}
2. 初始化 SDK
initDouyinSDK() {
if (this.douyin == null) {
console.error('抖音SDK初始化失败')
return
}
this.douyin?.register({
appid: "您的抖音ClientKey", // 必填:抖音开放平台申请的ClientKey
success: (e) => {
console.log("✅ 抖音SDK初始化成功");
// SDK初始化完成,可以进行后续操作
},
fail: (err) => {
console.error("❌ 抖音SDK初始化失败:", err);
uni.showToast({
title: '抖音SDK初始化失败',
icon: 'error'
})
}
} as douyinSDK.TTDouyinRegisterOptions);
}
基础使用
💡 当前版本专注于抖音授权登录功能,请确保用户已安装抖音客户端
功能介绍
抖音授权登录
💡 抖音登录是一个两步过程:先获取code,再通过后端接口换取用户信息
第一步:获取授权码 (code)
参数说明
TTDouyinLoginOptions
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| state | string | 否 | 请求唯一标识,原样返回,长度不超过1K |
| redirectUri | string | 否 | 鸿蒙平台 applinks,仅 HarmonyOS 平台使用。格式为 scheme://host,例如 "your-app://callback"。此值必须与 module.json5 中配置的 uris 中的 scheme 和 host 保持一致 |
返回值 TTDouyinLoginSuccess
| 参数 | 类型 | 说明 |
|---|---|---|
| code | string | 用于换取access_token的授权码 |
| state | string | 原样返回的标识符 |
示例代码
uni-app x 平台
// 抖音授权登录
handleDouyinLogin() {
this.douyin?.login({
state: Date.now().toString(), // 使用时间戳作为唯一标识
redirectUri: "your-app://callback", // 可选:HarmonyOS 平台 applinks,需要在抖音开放平台配置
success: (result) => {
console.log("✅ 获取授权码成功:", result.code);
// 将code发送到后端服务器
this.sendCodeToServer(result.code)
},
fail: (error) => {
console.error("❌ 抖音授权失败:", error);
uni.showToast({
title: '授权失败',
icon: 'error'
})
}
} as douyinSDK.TTDouyinLoginOptions)
}
// 发送code到后端服务器
sendCodeToServer(code: string) {
uni.request({
url: 'https://your-server.com/api/douyin/login',
method: 'POST',
data: { code },
success: (res) => {
// 处理登录成功逻辑
console.log('登录成功:', res.data)
},
fail: (err) => {
console.error('登录请求失败:', err)
}
})
}
uni-app 平台
// 抖音授权登录
handleDouyinLogin() {
this.douyin.login({
state: Date.now().toString(), // 使用时间戳作为唯一标识
redirectUri: "your-app://callback", // 可选:HarmonyOS 平台 applinks,需要在抖音开放平台配置
success: (result) => {
console.log("✅ 获取授权码成功:", result.code);
// 将code发送到后端服务器
this.sendCodeToServer(result.code)
},
fail: (error) => {
console.error("❌ 抖音授权失败:", error);
uni.showToast({
title: '授权失败',
icon: 'error'
})
}
})
}
第二步:后端换取用户信息
📖 详细流程请参考: 抖音授权后接口调用文档
后端需要完成的步骤:
- 使用code换取access_token
- 使用access_token获取用户信息
- 返回用户信息给前端
错误处理
错误码说明
| 错误码 | 错误信息 | 适用场景 | 解决方案 |
|---|---|---|---|
| 基础错误 | |||
| 101 | SDK未初始化或初始化失败 | 所有功能 | 检查SDK初始化参数,重新注册 |
| 其他错误 | |||
| 999 | 其他错误 | 所有功能 | 查看抖音原始错误码和详细信息 |
常见问题
1. 找不到插件方法?
解决方案: 确保使用自定义基座运行,标准基座不包含原生插件。
2. iOS平台登录无响应?
解决方案:
- 检查 Info.plist 中的 URL Scheme 配置
- 确认抖音开放平台的 iOS 应用配置
- 验证 ClientKey 是否正确
3. Android平台功能异常?
解决方案:
- 确认应用签名与抖音开放平台配置一致
- 检查包名是否正确
- 确保抖音客户端版本支持相关功能
4. HarmonyOS平台授权无响应?
解决方案:
- 检查
harmony-configs/entry/src/main/module.json5中是否添加了"snssdk1128"和"douyinopensdk" - 确保
querySchemes数组中包含抖音相关scheme - 验证网络权限配置是否正确
- 检查抖音开放平台的应用配置
- 确认
.ohpmrc文件配置正确
5. HarmonyOS平台配置问题?
解决方案:
- 确保创建了
harmony-configs/.ohpmrc文件 - 检查
module.json5中的querySchemes配置 - 验证网络权限是否已添加
- 确认抖音开放平台的应用配置
📞 技术支持
如果在使用过程中遇到问题,请:
- 查阅上方常见问题
- 参考抖音开放平台开发文档
- 检查配置是否正确
- 确认抖音客户端版本
祝您开发愉快! 🎉

收藏人数:
购买源码授权版(
试用
使用 HBuilderX 导入示例项目
赞赏(1)
下载 292
赞赏 3
下载 12346404
赞赏 1828
赞赏
京公网安备:11010802035340号