uni-app 仿微信单击拍照长按录像功能

在 uni-app 中实现仿微信单击拍照长按录像功能，可以通过结合 canvas 组件和 touch 事件来实现。以下是一个简化的代码示例，展示了如何实现这一功能：

1. 初始化项目并添加依赖

首先，确保你的 uni-app 项目已经创建，并在 manifest.json 中配置了必要的权限（如相机权限）。

2. 页面布局

在页面的 .vue 文件中，添加一个 canvas 组件用于显示相机预览，并添加两个按钮用于拍照和录像的控制。

<template>
  <view class="container">
    <canvas canvas-id="cameraCanvas" style="width: 100%; height: 100%;" />
    <button @click="takePhoto">拍照</button>
    <button @touchstart="startRecording" @touchend="stopRecording">录像</button>
  </view>
</template>

3. 逻辑实现

在页面的 script 部分，实现相机预览、拍照和录像的逻辑。

<script>
export default {
  data() {
    return {
      context: null,
      isRecording: false,
      videoFrames: [],
    };
  },
  mounted() {
    this.context = uni.createCanvasContext('cameraCanvas');
    // 初始化相机预览（这里假设已经处理了相机权限和预览初始化）
    uni.createCameraContext().start({
      success: (res) => {
        this.context.drawImage('/path/to/camera/preview', 0, 0, 375, 667); // 适配屏幕大小
        this.context.draw();
      },
    });
  },
  methods: {
    takePhoto() {
      const ctx = uni.createCameraContext();
      ctx.takePhoto({
        quality: 'high',
        success: (res) => {
          console.log('Photo taken:', res.tempImagePath);
        },
      });
    },
    startRecording() {
      this.isRecording = true;
      // 开始录像逻辑（这里需要自定义实现帧捕获和存储）
      // 示例：每秒捕获一帧
      setInterval(() => {
        if (this.isRecording) {
          const ctx = uni.createCameraContext();
          ctx.captureFrameToTempFilePath({
            success: (res) => {
              this.videoFrames.push(res.tempFilePath);
            },
          });
        }
      }, 1000);
    },
    stopRecording() {
      this.isRecording = false;
      console.log('Video frames:', this.videoFrames);
      // 停止录像后的处理，比如合成视频
    },
  },
};
</script>

4. 样式调整

在页面的 style 部分，添加必要的样式以适配布局。

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
button {
  margin: 10px;
}
</style>

注意事项

1. 权限处理：确保应用已经获得了相机权限。
2. 相机预览：上面的代码示例中省略了相机预览的完整实现，你需要根据 uni-app 的文档来配置相机预览。
3. 性能优化：录像功能中的帧捕获和存储需要根据实际需求进行优化，避免内存泄漏或性能瓶颈。