更新记录

1.0.1(2025-10-15)

支持Harmony

1.0.0(2025-09-17)

支持安卓、iOS平台授权登录


平台兼容性

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 5 1.0.0
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
× × × × × × × × × × ×

uni-app x(4.36)

Chrome Safari Android Android插件版本 iOS iOS插件版本 鸿蒙 鸿蒙插件版本 微信小程序
× × 5.0 1.0.0 12 1.0.0 5 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 4.2.4 ✅ 完全支持

📚 推荐阅读: 抖音开放平台集成文档

🚨 重要提示

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

环境配置

前置条件

  1. 抖音开放平台申请移动应用
  2. 获取 ClientKey
  3. 配置应用包名和签名

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平台配置

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"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ]
      }
    ],
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ]
  }
}

重要说明:

  • 必须在 querySchemes 中添加 "snssdk1128""douyinopensdk"
  • 确保网络权限已正确配置
  • 抖音授权通过系统服务调用,需要正确的scheme配置

快速开始

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

返回值 TTDouyinLoginSuccess

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

示例代码

uni-app x 平台
// 抖音授权登录
handleDouyinLogin() {
    this.douyin?.login({
        state: Date.now().toString(), // 使用时间戳作为唯一标识
        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(), // 使用时间戳作为唯一标识
        success: (result) => {
            console.log("✅ 获取授权码成功:", result.code);
            // 将code发送到后端服务器
            this.sendCodeToServer(result.code)
        },
        fail: (error) => {
            console.error("❌ 抖音授权失败:", error);
            uni.showToast({
                title: '授权失败',
                icon: 'error'
            })
        }
    })
}

// 发送code到后端服务器
sendCodeToServer(code) {
    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)
        }
    })
}

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

📖 详细流程请参考: 抖音授权后接口调用文档

后端需要完成的步骤:

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

错误处理

错误码说明

错误码 错误信息 适用场景 解决方案
基础错误
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 配置
  • 验证网络权限是否已添加
  • 确认抖音开放平台的应用配置

📞 技术支持

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

  1. 查阅上方常见问题
  2. 参考抖音开放平台开发文档
  3. 检查配置是否正确
  4. 确认抖音客户端版本

祝您开发愉快! 🎉

隐私、权限声明

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

暂无

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

暂无

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

暂无