uniapp webview 网页和应用之间的通信 - CSDN文库

### UniApp WebView 实现网页与应用间通信 #### 使用 `web-view` 组件实现双向通信为了实现在UniApp中的Vue页面和WebView引入的HTML页面之间进行有效的双向通信，可以利用`uni-app`提供的API以及JavaScript桥接技术。在Vue页面向WebView传递消息方面，可以通过调用`postMessage`方法来完成。此方法允许宿主环境（即Vue页面）向WebView内的Web页面发送自定义事件[^1]： ```javascript // Vue 页面代码示例 const webViewRef = this.$refs.webView; // 获取 webview 的引用 if (webViewRef && typeof webViewRef.postMessage === 'function') { webViewRef.postMessage({ type: "someType", data: { key: value } }); } ``` 对于从WebView接收来自Vue的消息，则可以在加载的HTML文件内部通过监听特定类型的message事件来进行处理。这通常涉及到设置一个全局函数用于捕获这些传入的信息并作出响应[^2]: ```html  <script> window.addEventListener('message', function(event){ console.log('Received message from app:', event.data); }); </script> ``` 相反地，如果希望由WebView主动通知外部的应用程序状态变化或其他重要信息，同样也可以借助于`postMessage`机制反方向操作——此时是在WebView端发起请求，并被Vue组件所捕捉到: ```javascript // 在WebView中执行如下JS代码片段 parent.postMessage({ action: 'updateStatus' }, '*'); ``` 而在Vue侧则需注册相应的回调以便及时回应这类异步触发的动作: ```javascript // Vue 页面代码示例 mounted() { window.addEventListener('message', this.handleIncomingMessages, false); }, methods: { handleIncomingMessages(e) { const msg = e.data; switch(msg.action){ case 'updateStatus': // 处理更新逻辑... break; default: console.warn(`Unknown action received ${msg.action}`); } } } ``` 以上方式能够有效地建立起两者间的沟通渠道，从而更好地支持复杂应用场景下的互动需求。

阅读全文

相关推荐

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通