uni-app 定制拍照界面

在uni-app中定制拍照界面，通常需要使用到 uni.createCameraContext() API 来获取相机的上下文，并结合自定义组件和样式来实现界面的定制。以下是一个简单的示例代码，展示了如何创建一个基本的拍照界面，并添加一些基本的自定义样式和功能。

首先，在你的页面文件（如 pages/camera/camera.vue）中，你可以这样写：

<template>
  <view class="camera-container">
    <canvas canvas-id="camera" class="camera"></canvas>
    <button @click="takePhoto">拍照</button>
    <image v-if="photoPath" :src="photoPath" class="photo-preview"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      photoPath: ''
    };
  },
  mounted() {
    this.cameraContext = uni.createCameraContext();
  },
  methods: {
    takePhoto() {
      this.cameraContext.takePhoto({
        quality: 'high',
        success: (res) => {
          this.photoPath = res.tempImagePath;
          console.log('Photo taken:', res.tempImagePath);
        },
        fail: (err) => {
          console.error('Failed to take photo:', err);
        }
      });
    }
  }
};
</script>

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

.camera {
  width: 100%;
  height: 80vh;
  background-color: #000;
}

button {
  margin: 20px;
  padding: 10px 20px;
  background-color: #1aad19;
  color: #fff;
  border: none;
  border-radius: 5px;
}

.photo-preview {
  width: 80%;
  height: 20vh;
  object-fit: cover;
  margin-top: 20px;
}
</style>

在这个示例中：

我们使用了 <canvas> 标签来作为相机的视图容器，并设置了一个 canvas-id。
在 mounted 生命周期钩子中，我们调用了 uni.createCameraContext() 来获取相机的上下文。
takePhoto 方法使用 this.cameraContext.takePhoto() 来拍照，并在成功时保存照片的临时路径到 photoPath 数据属性中。
如果 photoPath 有值，则显示拍照后的预览图。

通过修改样式和添加更多功能（如闪光灯、切换前后摄像头等），你可以进一步定制这个拍照界面。注意，实际项目中可能还需要处理更多边界情况和错误处理。