uni-app开发微信小程序，单独拉起相机(自定义相机页面)

camera组件与 wx.createCameraContext的使用示例

注意示例代码中的相关包版本：

 "@dcloudio/uni-app": "3.0.0-4020920240930001",
 "@dcloudio/uni-mp-weixin": "3.0.0-4020920240930001", 
  "vue": "^3.2.33",
  "sass": "^1.49.9",
  "typescript": "^4.6.3",

示例代码

radio-group与image均是uni-app的内置组件组件

<template>
    <view>
        <camera
            mode="normal"
            :device-position="cameraConfig.devicePosition"
            :flash="cameraConfig.flash"
            @error="cameraError"
            @stop="cameraStop"
            style="width: 100%; height: 300px"
            @initdone="initdone"
        ></camera>
        <radio-group class="device-position-radios" @change="devicePositionChange">
            <view class="title">摄像头朝向:</view>
            <view class="radio-container">
                <label v-for="item in devicePositionOptions" :key="item.value">
                    <radio
                        :value="item.value"
                        :checked="item.value === cameraConfig.devicePosition"
                    />
                    {{ item.label }}
                </label>
            </view>
        </radio-group>
        <radio-group class="flash-radios" @change="flashChange">
            <view class="title">闪光灯状态:</view>
            <view class="radio-container">
                <label v-for="item in flashOptions" :key="item.value">
                    <radio :value="item.value" :checked="item.value === cameraConfig.flash" />
                    {{ item.label }}
                </label>
            </view>
        </radio-group>
        <radio-group class="quality-radios" @change="qualityChange">
            <view class="title">成像质量:</view>
            <view class="radio-container">
                <label v-for="item in qualityOptions" :key="item.value">
                    <radio :value="item.value" :checked="item.value === takePhotoConfig.quality" />
                    {{ item.label }}
                </label>
            </view>
        </radio-group>

        <view class="button-group">
            <button type="button" class="btn-primary" @click="takePhoto">拍照</button>
        </view>
        <view v-if="imgInfo.tempImagePath">
            <view class="a">图片宽高：{{ imgInfo.width }} * {{ imgInfo.height }}</view>
               <view class="a">临时路径：{{ imgInfo.tempImagePath }}</view>
            <image mode="widthFix" :src="imgInfo.tempImagePath"></image>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const devicePositionOptions = [
    { value: 'front', label: '前置' },
    { value: 'back', label: '后置' }
]

const flashOptions = [
    { value: 'on', label: '打开' },
    { value: 'off', label: '关闭' },
    { value: 'torch', label: '常亮' },
    { value: 'auto', label: '自动' }
]

const qualityOptions = [
    { value: 'normal', label: '普通质量' },
    { value: 'high', label: '高质量' },
    { value: 'low', label: '低质量' }
]

const imgInfo = ref({
    width: '',
    height: '',
    tempImagePath: ''
})

const cameraConfig = ref<{
    devicePosition: 'front' | 'back'
    flash: 'auto' | 'on' | 'off' | 'torch'
}>({
    devicePosition: 'back',
    flash: 'auto'
})

const takePhotoConfig: {
    quality?: 'normal' | 'high' | 'low' //成像质量
    selfieMirror: boolean //是否开启镜像
} = {
    quality: 'normal',
    selfieMirror: false
}
function takePhoto() {
    const cameraContext = uni.createCameraContext()
    cameraContext.takePhoto({
        ...takePhotoConfig,
        success: (res: any) => {
            console.log('takePhoto res:', res)
            imgInfo.value = res
        }
    })
}

function flashChange(e: { detail: { value: 'auto' | 'on' | 'off' | 'torch' } }) {
    console.log('flashChange', e)
    cameraConfig.value.flash = e.detail.value
}

function cameraError(e) {
    console.log('用户不允许使用摄像头时触发 error:', e)
}

function cameraStop(e) {
    console.log('摄像头在非正常终止时触发，如退出后台等情况 Stop:', e)
}

function initdone(e: any) {
    console.log('相机初始化完成时触发 initdone', e)
}

function qualityChange(e: { detail: { value: 'normal' | 'high' | 'low' } }) {
    console.log('qualityChange', e)
    takePhotoConfig.quality = e.detail.value
}

function devicePositionChange(e: { detail: { value: 'back' | 'front' } }) {
    console.log('devicePositionChange', e)
    cameraConfig.value.devicePosition = e.detail.value
}
</script>

<style scoped lang="scss">
.button-group {
    padding: 30rpx;
}
.title {
    font-size: 36rpx;
    font-weight: 600;
}
.device-position-radios {
    margin-top: 20rpx;
}
.radio-container {
    display: flex;
    justify-content: space-around;
    column-gap: 20rpx;
    align-items: center;
    padding: 30rpx;
}

.flash-container {
    display: flex;
    column-gap: 20rpx;
    align-items: center;
    margin: 20rpx 0;
}
</style>

demo效果图

踩坑小计

1. 报错fail api scope is not declared in the privacy agreement,
   需要到小程序后台，更新对应的隐私协议，详情可参考微信开放社区 相关问题