306 lines
7.2 KiB
Markdown
306 lines
7.2 KiB
Markdown
# Taro 抖音小程序发布视频解决方案
|
||
|
||
## 概述
|
||
|
||
抖音小程序提供了官方的视频发布能力，允许用户通过小程序直接拍摄并发布视频到抖音。在 Taro 框架中，我们需要通过特定的方式来调用这个官方 API。
|
||
|
||
## 核心原理
|
||
|
||
抖音小程序的视频发布功能基于两个核心要素：
|
||
1. **Button 组件**：设置 `open-type="uploadDouyinVideo"`
|
||
2. **Page 钩子**：在页面中配置 `onUploadDouyinVideo` 钩子函数
|
||
|
||
## 实现方案
|
||
|
||
### 方案一：函数组件 + useReady Hook（推荐）
|
||
|
||
```typescript
|
||
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;
|
||
```
|
||
|
||
### 方案二：类组件实现
|
||
|
||
```typescript
|
||
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 封装
|
||
|
||
```typescript
|
||
// 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 配置
|
||
|
||
```typescript
|
||
export default {
|
||
pages: [
|
||
'pages/video-publish/index'
|
||
],
|
||
window: {
|
||
backgroundTextStyle: 'light',
|
||
navigationBarBackgroundColor: '#fff',
|
||
navigationBarTitleText: '抖音视频发布',
|
||
navigationBarTextStyle: 'black'
|
||
},
|
||
// 抖音小程序权限配置
|
||
permission: {
|
||
'scope.camera': {
|
||
desc: '需要使用摄像头拍摄视频'
|
||
},
|
||
'scope.writePhotosAlbum': {
|
||
desc: '需要保存视频到相册'
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
### 2. 样式配置
|
||
|
||
```scss
|
||
// 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. 参数说明
|
||
```typescript
|
||
// uploadOptions 参数结构
|
||
interface UploadOptions {
|
||
errMsg: string; // 上传结果信息
|
||
// 其他抖音官方返回的参数
|
||
}
|
||
```
|
||
|
||
## 故障排除
|
||
|
||
### 问题1：钩子函数不触发
|
||
|
||
**解决方案**：确保在正确的时机配置钩子
|
||
|
||
```typescript
|
||
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 版本和抖音小程序基础库版本的兼容性
|
||
|
||
## 参考资料
|
||
|
||
- [抖音小程序官方文档 - 发布抖音视频](https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/api/open-interface/video-capacity/upload-douyin-video)
|
||
- [Taro GitHub Issue #13882](https://github.com/NervJS/taro/issues/13882)
|