uniapp - 如何跟内嵌 web-view 组件内的网页交互，与 web-view 内嵌网页进行双向通信（uniapp 与 webview 网页之间的 “相互“ 传值）提供详细的示例代码及解决方案

已于 2025-01-16 15:33:34 修改
阅读量1.1w 收藏 12
点赞数 5
CC 4.0 BY-SA版权
分类专栏： 前端组件与功能(开箱即用) uniapp组件与功能(工作经验) uniapp常见问题解决 文章标签： 前端 uni-app 交互 前端框架 vue.js
于 2023-02-08 14:13:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/128934367
本文详细介绍了如何在uniapp中与内嵌的web-view组件进行双向通信，提供了vue2和vue3兼容的代码示例，涵盖了通过hash变更和调用页面方法两种交互方式，以及web端触发事件并通过uni.webview.js向uniapp发送消息的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

介绍

这种需求很少，本文提供了详细的代码示例与解决方案，代码简洁注释多！

本文实现了 uniapp 项目与 web-view 组件内嵌的普通网页（无论任何），实现 “双向通信” 二者相互发送、监听数据，

uniapp Vue3和Vue2都能用，

例如如下 uniapp 项目的一个页面，要与其 webview 内嵌的网页进行通讯：

其中 web-view 指定了一个 url 地址，后续即是将 url 地址加载的 html 页面与 uniapp 内部的 vue 页面进行交互。

在这里插入图片描述

uniapp 内向 web 组件发起交互

