feat: 添加图标
This commit is contained in:
imeepos
305
mini-app.md
Normal file
305
mini-app.md
Normal file
@@ -0,0 +1,305 @@
|
||||
# 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)
|
||||
Reference in New Issue
Block a user