Uniapp 是一个跨平台的开发框架，可以同时开发出 iOS、Android、H5 等多个平台的应用。在开发过程中，我们可能需要与 Web 页面进行通讯，这时可以使用 WebView 组件来实现。
本教程将介绍如何在 uniapp 中使用 WebView 组件与 Web 页面进行通讯。
1. 创建 uniapp 项目
首先，我们需要创建一个 uniapp 项目。可以使用 HBuilderX 或者 Vue CLI 等工具来创建。
2. 添加 WebView 组件
在 uniapp 中，可以使用 WebView 组件来加载 Web 页面。在需要使用 WebView 的页面中，添加以下代码：
<template><view><web-viewsrc="https://example.com"@message="onMessage"></web-view></view></template><script>exportdefault{methods:{onMessage(e){
console.log('Received message from web page:', e.detail.data);}}}</script>
在上面的代码中，我们使用了 WebView 组件来加载 https://example.com 这个 Web 页面，并监听了 message 事件。当 Web 页面向 uniapp 发送消息时，会触发 message 事件，从而调用 onMessage() 方法。
3. 在 Web 页面中发送消息
ps：字节跳动小程序不支持、H5 暂不支持
在 Web 页面中，可以使用 JavaScript 调用 uniapp 提供的 API，向 uniapp 发送消息。可以使用 uni.postMessage() 方法来发送消息。以下是一个示例：
<!DOCTYPEhtml><html><head><metahttp-equiv="content-type"content="text/html; charset=utf-8"/><title>测试</title><scripttype="text/javascript"src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script></head><body><buttononclick="sendMessage()">Send message to uniapp</button><script>functionsendMessage(){
uni.postMessage({data:'Hello from web page!'});}</script></body></html>
在上面的代码中，我们定义了一个按钮，当用户点击按钮时，会调用 sendMessage() 方法，向 uniapp 发送消息。在 sendMessage() 方法中，我们使用 uni.postMessage() 方法来发送消息，消息内容为一个对象，包含一个 data 属性，值为字符串 ‘Hello from web page!’。
4. 接收来自 Web 页面的消息
在 uniapp 中，当 Web 页面调用 uni.postMessage() 方法时，会触发 message 事件，从而调用 onMessage() 方法，输出接收到的消息。以下是一个示例：
<template><view><web-viewsrc="https://example.com"@message="onMessage"></web-view></view></template><script>exportdefault{methods:{onMessage(e){
console.log('Received message from web page:', e.detail.data);
uni.showToast({title: e.detail.data,icon:'none'});}}}</script>
在上面的代码中，我们在 onMessage() 方法中输出接收到的消息，并使用 uni.showToast() 方法来显示一个提示框，提示框的内容为接收到的消息。
总结
通过以上步骤，我们可以在 uniapp 中使用 WebView 组件与 Web 页面进行通讯。在 Web 页面中，可以使用 uni.postMessage() 方法来向 uniapp 发送消息，在 uniapp 中，可以通过监听 WebView 组件的 message 事件来接收来自 Web 页面的消息。
版权归原作者 编程BIU 所有， 如有侵权，请联系我们删除。