更新记录

1.0.0（2025-11-20）

发布初始版本1.0.0

平台兼容性

uni-app(3.6.14)

uni-app x(3.6.14)

其他

该插件使用简单，编写，易于集成。

一、使用举例：

<template>
    <view class="content">
        <view>
            <text class="title">{{title}}</text>
        </view>
        <!-- 使用你的相机组件，标签名与uts文件中定义的name一致 -->
        <st-camera ref="camera" style="width: 300rpx; height: 300rpx;" @ready="onCameraReady"
            @captureResult="handleCaptureResult" @startResult="handleStartResult" @changeResult="handleChangeResult" />

        <!-- 操作按钮 -->
        <view class="controls">
            <button @click="startCamera()">开启</button>
            <button @click="switchCamera()">切换</button>
            <button @click="takePicture()">拍照</button>
        </view>

        <!-- 简单的照片预览 -->
        <image v-if="photoPath" :src="photoPath" style="width: 300rpx; height: 300rpx;"></image>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello',
                photoPath: '',
            }
        },
        onLoad() {

        },
        methods: {
            onCameraReady() {
                uni.showToast({
                    title: '相机就绪，请点击开启',
                    icon: 'none'
                });
            },
            //拍照回调
            handleCaptureResult(result) {
                console.log("=======handleCaptureResult======", result.detail)
                let detail = result.detail
                if (detail.errMsg === 'takePicture:ok') {
                    this.photoPath = detail.tempUriString;
                    uni.showModal({
                        title: '拍照成功',
                        showCancel: false
                    });
                } else {
                    uni.showToast({
                        title: detail.errMsg,
                        icon: 'none'
                    });
                }
            },
            //开启相机的回调
            handleStartResult(result) {
                console.log("=======startResult======", result.detail)
                let detail = result.detail
                if (detail.errMsg !== 'startCamera:ok') {
                    uni.showToast({
                        title: detail.errMsg,
                        icon: 'none'
                    });
                } else {
                    uni.showToast({
                        title: '相机已开启',
                        icon: 'none'
                    });
                }
            },
            //切换前后置的回调
            handleChangeResult(result) {
                console.log("======changeResult=======", result.detail)
                let detail = result.detail
                if (detail.errMsg !== 'switchCamera:ok') {
                    uni.showToast({
                        title: detail.errMsg,
                        icon: 'none'
                    });
                }
            },
            // 开启相机
            async startCamera() {
                // #ifdef APP-PLUS
                const status = await new Promise((resolve) => {
                    plus.android.requestPermissions(['android.permission.CAMERA'], (result) => {
                        resolve(result.granted.length > 0);
                    });
                });
                if (!status) {
                    uni.showToast({
                        title: '相机权限被拒绝',
                        icon: 'none'
                    });
                    return;
                }
                // #endif

                const camera = this.$refs.camera;
                if (camera) {
                    uni.showLoading({
                        title: '开启中...'
                    });
                    // 调用UTS组件暴露的方法
                    camera.startCamera();
                    uni.hideLoading();
                }
            },
            // 切换镜头
            switchCamera() {
                const camera = this.$refs.camera;
                if (camera) {
                    camera.switchCamera();
                }
            },
            takePicture() {
                const camera = this.$refs.camera;
                if (camera) {
                    console.log("JS: 发送拍照指令...");
                    // 这里没有任何 await，也没有回调函数，单纯的调用
                    camera.capturePhoto();
                }
            },
        }
    }
</script>

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

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        /* #ifndef APP-PLUS-NVUE */
        margin-left: auto;
        margin-right: auto;
        /* #endif */
        margin-bottom: 50rpx;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>

注意： 1、需要自定义基座运行。

​ 2、根据官方文档，需要在nvue/uvue页面进行使用。

二、方法介绍：

@ready：相机准备好的回调

@captureResult：拍照结果回调

@startResult：相机启动结果回调

@changeResult：前后置切换相机回调