如何在 Flutter 中分享視頻到抖音

話不多說，先上效果：

原理

發佈內容至抖音 H5 場景_移動/網站應用_抖音開放平臺 (open-douyin.com)

• 本教程沒有接入抖音原生 SDK 以及任何第三方插件，使用抖音的 h5 分享介面配合 url_launcher 插件實現跳轉至抖音分享頁面
• 需要分享的資源需要被部署在可被公開訪問的伺服器上，調用抖音的 h5 分享介面需提供被分享資源的 url
• 需在自己的服務端進行簽名計算，並將結果返回給前端，以供調用抖音的 api

步驟

1. 在 抖音開放平臺註冊 app，拿到 client_key 和 client_secret
2. 生成 client_token
3. 獲取 open_ticket
4. 在服務端計算簽名
5. 將需要的參數返回給前端
6. Flutter 拿到從服務端獲取的參數 + 視頻/圖文鏈接 拉起抖音 App 分享

前端實現

服務端計算簽名的部分就不多說了，大家根據官網的教程來就好，返回給前端的數據結構類似這樣的：

{
// 服務端設置的 用於計算簽名的 隨機字元串
"nonceStr": "ae86",
// 簽名
"signature": "665f1211738c4f348d093535e2ef93ac",
// 秒級時間戳
"timestamp": "1717054967",
// 分享類型 預設 h5
"shareType": "h5",
"clientKey": "ztfqxgipi39ko49q"
}

前端生成 分享 schema，並調起分享代碼：

  Future<void> douyinShare({
    // 圖片列表
    List<String> images = const [],
    // 視頻 url
    String? videoUrl = "",
    // 自定義標簽
    List<String> tagList = const [],
    // 標題
    required String title,
  }) async {
    Response response = await dio.get('/<獲取簽名介面>');

    final Map<String, dynamic> param = {
      'title': title,
      'client_key': response.data['clientKey'],
      'nonce_str': response.data['nonceStr'],
      'signature': response.data['signature'],
      'timestamp': response.data['timestamp'],
      'share_type': response.data['h5'],
      // 1-直接跳轉到發佈頁 0-跳轉到編輯頁
      'share_to_publish': '1',
    };

    // 標簽
    param['hashtag_list'] = json.encode(['自定義標簽', '自定義標簽2', ...tagList]);

    // 向 param 中添加圖片或視頻
    if (images.isNotEmpty) {
      if (images.length > 1) {
        param['image_list_path'] = json.encode(images);
      } else {
        param['image_path'] = images.first;
      }
    } else if (videoUrl != "") {
      param['video_path'] = videoUrl;
    } else {
      // error handle
    }

    // 固定寫法
    final Uri url = Uri(
      scheme: 'snssdk1128',
      host: 'openplatform',
      path: 'share',
      queryParameters: param,
    );

    if (await canLaunchUrl(url)) {
      await launchUrl(url);
    }
  }

上述代碼只展示了核心邏輯，至於具體的實現就請各位自行決斷，例如 錯誤處理、 Util 工具類、 單例模式 等等...

IOS 需要添加應用白名單

抖音的 ApplicationQueriesScheme 為: snssdk1128

在 ios/info.plist 文件中加入

<key>LSApplicationQueriesSchemes</key>
<array>
	<string>snssdk1128</string> <!-- 抖音 -->
	...
</array>

完