uniapp 和 webview 之间的通信

最新推荐文章于 2025-05-12 14:47:11 发布

JIseven

最新推荐文章于 2025-05-12 14:47:11 发布

阅读量412

点赞数 9

分类专栏： APP 文章标签： uni-app

本文链接：https://blog.csdn.net/qq_37833745/article/details/147815325

版权

APP 专栏收录该内容

1 篇文章

订阅专栏

1.UniAppJSBridgeReady :

这个是在引入webview的SDK之后，当webview页面被加载完成之后会触发，该事件触发表示着uniapp和webview之间的桥成功搭建，uni对象被成功的注入到当前H5的上下文中。
我们在index.html文件中将SDK引入，这里的SDK引入必须放在body标签下面。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    ...
  </head>
  <body>
    <noscript>
      <strong>Please enable JavaScript to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
  <!-- uni 的 SDK -->
  <!-- 需要把 uni.webview.1.5.6.js 下载到自己的服务器
    https://gitcode.net/dcloud/uni-app/-/raw/dev/dist/uni.webview.1.5.6.js
 -->
  <script type="text/javascript" src="https://gitee.com/jqn-room/public-files/blob/master/app%E4%B8%8Eh5%E9%80%9A%E4%BF%A1%E3%80%90web-view%E3%80%91/sdk/uni.webview.js"></script>
  <script>
    document.addEventListener('UniAppJSBridgeReady', function() {
      uni.webView.getEnv(function(res) {
        console.log('当前环境：' + JSON.stringify(res));
      });
      // uni.webView.navigateTo(...)
    });
  </script>
</html>

2: webview中可用的 uni API

3: sdk 插件js文件

4: h5向app传信息

在需要向app传递信息的h5页面中，使用sdk进行信息传递

h5.vue



    
onLoad(option) {
    postMessageWebview() // 在当前h5页面向app发送请求
},
methods: {
      postMessageWebview() {
        let webUrl = `${Config.inviteH5}operate_activity/online_model_exam/apply_model_exam?linkId=${this.linkId}mockNo=${this.mockNo}`
        // APP内通过web-view嵌入的h5 向app做通信，传递消息页面
        // webUni 是sdk的全局遍历，里面封装了很多方法
        if (webUni && webUni.postMessage) {
          console.log("发送消息给 UniApp活动首页");
          let summaryCont = ['紧急，参加万人模考，中考丢分风险降降降！！！', '真哥们才通知你，快来参加陕西中考万人模考大赛，我们一起并肩上高中！']
          // 生成1或2的随机整数
          let randomNumber = Math.floor(Math.random() * 2) + 1;
          
          webUni.postMessage({
            data: {
              action: 'activeShareUrl',
              path: webUrl,
              imageUrl: 'https://wwxq.wanweiedu.com/static/share_logo1.png',
              summary: '二轮复习前不模考=中考埋雷！', // summaryCont[randomNumber - 1],
              title: "陕西万人模考实时PK榜启动！",
            }
          });
        } else {
          console.error('uni.postMessage is not a function');
        }
      }
   }

5:app页面接收h5传递的消息

app接收信息的路由页面

<template>
     <web-view class="webViewBox" :fullscreen="false" @message="handleMessage" :src="adInfo.link"></web-view>
</template>
<script>
  export default {
    methods: {
        handleMessage(event) {
              // uni.showToast({
          //   title: '接收到 H5 页面的消息',
          //   icon: 'none'
          // })
          console.log("接收到 H5 页面的消息:", event.detail.data); // 检查消息

          const message = event.detail.data[0];
          // const { action, path } = event.data;
          // const { action, path } = event.detail.data;
          console.log("最终传输 页面的参数:" + this.urlResetFun(message.path, 'navigate'))
          if (message.action === 'navigate') {
            // 跳1: 转到指定的 UniApp 页面
            uni.reLaunch({
              url: this.urlResetFun(message.path, 'navigate')
            });
          }
          if (message.action === 'switchTabPrepareExam') {
            // 跳1: 跳转到指定tabBar页面【备考规划学】
            uni.switchTab({
              url: message.path
            });
          }
          // 2: 返回app首页
          if (message.action === 'activeBack') {
            // 跳转到指定的 UniApp 页面
            uni.reLaunch({
              url: message.path
            });
          }
          // 3:分享嵌入的当前h5路由页面
          if (message.action === 'activeShareUrl' || message.action === 'reportShareUrl' || message.action === 'rankShareUrl') {
            this.shareImageUrl = message.imageUrl
            this.shareUrl = message.path
            this.shareTitle = message.title,
            this.shareSummary = message.summary
            this.creatViewNvMask();
          }
        }
    }
  }
</script>

参考链接：uniapp 和 webview 之间的通信_uniapp webview通讯-CSDN博客