uniapp的webview与vue项目通信

最新推荐文章于 2025-06-09 12:01:55 发布

千浔_

最新推荐文章于 2025-06-09 12:01:55 发布

阅读量1.8k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js uni-app javascript webview

本文链接：https://blog.csdn.net/Syracuse123_/article/details/129026132

文章讲述了如何在Vue的H5项目中向uniapp的webview传值，并利用uniapp的内置方法uni.navigateTo进行页面切换。关键步骤包括在index.html引入uniapp的JS桥接库，注册UniAppJSBridgeReady事件监听器，以及通过全局变量和事件通信在vue页面与index.html之间传递信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：vue的h5项目，向uniapp嵌入的webview里面传值，调uniapp的页面切换路由方法，uni.navigateTo
(注：uniapp的webview组件地址，https://uniapp.dcloud.net.cn/component/web-view.html#web-view)
思路：
1、在vue项目的index.html中引入<script type="text/javascript" src="https://unpkg.com/@dcloudio/[email protected]/index.js"></script>，必须引，才能使用uniapp的内部方法
2、通过注册UniAppJSBridgeReady事件，在里面调用uniapp提供的相关方法，实现数据通信(注：也是在index.html中)
<script>
    document.addEventListener('UniAppJSBridgeReady', function() {
      uni.webView.getEnv(function(res) {
        console.log('当前环境：' + JSON.stringify(res));
      });
      // uni.webView.navigateTo(...)
    });
  </script>
  注：支持的uniapp方法有如下：
  uni.navigateTo，uni.redirectTo，uni.reLaunch，uni.switchTab，uni.navigateBack，uni.postMessage(h5端向app端发送消息)，uni.getEnv(获取当前环境)
  
3、当前的问题是如何实现index.html与操作的vue页面之间进行通信，解决方法如下：
    1>在main.js为window绑定一个全局变量，eventBus,通过vue兄弟组件传值的形式($emit,$on)
    window.eventBus=new Vue();
    window.isShowMap=false;
    2&g