uniapp与webview之间的相互传值的实现

在移动应用开发中，uni-app是一个跨端框架，它允许开发者编写一次代码，就能在iOS、Android、H5等多个平台上运行。而Webview是uni-app中用于嵌入HTML5页面的组件，它使得原生应用能够加载和展示网页内容。在uni-app与Webview之间进行数据交互是非常常见的需求，本文将详细介绍如何实现uni-app向Webview发送数据以及Webview向uni-app传递数据。 1. uni-app向Webview发送数据 在uni-app中，可以通过`<web-view>`组件的`src`属性向H5页面传递数据。这个过程通常是通过URL参数实现的。以下是一个简单的例子： ```html <template> <view class="advertisement" style="width: 100%;"> <web-view :src="url" @message="message"></web-view> </view> </template> <script> export default { data() { return { url: '/hybrid/html/local.html?data=' }; }, onLoad(data) { this.url += encodeURIComponent(data.data); }, methods: { message(event) { console.log(event.detail.data); } } }; </script> ``` 在这个例子中，`onLoad`生命周期钩子中，`data.data`会被编码并附加到URL后面。在H5页面中，可以通过JavaScript解析URL参数来获取这些数据。以下是在H5中获取参数的示例： ```javascript function getQuery(name) { let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); let r = window.location.search.substr(1).match(reg); if (r != null) { return decodeURIComponent(r[2]); } return null; } let data = getQuery('data'); console.log(data); // 输出uni-app传递过来的数据 ``` 2. Webview向uni-app传值 Webview向uni-app传递数据则需要利用uni-app提供的JSBridge。当Webview加载完成并且uni-app的JSBridge准备就绪时，可以监听`UniAppJSBridgeReady`事件，然后通过`uni.postMessage()`方法发送数据。 ```javascript document.addEventListener('UniAppJSBridgeReady', function() { // 向uniapp传值 uni.postMessage({ data: { action: 'message' } }); uni.getEnv(function(res) { console.log('当前环境：' + JSON.stringify(res)); }); }); ``` 在uni-app端，我们需要监听`<web-view>`组件的`@message`事件来接收Webview传递的数据： ```html <template> <view class="advertisement" style="width: 100%;"> <web-view :src="url" @message="message"></web-view> </view> </template> <script> export default { methods: { message(event) { console.log(event.detail.data); // 输出Webview传递过来的数据 } } }; </script> ``` 总结来说，uni-app与Webview之间的数据交互主要包括两个方面：uni-app通过URL参数向Webview传递数据，Webview通过uni-app的JSBridge向uni-app发送数据。这种交互方式使得原生应用与网页内容可以紧密集成，为用户提供更丰富的交互体验。在实际开发中，可以根据具体需求调整和优化这些方法，以实现更复杂的功能。