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方法不生效。

解决方案

1. 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>

1. 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打包生成的页面进行数据交互。希望这个解决方案能帮助到遇到类似问题的开发者。