uni-app IOS里longpress 事件无法调用uni.chooseVideo

发布于 1周前 作者 eggper 来自 Uni-App

uni-app IOS里longpress 事件无法调用uni.chooseVideo

开发环境 版本号 项目创建方式
Windows Win11 HBuilderX

操作步骤：

实现长按图标实现拍摄视频，类似微信，但是在苹果手机长按图标后没有触发uni.chooseVideo，安卓正常，经调试，longpress事件是触发的，但是无法触发uni.chooseVideo

预期结果：

实现长按图标实现拍摄视频，类似微信

实际结果：

苹果手机长按不触发uni.chooseVideo（长按事件longpress是触发的）

bug描述：

IOS里longpress 事件无法调用uni.chooseVideo

代码如下

<view class="boxItem"  v-for="(i, index) in boxList" [@longpress](/user/longpress)="getVIdeo(index+1)" [@click](/user/click)="boxFn(index + 1)" :key="index">  
    <image style="width: 70rpx; height: 70rpx; padding-top: 15rpx" :src="i.icon"></image>  
    <view class="lableItem"> {{ $t(i.label) }}</view>  
</view>  

getVIdeo(index) {  
    if(index===2){  

        uni.chooseVideo({  

            sourceType: ['album', 'camera'],  
            success: async (res) => {  
                console.log(res);  

                this.fileList1 = res.tempFilePath  
                let traceId = new Date().getTime().toString() + '_s' + this.chatterId  
                this.$store.commit("setWebsocketData", {  
                    groupId: this.group.id,  
                    list: [{  
                        content: this.fileList1,  
                        fromId: this.chatterId,  
                        traceId,  
                        status: 1,  
                        video: "video",  
                    }, ],  
                });  
                const result = await Upload.uploadFilePromise(this.fileList1)  

                let videoSrc = result[0].url  
                this.videoMap.set(traceId,videoSrc)  

                this.$store.dispatch(  
                    "websocketSend",  
                    JSON.stringify({  
                        path: "/p2gx",  
                        groupId: this.group.id,  
                        traceId,  
                        fromId: this.chatterId,  

                        rd: Math.floor(Math.random() * 100),  
                        body: videoSrc,  
                    })  
                );  

            },  
        });  

    }  
}

Harmonyos Next教程
1 回复

在uni-app中处理iOS平台上的longpress事件并触发uni.chooseVideo功能时，可能会遇到一些平台兼容性问题。虽然longpress事件在大多数平台上能够正常工作，但在iOS设备上可能无法如预期般触发视频选择功能。为了绕过这个限制，你可以考虑使用touchstart和touchend事件来模拟长按行为，并在确认长按后调用uni.chooseVideo。

以下是一个使用JavaScript和uni-app框架的示例代码，展示了如何在iOS设备上模拟longpress事件并调用uni.chooseVideo：

<template>
  <view class="container">
    <button @touchstart="onTouchStart" @touchend="onTouchEnd" @touchmove="onTouchMove" class="longpress-button">
      长按选择视频
    </button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      startTime: 0,
      longPressTimeout: null,
    };
  },
  methods: {
    onTouchStart(event) {
      this.startTime = new Date().getTime();
      // 设置一个延迟来判断是否长按，这里假设长按时间为800毫秒
      this.longPressTimeout = setTimeout(() => {
        this.handleLongPress();
      }, 800);
    },
    onTouchEnd(event) {
      clearTimeout(this.longPressTimeout);
      const endTime = new Date().getTime();
      // 如果触摸结束时间太短，则不视为长按
      if (endTime - this.startTime < 800) {
        // 这里可以添加短按事件处理逻辑，如果需要的话
      }
    },
    onTouchMove(event) {
      // 如果触摸移动，取消长按事件
      clearTimeout(this.longPressTimeout);
    },
    handleLongPress() {
      uni.chooseVideo({
        sourceType: ['album', 'camera'], // 可以从相册或相机选择
        maxDuration: 60, // 最大录制时长60秒
        camera: 'back', // 使用后置摄像头
        success: (res) => {
          console.log('选择视频成功:', res);
          // 处理视频选择成功后的逻辑
        },
        fail: (err) => {
          console.error('选择视频失败:', err);
        },
      });
    },
  },
};
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.longpress-button {
  padding: 20px;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 5px;
}
</style>

在这个示例中，我们通过监听touchstart、touchend和touchmove事件来模拟longpress。如果在800毫秒内没有移动手指且触摸结束，则视为长按并触发uni.chooseVideo。注意，这种方法虽然可以绕过longpress事件在iOS上的问题，但可能需要根据具体需求调整长按时间和其他参数。

回到顶部