uni-app 怎么用uni-app做一个支持app的camera组件

在uni-app中，你可以使用<camera>组件来创建一个支持拍照功能的Camera组件。以下是一个简单的示例代码，展示了如何在uni-app中实现一个支持拍照功能的Camera组件，并保存拍摄的照片。

首先，你需要在页面的.vue文件中添加<camera>组件，并配置相关属性。以下是一个基本的示例：

<template>
  <view class="container">
    <camera device-position="back" flash="auto" @error="error" style="width: 100%; height: 100%;"></camera>
    <button @click="takePhoto">拍照</button>
    <image v-if="tempFilePath" :src="tempFilePath" mode="widthFix" style="margin-top: 20px;"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tempFilePath: ''
    };
  },
  methods: {
    takePhoto() {
      const context = uni.createCameraContext();
      context.takePhoto({
        quality: 'high',
        success: (res) => {
          this.tempFilePath = res.tempImagePath;
          uni.showToast({
            title: '拍照成功',
            icon: 'success',
            duration: 2000
          });
        },
        fail: (err) => {
          console.error(err);
          uni.showToast({
            title: '拍照失败',
            icon: 'none',
            duration: 2000
          });
        }
      });
    },
    error(e) {
      console.error(e.detail);
    }
  }
};
</script>

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

在这个示例中：

1. <camera>组件用于显示相机预览界面。device-position="back"表示使用后置摄像头，flash="auto"表示自动开启闪光灯（根据设备支持情况）。
2. @error="error"事件用于处理相机错误。
3. 一个按钮用于触发拍照操作，点击按钮时会调用takePhoto方法。
4. takePhoto方法中，通过uni.createCameraContext()获取相机上下文，并调用takePhoto方法进行拍照。拍照成功后，将照片的路径保存到tempFilePath变量中，并显示在页面上。
5. 如果拍照失败，会弹出提示框显示失败信息。

这个示例代码提供了一个基本的拍照功能，你可以根据需要进一步扩展，比如添加前置摄像头切换、相册选择等功能。