uni-app 原生相机组件

在处理 uni-app 中的原生相机组件时，你可以利用 uni-app 提供的 <camera> 组件来访问设备的摄像头。以下是一个使用 <camera> 组件的完整示例，包括拍照和预览功能。

首先，确保你的 manifest.json 文件中已经配置了相关的权限，特别是摄像头权限：

{
  "mp-weixin": { // 以微信小程序为例
    "appid": "your-app-id",
    "setting": {
      "permission": {
        "scope.camera": {
          "desc": "你的应用需要使用相机"
        }
      }
    }
  }
}

接下来，在你的页面中添加 <camera> 组件，并处理拍照逻辑。以下是一个简单的页面示例：

<template>
  <view class="content">
    <camera id="myCamera" device-position="back" flash="off" @error="onError"></camera>
    <button @click="takePhoto">拍照</button>
    <image v-if="tempFilePath" :src="tempFilePath" mode="widthFix" class="photo-preview"></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;
        },
        fail: (err) => {
          console.error(err);
        }
      });
    },
    onError(e) {
      console.error('Camera error:', e.detail);
    }
  }
};
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.photo-preview {
  margin-top: 20px;
  width: 80%;
}
</style>

在这个示例中：

1. <camera> 组件用于显示摄像头预览。device-position 属性指定使用后置摄像头，flash 属性控制闪光灯状态。
2. <button> 组件触发拍照操作。
3. takePhoto 方法使用 uni.createCameraContext() 创建相机上下文，并调用 takePhoto 方法拍照。
4. 拍照成功后，将照片的路径保存到 tempFilePath，并在页面上显示。
5. onError 方法用于处理相机错误。

确保在实际项目中，根据具体需求调整样式和功能，比如添加前置摄像头切换、拍照后的处理逻辑（如上传服务器）等。这个示例为你提供了一个基础的起点，帮助你快速集成和使用 uni-app 的原生相机组件。