news 2026/3/24 4:04:45

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

作者头像

张小明

前端开发工程师

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

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

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/3/15 14:15:25

大模型技术如何应用在多自由度机械臂与灵巧手的控制应用

大模型&#xff08;Large Models&#xff09;&#xff0c;特别是大型语言模型&#xff08;LLMs&#xff09;和多模态大模型&#xff08;Multimodal Large Models, MMLMs&#xff09;&#xff0c;近年来在机器人控制领域展现出巨大潜力。将大模型技术应用于多自由度机械臂与灵巧…

作者头像 李华
网站建设 2026/3/15 13:43:21

Midscene.js终极指南:构建智能自动化工作流的完整教程

Midscene.js终极指南&#xff1a;构建智能自动化工作流的完整教程 【免费下载链接】midscene Let AI be your browser operator. 项目地址: https://gitcode.com/GitHub_Trending/mid/midscene Midscene.js是一个革命性的AI驱动自动化框架&#xff0c;它让开发者能够通过…

作者头像 李华
网站建设 2026/3/22 3:51:41

GridStack.js布局引擎实战指南:从零构建智能仪表盘

GridStack.js布局引擎实战指南&#xff1a;从零构建智能仪表盘 【免费下载链接】gridstack.js 项目地址: https://gitcode.com/gh_mirrors/gri/gridstack.js 你是否曾经面对这样的困境&#xff1a;拖拽组件时元素重叠错乱、响应式布局在移动端完全崩溃、嵌套网格定位完…

作者头像 李华
网站建设 2026/3/23 4:05:44

Git合并效率提升300%:这些工具和技巧你知道吗?

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 开发一个Git合并效率对比工具。功能&#xff1a;1. 模拟传统手动合并过程&#xff08;耗时统计&#xff09; 2. 展示AI辅助合并流程 3. 生成效率对比报告 4. 记录错误率对比。要求&…

作者头像 李华
网站建设 2026/3/15 0:38:53

颠覆传统:TaskFlow DAG编排框架如何重构复杂业务逻辑治理

在当今微服务架构盛行的时代&#xff0c;业务逻辑的复杂度呈指数级增长。当我们需要处理一个电商订单时&#xff0c;从用户下单到最终发货&#xff0c;涉及库存校验、支付处理、合规审查、物流调度等多个环节&#xff0c;这些环节之间既存在严格的先后顺序&#xff0c;又需要在…

作者头像 李华
网站建设 2026/3/15 18:16:08

Netty在电商秒杀系统中的应用实践

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 开发一个电商秒杀系统的核心通信模块&#xff0c;基于Netty实现&#xff1a;1. 高并发连接处理 2. 请求限流机制 3. 分布式锁集成 4. 结果异步返回 5. 压力测试接口。要求包含完整的…

作者头像 李华