微信小程序 摄像头 授权同页面丝滑调用

page.wxml .wxss .json

<view wx:if="{{showCamera}}" style="width:100%;height:500rpx;">
  <camera class="camera" device-position="back" flash="off" binderror="onCameraError"></camera>
</view>

<button wx:if="{{showCamera}}" bindtap="takePhoto" type="primary">拍照</button>
<image wx:if="{{photoPath}}" src="{{photoPath}}" mode="widthFix" />

.camera {
  width: 100%;
  height: 100%;
  display: block;
}

{
  "permission": {
    "scope.camera": {
      "desc": "用于拍摄照片"
    }
  }
}

page.js

Page({
  data: {
    cameraAuth: false,
    showCamera: false,
    cameraContext: null,
    photoPath: ''
  },

  onLoad() {
    this.checkCameraAuth();
  },

  onShow() {
    if (!this.data.cameraAuth) {
      this.checkCameraAuth(true);
    }
  },

  // 检查权限
  checkCameraAuth(isShow = false) {
    wx.getSetting({
      success: (res) => {
        const hasAuth = res.authSetting['scope.camera'];
        this.setData({ cameraAuth: hasAuth });

        if (hasAuth) {
          this.openCamera();
          return;
        }

        if (isShow) return;

        wx.showModal({
          title: '需要摄像头权限',
          content: '请允许使用摄像头',
          confirmText: '去授权',
          success: (r) => {
            if (r.confirm) this.openAuthDialog();
          }
        })
      }
    })
  },

  // 打开授权
  openAuthDialog() {
    wx.authorize({
      scope: 'scope.camera',
      fail: () => {
        wx.showModal({
          title: '未授权',
          content: '请去设置开启权限',
          confirmText: '去设置',
          success: (r) => {
            if (r.confirm) wx.openSetting();
          }
        })
      },
      success: () => {
        // 系统授权的时候 success监听回调 关键！！  当前页面无需二次刷新
        this.checkCameraAuth(true);
      },
    })
  },

  // ✅ 启动相机（修复不显示问题）
  openCamera() {
    setTimeout(() => {
      this.setData({ showCamera: true });
      const cameraContext = wx.createCameraContext();
      this.setData({ cameraContext });
    }, 300);
  },

  // 拍照
  takePhoto() {
    this.data.cameraContext.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({ photoPath: res.tempImagePath });
        wx.previewImage({ urls: [res.tempImagePath] });
      }
    })
  },

  // 相机错误
  onCameraError(e) {
    console.error('相机异常', e);
    wx.showToast({ title: '相机启动失败', icon: 'none' });
  }
});