首页uniapp vue3 webview h5 向 app传参

uniapp vue3 webview h5 向 app传参

时间: 2024-09-10 12:20:02 浏览: 134

在UniApp中，Vue3 Webview用于加载H5页面并提供与原生应用的交互。如果你想要从Webview向原生App传递参数，可以采用以下几种方式： 1. **Query String**: 将参数拼接到URL上，当用户点击链接时，可以在App内部的`onLoad`生命周期钩子里通过`$route.query`获取这些参数。 ```javascript // H5页面: window.location.href = 'app://your-native-url?param1=value1&param2=value2'; // App端处理: uni.app.onLoad({ url: '/pages/webview/webview', success: function() { let params = this.$route.query; console.log(params); } }); ``` 2. **Local Storage**: 可以将参数存储在浏览器的localStorage中，然后在App端通过`uni.getStorageSync`读取数据。 ```javascript // H5页面: uni.setStorage({ key: 'params', data: { param1: 'value1', param2: 'value2' }, }); // App端处理: uni.getStorageSync('params', res => { console.log(res); }); ``` 3. **消息传递（Message Channel）**: 如果App支持，可以使用JavaScript的message事件来发送和接收跨域通信的消息。创建一个`uni.postMessage`到指定的channel，然后在App的相应页面监听`uni.addEventListener('message', ...)`。 ```javascript // H5页面: uni.postMessage({ key: 'params', value: { param1: 'value1', param2: 'value2' } }, '*', 'channel-name'); // App端处理: uni.addEventListener('message', event => { if (event.channel === 'channel-name') { let params = event.data; console.log(params); } }); ```

阅读全文