了解本专栏 订阅专栏 解锁全文
uniapp - 最新详细实现web-view网页与安卓苹果App端之间互相通信功能，苹果app/安卓app平台与内嵌webview组件内的网页进行相互传值，内置网页与app双向实时通信，详细示例代码
资深程序员
09-14 3637
uni-app，Android安卓，苹果ios，app，内嵌webview，第三方H5网页，app和web-view通信传值，web-view引入的页面向App主应用传递数据，App端与webview端相互通信，App端和H5端webview之间的通信，uniapp实现webview和APP之间的传值通信，如何互相传递对象数据，数据传递了接收不到，web-view页面向app内发送消息，监听传递的参数，uni-app和web-view页面相互传参，报错怎么办，跨域，屏幕空白出错，数据交互，解决手机物理返回按
H5(web-view)向uniApp小程序传递参数的正确姿势
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
03-23 708
H5 → 小程序发送数据。@message事件只能在页面后退、分享等情况下触发，不适用于实时通信。小程序 → H5可以使用的方式，让小程序主动拉取H5 数据。实时通信如果需要 H5实时推送数据给小程序，可以考虑 WebSocket、轮询等方式。对于普通的数据传递，方案已经够用了；但如果需要更复杂的交互，建议结合小程序eval执行 H5 代码，主动获取数据📡。
在UniApp中使用WebView，实现双向通信
weixin_49895911的博客
05-21 1374
UniApp可以通过evalJS方法向WebView发送数据，而WebView则通过postMessage方法向UniApp发送消息。完整代码示例展示了如何在UniApp中创建WebView，并实现双向通信。
Uniapp页面和Web/H5网页的数据通信 vue2+uniapp中内嵌web-view页面消息交互 单点登录消息传递
一些工作上遇到的前端问题记录
06-09 1282
本文介绍了在uniapp小程序中实现单点登录功能的方法。通过在uniapp中添加web-view页面链接到登录网页，网页登录成功后向小程序发送token。关键步骤包括：1) 创建web-view页面并设置登录网址；2) 网页引入uni.webview.js并监听UniAppJSBridgeReady事件；3) 使用postMessage或navigateTo方法传递token；4) 小程序通过@message或onLoad接收token。解决了uniapp与网页间的通信问题。
uniapp实现与webview之间的相互通讯
Story_0809的博客
09-30 7179
情况一：app嵌套h5（app、h5均用uniapp开发）情况二：app嵌套h5（h5用vue或react开发）情况三：h5嵌套h5（均用uniapp开发）
H5（uni-app、react-native等半原生app）和webview（iframe）交互
最新发布
qq_35025830的博客
06-30 193
2、新建web.nvue页面打包APP需要webview监听@onPostMessage="handlePostMessage"（为什么用nvue，打包后vue页面无法监听message消息）web用iframe，用一下代码监听iframe消息，可以放main.ts。nativeApi.ts(监听消息、发送消息、常用方法)NativeApiList.ts（被调用的api列表）NativeSDK.ts（监听消息、发送消息）api.ts（调用的api列表）2、main.ts开启监听。
uniapp与webview之间的相互传值的实现
12-28
1.uni-app 如何发送数据到 H5？ 其实很接单、在 web-view 中只需要通过 URL 就可以向 H5 进行传参 例如在 uni-app 中： [removed] export default { data() { return { url:'/hybrid/html/local.
【uni-app】App与webview双向实时通信
Assa_ss的博客
06-01 5734
在 Uniapp 中，App 与 里面嵌入的 webview 进行双向的实时通信vue2 ， 模拟器主要分为两部分webview 向 app 发送信息app 向 webview 发送信息以下是实现方式，用一个例子来说明（文章最后我会放这个例子的github地址）
uni-app 与 web-view内嵌网页双向通信
weixin_42560947的博客
09-21 859
uni-app 与 web-view内嵌网页双向通信
uniapp 在app端 使用webview进行数据交互。
~~~
11-29 1619
uniapp 在app端 使用webview进行数据交互。
uni-app App web-view与应用间交互
weixin_46919753的博客
11-30 785
在使用uni-app打包app的过程中使用到一个h5的页面，项目中使用了web-view来进行加载，但是在web-view中链接有重定向，导致了返回的时候第一次返回了一个空白页面，第二次才能返回到app列表页面，看到网上很多这种问题，官方没有给到解决办法。action中就是需要给app发送的值，这里根据实际情况自行定，我这个status是定义了一个变量，根据不同的变量跳转到不同的页面去。我这里是由于是内网部署，所以我将js下载到了本地，在web-view页面项目中加载sdk。在入口的html页面加载js。
关于uni-app使用web-view页面之间互相跳转、通信等问题的解决方案.docx
10-26
关于uni-app使用web-view页面之间互相跳转、通信等问题的解决方案.docx
微信小程序web-view源码（内嵌网页分享功能）.zip
08-29
微信小程序是一种轻量级的应用开发平台，允许开发者在微信内部构建功能丰富的应用，而`web-view`组件是其中的关键组成部分，它使得小程序能够内嵌HTML网页，提供了与Web页面交互的可能性。本压缩包中的源码着重展示...
uniapp 微信小程序webview与h5双向实时通信交互
weixin_44294359的博客
01-09 4775
uniapp 微信小程序webview与h5双向实时通信交互
uniapp web-view组件双向通信
lauwen
01-19 4452
本文主要介绍在uniapp中页面与webview组件内页面的双向通信问题。
实现uniapp多端项目（app，小程序）和嵌入的webview中的h5之间实时进行通信
嗨，欢迎来到我的 CSDN 博客小天地！一名深耕多年的技术发烧友。在这里，我将把日常工作中积累的宝贵经验，从复杂架构设计的精妙之处，到代码优化的实战技巧，毫无保留地分享给大家。
02-20 6280
实现 UniApp 多端项目（App、小程序）与嵌入的 WebView 中的 H5 页面之间的实时通信是一个复杂但非常有用的功能。本文将详细介绍如何实现这一功能，涵盖技术原理、实现步骤、代码示例以及注意事项。
uniapp与webview网页交互打开手机扫码
GhostPaints的博客
06-09 4029
uniapp与webview页面交互
uniapp web-view通信与vue3网页
04-01
我需要先回忆一下Uniapp中Web-view组件的用法，以及如何与内嵌的网页进行通信。特别是用户提到Vue3，可能需要考虑Vue3的语法和响应式系统如何与Uniapp结合。 首先，Web-view组件在Uniapp中用于嵌入H5页面，用户可能...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

十一猫咪爱养鱼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值