bw-mini-app/mini-app.md

Taro 抖音小程序发布视频解决方案

概述

抖音小程序提供了官方的视频发布能力，允许用户通过小程序直接拍摄并发布视频到抖音。在 Taro 框架中，我们需要通过特定的方式来调用这个官方 API。

核心原理

抖音小程序的视频发布功能基于两个核心要素：

1. Button 组件：设置 open-type="uploadDouyinVideo"
2. Page 钩子：在页面中配置 onUploadDouyinVideo 钩子函数

实现方案

方案一：函数组件 + useReady Hook（推荐）

import React, { useState } from 'react';
import { View, Button, Text } from '@tarojs/components';
import Taro, { useReady } from '@tarojs/taro';

const VideoPublishPage: React.FC = () => {
  const [uploadStatus, setUploadStatus] = useState<string>('');

  useReady(() => {
    // 获取当前页面实例
    const pages = Taro.getCurrentPages();
    const currentPage = pages[pages.length - 1];
    
    // 配置抖音视频上传钩子
    currentPage.onUploadDouyinVideo = function(uploadOptions) {
      console.log('抖音视频上传参数:', uploadOptions);
      
      setUploadStatus('正在处理视频...');
      
      // 处理上传结果
      if (uploadOptions.errMsg) {
        if (uploadOptions.errMsg.includes('ok')) {
          setUploadStatus('视频发布成功！');
          Taro.showToast({
            title: '发布成功',
            icon: 'success'
          });
        } else {
          setUploadStatus('视频发布失败');
          Taro.showToast({
            title: '发布失败',
            icon: 'error'
          });
        }
      }
    };
  });

  return (
    <View className="video-publish-container">
      <View className="header">
        <Text className="title">发布抖音视频</Text>
      </View>
      
      <View className="content">
        {/* 关键：Button 组件设置 openType */}
        <Button 
          openType="uploadDouyinVideo"
          className="upload-button"
          type="primary"
        >
          拍摄并发布视频
        </Button>
        
        {uploadStatus && (
          <View className="status">
            <Text>{uploadStatus}</Text>
          </View>
        )}
      </View>
    </View>
  );
};

export default VideoPublishPage;

方案二：类组件实现

import { Component } from 'react';
import { View, Button } from '@tarojs/components';
import Taro from '@tarojs/taro';

class VideoPublishPage extends Component {
  
  onReady() {
    // 在页面 onReady 生命周期中配置钩子
    this.$instance.page.onUploadDouyinVideo = (uploadOptions) => {
      console.log('抖音视频上传参数:', uploadOptions);
      this.handleVideoUpload(uploadOptions);
    };
  }

  handleVideoUpload = (uploadOptions: any) => {
    console.log('处理视频上传:', uploadOptions);
    
    Taro.showToast({
      title: '视频发布中...',
      icon: 'loading'
    });
  };

  render() {
    return (
      <View className="video-publish-page">
        <Button openType="uploadDouyinVideo">
          发布抖音视频
        </Button>
      </View>
    );
  }
}

export default VideoPublishPage;

方案三：自定义 Hook 封装

// hooks/useUploadDouyinVideo.ts
import { useReady } from '@tarojs/taro';
import Taro from '@tarojs/taro';

interface UploadOptions {
  errMsg?: string;
  [key: string]: any;
}

export const useUploadDouyinVideo = (
  onUpload: (options: UploadOptions) => void
) => {
  useReady(() => {
    const pages = Taro.getCurrentPages();
    const currentPage = pages[pages.length - 1];
    
    if (currentPage) {
      currentPage.onUploadDouyinVideo = onUpload;
    }
  });
};

// 使用示例
import React from 'react';
import { View, Button } from '@tarojs/components';
import { useUploadDouyinVideo } from '../hooks/useUploadDouyinVideo';

const VideoPublishPage: React.FC = () => {
  
  useUploadDouyinVideo((uploadOptions) => {
    console.log('视频上传参数:', uploadOptions);
    // 处理上传逻辑
  });

  return (
    <View>
      <Button openType="uploadDouyinVideo">
        发布抖音视频
      </Button>
    </View>
  );
};

配置要求

1. app.config.ts 配置

export default {
  pages: [
    'pages/video-publish/index'
  ],
  window: {
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: '抖音视频发布',
    navigationBarTextStyle: 'black'
  },
  // 抖音小程序权限配置
  permission: {
    'scope.camera': {
      desc: '需要使用摄像头拍摄视频'
    },
    'scope.writePhotosAlbum': {
      desc: '需要保存视频到相册'
    }
  }
}

2. 样式配置

// video-publish/index.scss
.video-publish-container {
  padding: 40px 32px;
  
  .header {
    text-align: center;
    margin-bottom: 60px;
    
    .title {
      font-size: 36px;
      font-weight: bold;
      color: #333;
    }
  }
  
  .content {
    .upload-button {
      width: 100%;
      height: 88px;
      font-size: 32px;
      border-radius: 12px;
      margin-bottom: 40px;
    }
    
    .status {
      text-align: center;
      padding: 20px;
      background-color: #f5f5f5;
      border-radius: 8px;
      
      text {
        color: #666;
        font-size: 28px;
      }
    }
  }
}

关键要点

1. 必须配置的两个要素

• Button 组件：openType="uploadDouyinVideo"
• 钩子函数：onUploadDouyinVideo

2. 钩子函数配置时机

• 必须在页面的 onReady 生命周期或之后配置
• 函数组件使用 useReady Hook
• 类组件在 onReady 方法中配置

3. 参数说明

// uploadOptions 参数结构
interface UploadOptions {
  errMsg: string;  // 上传结果信息
  // 其他抖音官方返回的参数
}

故障排除

问题1：钩子函数不触发

解决方案：确保在正确的时机配置钩子

useReady(() => {
  // 延迟配置，确保页面完全加载
  setTimeout(() => {
    const pages = Taro.getCurrentPages();
    const currentPage = pages[pages.length - 1];
    
    if (currentPage) {
      currentPage.onUploadDouyinVideo = function(uploadOptions) {
        console.log('视频上传回调:', uploadOptions);
      };
    }
  }, 100);
});

问题2：Button 点击无反应

检查清单：

• openType 属性是否正确设置为 "uploadDouyinVideo"
• 是否在真实的抖音小程序环境中测试
• 权限配置是否正确

问题3：Taro 版本兼容性

建议：

• 使用 Taro 3.x 以上版本
• 确保抖音小程序基础库版本支持该功能

注意事项

1. 测试环境：该功能需要在真实的抖音小程序环境中测试，开发工具可能无法完全模拟
2. 权限申请：需要在小程序后台申请相应的视频发布权限
3. 用户体验：建议添加加载状态和错误处理
4. 版本兼容：确保 Taro 版本和抖音小程序基础库版本的兼容性

参考资料

• 抖音小程序官方文档 - 发布抖音视频
• Taro GitHub Issue #13882