guoyu/fronted_uniapp/pages/native-record-test.vue

<template>
    <view class="test-page">
        <view class="header">🎙️ 原生录音测试</view>
        
        <view class="tip-card">
            <text class="tip-icon">💡</text>
            <view class="tip-content">
                <text class="tip-title">测试说明（已修复）</text>
                <text class="tip-text">使用Android原生MediaRecorder</text>
                <text class="tip-text">兼容性：100%（所有Android设备）</text>
                <text class="tip-text">录音时长：3秒自动停止</text>
            </view>
        </view>
        
        <view class="card">
            <view class="card-title">🎤 启动系统录音</view>
            <button @click="startRecord" :disabled="testing" class="btn-primary">
                {{ testing ? '录音中...' : '开始录音' }}
            </button>
            <view class="result">{{ result }}</view>
        </view>
        
        <view class="card">
            <view class="card-title">📋 操作日志</view>
            <view class="log-box">
                <text v-for="(log, index) in logs" :key="index" class="log-line">
                    {{ log }}
                </text>
            </view>
        </view>
        
        <view class="card">
            <view class="card-title">❓ 如果测试失败</view>
            <view class="help-text">
                <text>1. 确认系统录音机可以正常录音</text>
                <text>2. 如果系统录音机也不行 → 硬件问题</text>
                <text>3. 如果系统录音机正常 → 权限问题</text>
            </view>
        </view>
    </view>
</template>

<script>
import nativeRecorder from '@/utils/native-recorder.js'

export default {
    data() {
        return {
            testing: false,
            result: '未测试',
            logs: []
        }
    },
    methods: {
        log(msg) {
            const time = new Date().toLocaleTimeString()
            this.logs.push(`[${time}] ${msg}`)
            console.log(msg)
        },
        
        async startRecord() {
            this.testing = true
            this.result = '启动系统录音界面...'
            this.log('=== 开始录音 ===')
            
            try {
                this.log('启动系统录音界面...')
                
                const filePath = await nativeRecorder.quickRecord()
                
                this.log(`✅ 录音完成: ${filePath}`)
                this.result = `✅ 录音成功！\n文件: ${filePath}`
                
                // 检查文件大小
                // #ifdef APP-PLUS
                plus.io.resolveLocalFileSystemURL(filePath, (entry) => {
                    entry.file((file) => {
                        const sizeKB = (file.size / 1024).toFixed(2)
                        this.log(`文件大小: ${sizeKB}KB`)
                        this.result += `\n大小: ${sizeKB}KB`
                    })
                })
                // #endif
                
                this.testing = false
                
            } catch (error) {
                this.log(`❌ 录音失败: ${error.message}`)
                
                if (error.message.includes('取消')) {
                    this.result = '⚠️ 用户取消录音'
                } else {
                    this.result = `❌ 录音失败\n${error.message}`
                }
                
                this.testing = false
            }
        }
    }
}
</script>

<style scoped>
.test-page {
    min-height: 100vh;
    background: #f5f7fa;
    padding: 20rpx;
}

.header {
    text-align: center;
    font-size: 40rpx;
    font-weight: bold;
    padding: 30rpx;
    color: #333;
}

.tip-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    display: flex;
    gap: 20rpx;
}

.tip-icon {
    font-size: 48rpx;
}

.tip-content {
    flex: 1;
}

.tip-title {
    display: block;
    font-size: 32rpx;
    font-weight: bold;
    color: #fff;
    margin-bottom: 10rpx;
}

.tip-text {
    display: block;
    font-size: 26rpx;
    color: rgba(255,255,255,0.9);
    line-height: 1.6;
}

.card {
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
}

.card-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    color: #333;
}

.btn-primary {
    width: 100%;
    padding: 30rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    border-radius: 12rpx;
    font-size: 32rpx;
    box-shadow: 0 4rpx 15rpx rgba(102, 126, 234, 0.4);
}

button:disabled {
    background: #ccc;
    color: #999;
    box-shadow: none;
}

.result {
    margin-top: 20rpx;
    padding: 20rpx;
    background: #f5f5f5;
    border-radius: 8rpx;
    font-size: 28rpx;
    min-height: 80rpx;
    white-space: pre-line;
    color: #333;
}

.log-box {
    max-height: 300rpx;
    overflow-y: auto;
    background: #2d2d2d;
    border-radius: 8rpx;
    padding: 20rpx;
}

.log-line {
    display: block;
    font-size: 24rpx;
    color: #0f0;
    font-family: monospace;
    line-height: 1.8;
}

.help-text {
    padding: 20rpx;
    background: #fff9e6;
    border-radius: 8rpx;
    border-left: 4rpx solid #ffc107;
}

.help-text text {
    display: block;
    font-size: 26rpx;
    color: #856404;
    line-height: 1.8;
    margin: 5rpx 0;
}
</style>