最近写到了嵌入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就嵌入到页面了,且样式和功能都已经实现

Logo

中国智能体开发者社区,聚焦智能体与大模型开发,提供前沿资讯、实用工具链、开源项目及行业案例。通过技术沙龙、开发者大赛等活动,促进经验交流与协作,助力开发者快速构建创新智能应用。

更多推荐