ts 和 webview 通信

最新推荐文章于 2025-04-23 15:45:20 发布
原创 最新推荐文章于 2025-04-23 15:45:20 发布 · 288 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #typescript

文章展示了如何在TypeScript(TS)中与WebView进行通信，通过使用`iframe.contentWindow.postMessage`方法发送消息，以及在Webview的JavaScript中监听并响应这些消息。同样，也演示了WebView如何向TS发送消息并由TS进行监听处理，这种通信机制在多层嵌套或组件间交互时非常有用。

TS=>webView

this.webView["_impl"]._iframe.contentWindow.postMessage(“showsidePanel”, “*”);

webview 监听

window.addEventListener(‘message’, function (e) {

if( e.data == “showsidePanel”)

{

}

});

webview=》ts

window.parent.postMessage(“openGame”, ‘*’);

ts监听

window.addEventListener(‘message’, (e) => {

if (“openGame” == e.data ) {

}

})

webview可以在js里监听和发送消息 也可以在html的 里

liuzuoshuang
关注
vue3+ts写的H5以外链webview方式内嵌在uniapp中，点击H5页面传值到uniapp其他页面
weixin_59812671的博客
04-25 940
uniapp官方文件需要改造下，满足vue3,ts,该代码可直接复制本地保存为 uni.webview.js 文件。uniapp 要新建一个pages/webview/html-webview 页面。用vue3+ts写的一个H5项目，内嵌在uniapp中。weburl 即完整外链链接，有些还需要拼接token。uniapp 跳转到的页面可获取H5传过来的值。点击事件跳转uniapp中页面并传值。
electron+VUE Browserwindow与webview通信
immotal_xiaoqiang的博客
03-29 1991
如果能看到webview控制台里面的命令：window.electronAPI 说明已经通信成功了，后面就可以自己实现自己的逻辑了。1，porelaod注入的路径需要以file:///开头的绝对路径，如果不能保证 可以直接在vue中如下写法来进行测试。例如：file:///C:/porelaod/webPreload.js。webview.openDevTools()打开webview的控制台。其中preloadPath需要以file:///开头的绝对路径。// 在webview中注入脚本。
webview 交互的两种方式
mrzhangdulin的博客
06-28 1237
1 jsbridge promise 封装 /* @Author: zhangyu @Email: zhangdulin@outlook.com @Date: 2021-06-11 11:00:48 @LastEditors: zhangyu @LastEditTime: 2021-06-16 18:07:04 @Description: */ //JS注册事件监听 var initflag = false function connectWebViewJavascriptBridge(callba
android studio webview js交互,[android] WebView与Js交互详解
weixin_35662171的博客
05-26 345
packagecom.tsh.mywebview;importandroid.annotation.SuppressLint;importandroid.app.Activity;importandroid.app.ProgressDialog;importandroid.graphics.Bitmap;importandroid.os.Bundle;importandroid.view.KeyE...
cocos creator - WebView内部页面的交互和层级问题
热门推荐
长生但酒狂的博客
11-20 1万+
我们知道creator里的WebView，VideoPlayer等特殊组件有一个非常严重的问题，就是不管你怎么设置层级，这类组件始终处于最上层！其他UI组件会被遮挡。 我们打开浏览器运行，F12检测元素就可以清楚的看到他们的层级关系。 如下图： 通过上图我们可以清楚的看到，video(videoPlayer组件) 和 iframe(webView组件) 在 canvas(GameCanvas) ...
webview的使用
桔柚的博客
05-09 855
1.设置webview加载的网页url地址 mWvFragmentIndex.loadUrl(HttpModle.HTTP_URL_INDEX);
cocos webview与通信
qq_39685400的博客
03-14 794
当前需求是在原有的cocos手机游戏里嵌入另一个cocos的web-mobile项目所以需要使用webview记录一下首先就是要有一个webview组件接下来是脚本（外部项目）${${（内部项目）在Main.ts即项目开始时获取token返回到外部游戏。
VsCode之使用WebView通信详解
01-21
通过插件完成通信，这回我还是通过插件，只不过方式主要以在ts文件里面使用webview来进行通信。 另外在此声明，一定要好好看仔细看官方文档，国内关于VsCode相关的开发，少之又少，虽然有一个叫小茗同学写的相对较...
flutter和vue3项目利用webview_flutter插件通信
Amouzy的博客
04-23 1060
近来需要实现一个功能：flutter项目的会员中心页面跳转到vue3项目的活动页，点击该活动页面的“签到”按钮后到flutter项目的积分中心页面进行签到，签到成功后手动返回上一个页面即vue3活动页面的按钮状态更新问题（需更新为“已签到”）。实现方法：通过webview_flutterwebview_flutter 是 Flutter 官方提供的一个跨平台 WebView 插件，用于在 Flutter 应用中嵌入网页内容。
WebView2兼容VUE ,替代Electron/CefSharp的放哪(自定义浏览器内核)
12-30
这通常涉及配置WebView2加载本地HTML文件，以及可能的API通信，以便Vue应用与桌面应用的其他部分交互。 总的来说，WebView2为.NET开发者提供了一种新的选择，他们可以利用这个现代浏览器内核来创建具有Web技术的...
设置UIWebView的背景颜色为透明
寻找生活和工作的支点
09-27 188
    [_webView setBackgroundColor:[UIColor clearColor]];     [_webView setOpaque:NO];
addEventListener 的用法
lishangua的专栏
04-16 1635
一般情况下，如果给一个dom对象绑定事件，
探索无限可能：UniWebView——Unity应用中的网页浏览器利器
gitblog_09791的博客
10-19 787
探索无限可能：UniWebView——Unity应用中的网页浏览器利器 去发现同类优质开源项目:https://gitcode.com/ 项目介绍 在现代应用开发中，网页内容的嵌入和展示已经成为提升用户体验的重要手段。无论是活动公告、排行榜，还是动态内容的展示，网页浏览器都能提供极大的灵活性和便捷性。UniWebView，作为一款强大的Unity工具，正是为解决这一需求而生。它能够轻松地将网页浏览...
微信小程序和webview使用postMessage交互
有一棵树的博客
02-27 7100
微信小程序和webview使用postMessage交互
移动 web 最佳实践（一）
anbang1361的博客
09-07 957
笔者最近在公司用 web 技术开发移动端应用已经有一年多的时间了，开始主要以 vue 技术栈配合 native 为主，目前演进成 vue + react native 技术架构，vue 主要负责开发 OA 业务，react native 主要负责即时通信部分，是在 mattermost-mobile 的基础上修改的（mattermost 是一个开源的即时通讯方案）。 因为公司在这方面没有...
android webView https 5.0以上兼容5.0以下
TS_learner的专栏
05-30 1376
private SSLContext sslContext; public MyWebViewClient() { prepareSslPinning(); } @Override public WebResourceResponse shouldInterceptRequest(final WebVie...
JS或TS调用原生Android的方法
前端小白的逆袭
09-26 2043
JS调用Android方法，Ts调用android方法，H5App混合开发JS或TS调用原生方法,JS调用原生,TS调用原生
基于 Vue 和 TS 的 Web 移动端项目实战心得
前端大全
09-23 1602
（给前端大全加星标，提升前端技能）作者：mcuking（杭州个推）https://juejin.im/post/5d759f706fb9a06afa32adec笔者在公司...
WebView中JavaScript交互【Android】
书客创作
06-23 2058
WebView是移动端用来加载网页的控件，而应用要想直接与加载好的网页进行交互，可以通过js也就是JavaScript脚本来完成，所谓交互是指网页可以调用应用内方法（Java方法），应用也可以添加或调用网页相应内容。那么具体该如何实现呢？......
uniapp+vue3中 APP端嵌入webview，如何使app和webview通讯
最新发布
08-31
<think> 我们正在处理的是 uniapp + vue3 的 APP 端嵌入 webview 并实现双向通讯的问题。根据引用资料，我们可以总结如下： 1. **APP 向 WebView 发送消息**：主要使用 `evalJS` 方法执行 WebView 页面中的 JavaScript 函数。 2. **WebView 向 APP 发送消息**：主要使用 `uni.postMessage` 方法（需要引入 uni.webview.js 库），然后在 APP 端通过 `@message` 事件监听。 在 vue3 中，我们需要注意： - 引用[3]提到，在 vue3 中需要直接引入 `uni.webview.js` 文件，然后在需要的地方调用 `webUni.postMessage`。 - 引用[2]展示了在 vue3 中使用 `@message` 事件监听 WebView 的消息。 下面我们分别详细说明两种方向的通讯： ### 一、准备工作 在 H5 页面中，我们需要引入 `uni.webview.js` 库，以便使用 `uni.postMessage` 方法。引用[5]给出了引入方式： ```html <script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script> ``` ### 二、APP 向 WebView 发送消息 在 APP 端，我们需要获取到 WebView 的实例，然后通过 `evalJS` 方法调用 WebView 页面中的全局函数。 在 vue3 的 setup 语法糖中，我们可以这样操作： 1. 首先，在 WebView 页面中定义一个全局函数，用于接收 APP 发来的消息。例如： ```javascript window.receiveMessageFromApp = function(data) { console.log('收到APP消息：', data); // 处理消息 }; ``` 2. 在 APP 端，通过以下方式发送消息： ```vue <template> <view> <web-view :src="webviewUrl" @message="handleH5Message" ref="myWebView"></web-view> </view> </template> <script setup> import { ref, onMounted } from 'vue'; const myWebView = ref(null); // 用于获取web-view组件的引用 const webviewUrl = ref('https://your-h5-page.com'); // 向WebView发送消息 function sendToWebView() { // 获取当前页面关联的WebView对象（原生WebView） const currentWebview = uni.getCurrentSubNVue()?.id ? uni.getCurrentSubNVue() : uni.getWebviewById(uni.getCurrentPages()[0].$getAppWebview().id); // 注意：上面的获取方式可能因版本而异，下面提供另一种获取方式 // 由于在vue3中，直接通过ref获取web-view组件，然后获取其底层WebView对象 // 但uniapp的web-view组件并没有直接暴露evalJS方法，因此我们需要通过uni的API获取当前页面的WebView对象 // 方法二：通过页面对象获取 const pages = getCurrentPages(); const page = pages[pages.length - 1]; const webview = page.$getAppWebview(); // 获取web-view子WebView（因为web-view是当前页面的一个子view） const wv = webview.children()[0]; // 使用evalJS方法 const message = { type: 'GREETING', content: 'Hello from App' }; wv.evalJS(`receiveMessageFromApp(${JSON.stringify(message)})`); } </script> ``` ### 三、WebView 向 APP 发送消息 1. 在 WebView 的 H5 页面中，使用 `uni.postMessage` 发送消息： ```javascript // 在H5页面中 function sendToApp() { uni.postMessage({ data: { action: 'some_action', data: { key: 'value' } } }); } ``` 2. 在 APP 端，通过 `@message` 事件监听： ```vue <template> <web-view :src="webviewUrl" @message="handleMessage"></web-view> </template> <script setup> function handleMessage(event) { const message = event.detail.data[0]; // 注意：event.detail.data是一个数组，取第一个元素 console.log('收到H5消息：', message); // 处理消息 } </script> ``` ### 四、在 vue3 中引入 uni.webview.js 的处理（引用[3]） 引用[3]提到，在 vue3 中，需要在页面中直接引入 `uni.webview.js` 文件，然后调用其方法。但注意，这个引入是在 WebView 的 H5 页面中，而不是在 uniapp 的 APP 页面中。 然而，如果我们希望在 uniapp 的 vue3 页面中控制 WebView 的通信，我们只需要按照上述方式使用 `@message` 和 `evalJS` 即可。 ### 五、注意事项 1. **引入 uni.webview.js**：WebView 的 H5 页面必须引入该库，否则 `uni.postMessage` 不可用。 2. **安全考虑**：在 WebView 中，可以通过 `navigator.userAgent` 判断是否在 uniapp 的 WebView 中，以决定是否使用 `uni.postMessage`。 3. **调试**：在开发时，可以在 APP 端打印 WebView 对象，确保正确获取。 ### 六、完整示例（vue3） **APP 端（uniapp 页面）**： ```vue <template> <view> <button @click="sendToWebView">发送消息到WebView</button> <web-view :src="webviewUrl" @message="handleH5Message" ref="myWebView"></web-view> </view> </template> <script setup> import { ref } from 'vue'; const webviewUrl = ref('http://your-h5-domain.com/path'); const myWebView = ref(null); // 实际上，在APP端我们通常不通过这个ref来操作，而是通过页面对象 function handleH5Message(event) { console.log('接收到H5的消息:', event.detail.data[0]); } function sendToWebView() { // 获取当前页面的webview const pages = getCurrentPages(); const currentPage = pages[pages.length - 1]; const webview = currentPage.$getAppWebview(); // 获取web-view对应的子WebView const wv = webview.children()[0]; if (wv) { // 构建要传递的数据 const data = { command: 'changeColor', color: '#ff0000' }; wv.evalJS(`window.postMessageFromApp && window.postMessageFromApp(${JSON.stringify(data)})`); } } </script> ``` **H5 页面**： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>H5 Page</title> <script src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script> <script> // 接收APP消息的函数 window.postMessageFromApp = function(data) { console.log('Received from App:', data); // 例如，改变背景色 if (data.command === 'changeColor') { document.body.style.backgroundColor = data.color; } }; // 发送消息给APP function sendMessageToApp() { uni.postMessage({ data: { type: 'from_h5', message: 'Hello from H5' } }); } </script> </head> <body> <button onclick="sendMessageToApp()">发送消息到APP</button> </body> </html> ``` ### 七、相关问题 1. 如果 H5 页面不是自己开发的，如何实现通信？ 2. 在 uniapp 的 APP 端，如何确保 `evalJS` 执行时 WebView 已经加载完成？ 3. 除了 `evalJS` 和 `uni.postMessage`，还有其他通信方式吗？ 4. 如何处理大量数据的传输？ [^1]: uniapp实现与webview之间的相互通讯。基于uniapp开发在一些特殊场景，可能会用到app嵌套h5或h5嵌套h5的场景，uniapp中有一个web-view组件类似于iframe我们可以基于web-view实现双向通信，以下是对不同情况下的使用总结。 [^2]: uniapp vue3中使用webview在微信小程序中实现双向通讯。vue3 ts代码 src就是项目启动的网络地址，他必须要用网络地址， scr后面拼接参数记得做处理，转成json。 [^3]: 【uniapp*vue3】app/h5 webview通讯方案。但这方案在vue3环境下是无法使用的 vue3的解决方案是直接在需要使用的页面import引入该文件 直接调用webUni.postMessage即可。 [^5]: uniapp中 app与webview的通讯。webview发送。 </think> ### Uniapp + Vue3 中实现 APP 与 WebView 双向通信方案 在 Uniapp + Vue3 环境下实现 APP 与 WebView 双向通信，主要通过 **`uni.postMessage`** API 和 **WebView 的 `evalJS` 方法** 实现。以下是具体实现步骤： --- ### 一、通信基础配置 #### 1. WebView 页面引入通信库 在 H5 页面必须引入官方通信库： ```html <!-- H5 页面头部 --> <script src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script> ``` #### 2. APP 端 WebView 组件配置 ```vue <template> <web-view :src="webviewUrl" @message="handleH5Message" ref="myWebView" ></web-view> </template> <script setup> import { ref } from 'vue'; const webviewUrl = ref('https://your-h5-domain.com?token=app_token'); const myWebView = ref(null); // 监听 H5 发送的消息 const handleH5Message = (e) => { console.log('收到 H5 消息：', e.detail.data[0]); // 示例：{ action: "DOWNLOAD", data: "http://example.com/file.png" } }; </script> ``` --- ### 二、双向通信实现 #### 1. H5 → APP 通信（推荐方案） **H5 端发送消息：** ```javascript // H5 页面中 function sendToApp() { uni.postMessage({ data: { action: "USER_ACTION", payload: { userId: 123, type: "login" } } }); } ``` **APP 端接收：** 自动触发 `@message` 事件，数据在 `e.detail.data[0]` 中[^5] #### 2. APP → H5 通信 **APP 端发送消息：** ```vue <script setup> // 获取 WebView 实例并执行 JS const sendToH5 = () => { const page = getCurrentPages()[0]; const webview = page.$getAppWebview(); const wv = webview.children()[0]; wv.evalJS(` receiveAppMessage(${JSON.stringify({ command: "UPDATE_DATA", data: { theme: "dark", fontSize: 16 } })}) `); }; </script> ``` **H5 端接收：** ```javascript // H5 页面中声明全局函数 window.receiveAppMessage = (data) => { console.log("APP 发来指令：", data); // 根据 data.command 执行对应操作 }; ``` --- ### 三、Vue3 特定注意事项 1. **WebView 引用问题** 通过 `getCurrentPages()[0].$getAppWebview()` 获取 WebView 实例（因 Vue3 的 `ref` 无法直接获取原生对象）[^3] 2. **参数传递方案** ```vue <script setup> // URL 传参方案（初始化数据） const initParams = JSON.stringify({ userRole: "admin" }); const webviewUrl = `https://h5-domain.com?params=${encodeURIComponent(initParams)}`; </script> ``` 3. **uni.webview.js 引入优化** 在 Vue3 中推荐直接引入 JS 文件： ```javascript // 在 /static/js/uni.webview.js 存放库文件 import '@/static/js/uni.webview.js'; ``` --- ### 四、完整示例代码 #### APP 端 (Vue3) ```vue <template> <view> <button @click="sendColorToH5('#FF0000')">设置红色主题</button> <web-view :src="h5Url" @message="handleH5Msg"></web-view> </view> </template> <script setup> import { ref } from 'vue'; const h5Url = ref('https://h5-app.com?init=1'); const handleH5Msg = (e) => { const msg = e.detail.data[0]; if (msg.action === 'DOWNLOAD') { uni.downloadFile({ url: msg.url }); } }; const sendColorToH5 = (color) => { const wv = getCurrentPages()[0].$getAppWebview().children()[0]; wv.evalJS(`window.setAppTheme('${color}')`); }; </script> ``` #### H5 端 ```html <script> // 接收 APP 指令 window.setAppTheme = (color) => { document.body.style.background = color; }; // 向 APP 发送下载请求 document.getElementById('download-btn').addEventListener('click', () => { uni.postMessage({ data: { action: "DOWNLOAD", url: "http://example.com/file.zip" } }); }); </script> ``` --- ### 五、调试技巧与常见问题 1. **调试工具** - H5 端：使用 Chrome 开发者工具 - APP 端：`console.log(webview.children())` 查看 WebView 对象[^2] 2. **通信失败排查** - 检查是否引入 `uni-webview-js` 库 - 验证 URL 白名单配置（manifest.json → App SDK 配置） - 确保 H5 方法为 **全局函数**（挂载到 window） 3. **安全增强建议** ```javascript // H5 端验证运行环境 if (!window.uni || !uni.postMessage) { console.error("非 uni 环境，禁用通信"); } ``` --- ### 相关问题 1. 如何处理 WebView 加载失败的情况？ 2. 如何实现 APP 和 WebView 之间的登录状态同步？ 3. 在 WebView 中如何调用 APP 的原生功能（如相机）？ 4. 通信数据量较大时应该采用什么优化策略？ [^1]: uniapp实现与webview之间的相互通讯 [^2]: uniapp vue3中使用webview在微信小程序中实现双向通讯 [^3]: 【uniapp*vue3】app/h5 webview通讯方案 [^5]: uniapp中 app与webview的通讯
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值