taro开发抖音小程序，Button的开发能力uploadDouyinVideo和onUploadDouyinVideo 钩子无法使用怎么处理？

场景：

你想在抖音小程序里面添加拍摄日常内容，并且发布出去，就可以通过uploadDouyinVideo(在button里面)的开放能力的方法使用。

问题：

问题来了，你根据他抖音的开发文档使用，中规中矩运用uploadDouyinVideo，你会发现完全不会触发他对应的onUploadDouyinVideo这个钩子函数。

这上面是原生抖音小程序使用方法，当然原生的抖音小程序肯定能使用这个开放能力啦。

https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/api/open-interface/video-capacity/upload-douyin-video/

重点来了~

我是讲的是taro框架开发的抖音小程序如何使用uploadDouyinVideo

这一步还是原封不动的照抄下来

<Button openType='uploadDouyinVideo' style={{width:'100%',height:'100%',position:'absolute',opacity:'0'}}>点击</Button>

接下来就是onUploadDouyinVideo，因为我是把他放到全局ts文件上，global.ts，专门存放多次复用的功能。

export async function onUploadDouyinVideo(uploadOptions) {
    console.log(uploadOptions);
    const videoPath = await chooseVideo();
    console.log("videoPath:", videoPath);
    // 返回值（文档中称之为 uploadParams）将被当作发布参数传入视频发布器，发布视频
    return {
      videoPath,
      stickersConfig: {
        text: [
          {
            text: "",
            color: "",
            fontSize: 28,
            scale: 1,
            x: 0.5,
            y: 0.5,
          },
        ],
      },
      success: function (callback) {
        // 只有当发布成功且挂载成功时，success callback 才会有 videoId
        console.log("success: ", callback);
      },
      fail: function (callback) {
        console.log("fail: ", callback);
      },
      complete: function (callback) {
        console.log("complete: ", callback);
      },
    };
}

function chooseVideo() {
    return new Promise((resolve) => {
      Taro.chooseVideo({
        sourceType: ["album", "camera"],
        compressed: true,
        success: (res) => {
          resolve(res.tempFilePath);
        },
        fail: (err) => {
          let errType = err.errMsg.includes("chooseVideo:fail cancel")
            ? "取消选择"
            : "选择失败";
           
          resolve("");
        },
      });
    });
  }

解释一下 Taro.chooseVideo，是调用他摄像头权限使用。

最后一步，那就是在当前页实例上进行手动添加该钩子函数

import Taro, { getCurrentInstance } from "@tarojs/taro";
import { onUploadDouyinVideo } from '@/utils/global'
class GestatePage extends Component<IProps, IState> {
  $instance = getCurrentInstance();
  constructor(props) {
    super(props);
    const params = this.$instance.router.params;
    this.state = {
     
    }
  }
  onReady(){
    console.log('onReadyonReadyonReady: ',this.$instance)
    this.$instance.page.onUploadDouyinVideo = onUploadDouyinVideo
 }
 
  //#endregion
  
  render() {
   <Button openType='uploadDouyinVideo' style={{width:'100%',height:'100%',position:'absolute',opacity:'0'}}>点击</Button>
 }

export default GestatePage;

然后点击该按钮就能直接调用摄像头进行拍摄日常并且发布。

当然，有人会疑惑为啥不直接点击右上角那个胶囊按钮，然后直接进行拍抖音不更好吗？

其实那样也行的。我们只是想把这个拍摄的入口展示在小程序上而已，紧接着肯定会有人问

不用tt.onShareAppMessage()这个api呢，因为他老是提示不是特殊用户无法自主挂载小程序，所以就跟变扭，用了uploadDouyinVideo。

好了，到这就完了，拜拜！