zhgdyunapp/examples/sosUniAppTest.vue

<template>
  <view class="sos-uniapp-test">
    <view class="test-header">
      <text class="test-title">SOS uniapp 环境测试</text>
    </view>
    
    <view class="test-content">
      <button 
        class="test-btn" 
        @click="testDOMPolyfill"
        :disabled="isTesting"
      >
        {{ isTesting ? '测试中...' : '测试DOM Polyfill' }}
      </button>
      
      <button 
        class="test-btn" 
        @click="testSOSWrapper"
        :disabled="isTesting"
      >
        {{ isTesting ? '测试中...' : '测试SOS包装器' }}
      </button>
      
      <view class="test-result">
        <text class="result-text">{{ resultText }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'SOSUniAppTest',
  data() {
    return {
      isTesting: false,
      resultText: '点击按钮开始测试'
    }
  },
  
  onLoad() {
    this.testDOMPolyfill()
  },
  
  methods: {
    /**
     * 测试DOM Polyfill
     */
    async testDOMPolyfill() {
      this.isTesting = true
      this.resultText = '正在测试DOM Polyfill...'
      
      try {
        // 测试document对象
        if (typeof document !== 'undefined') {
          this.resultText = 'document对象存在'
          
          // 测试getElementById
          if (typeof document.getElementById === 'function') {
            this.resultText += '\ngetElementById方法可用'
          } else {
            this.resultText += '\ngetElementById方法不可用'
          }
          
          // 测试createElement
          if (typeof document.createElement === 'function') {
            this.resultText += '\ncreateElement方法可用'
            
            // 测试创建元素
            const div = document.createElement('div')
            div.id = 'test-div'
            div.setAttribute('class', 'test-class')
            
            this.resultText += '\n成功创建div元素'
            
            // 测试getElementById
            const foundDiv = document.getElementById('test-div')
            if (foundDiv) {
              this.resultText += '\n成功通过ID找到元素'
            } else {
              this.resultText += '\n无法通过ID找到元素'
            }
            
          } else {
            this.resultText += '\ncreateElement方法不可用'
          }
          
          // 测试body
          if (document.body) {
            this.resultText += '\ndocument.body存在'
          } else {
            this.resultText += '\ndocument.body不存在'
          }
          
          // 测试readyState
          if (document.readyState) {
            this.resultText += `\ndocument.readyState: ${document.readyState}`
          } else {
            this.resultText += '\ndocument.readyState不存在'
          }
          
        } else {
          this.resultText = 'document对象不存在'
        }
        
        // 测试window对象
        if (typeof window !== 'undefined') {
          this.resultText += '\nwindow对象存在'
        } else {
          this.resultText += '\nwindow对象不存在'
        }
        
        // 测试navigator对象
        if (typeof navigator !== 'undefined') {
          this.resultText += '\nnavigator对象存在'
        } else {
          this.resultText += '\nnavigator对象不存在'
        }
        
        // 测试location对象
        if (typeof location !== 'undefined') {
          this.resultText += '\nlocation对象存在'
        } else {
          this.resultText += '\nlocation对象不存在'
        }
        
      } catch (error) {
        this.resultText = `DOM Polyfill测试失败: ${error.message}`
        console.error('DOM Polyfill测试失败:', error)
      } finally {
        this.isTesting = false
      }
    },
    
    /**
     * 测试SOS包装器
     */
    async testSOSWrapper() {
      this.isTesting = true
      this.resultText = '正在测试SOS包装器...'
      
      try {
        // 加载SOS uniapp包装器
        const sosModule = require('@/utils/sos-uniapp-wrapper.js')
        
        this.resultText = 'SOS uniapp包装器加载成功'
        
        // 检查SDK构造函数
        if (sosModule.SDK) {
          this.resultText += '\nSOS.SDK构造函数可用'
          
          // 尝试创建SDK实例
          const sdk = new sosModule.SDK({
            test: true
          })
          
          this.resultText += '\nSOS.SDK实例创建成功'
          
          // 检查实例方法
          if (typeof sdk.init === 'function') {
            this.resultText += '\ninit方法可用'
          } else {
            this.resultText += '\ninit方法不可用'
          }
          
          if (typeof sdk.audioSpeakStart === 'function') {
            this.resultText += '\naudioSpeakStart方法可用'
          } else {
            this.resultText += '\naudioSpeakStart方法不可用'
          }
          
          if (typeof sdk.videoMonitorStart === 'function') {
            this.resultText += '\nvideoMonitorStart方法可用'
          } else {
            this.resultText += '\nvideoMonitorStart方法不可用'
          }
          
        } else {
          this.resultText += '\nSOS.SDK构造函数不可用'
        }
        
        // 检查原始SOS对象
        if (sosModule.SOS) {
          this.resultText += '\n原始SOS对象可用'
        } else {
          this.resultText += '\n原始SOS对象不可用'
        }
        
        // 检查原始SDK构造函数
        if (sosModule.OriginalSDK) {
          this.resultText += '\n原始SOS.SDK构造函数可用'
        } else {
          this.resultText += '\n原始SOS.SDK构造函数不可用'
        }
        
      } catch (error) {
        this.resultText = `SOS包装器测试失败: ${error.message}`
        console.error('SOS包装器测试失败:', error)
      } finally {
        this.isTesting = false
      }
    }
  }
}
</script>

<style scoped>
.sos-uniapp-test {
  padding: 40rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.test-header {
  text-align: center;
  margin-bottom: 60rpx;
}

.test-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
}

.test-content {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.test-btn {
  background: #2196f3;
  color: white;
  border: none;
  border-radius: 30rpx;
  padding: 30rpx;
  font-size: 32rpx;
  font-weight: bold;
}

.test-btn:disabled {
  background: #ccc;
  color: #999;
}

.test-result {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-top: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.result-text {
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
  white-space: pre-line;
}
</style>