uni-app微信小程序相机组件二次拍照白屏问题的排查与解决

<template>
  <view class="container">
    <!-- 微信小程序相机组件 -->
    <camera class="camera" v-show="showCamera"></camera>
    <!-- 照片预览区域 -->
    <image :src="picture" v-if="picture" v-show="!showCamera"></image>
    <image :src="tempImage" v-else v-show="!showCamera"></image>
    <!-- 拍照按钮 -->
    <view class="btn-photo" v-if="showCamera" @click="takePhoto">
      <image src="/static/camera-icon.png"></image>
    </view>
    <!-- 操作按钮区 -->
    <view class="action-area" v-else>
      <view class="ai-result">
        <!-- AI识别结果展示 -->
        <view v-for="item in result" :key="item.value">
          {{ item.name }}
        </view>
      </view>
      <view class="button-group">
        <button @click="deletePhoto">删除</button>
        <button @click="confirmUpload">确定</button>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      showCamera: true,
      picture: "",
      tempImage: "",
      result: []
    }
  },
  methods: {
    // 拍照
    takePhoto() {
      const ctx = uni.createCameraContext();
      ctx.takePhoto({
        quality: 'high',
        success: (res) => {
          this.showCamera = false;
          this.tempImage = res.tempImagePath;
          // 读取图片并转base64进行AI识别
          uni.getFileSystemManager().readFile({
            filePath: res.tempImagePath,
            encoding: 'base64',
            success: (fileRes) => {
              const base64Img = `data:image/jpeg;base64,${fileRes.data}`;
              this.aiRecognize(base64Img);
            }
          });
        }
      });
    },
    // 删除照片 - 问题代码
    deletePhoto() {
      this.picture = "#";  // ⚠️ 问题所在
      this.showCamera = true;
    },
    // AI识别
    aiRecognize(base64Img) {
      // 调用AI识别接口
      // this.result = 识别结果
    },
    // 确定上报
    confirmUpload() {
      // 提交上报信息
    }
  }
}
</script>

<image :src="picture" v-if="picture" v-show="!showCamera"></image>
<image :src="tempImage" v-else v-show="!showCamera"></image>

初始状态：
picture: ""           // 空字符串（falsy）
tempImage: ""         // 空字符串
showCamera: true
↓ 点击拍照
拍照成功后：
picture: ""           // 仍为空
tempImage: "wxfile://tmp_xxx.jpg"  // 微信临时文件路径
showCamera: false
↓ 渲染逻辑判断
v-if="picture" → false (空字符串是falsy)
走 v-else 分支，显示 tempImage ✅ 正常显示照片

删除前状态：
picture: ""
tempImage: "wxfile://tmp_xxx.jpg"
showCamera: false
↓ 点击删除按钮
删除后状态：
picture: "#"          // ⚠️ 被设置为 "#"
tempImage: "wxfile://tmp_xxx.jpg"  // 未清空！
showCamera: true
↓ 第二次拍照
拍照成功后：
picture: "#"          // 仍然是 "#"
tempImage: "wxfile://tmp_yyy.jpg"  // 新照片路径
showCamera: false
↓ 渲染逻辑判断
v-if="picture" → true ("#" 是truthy值)
尝试渲染 <image src="#"> ❌
结果：白屏！tempImage 根本没有机会显示

// 修复后的删除方法
deletePhoto() {
  this.picture = "";      // ✅ 改为空字符串，而不是 "#"
  this.tempImage = "";    // ✅ 清空临时图片路径
  this.result = [];       // ✅ 清空AI识别结果
  this.checkIndex = 0;    // ✅ 重置选中索引
  this.showCamera = true; // 重新显示相机
}

↓ 点击删除
删除后状态：
picture: ""           // ✅ 空字符串（falsy）
tempImage: ""         // ✅ 已清空
result: []            // ✅ 已清空
showCamera: true
↓ 第二次拍照
拍照成功后：
picture: ""           // 仍为空
tempImage: "wxfile://tmp_yyy.jpg"  // 新照片路径
showCamera: false
↓ 渲染逻辑判断
v-if="picture" → false (空字符串是falsy)
走 v-else 分支，显示 tempImage ✅ 正常显示新照片！

<!-- 这种写法会进行布尔值转换 -->
<view v-if="value">内容</view>
<!-- 如果需要严格判断，建议明确比较 -->
<view v-if="value !== ''">内容</view>
<view v-if="value !== null">内容</view>

console.log('删除前:', this.picture, this.tempImage);
this.deletePhoto();
console.log('删除后:', this.picture, this.tempImage);

onShow() {
  console.log('页面显示时的状态:', this.$data);
}