uniapp webview与h5交互

### 实现 UniApp 中 WebView 与 H5 页面交互的方法 在 Vue.js 的 uni-app 开发环境中，为了实现混合模式下原生 App 和 Webview 加载的 H5 页面间的交互，开发者可以利用 `web-view` 组件以及特定 API 来完成数据传递和方法调用的功能[^1]。 #### 使用 web-view 组件加载外部 URL 并与其互动 当希望在一个页面中嵌入并显示来自网络或其他本地资源的内容时，可以通过 `<web-view>` 标签指定要访问的目标地址。对于想要同该视图内部 JavaScript 进行沟通的情况，则需借助于平台提供的接口函数来进行操作[^3]。 ```html <template> <view class="container"> <!-- 定义一个用于呈现远程HTML文档的空间 --> <web-view :src="url"></web-view> <!-- 添加按钮触发向WebView发送消息的动作 --> <button @click="sendMessageToWebView">Send Message</button> </view> </template> <script> export default { data() { return { url: 'https://example.com', // 设置目标网址 }; }, methods: { sendMessageToWebView() { const message = JSON.stringify({ action: "greet", payload: "Hello from UniApp!" }); // 调用API将字符串形式的消息传送给WebView中的JavaScript环境执行 plus.webview.currentWebview().evalJS(`handleMessage(${message})`); } } } </script> ``` 此代码片段展示了如何创建一个带有 `web-view` 插槽的应用界面，并定义了一个点击事件处理器用来构建一条信息并通过 `plus.webview.currentWebview().evalJS()` 发送到所关联的 HTML 文档里去处理[^2]。 #### 接收来自 WebView 的回调通知 为了让宿主应用程序能够响应由网页发起的操作请求，在实际项目里通常还需要设置监听器等待可能到来的通知或命令。这一步骤同样依赖于相应框架所提供的工具集来达成目的： ```javascript // 假设这是位于WebView内的脚本部分 function sendEventBack(eventType, eventData) { window.plus.android.invoke({ className: "io.dcloud.feature.uniapp.UniViewJsBridge", methodName: "sendData" }, eventType + ':' + encodeURIComponent(JSON.stringify(eventData))); } document.addEventListener('DOMContentLoaded', function () { console.log("Page loaded"); }, false); ``` 上述例子说明了怎样从被包含的网站端发出信号给承载它的容器——即这里的 UniApp 应用程序；而后者则可通过注册全局侦听机制捕获这些异步到达的信息流。