uniapp与web-view交互:Vue页面传参解决方案
在uniapp项目中，我们经常需要使用web-view组件来嵌入网页，实现与原生层的交互。但当web-view引用的页面是使用Vue开发的，如何实现与uniapp原生层的数据传输呢？
问题背景
官方文档提供了web-view组件与原生html页面交互的方法，但并未明确说明如何与Vue打包生成的页面进行交互。经过一番探索，我们找到了解决方案。
问题分析
官方示例中，web-view加载的页面是纯原生的html页面，使用uni.postMessage方法进行数据传输。
当web-view引用的页面是Vue打包生成的，直接使用uni.postMessage方法不生效。
解决方案
webview发送端代码
首先main.js中应用下载好uni-webview的js代码
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// uni-webview地址https://gitcode.net/dcloud/uni-app/-/raw/dev/dist/uni.webview.1.5.6.js
import '../assets/uni-webview.js'
createApp(App)
.use(router)
.mount('#app')发送消息代码
<template>
<div>
<button @click="sendMessage">发送消息到 App</button>
</div>
</template>
<script>
export default {
methods: {
sendMessage() {
// 确保 UniAppJSBridgeReady 事件已经触发
if (window.uni && window.uni.postMessage) {
window.uni.postMessage({
data: {
action: 'message',
message: 'Hello from webview'
}
});
} else {
console.error('uni.postMessage is not a function');
}
}
}
}
</script>uniapp接收端代码
vue
<template>
<view>
<web-view src="路径到你的 Vue 打包的 webview 页面" @message="receiveMessage"></web-view>
</view>
</template>
<script>
export default {
methods: {
receiveMessage(event) {
console.log('Received message from webview:', event.detail.data);
// 处理接收到的数据
}
}
}
</script>注意事项
确保web-view组件的src属性指向的是Vue打包生成的页面路径。
使用@message事件监听器来接收从web-view发送的消息。
结语
通过上述步骤，我们成功实现了uniapp项目中使用web-view组件与Vue打包生成的页面进行数据交互。希望这个解决方案能帮助到遇到类似问题的开发者。
