解决uniapp在嵌入HTML页面的时候使用web-view组件样式不生效或使用iframe无法实现录音等功能

原创于 2025-12-18 10:16:09 发布 · 146 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #uni-app #javascript

AI赋能编程语言挑战赛 10w+人浏览 297人参与

最近写到了嵌入HTML页面的功能，发现uni官方的web-view组件明显首先，导致连样式都无法发现，但是使用iframe虽热可以实现样式，但是像某些功能，比如录音，就无法实现（这些功能在H5都是可以实现的），下面是解决方案：
我们可以直接告诉AI：在APP端帮我使用plus.webview.create来创建webview，不要直接写web-view组件，以下是参考代码！

然后把下方的参考代码加上上面的提示词，AI可以直接帮你实现，我用的是claude sonnet 4.5

       HHTML部分 
       <!-- 隐藏的 iframe（仅 H5） -->
        <!-- #ifdef H5 -->
        <iframe class="voice_test_iframe" :src="voiceTestUrl" allow="microphone; autoplay">   </iframe>
        <!-- #endif -->
        <!-- APP 端使用 plus.webview.create() 创建隐藏的 webview -->
       <script setup>部分
  // #ifdef APP-PLUS
  // APP 端：创建隐藏的 webview 用于语音功能
  setTimeout(() => {
    const currentWebview = plus.webview.currentWebview()
    hiddenWebview = plus.webview.create(
      voiceTestUrl.value,
      'voiceTestWebview',
      {
        top: '100%', // 放在屏幕外
        height: '1px',
        background: 'transparent'
      }
    )
    currentWebview.append(hiddenWebview)
  }, 100)
  // #endif

实现效果如下图所示，这样我们的HTML就嵌入到页面了，且样式和功能都已经实现